@memberjunction/ng-dashboards 6.2.0-edge.5 → 6.2.0-edge.6

package/dist/LoginStudio/login-studio-resource.component.js

@@ -8,7 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @fileoverview Login Studio: design the Explorer sign-in page as data, on the default theme.
  * @module LoginStudio
  */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, ViewChild, inject, } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { CdkDrag, CdkDropList, CdkDropListGroup, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { takeUntil } from 'rxjs';
@@ -22,35 +22,36 @@ import { CloneLoginBlock, DefaultLoginDesign, IsLoginHexColor, IsSafeLoginImageU
 import { LoginStudioInspectorComponent } from './login-studio-inspector.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
+const _c0 = ["frame"];
 const _forTrack0 = ($index, $item) => $item.Type;
 function LoginStudioResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-stat-badge", 1);
+    i0.ɵɵelement(0, "mj-stat-badge", 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Label", ctx_r0.StatusLabel)("Variant", ctx_r0.StatusVariant);
 } }
 function LoginStudioResourceComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "button", 8);
+    i0.ɵɵelementStart(0, "div", 3)(1, "button", 9);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Undo()); });
-    i0.ɵɵelement(2, "i", 9);
+    i0.ɵɵelement(2, "i", 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 10);
+    i0.ɵɵelementStart(3, "button", 11);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Redo()); });
-    i0.ɵɵelement(4, "i", 11);
+    i0.ɵɵelement(4, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 12);
+    i0.ɵɵelementStart(5, "button", 13);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Discard()); });
     i0.ɵɵtext(6, "Discard changes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵelementStart(7, "button", 13);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SaveDraft()); });
-    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵelement(8, "i", 14);
     i0.ɵɵtext(9, " Save draft ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 14);
+    i0.ɵɵelementStart(10, "button", 15);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Publish()); });
-    i0.ɵɵelement(11, "i", 15);
+    i0.ɵɵelement(11, "i", 16);
     i0.ɵɵtext(12, " Publish ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -68,7 +69,7 @@ function LoginStudioResourceComponent_Conditional_3_Template(rf, ctx) { if (rf &
 } }
 function LoginStudioResourceComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-alert", 16);
+    i0.ɵɵelementStart(0, "mj-alert", 17);
     i0.ɵɵlistener("Dismissed", function LoginStudioResourceComponent_Conditional_5_Template_mj_alert_Dismissed_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.DismissError()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -77,7 +78,7 @@ function LoginStudioResourceComponent_Conditional_5_Template(rf, ctx) { if (rf &
 } }
 function LoginStudioResourceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-alert", 17);
+    i0.ɵɵelementStart(0, "mj-alert", 18);
     i0.ɵɵlistener("Dismissed", function LoginStudioResourceComponent_Conditional_6_Template_mj_alert_Dismissed_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.DismissNotice()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -85,16 +86,16 @@ function LoginStudioResourceComponent_Conditional_6_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("Message", ctx_r0.NoticeMessage);
 } }
 function LoginStudioResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 5);
+    i0.ɵɵelement(0, "mj-loading", 6);
 } }
 function LoginStudioResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 6);
+    i0.ɵɵelement(0, "mj-empty-state", 7);
 } }
 function LoginStudioResourceComponent_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_For_8_Template_button_click_0_listener() { const t_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.AddBlock(t_r7.Type)); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -106,13 +107,13 @@ function LoginStudioResourceComponent_Conditional_9_For_8_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(t_r7.Label);
 } }
-function LoginStudioResourceComponent_Conditional_9_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 32);
+function LoginStudioResourceComponent_Conditional_9_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33);
     i0.ɵɵtext(1, "Empty: visitors see the stock logo and \"Welcome back\" here.");
     i0.ɵɵelementEnd();
 } }
-function LoginStudioResourceComponent_Conditional_9_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
+function LoginStudioResourceComponent_Conditional_9_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -120,72 +121,72 @@ function LoginStudioResourceComponent_Conditional_9_Conditional_28_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.Design.Heading);
 } }
-function LoginStudioResourceComponent_Conditional_9_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function LoginStudioResourceComponent_Conditional_9_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
-    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Conditional_39_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Select(null)); });
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Conditional_40_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Select(null)); });
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵelementEnd();
 } }
 function LoginStudioResourceComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "aside", 18)(2, "h2", 19);
+    i0.ɵɵelementStart(0, "div", 8)(1, "aside", 19)(2, "h2", 20);
     i0.ɵɵtext(3, "Blocks");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 20);
+    i0.ɵɵelementStart(4, "p", 21);
     i0.ɵɵtext(5, "Drag a block onto the page, or click one to add it after the selected block.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 21);
-    i0.ɵɵrepeaterCreate(7, LoginStudioResourceComponent_Conditional_9_For_8_Template, 4, 5, "button", 22, _forTrack0);
+    i0.ɵɵelementStart(6, "div", 22);
+    i0.ɵɵrepeaterCreate(7, LoginStudioResourceComponent_Conditional_9_For_8_Template, 4, 5, "button", 23, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "section", 23);
+    i0.ɵɵelementStart(9, "section", 24);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_section_click_9_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnStageClick()); });
-    i0.ɵɵelementStart(10, "div", 24);
+    i0.ɵɵelementStart(10, "div", 25);
     i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_10_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(11, "mj-view-toggle", 25);
+    i0.ɵɵelementStart(11, "mj-view-toggle", 26);
     i0.ɵɵlistener("KeyChange", function LoginStudioResourceComponent_Conditional_9_Template_mj_view_toggle_KeyChange_11_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetDevice($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 20);
+    i0.ɵɵelementStart(12, "span", 21);
     i0.ɵɵtext(13, "The sign-in button is a stand-in. The real one opens your sign-in provider.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 26)(15, "div", 27);
-    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_15_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface("Banner", $event)); });
-    i0.ɵɵelementStart(16, "div", 28)(17, "div", 29)(18, "span", 30);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(14, "div", 27, 0)(16, "div", 28);
+    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_16_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface("Banner", $event)); });
+    i0.ɵɵelementStart(17, "div", 29)(18, "div", 30)(19, "span", 31);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "mj-login-region", 31);
-    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_20_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_20_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_20_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
+    i0.ɵɵelementStart(21, "mj-login-region", 32);
+    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_21_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_21_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_21_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(21, LoginStudioResourceComponent_Conditional_9_Conditional_21_Template, 2, 0, "p", 32);
+    i0.ɵɵconditionalCreate(22, LoginStudioResourceComponent_Conditional_9_Conditional_22_Template, 2, 0, "p", 33);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 33);
-    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_22_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface("Panel", $event)); });
-    i0.ɵɵelementStart(23, "div", 34)(24, "span", 30);
-    i0.ɵɵtext(25);
+    i0.ɵɵelementStart(23, "div", 34);
+    i0.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_23_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface("Panel", $event)); });
+    i0.ɵɵelementStart(24, "div", 35)(25, "span", 31);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "mj-login-region", 35);
-    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_26_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_26_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_26_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
+    i0.ɵɵelementStart(27, "mj-login-region", 36);
+    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 36);
-    i0.ɵɵconditionalCreate(28, LoginStudioResourceComponent_Conditional_9_Conditional_28_Template, 2, 1, "span", 37);
-    i0.ɵɵelementStart(29, "span", 38);
-    i0.ɵɵtext(30, "Log in");
+    i0.ɵɵelementStart(28, "div", 37);
+    i0.ɵɵconditionalCreate(29, LoginStudioResourceComponent_Conditional_9_Conditional_29_Template, 2, 1, "span", 38);
+    i0.ɵɵelementStart(30, "span", 39);
+    i0.ɵɵtext(31, "Log in");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "span", 30);
-    i0.ɵɵtext(32);
+    i0.ɵɵelementStart(32, "span", 31);
+    i0.ɵɵtext(33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "mj-login-region", 39);
-    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_33_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_33_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_33_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
+    i0.ɵɵelementStart(34, "mj-login-region", 40);
+    i0.ɵɵlistener("Dropped", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_Dropped_34_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDrop($event)); })("SelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_SelectRequested_34_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Select($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_region_CommandRequested_34_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); });
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(34, "aside", 40)(35, "div", 41);
-    i0.ɵɵelement(36, "i", 42);
-    i0.ɵɵelementStart(37, "h2", 43);
-    i0.ɵɵtext(38);
+    i0.ɵɵelementStart(35, "aside", 41)(36, "div", 42);
+    i0.ɵɵelement(37, "i", 43);
+    i0.ɵɵelementStart(38, "h2", 44);
+    i0.ɵɵtext(39);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(39, LoginStudioResourceComponent_Conditional_9_Conditional_39_Template, 2, 0, "button", 44);
+    i0.ɵɵconditionalCreate(40, LoginStudioResourceComponent_Conditional_9_Conditional_40_Template, 2, 0, "button", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "mj-login-studio-inspector", 45);
-    i0.ɵɵlistener("EditRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_EditRequested_40_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ApplyEdit($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_CommandRequested_40_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); })("StockPageRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_StockPageRequested_40_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.UseStockPage()); })("SurfaceSelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_SurfaceSelectRequested_40_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface($event)); });
+    i0.ɵɵelementStart(41, "mj-login-studio-inspector", 46);
+    i0.ɵɵlistener("EditRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_EditRequested_41_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ApplyEdit($event)); })("CommandRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_CommandRequested_41_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCommand($event)); })("StockPageRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_StockPageRequested_41_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.UseStockPage()); })("SurfaceSelectRequested", function LoginStudioResourceComponent_Conditional_9_Template_mj_login_studio_inspector_SurfaceSelectRequested_41_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SelectSurface($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -198,7 +199,8 @@ function LoginStudioResourceComponent_Conditional_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵstyleMap(ctx_r0.FrameStyle);
     i0.ɵɵclassProp("ls__frame--phone", ctx_r0.Stacked);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("transform", ctx_r0.Stacked ? null : "scale(" + ctx_r0.DesktopScale + ")");
     i0.ɵɵclassProp("lp--reverse", ctx_r0.Design.Layout === "split-reverse")("lp--centered", ctx_r0.Design.Layout === "centered")("lp--stacked", ctx_r0.Stacked)("lp--surface-on", ctx_r0.Surface === "Banner" && ctx_r0.Design.Layout === "centered");
     i0.ɵɵadvance();
     i0.ɵɵclassProp("lp__banner--center", ctx_r0.Design.Alignment === "center" || ctx_r0.Stacked)("lp__surface-on", ctx_r0.Surface === "Banner" && ctx_r0.Design.Layout !== "centered");
@@ -207,7 +209,7 @@ function LoginStudioResourceComponent_Conditional_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("Blocks", ctx_r0.Design.Regions.Banner)("Logos", ctx_r0.Logos)("BrandName", ctx_r0.Theme.Name)("Stacked", ctx_r0.Stacked)("Center", ctx_r0.Design.Alignment === "center" || ctx_r0.Stacked)("Editable", true)("SelectedID", ctx_r0.SelectedID);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.Design.Regions.Banner.length ? 21 : -1);
+    i0.ɵɵconditional(!ctx_r0.Design.Regions.Banner.length ? 22 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("lp__surface-on", ctx_r0.Surface === "Panel");
     i0.ɵɵadvance(3);
@@ -215,7 +217,7 @@ function LoginStudioResourceComponent_Conditional_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("Blocks", ctx_r0.Design.Regions.PanelTop)("Logos", ctx_r0.Logos)("BrandName", ctx_r0.Theme.Name)("Stacked", ctx_r0.Stacked)("Editable", true)("SelectedID", ctx_r0.SelectedID);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.Design.Heading ? 28 : -1);
+    i0.ɵɵconditional(ctx_r0.Design.Heading ? 29 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.RegionLabel.PanelBottom);
     i0.ɵɵadvance();
@@ -225,7 +227,7 @@ function LoginStudioResourceComponent_Conditional_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.SideTitle);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.Selected || ctx_r0.Surface ? 39 : -1);
+    i0.ɵɵconditional(ctx_r0.Selected || ctx_r0.Surface ? 40 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Design", ctx_r0.Design)("Selected", ctx_r0.Selected)("SelectedRegion", ctx_r0.SelectedRegion)("Surface", ctx_r0.Surface)("CanReset", ctx_r0.IsLive || ctx_r0.Unpublished)("Saving", ctx_r0.Saving);
 } }
@@ -236,6 +238,8 @@ const COALESCE_MS = 800;
 const HISTORY_CAP = 60;
 /** The click a browser fires as a drag ends; ignored so a drop keeps its selection. */
 const DROP_CLICK_MS = 400;
+/** The desktop preview lays the page out this wide, as on a 1440 x 900 screen (the CSS on .lp), and scales it to the frame. */
+const DESKTOP_WIDTH = 1440;
 const SURFACE_LABEL = { Banner: 'Story panel', Panel: 'Sign-in column' };
 const SURFACE_ICON = { Banner: 'fa-solid fa-image', Panel: 'fa-solid fa-right-to-bracket' };
 /**
@@ -276,6 +280,8 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
     Logos = {};
     /** The default theme's look, as custom properties on the preview frame. */
     FrameStyle = {};
+    /** The desktop preview's scale: the frame's width over DESKTOP_WIDTH. */
+    DesktopScale = 1;
     /** The problems that stopped the last save; re-checked as you edit, so the alert goes once they are fixed. */
     problems = [];
     /** What is stored, as JSON, so "unsaved" and "unpublished" are comparisons rather than flags. */
@@ -289,6 +295,13 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
     lastEdit = null;
     droppedAt = 0;
     reportedEditing = false;
+    frameObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver((entries) => this.fitDesktop(entries[0].contentRect.width));
+    /** The preview frame, there once the theme has loaded: its width sets the desktop preview's scale. */
+    set frameRef(el) {
+        this.frameObserver?.disconnect();
+        if (el)
+            this.frameObserver?.observe(el.nativeElement);
+    }
     ngOnInit() {
         super.ngOnInit();
         // The preview restates the stock gradient per color mode, so it follows a light/dark switch.
@@ -298,6 +311,10 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
     ngAfterViewInit() {
         this.registerAgentTools();
     }
+    ngOnDestroy() {
+        this.frameObserver?.disconnect();
+        super.ngOnDestroy();
+    }
     async GetResourceDisplayName(_data) {
         return 'Sign-in Page';
     }
@@ -764,6 +781,14 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
         this.cdr.markForCheck();
     }
     // ── Preview, agent, shell ───────────────────────────────────────────────────────────────────
+    /** Fit the desktop page to the frame. A hidden tab's frame measures 0, so it keeps its last fit. */
+    fitDesktop(width) {
+        if (!width)
+            return;
+        this.DesktopScale = width / DESKTOP_WIDTH;
+        // The observer runs outside Angular's zone, so check the view now rather than mark it.
+        this.cdr.detectChanges();
+    }
     /** After any change: the problems alert, the preview, the agent's view, the shell's edit state, and the view. */
     changed() {
         // A save refused for problems re-checks as you edit (or undo), and its alert goes once they are fixed.
@@ -806,17 +831,22 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
         ]);
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵLoginStudioResourceComponent_BaseFactory; return function LoginStudioResourceComponent_Factory(__ngFactoryType__) { return (ɵLoginStudioResourceComponent_BaseFactory || (ɵLoginStudioResourceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(LoginStudioResourceComponent)))(__ngFactoryType__ || LoginStudioResourceComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoginStudioResourceComponent, selectors: [["mj-login-studio-resource"]], hostBindings: function LoginStudioResourceComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoginStudioResourceComponent, selectors: [["mj-login-studio-resource"]], viewQuery: function LoginStudioResourceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.frameRef = _t.first);
+        } }, hostBindings: function LoginStudioResourceComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("beforeunload", function LoginStudioResourceComponent_beforeunload_HostBindingHandler($event) { return ctx.OnBeforeUnload($event); }, i0.ɵɵresolveWindow)("keydown", function LoginStudioResourceComponent_keydown_HostBindingHandler($event) { return ctx.OnKeydown($event); });
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 6, consts: [["Title", "Sign-in Page", "Icon", "fa-solid fa-right-to-bracket", 3, "Subtitle"], ["meta", "", 3, "Label", "Variant"], ["actions", "", 1, "ls__actions"], ["Variant", "error", "Dismissible", "", 1, "ls__alert", 3, "Message"], ["Variant", "success", "Dismissible", "", 1, "ls__alert", 3, "Message"], ["Text", "Reading the sign-in page...", "Size", "medium"], ["Icon", "fa-solid fa-palette", "Title", "No default theme", "Message", "The sign-in page is designed on the default theme. Set one in Theme Studio, under Manage Themes."], ["cdkDropListGroup", "", 1, "ls"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Undo (Ctrl/Cmd Z)", "AriaLabel", "Undo", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Redo (Shift Ctrl/Cmd Z)", "AriaLabel", "Redo", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-right"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "disabled"], [1, "fa-regular", "fa-floppy-disk"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", "title", "Save and show this page to everyone signing in", 3, "click", "disabled"], [1, "fa-solid", "fa-upload"], ["Variant", "error", "Dismissible", "", 1, "ls__alert", 3, "Dismissed", "Message"], ["Variant", "success", "Dismissible", "", 1, "ls__alert", 3, "Dismissed", "Message"], ["aria-label", "Blocks", 1, "ls__palette"], [1, "ls__heading"], [1, "ls__hint"], ["cdkDropList", "", "cdkDropListSortingDisabled", "", 1, "ls__palette-list", 3, "cdkDropListData", "cdkDropListEnterPredicate"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", "cdkDrag", "", 1, "ls__tile", 3, "cdkDragData", "title"], ["aria-label", "Preview", 1, "ls__stage", 3, "click"], [1, "ls__stage-bar", 3, "click"], ["role", "group", "aria-label", "Preview size", 3, "KeyChange", "Options", "ActiveKey"], [1, "ls__frame"], [1, "lp", 3, "click"], [1, "lp__banner"], [1, "lp__brand"], [1, "lp__region-label"], ["Region", "Banner", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Center", "Editable", "SelectedID"], [1, "lp__default-note"], [1, "lp__panel", 3, "click"], [1, "lp__stack"], ["Region", "PanelTop", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Editable", "SelectedID"], ["aria-hidden", "true", 1, "lp__picker"], [1, "lp__heading"], [1, "lp__signin"], ["Region", "PanelBottom", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Editable", "SelectedID"], ["aria-label", "Settings", 1, "ls__side"], [1, "ls__side-head"], ["aria-hidden", "true"], [1, "ls__side-title"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Page settings", "AriaLabel", "Back to page settings"], [3, "EditRequested", "CommandRequested", "StockPageRequested", "SurfaceSelectRequested", "Design", "Selected", "SelectedRegion", "Surface", "CanReset", "Saving"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", "cdkDrag", "", 1, "ls__tile", 3, "click", "cdkDragData", "title"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Page settings", "AriaLabel", "Back to page settings", 3, "click"], [1, "fa-solid", "fa-table-columns"]], template: function LoginStudioResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0);
-            i0.ɵɵconditionalCreate(2, LoginStudioResourceComponent_Conditional_2_Template, 1, 2, "mj-stat-badge", 1);
-            i0.ɵɵconditionalCreate(3, LoginStudioResourceComponent_Conditional_3_Template, 13, 5, "div", 2);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 6, consts: [["frame", ""], ["Title", "Sign-in Page", "Icon", "fa-solid fa-right-to-bracket", 3, "Subtitle"], ["meta", "", 3, "Label", "Variant"], ["actions", "", 1, "ls__actions"], ["Variant", "error", "Dismissible", "", 1, "ls__alert", 3, "Message"], ["Variant", "success", "Dismissible", "", 1, "ls__alert", 3, "Message"], ["Text", "Reading the sign-in page...", "Size", "medium"], ["Icon", "fa-solid fa-palette", "Title", "No default theme", "Message", "The sign-in page is designed on the default theme. Set one in Theme Studio, under Manage Themes."], ["cdkDropListGroup", "", 1, "ls"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Undo (Ctrl/Cmd Z)", "AriaLabel", "Undo", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Redo (Shift Ctrl/Cmd Z)", "AriaLabel", "Redo", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-right"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "disabled"], [1, "fa-regular", "fa-floppy-disk"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", "title", "Save and show this page to everyone signing in", 3, "click", "disabled"], [1, "fa-solid", "fa-upload"], ["Variant", "error", "Dismissible", "", 1, "ls__alert", 3, "Dismissed", "Message"], ["Variant", "success", "Dismissible", "", 1, "ls__alert", 3, "Dismissed", "Message"], ["aria-label", "Blocks", 1, "ls__palette"], [1, "ls__heading"], [1, "ls__hint"], ["cdkDropList", "", "cdkDropListSortingDisabled", "", 1, "ls__palette-list", 3, "cdkDropListData", "cdkDropListEnterPredicate"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", "cdkDrag", "", 1, "ls__tile", 3, "cdkDragData", "title"], ["aria-label", "Preview", 1, "ls__stage", 3, "click"], [1, "ls__stage-bar", 3, "click"], ["role", "group", "aria-label", "Preview size", 3, "KeyChange", "Options", "ActiveKey"], [1, "ls__frame"], [1, "lp", 3, "click"], [1, "lp__banner"], [1, "lp__brand"], [1, "lp__region-label"], ["Region", "Banner", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Center", "Editable", "SelectedID"], [1, "lp__default-note"], [1, "lp__panel", 3, "click"], [1, "lp__stack"], ["Region", "PanelTop", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Editable", "SelectedID"], ["aria-hidden", "true", 1, "lp__picker"], [1, "lp__heading"], [1, "lp__signin"], ["Region", "PanelBottom", 3, "Dropped", "SelectRequested", "CommandRequested", "Blocks", "Logos", "BrandName", "Stacked", "Editable", "SelectedID"], ["aria-label", "Settings", 1, "ls__side"], [1, "ls__side-head"], ["aria-hidden", "true"], [1, "ls__side-title"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Page settings", "AriaLabel", "Back to page settings"], [3, "EditRequested", "CommandRequested", "StockPageRequested", "SurfaceSelectRequested", "Design", "Selected", "SelectedRegion", "Surface", "CanReset", "Saving"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", "cdkDrag", "", 1, "ls__tile", 3, "click", "cdkDragData", "title"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Page settings", "AriaLabel", "Back to page settings", 3, "click"], [1, "fa-solid", "fa-table-columns"]], template: function LoginStudioResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 1);
+            i0.ɵɵconditionalCreate(2, LoginStudioResourceComponent_Conditional_2_Template, 1, 2, "mj-stat-badge", 2);
+            i0.ɵɵconditionalCreate(3, LoginStudioResourceComponent_Conditional_3_Template, 13, 5, "div", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "mj-page-body");
-            i0.ɵɵconditionalCreate(5, LoginStudioResourceComponent_Conditional_5_Template, 1, 1, "mj-alert", 3);
-            i0.ɵɵconditionalCreate(6, LoginStudioResourceComponent_Conditional_6_Template, 1, 1, "mj-alert", 4);
-            i0.ɵɵconditionalCreate(7, LoginStudioResourceComponent_Conditional_7_Template, 1, 0, "mj-loading", 5)(8, LoginStudioResourceComponent_Conditional_8_Template, 1, 0, "mj-empty-state", 6)(9, LoginStudioResourceComponent_Conditional_9_Template, 41, 56, "div", 7);
+            i0.ɵɵconditionalCreate(5, LoginStudioResourceComponent_Conditional_5_Template, 1, 1, "mj-alert", 4);
+            i0.ɵɵconditionalCreate(6, LoginStudioResourceComponent_Conditional_6_Template, 1, 1, "mj-alert", 5);
+            i0.ɵɵconditionalCreate(7, LoginStudioResourceComponent_Conditional_7_Template, 1, 0, "mj-loading", 6)(8, LoginStudioResourceComponent_Conditional_8_Template, 1, 0, "mj-empty-state", 7)(9, LoginStudioResourceComponent_Conditional_9_Template, 42, 58, "div", 8);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -833,7 +863,7 @@ let LoginStudioResourceComponent = class LoginStudioResourceComponent extends Ba
             i0.ɵɵconditional(ctx.Loading ? 7 : !ctx.Theme ? 8 : 9);
         } }, dependencies: [CdkDropListGroup, CdkDropList, CdkDrag, SharedGenericModule, i1.LoadingComponent, MJAlertComponent, MJButtonDirective, MJEmptyStateComponent,
             MJPageLayoutComponent, MJPageHeaderComponent, MJPageBodyComponent, MJStatBadgeComponent, MJViewToggleComponent,
-            MJLoginRegionComponent, LoginStudioInspectorComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.ls__alert[_ngcontent-%COMP%] { margin-bottom: var(--mj-space-4); }\n\n.ls__actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.ls__hint[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n\n\n.ls[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr) 20rem;\n  grid-template-areas: 'palette stage side';\n  gap: var(--mj-space-4);\n  align-items: start;\n}\n\n.ls__heading[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--mj-text-secondary);\n}\n\n\n.ls__palette[_ngcontent-%COMP%] {\n  grid-area: palette;\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n.ls__palette-list[_ngcontent-%COMP%] {\n  display: grid;\n  gap: var(--mj-space-2);\n}\n\n.ls__tile[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n  width: 100%;\n  cursor: grab;\n}\n.ls__tile[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 1.25rem;\n  text-align: center;\n}\n\n.ls__tile.cdk-drag-placeholder[_ngcontent-%COMP%] { opacity: 0.4; }\n.ls__tile.cdk-drag-preview[_ngcontent-%COMP%] {\n  width: 10rem;\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n.ls__stage[_ngcontent-%COMP%] {\n  grid-area: stage;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  min-width: 0;\n}\n.ls__stage-bar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-3);\n}\n\n\n.ls__frame[_ngcontent-%COMP%] {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: clamp(30rem, 62vh, 44rem);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-login-panel-bg);\n}\n.ls__frame--phone[_ngcontent-%COMP%] {\n  width: 24rem;\n  max-width: 100%;\n  height: 46rem;\n  margin-inline: auto;\n  border-radius: var(--mj-radius-xl);\n}\n\n\n.ls__side[_ngcontent-%COMP%] {\n  grid-area: side;\n  position: sticky;\n  top: 0;\n  max-height: calc(100vh - 10rem);\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.ls__side-title[_ngcontent-%COMP%] {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n\n\n.lp[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n}\n.lp--reverse[_ngcontent-%COMP%] { flex-direction: row-reverse; }\n\n.lp__banner[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-banner-flex) 1 0;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  padding: var(--mj-space-10) var(--mj-space-8);\n  background: var(--mj-login-banner-bg);\n  color: var(--mj-login-banner-text);\n}\n.lp__banner--center[_ngcontent-%COMP%] { align-items: center; }\n.lp__brand[_ngcontent-%COMP%] {\n  width: 100%;\n  margin-block: auto;\n}\n\n.lp__panel[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-panel-flex) 1 0;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-6);\n  background: var(--mj-login-panel-bg);\n  color: var(--mj-login-panel-text);\n}\n.lp__stack[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  width: 100%;\n  max-width: var(--mj-login-picker-max-width);\n  margin-block: auto;\n}\n\n.lp__picker[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--mj-space-3);\n  padding-block: var(--mj-space-2);\n}\n\n.lp__heading[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-login-panel-text);\n}\n.lp__signin[_ngcontent-%COMP%] {\n  display: block;\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-weight: var(--mj-font-semibold);\n  text-align: center;\n}\n\n.lp__region-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: calc(-1 * var(--mj-space-2));\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0.55;\n}\n.lp__banner[_ngcontent-%COMP%]   .lp__region-label[_ngcontent-%COMP%] { margin-bottom: var(--mj-space-1); }\n.lp__default-note[_ngcontent-%COMP%] {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  opacity: 0.75;\n}\n\n\n.lp--centered[_ngcontent-%COMP%] {\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-4);\n  background: var(--mj-login-banner-bg);\n}\n.lp--centered[_ngcontent-%COMP%]   .lp__banner[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 100%;\n  overflow: visible;\n  padding: 0 0 var(--mj-space-6);\n  background: none;\n  align-items: center;\n}\n.lp--centered[_ngcontent-%COMP%]   .lp__panel[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: var(--mj-login-centered-card-width);\n  overflow: visible;\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n.lp--stacked[_ngcontent-%COMP%] { flex-direction: column; }\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__banner[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  height: 35%;\n  padding: var(--mj-space-5);\n  align-items: center;\n}\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__brand[_ngcontent-%COMP%] { margin-block: auto 0; }\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__panel[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  padding: var(--mj-space-6) var(--mj-space-4);\n}\n\n\n\n.lp__banner[_ngcontent-%COMP%], \n.lp__panel[_ngcontent-%COMP%], \n.lp--centered[_ngcontent-%COMP%] { cursor: pointer; }\n.lp__surface-on[_ngcontent-%COMP%], \n.lp--surface-on[_ngcontent-%COMP%] { box-shadow: inset 0 0 0 2px var(--mj-brand-primary); }\n.lp--centered[_ngcontent-%COMP%]   .lp__panel.lp__surface-on[_ngcontent-%COMP%] { box-shadow: var(--mj-shadow-lg), 0 0 0 2px var(--mj-brand-primary); }\n\n\n\n@media (max-width: 1280px) {\n  .ls[_ngcontent-%COMP%] {\n    grid-template-columns: minmax(0, 1fr) 19rem;\n    grid-template-areas:\n      'palette palette'\n      'stage side';\n  }\n  .ls__palette[_ngcontent-%COMP%] { position: static; }\n  .ls__palette-list[_ngcontent-%COMP%] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }\n}\n\n@media (max-width: 900px) {\n  .ls[_ngcontent-%COMP%] {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: 'palette' 'stage' 'side';\n  }\n  .ls__side[_ngcontent-%COMP%] {\n    position: static;\n    max-height: none;\n  }\n}"], changeDetection: 0 });
+            MJLoginRegionComponent, LoginStudioInspectorComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.ls__alert[_ngcontent-%COMP%] { margin-bottom: var(--mj-space-4); }\n\n.ls__actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.ls__hint[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n\n\n.ls[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr) 20rem;\n  grid-template-areas: 'palette stage side';\n  gap: var(--mj-space-4);\n  align-items: start;\n}\n\n.ls__heading[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--mj-text-secondary);\n}\n\n\n.ls__palette[_ngcontent-%COMP%] {\n  grid-area: palette;\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n.ls__palette-list[_ngcontent-%COMP%] {\n  display: grid;\n  gap: var(--mj-space-2);\n}\n\n.ls__tile[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n  width: 100%;\n  cursor: grab;\n}\n.ls__tile[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 1.25rem;\n  text-align: center;\n}\n\n.ls__tile.cdk-drag-placeholder[_ngcontent-%COMP%] { opacity: 0.4; }\n.ls__tile.cdk-drag-preview[_ngcontent-%COMP%] {\n  width: 10rem;\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n.ls__stage[_ngcontent-%COMP%] {\n  grid-area: stage;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  min-width: 0;\n}\n.ls__stage-bar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-3);\n}\n\n\n.ls__frame[_ngcontent-%COMP%] {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  max-width: calc(min(62vh, 44rem) * 1.6);\n  aspect-ratio: 16 / 10;\n  margin-inline: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-login-panel-bg);\n}\n.ls__frame--phone[_ngcontent-%COMP%] {\n  width: 24rem;\n  max-width: 100%;\n  height: 46rem;\n  margin-inline: auto;\n  border-radius: var(--mj-radius-xl);\n}\n\n\n.ls__side[_ngcontent-%COMP%] {\n  grid-area: side;\n  position: sticky;\n  top: 0;\n  max-height: calc(100vh - 10rem);\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.ls__side-title[_ngcontent-%COMP%] {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n\n\n.lp[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n}\n\n\n\n.lp[_ngcontent-%COMP%]:not(.lp--stacked) {\n  box-sizing: border-box;\n  width: 1440px;\n  height: 900px;\n  transform-origin: top left;\n}\n.lp--reverse[_ngcontent-%COMP%] { flex-direction: row-reverse; }\n\n.lp__banner[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-banner-flex) 1 0;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  padding: var(--mj-space-10) var(--mj-space-8);\n  background: var(--mj-login-banner-bg);\n  color: var(--mj-login-banner-text);\n}\n.lp__banner--center[_ngcontent-%COMP%] { align-items: center; }\n.lp__brand[_ngcontent-%COMP%] {\n  width: 100%;\n  margin-block: auto;\n}\n\n.lp__panel[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-panel-flex) 1 0;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-6);\n  background: var(--mj-login-panel-bg);\n  color: var(--mj-login-panel-text);\n}\n.lp__stack[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  width: 100%;\n  max-width: var(--mj-login-picker-max-width);\n  margin-block: auto;\n}\n\n.lp__picker[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--mj-space-3);\n  padding-block: var(--mj-space-2);\n}\n\n.lp__heading[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-login-panel-text);\n}\n.lp__signin[_ngcontent-%COMP%] {\n  display: block;\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-weight: var(--mj-font-semibold);\n  text-align: center;\n}\n\n.lp__region-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: calc(-1 * var(--mj-space-2));\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0.55;\n}\n.lp__banner[_ngcontent-%COMP%]   .lp__region-label[_ngcontent-%COMP%] { margin-bottom: var(--mj-space-1); }\n.lp__default-note[_ngcontent-%COMP%] {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  opacity: 0.75;\n}\n\n\n.lp--centered[_ngcontent-%COMP%] {\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-4);\n  background: var(--mj-login-banner-bg);\n}\n.lp--centered[_ngcontent-%COMP%]   .lp__banner[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 100%;\n  overflow: visible;\n  padding: 0 0 var(--mj-space-6);\n  background: none;\n  align-items: center;\n}\n.lp--centered[_ngcontent-%COMP%]   .lp__panel[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: var(--mj-login-centered-card-width);\n  overflow: visible;\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n\n\n.lp--stacked[_ngcontent-%COMP%] { flex-direction: column; }\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__banner[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  height: 50%;\n  padding: var(--mj-space-4);\n  align-items: center;\n}\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__brand[_ngcontent-%COMP%] { margin-block: auto 0; }\n.lp--stacked[_ngcontent-%COMP%]:not(.lp--centered)   .lp__panel[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  padding: var(--mj-space-6) var(--mj-space-4);\n}\n\n\n\n.lp__banner[_ngcontent-%COMP%], \n.lp__panel[_ngcontent-%COMP%], \n.lp--centered[_ngcontent-%COMP%] { cursor: pointer; }\n.lp__surface-on[_ngcontent-%COMP%], \n.lp--surface-on[_ngcontent-%COMP%] { box-shadow: inset 0 0 0 2px var(--mj-brand-primary); }\n.lp--centered[_ngcontent-%COMP%]   .lp__panel.lp__surface-on[_ngcontent-%COMP%] { box-shadow: var(--mj-shadow-lg), 0 0 0 2px var(--mj-brand-primary); }\n\n\n\n@media (max-width: 1280px) {\n  .ls[_ngcontent-%COMP%] {\n    grid-template-columns: minmax(0, 1fr) 19rem;\n    grid-template-areas:\n      'palette palette'\n      'stage side';\n  }\n  .ls__palette[_ngcontent-%COMP%] { position: static; }\n  .ls__palette-list[_ngcontent-%COMP%] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }\n}\n\n@media (max-width: 900px) {\n  .ls[_ngcontent-%COMP%] {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: 'palette' 'stage' 'side';\n  }\n  .ls__side[_ngcontent-%COMP%] {\n    position: static;\n    max-height: none;\n  }\n}"], changeDetection: 0 });
 };
 LoginStudioResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'LoginStudioResource')
@@ -845,13 +875,16 @@ export { LoginStudioResourceComponent };
                     CdkDropListGroup, CdkDropList, CdkDrag, SharedGenericModule, MJAlertComponent, MJButtonDirective, MJEmptyStateComponent,
                     MJPageLayoutComponent, MJPageHeaderComponent, MJPageBodyComponent, MJStatBadgeComponent, MJViewToggleComponent,
                     MJLoginRegionComponent, LoginStudioInspectorComponent,
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header Title=\"Sign-in Page\" Icon=\"fa-solid fa-right-to-bracket\"\n                  [Subtitle]=\"Theme ? 'What visitors see before they sign in. Designed on the default theme, ' + Theme.Name + '.' : 'What visitors see before they sign in.'\">\n    <!-- One root element per block: a control-flow block is projected by its single root's selector. -->\n    @if (Theme && !Loading && StatusVariant) {\n      <mj-stat-badge meta [Label]=\"StatusLabel\" [Variant]=\"StatusVariant\"></mj-stat-badge>\n    }\n    @if (Theme && !Loading) {\n      <div actions class=\"ls__actions\">\n        <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Undo()\" [disabled]=\"!CanUndo\" title=\"Undo (Ctrl/Cmd Z)\" AriaLabel=\"Undo\"><i class=\"fa-solid fa-rotate-left\"></i></button>\n        <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Redo()\" [disabled]=\"!CanRedo\" title=\"Redo (Shift Ctrl/Cmd Z)\" AriaLabel=\"Redo\"><i class=\"fa-solid fa-rotate-right\"></i></button>\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"Discard()\" [disabled]=\"!Unsaved || Saving\">Discard changes</button>\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"SaveDraft()\" [disabled]=\"Saving || !Unsaved\">\n          <i class=\"fa-regular fa-floppy-disk\"></i> Save draft\n        </button>\n        <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" (click)=\"Publish()\"\n                [disabled]=\"Saving || (!Unsaved && !Unpublished && IsLive)\" title=\"Save and show this page to everyone signing in\">\n          <i class=\"fa-solid fa-upload\"></i> Publish\n        </button>\n      </div>\n    }\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (ErrorMessage) {\n      <mj-alert class=\"ls__alert\" Variant=\"error\" [Message]=\"ErrorMessage\" Dismissible (Dismissed)=\"DismissError()\"></mj-alert>\n    }\n    @if (NoticeMessage) {\n      <mj-alert class=\"ls__alert\" Variant=\"success\" [Message]=\"NoticeMessage\" Dismissible (Dismissed)=\"DismissNotice()\"></mj-alert>\n    }\n\n    @if (Loading) {\n      <mj-loading Text=\"Reading the sign-in page...\" Size=\"medium\"></mj-loading>\n    } @else if (!Theme) {\n      <mj-empty-state Icon=\"fa-solid fa-palette\" Title=\"No default theme\"\n                      Message=\"The sign-in page is designed on the default theme. Set one in Theme Studio, under Manage Themes.\"></mj-empty-state>\n    } @else {\n      <div class=\"ls\" cdkDropListGroup>\n        <!-- PALETTE -->\n        <aside class=\"ls__palette\" aria-label=\"Blocks\">\n          <h2 class=\"ls__heading\">Blocks</h2>\n          <p class=\"ls__hint\">Drag a block onto the page, or click one to add it after the selected block.</p>\n          <div class=\"ls__palette-list\" cdkDropList [cdkDropListData]=\"PaletteListID\" cdkDropListSortingDisabled\n               [cdkDropListEnterPredicate]=\"NoEnter\">\n            @for (t of Palette; track t.Type) {\n              <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" class=\"ls__tile\" cdkDrag [cdkDragData]=\"t.Type\" (click)=\"AddBlock(t.Type)\" [title]=\"t.Hint\">\n                <i [class]=\"t.Icon\" aria-hidden=\"true\"></i>\n                <span>{{ t.Label }}</span>\n              </button>\n            }\n          </div>\n        </aside>\n\n        <!-- PREVIEW -->\n        <section class=\"ls__stage\" (click)=\"OnStageClick()\" aria-label=\"Preview\">\n          <div class=\"ls__stage-bar\" (click)=\"$event.stopPropagation()\">\n            <mj-view-toggle role=\"group\" aria-label=\"Preview size\" [Options]=\"DeviceOptions\" [ActiveKey]=\"Device\" (KeyChange)=\"SetDevice($event)\"></mj-view-toggle>\n            <span class=\"ls__hint\">The sign-in button is a stand-in. The real one opens your sign-in provider.</span>\n          </div>\n\n          <div class=\"ls__frame\" [class.ls__frame--phone]=\"Stacked\" [style]=\"FrameStyle\">\n            <!-- Clicking the page selects what was clicked: a block (it stops the click), the sign-in column,\n                 or else the story panel, which in the centered layout is the whole background. -->\n            <div class=\"lp\" [class.lp--reverse]=\"Design.Layout === 'split-reverse'\" [class.lp--centered]=\"Design.Layout === 'centered'\"\n                 [class.lp--stacked]=\"Stacked\" [class.lp--surface-on]=\"Surface === 'Banner' && Design.Layout === 'centered'\"\n                 (click)=\"SelectSurface('Banner', $event)\">\n              <div class=\"lp__banner\" [class.lp__banner--center]=\"Design.Alignment === 'center' || Stacked\"\n                   [class.lp__surface-on]=\"Surface === 'Banner' && Design.Layout !== 'centered'\">\n                <div class=\"lp__brand\">\n                  <span class=\"lp__region-label\">{{ RegionLabel.Banner }}</span>\n                  <mj-login-region Region=\"Banner\" [Blocks]=\"Design.Regions.Banner\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Center]=\"Design.Alignment === 'center' || Stacked\" [Editable]=\"true\"\n                                   [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                  @if (!Design.Regions.Banner.length) {\n                    <p class=\"lp__default-note\">Empty: visitors see the stock logo and \"Welcome back\" here.</p>\n                  }\n                </div>\n              </div>\n              <div class=\"lp__panel\" [class.lp__surface-on]=\"Surface === 'Panel'\" (click)=\"SelectSurface('Panel', $event)\">\n                <div class=\"lp__stack\">\n                  <span class=\"lp__region-label\">{{ RegionLabel.PanelTop }}</span>\n                  <mj-login-region Region=\"PanelTop\" [Blocks]=\"Design.Regions.PanelTop\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Editable]=\"true\" [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                  <div class=\"lp__picker\" aria-hidden=\"true\">\n                    @if (Design.Heading) {\n                      <span class=\"lp__heading\">{{ Design.Heading }}</span>\n                    }\n                    <span class=\"lp__signin\">Log in</span>\n                  </div>\n                  <span class=\"lp__region-label\">{{ RegionLabel.PanelBottom }}</span>\n                  <mj-login-region Region=\"PanelBottom\" [Blocks]=\"Design.Regions.PanelBottom\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Editable]=\"true\" [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!-- INSPECTOR -->\n        <aside class=\"ls__side\" aria-label=\"Settings\">\n          <div class=\"ls__side-head\">\n            <i [class]=\"SideIcon\" aria-hidden=\"true\"></i>\n            <h2 class=\"ls__side-title\">{{ SideTitle }}</h2>\n            @if (Selected || Surface) {\n              <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Select(null)\" title=\"Page settings\" AriaLabel=\"Back to page settings\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n              </button>\n            }\n          </div>\n          <mj-login-studio-inspector [Design]=\"Design\" [Selected]=\"Selected\" [SelectedRegion]=\"SelectedRegion\" [Surface]=\"Surface\"\n                                     [CanReset]=\"IsLive || Unpublished\" [Saving]=\"Saving\"\n                                     (EditRequested)=\"ApplyEdit($event)\" (CommandRequested)=\"OnCommand($event)\"\n                                     (StockPageRequested)=\"UseStockPage()\" (SurfaceSelectRequested)=\"SelectSurface($event)\"></mj-login-studio-inspector>\n        </aside>\n      </div>\n    }\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Login Studio: the editor's three columns (blocks | preview | settings), then a picture of the Explorer\n   login screen inside the preview frame, drawn with this screen's own classes and the --mj-login-* tokens. */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.ls__alert { margin-bottom: var(--mj-space-4); }\n\n.ls__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.ls__hint {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n/* ============================== THE EDITOR ============================== */\n\n.ls {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr) 20rem;\n  grid-template-areas: 'palette stage side';\n  gap: var(--mj-space-4);\n  align-items: start;\n}\n\n.ls__heading {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500 blocks \u2500\u2500 */\n.ls__palette {\n  grid-area: palette;\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n.ls__palette-list {\n  display: grid;\n  gap: var(--mj-space-2);\n}\n/* Layout only: the tile's look is mjButton's. */\n.ls__tile {\n  justify-content: flex-start;\n  width: 100%;\n  cursor: grab;\n}\n.ls__tile i {\n  width: 1.25rem;\n  text-align: center;\n}\n/* Dragged out, the tile keeps its place in the palette (a drop creates a block; it moves nothing). */\n.ls__tile.cdk-drag-placeholder { opacity: 0.4; }\n.ls__tile.cdk-drag-preview {\n  width: 10rem;\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* \u2500\u2500 preview \u2500\u2500 */\n.ls__stage {\n  grid-area: stage;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  min-width: 0;\n}\n.ls__stage-bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-3);\n}\n\n/* A desktop-proportioned page, or a phone. */\n.ls__frame {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: clamp(30rem, 62vh, 44rem);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-login-panel-bg);\n}\n.ls__frame--phone {\n  width: 24rem;\n  max-width: 100%;\n  height: 46rem;\n  margin-inline: auto;\n  border-radius: var(--mj-radius-xl);\n}\n\n/* \u2500\u2500 settings \u2500\u2500 */\n.ls__side {\n  grid-area: side;\n  position: sticky;\n  top: 0;\n  max-height: calc(100vh - 10rem);\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head > i { color: var(--mj-text-secondary); }\n.ls__side-title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n/* ============================== THE PICTURE OF THE LOGIN SCREEN ============================== */\n\n.lp {\n  display: flex;\n  height: 100%;\n}\n.lp--reverse { flex-direction: row-reverse; }\n\n.lp__banner {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-banner-flex) 1 0;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  padding: var(--mj-space-10) var(--mj-space-8);\n  background: var(--mj-login-banner-bg);\n  color: var(--mj-login-banner-text);\n}\n.lp__banner--center { align-items: center; }\n.lp__brand {\n  width: 100%;\n  margin-block: auto;\n}\n\n.lp__panel {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-panel-flex) 1 0;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-6);\n  background: var(--mj-login-panel-bg);\n  color: var(--mj-login-panel-text);\n}\n.lp__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  width: 100%;\n  max-width: var(--mj-login-picker-max-width);\n  margin-block: auto;\n}\n\n.lp__picker {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--mj-space-3);\n  padding-block: var(--mj-space-2);\n}\n/* As <mj-login-picker> draws its heading. */\n.lp__heading {\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-login-panel-text);\n}\n.lp__signin {\n  display: block;\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-weight: var(--mj-font-semibold);\n  text-align: center;\n}\n\n.lp__region-label {\n  display: block;\n  margin-bottom: calc(-1 * var(--mj-space-2));\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0.55;\n}\n.lp__banner .lp__region-label { margin-bottom: var(--mj-space-1); }\n.lp__default-note {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  opacity: 0.75;\n}\n\n/* Centered: one column on the banner background, the sign-in options a card on top of it. */\n.lp--centered {\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-4);\n  background: var(--mj-login-banner-bg);\n}\n.lp--centered .lp__banner {\n  flex: 0 0 auto;\n  width: 100%;\n  overflow: visible;\n  padding: 0 0 var(--mj-space-6);\n  background: none;\n  align-items: center;\n}\n.lp--centered .lp__panel {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: var(--mj-login-centered-card-width);\n  overflow: visible;\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Stacked (the login screen's 900px layout, where the banner is 35dvh): the banner shortens above the sign-in column. */\n.lp--stacked { flex-direction: column; }\n.lp--stacked:not(.lp--centered) .lp__banner {\n  flex: 0 0 auto;\n  height: 35%;\n  padding: var(--mj-space-5);\n  align-items: center;\n}\n.lp--stacked:not(.lp--centered) .lp__brand { margin-block: auto 0; }\n.lp--stacked:not(.lp--centered) .lp__panel {\n  flex: 1 1 auto;\n  padding: var(--mj-space-6) var(--mj-space-4);\n}\n\n/* The story panel and the sign-in column are selectable (their settings and colors open in the\n   inspector): a pointer says so, and the selected one is outlined. Inset, because both scroll. */\n.lp__banner,\n.lp__panel,\n.lp--centered { cursor: pointer; }\n.lp__surface-on,\n.lp--surface-on { box-shadow: inset 0 0 0 2px var(--mj-brand-primary); }\n.lp--centered .lp__panel.lp__surface-on { box-shadow: var(--mj-shadow-lg), 0 0 0 2px var(--mj-brand-primary); }\n\n/* ============================== NARROWER ============================== */\n\n@media (max-width: 1280px) {\n  .ls {\n    grid-template-columns: minmax(0, 1fr) 19rem;\n    grid-template-areas:\n      'palette palette'\n      'stage side';\n  }\n  .ls__palette { position: static; }\n  .ls__palette-list { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }\n}\n\n@media (max-width: 900px) {\n  .ls {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: 'palette' 'stage' 'side';\n  }\n  .ls__side {\n    position: static;\n    max-height: none;\n  }\n}\n"] }]
-    }], null, { OnBeforeUnload: [{
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header Title=\"Sign-in Page\" Icon=\"fa-solid fa-right-to-bracket\"\n                  [Subtitle]=\"Theme ? 'What visitors see before they sign in. Designed on the default theme, ' + Theme.Name + '.' : 'What visitors see before they sign in.'\">\n    <!-- One root element per block: a control-flow block is projected by its single root's selector. -->\n    @if (Theme && !Loading && StatusVariant) {\n      <mj-stat-badge meta [Label]=\"StatusLabel\" [Variant]=\"StatusVariant\"></mj-stat-badge>\n    }\n    @if (Theme && !Loading) {\n      <div actions class=\"ls__actions\">\n        <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Undo()\" [disabled]=\"!CanUndo\" title=\"Undo (Ctrl/Cmd Z)\" AriaLabel=\"Undo\"><i class=\"fa-solid fa-rotate-left\"></i></button>\n        <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Redo()\" [disabled]=\"!CanRedo\" title=\"Redo (Shift Ctrl/Cmd Z)\" AriaLabel=\"Redo\"><i class=\"fa-solid fa-rotate-right\"></i></button>\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"Discard()\" [disabled]=\"!Unsaved || Saving\">Discard changes</button>\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"SaveDraft()\" [disabled]=\"Saving || !Unsaved\">\n          <i class=\"fa-regular fa-floppy-disk\"></i> Save draft\n        </button>\n        <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" (click)=\"Publish()\"\n                [disabled]=\"Saving || (!Unsaved && !Unpublished && IsLive)\" title=\"Save and show this page to everyone signing in\">\n          <i class=\"fa-solid fa-upload\"></i> Publish\n        </button>\n      </div>\n    }\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (ErrorMessage) {\n      <mj-alert class=\"ls__alert\" Variant=\"error\" [Message]=\"ErrorMessage\" Dismissible (Dismissed)=\"DismissError()\"></mj-alert>\n    }\n    @if (NoticeMessage) {\n      <mj-alert class=\"ls__alert\" Variant=\"success\" [Message]=\"NoticeMessage\" Dismissible (Dismissed)=\"DismissNotice()\"></mj-alert>\n    }\n\n    @if (Loading) {\n      <mj-loading Text=\"Reading the sign-in page...\" Size=\"medium\"></mj-loading>\n    } @else if (!Theme) {\n      <mj-empty-state Icon=\"fa-solid fa-palette\" Title=\"No default theme\"\n                      Message=\"The sign-in page is designed on the default theme. Set one in Theme Studio, under Manage Themes.\"></mj-empty-state>\n    } @else {\n      <div class=\"ls\" cdkDropListGroup>\n        <!-- PALETTE -->\n        <aside class=\"ls__palette\" aria-label=\"Blocks\">\n          <h2 class=\"ls__heading\">Blocks</h2>\n          <p class=\"ls__hint\">Drag a block onto the page, or click one to add it after the selected block.</p>\n          <div class=\"ls__palette-list\" cdkDropList [cdkDropListData]=\"PaletteListID\" cdkDropListSortingDisabled\n               [cdkDropListEnterPredicate]=\"NoEnter\">\n            @for (t of Palette; track t.Type) {\n              <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" class=\"ls__tile\" cdkDrag [cdkDragData]=\"t.Type\" (click)=\"AddBlock(t.Type)\" [title]=\"t.Hint\">\n                <i [class]=\"t.Icon\" aria-hidden=\"true\"></i>\n                <span>{{ t.Label }}</span>\n              </button>\n            }\n          </div>\n        </aside>\n\n        <!-- PREVIEW -->\n        <section class=\"ls__stage\" (click)=\"OnStageClick()\" aria-label=\"Preview\">\n          <div class=\"ls__stage-bar\" (click)=\"$event.stopPropagation()\">\n            <mj-view-toggle role=\"group\" aria-label=\"Preview size\" [Options]=\"DeviceOptions\" [ActiveKey]=\"Device\" (KeyChange)=\"SetDevice($event)\"></mj-view-toggle>\n            <span class=\"ls__hint\">The sign-in button is a stand-in. The real one opens your sign-in provider.</span>\n          </div>\n\n          <div class=\"ls__frame\" #frame [class.ls__frame--phone]=\"Stacked\" [style]=\"FrameStyle\">\n            <!-- Clicking the page selects what was clicked: a block (it stops the click), the sign-in column,\n                 or else the story panel, which in the centered layout is the whole background. -->\n            <div class=\"lp\" [class.lp--reverse]=\"Design.Layout === 'split-reverse'\" [class.lp--centered]=\"Design.Layout === 'centered'\"\n                 [class.lp--stacked]=\"Stacked\" [class.lp--surface-on]=\"Surface === 'Banner' && Design.Layout === 'centered'\"\n                 [style.transform]=\"Stacked ? null : 'scale(' + DesktopScale + ')'\"\n                 (click)=\"SelectSurface('Banner', $event)\">\n              <div class=\"lp__banner\" [class.lp__banner--center]=\"Design.Alignment === 'center' || Stacked\"\n                   [class.lp__surface-on]=\"Surface === 'Banner' && Design.Layout !== 'centered'\">\n                <div class=\"lp__brand\">\n                  <span class=\"lp__region-label\">{{ RegionLabel.Banner }}</span>\n                  <mj-login-region Region=\"Banner\" [Blocks]=\"Design.Regions.Banner\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Center]=\"Design.Alignment === 'center' || Stacked\" [Editable]=\"true\"\n                                   [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                  @if (!Design.Regions.Banner.length) {\n                    <p class=\"lp__default-note\">Empty: visitors see the stock logo and \"Welcome back\" here.</p>\n                  }\n                </div>\n              </div>\n              <div class=\"lp__panel\" [class.lp__surface-on]=\"Surface === 'Panel'\" (click)=\"SelectSurface('Panel', $event)\">\n                <div class=\"lp__stack\">\n                  <span class=\"lp__region-label\">{{ RegionLabel.PanelTop }}</span>\n                  <mj-login-region Region=\"PanelTop\" [Blocks]=\"Design.Regions.PanelTop\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Editable]=\"true\" [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                  <div class=\"lp__picker\" aria-hidden=\"true\">\n                    @if (Design.Heading) {\n                      <span class=\"lp__heading\">{{ Design.Heading }}</span>\n                    }\n                    <span class=\"lp__signin\">Log in</span>\n                  </div>\n                  <span class=\"lp__region-label\">{{ RegionLabel.PanelBottom }}</span>\n                  <mj-login-region Region=\"PanelBottom\" [Blocks]=\"Design.Regions.PanelBottom\" [Logos]=\"Logos\" [BrandName]=\"Theme.Name\"\n                                   [Stacked]=\"Stacked\" [Editable]=\"true\" [SelectedID]=\"SelectedID\"\n                                   (Dropped)=\"OnDrop($event)\" (SelectRequested)=\"Select($event)\" (CommandRequested)=\"OnCommand($event)\"></mj-login-region>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        <!-- INSPECTOR -->\n        <aside class=\"ls__side\" aria-label=\"Settings\">\n          <div class=\"ls__side-head\">\n            <i [class]=\"SideIcon\" aria-hidden=\"true\"></i>\n            <h2 class=\"ls__side-title\">{{ SideTitle }}</h2>\n            @if (Selected || Surface) {\n              <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" (click)=\"Select(null)\" title=\"Page settings\" AriaLabel=\"Back to page settings\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n              </button>\n            }\n          </div>\n          <mj-login-studio-inspector [Design]=\"Design\" [Selected]=\"Selected\" [SelectedRegion]=\"SelectedRegion\" [Surface]=\"Surface\"\n                                     [CanReset]=\"IsLive || Unpublished\" [Saving]=\"Saving\"\n                                     (EditRequested)=\"ApplyEdit($event)\" (CommandRequested)=\"OnCommand($event)\"\n                                     (StockPageRequested)=\"UseStockPage()\" (SurfaceSelectRequested)=\"SelectSurface($event)\"></mj-login-studio-inspector>\n        </aside>\n      </div>\n    }\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Login Studio: the editor's three columns (blocks | preview | settings), then a picture of the Explorer\n   login screen inside the preview frame, drawn with this screen's own classes and the --mj-login-* tokens. */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.ls__alert { margin-bottom: var(--mj-space-4); }\n\n.ls__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-2);\n}\n\n.ls__hint {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n\n/* ============================== THE EDITOR ============================== */\n\n.ls {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr) 20rem;\n  grid-template-areas: 'palette stage side';\n  gap: var(--mj-space-4);\n  align-items: start;\n}\n\n.ls__heading {\n  margin: 0;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--mj-text-secondary);\n}\n\n/* \u2500\u2500 blocks \u2500\u2500 */\n.ls__palette {\n  grid-area: palette;\n  position: sticky;\n  top: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n.ls__palette-list {\n  display: grid;\n  gap: var(--mj-space-2);\n}\n/* Layout only: the tile's look is mjButton's. */\n.ls__tile {\n  justify-content: flex-start;\n  width: 100%;\n  cursor: grab;\n}\n.ls__tile i {\n  width: 1.25rem;\n  text-align: center;\n}\n/* Dragged out, the tile keeps its place in the palette (a drop creates a block; it moves nothing). */\n.ls__tile.cdk-drag-placeholder { opacity: 0.4; }\n.ls__tile.cdk-drag-preview {\n  width: 10rem;\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* \u2500\u2500 preview \u2500\u2500 */\n.ls__stage {\n  grid-area: stage;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  min-width: 0;\n}\n.ls__stage-bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mj-space-3);\n}\n\n/* A 16:10 desktop screen, no taller than the window has room for, or a phone. */\n.ls__frame {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  max-width: calc(min(62vh, 44rem) * 1.6);\n  aspect-ratio: 16 / 10;\n  margin-inline: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-login-panel-bg);\n}\n.ls__frame--phone {\n  width: 24rem;\n  max-width: 100%;\n  height: 46rem;\n  margin-inline: auto;\n  border-radius: var(--mj-radius-xl);\n}\n\n/* \u2500\u2500 settings \u2500\u2500 */\n.ls__side {\n  grid-area: side;\n  position: sticky;\n  top: 0;\n  max-height: calc(100vh - 10rem);\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n.ls__side-head > i { color: var(--mj-text-secondary); }\n.ls__side-title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n/* ============================== THE PICTURE OF THE LOGIN SCREEN ============================== */\n\n.lp {\n  display: flex;\n  height: 100%;\n}\n/* Desktop: the page laid out at a real screen's size (DESKTOP_WIDTH in the component), then scaled to the\n   frame, so type and spacing shrink in proportion. At 1:1 a frame this narrow would draw a layout no\n   visitor gets at that width. */\n.lp:not(.lp--stacked) {\n  box-sizing: border-box;\n  width: 1440px;\n  height: 900px;\n  transform-origin: top left;\n}\n.lp--reverse { flex-direction: row-reverse; }\n\n.lp__banner {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-banner-flex) 1 0;\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  padding: var(--mj-space-10) var(--mj-space-8);\n  background: var(--mj-login-banner-bg);\n  color: var(--mj-login-banner-text);\n}\n.lp__banner--center { align-items: center; }\n.lp__brand {\n  width: 100%;\n  margin-block: auto;\n}\n\n.lp__panel {\n  box-sizing: border-box;\n  display: flex;\n  flex: var(--mj-login-panel-flex) 1 0;\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-6);\n  background: var(--mj-login-panel-bg);\n  color: var(--mj-login-panel-text);\n}\n.lp__stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-3);\n  width: 100%;\n  max-width: var(--mj-login-picker-max-width);\n  margin-block: auto;\n}\n\n.lp__picker {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--mj-space-3);\n  padding-block: var(--mj-space-2);\n}\n/* As <mj-login-picker> draws its heading. */\n.lp__heading {\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-login-panel-text);\n}\n.lp__signin {\n  display: block;\n  padding: var(--mj-space-3);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-weight: var(--mj-font-semibold);\n  text-align: center;\n}\n\n.lp__region-label {\n  display: block;\n  margin-bottom: calc(-1 * var(--mj-space-2));\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  opacity: 0.55;\n}\n.lp__banner .lp__region-label { margin-bottom: var(--mj-space-1); }\n.lp__default-note {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  opacity: 0.75;\n}\n\n/* Centered: one column on the banner background, the sign-in options a card on top of it. */\n.lp--centered {\n  flex-direction: column;\n  align-items: center;\n  overflow-y: auto;\n  padding: var(--mj-space-8) var(--mj-space-4);\n  background: var(--mj-login-banner-bg);\n}\n.lp--centered .lp__banner {\n  flex: 0 0 auto;\n  width: 100%;\n  overflow: visible;\n  padding: 0 0 var(--mj-space-6);\n  background: none;\n  align-items: center;\n}\n.lp--centered .lp__panel {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: var(--mj-login-centered-card-width);\n  overflow: visible;\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n}\n\n/* Stacked (the phone preview: the login screen at 480px and below, where the banner is 50dvh): the banner\n   shortens above the sign-in column. */\n.lp--stacked { flex-direction: column; }\n.lp--stacked:not(.lp--centered) .lp__banner {\n  flex: 0 0 auto;\n  height: 50%;\n  padding: var(--mj-space-4);\n  align-items: center;\n}\n.lp--stacked:not(.lp--centered) .lp__brand { margin-block: auto 0; }\n.lp--stacked:not(.lp--centered) .lp__panel {\n  flex: 1 1 auto;\n  padding: var(--mj-space-6) var(--mj-space-4);\n}\n\n/* The story panel and the sign-in column are selectable (their settings and colors open in the\n   inspector): a pointer says so, and the selected one is outlined. Inset, because both scroll. */\n.lp__banner,\n.lp__panel,\n.lp--centered { cursor: pointer; }\n.lp__surface-on,\n.lp--surface-on { box-shadow: inset 0 0 0 2px var(--mj-brand-primary); }\n.lp--centered .lp__panel.lp__surface-on { box-shadow: var(--mj-shadow-lg), 0 0 0 2px var(--mj-brand-primary); }\n\n/* ============================== NARROWER ============================== */\n\n@media (max-width: 1280px) {\n  .ls {\n    grid-template-columns: minmax(0, 1fr) 19rem;\n    grid-template-areas:\n      'palette palette'\n      'stage side';\n  }\n  .ls__palette { position: static; }\n  .ls__palette-list { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }\n}\n\n@media (max-width: 900px) {\n  .ls {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: 'palette' 'stage' 'side';\n  }\n  .ls__side {\n    position: static;\n    max-height: none;\n  }\n}\n"] }]
+    }], null, { frameRef: [{
+            type: ViewChild,
+            args: ['frame']
+        }], OnBeforeUnload: [{
             type: HostListener,
             args: ['window:beforeunload', ['$event']]
         }], OnKeydown: [{
             type: HostListener,
             args: ['keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoginStudioResourceComponent, { className: "LoginStudioResourceComponent", filePath: "src/LoginStudio/login-studio-resource.component.ts", lineNumber: 61 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoginStudioResourceComponent, { className: "LoginStudioResourceComponent", filePath: "src/LoginStudio/login-studio-resource.component.ts", lineNumber: 65 }); })();
 //# sourceMappingURL=login-studio-resource.component.js.map