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

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

@@ -0,0 +1,857 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @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 { DOCUMENT } from '@angular/common';
+import { CdkDrag, CdkDropList, CdkDropListGroup, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { takeUntil } from 'rxjs';
+import { LogError, RunView } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent, ThemeService } from '@memberjunction/ng-shared';
+import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
+import { MJAlertComponent, MJButtonDirective, MJConfirmService, MJEmptyStateComponent, MJPageBodyComponent, MJPageHeaderComponent, MJPageLayoutComponent, MJStatBadgeComponent, MJViewToggleComponent, } from '@memberjunction/ng-ui-components';
+import { MJLoginRegionComponent } from '@memberjunction/ng-auth-services';
+import { CloneLoginBlock, DefaultLoginDesign, IsLoginHexColor, IsSafeLoginImageURL, LOGIN_BLOCK_META, LOGIN_BLOCK_TYPES, LOGIN_LIMITS, LOGIN_REGION_LABEL, LOGIN_REGIONS, LocateLoginBlock, LoginDesignProblems, LoginDesignTokens, LoginThemeTokens, NewLoginBlock, ParseLoginDesign, PublicLoginScreenFromTheme, } from '@memberjunction/theme-engine';
+import { LoginStudioInspectorComponent } from './login-studio-inspector.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+const _forTrack0 = ($index, $item) => $item.Type;
+function LoginStudioResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-stat-badge", 1);
+} 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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 10);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 12);
+    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.ɵɵ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.ɵɵtext(9, " Save draft ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 14);
+    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.ɵɵtext(12, " Publish ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r0.CanUndo);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r0.CanRedo);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r0.Unsaved || ctx_r0.Saving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.Saving || !ctx_r0.Unsaved);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r0.Saving || !ctx_r0.Unsaved && !ctx_r0.Unpublished && ctx_r0.IsLive);
+} }
+function LoginStudioResourceComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-alert", 16);
+    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) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r0.ErrorMessage);
+} }
+function LoginStudioResourceComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-alert", 17);
+    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) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r0.NoticeMessage);
+} }
+function LoginStudioResourceComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 5);
+} }
+function LoginStudioResourceComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 6);
+} }
+function LoginStudioResourceComponent_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 46);
+    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.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const t_r7 = ctx.$implicit;
+    i0.ɵɵproperty("cdkDragData", t_r7.Type)("title", t_r7.Hint);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(t_r7.Icon);
+    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);
+    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);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Design.Heading);
+} }
+function LoginStudioResourceComponent_Conditional_9_Conditional_39_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.ɵɵ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.ɵɵtext(3, "Blocks");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 20);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "section", 23);
+    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.ɵɵlistener("click", function LoginStudioResourceComponent_Conditional_9_Template_div_click_10_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(11, "mj-view-toggle", 25);
+    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.ɵɵ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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(21, LoginStudioResourceComponent_Conditional_9_Conditional_21_Template, 2, 0, "p", 32);
+    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.ɵɵ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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "span", 30);
+    i0.ɵɵtext(32);
+    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.ɵɵelementEnd()()()()()();
+    i0.ɵɵelementStart(34, "aside", 40)(35, "div", 41);
+    i0.ɵɵelement(36, "i", 42);
+    i0.ɵɵelementStart(37, "h2", 43);
+    i0.ɵɵtext(38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(39, LoginStudioResourceComponent_Conditional_9_Conditional_39_Template, 2, 0, "button", 44);
+    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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("cdkDropListData", ctx_r0.PaletteListID)("cdkDropListEnterPredicate", ctx_r0.NoEnter);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.Palette);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Options", ctx_r0.DeviceOptions)("ActiveKey", ctx_r0.Device);
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleMap(ctx_r0.FrameStyle);
+    i0.ɵɵclassProp("ls__frame--phone", ctx_r0.Stacked);
+    i0.ɵɵadvance();
+    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");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.RegionLabel.Banner);
+    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.ɵɵadvance();
+    i0.ɵɵclassProp("lp__surface-on", ctx_r0.Surface === "Panel");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.RegionLabel.PanelTop);
+    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.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.RegionLabel.PanelBottom);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Blocks", ctx_r0.Design.Regions.PanelBottom)("Logos", ctx_r0.Logos)("BrandName", ctx_r0.Theme.Name)("Stacked", ctx_r0.Stacked)("Editable", true)("SelectedID", ctx_r0.SelectedID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r0.SideIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.SideTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Selected || ctx_r0.Surface ? 39 : -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);
+} }
+/** The drop list the palette's tiles come from. Not a region, so a drop from it CREATES a block. */
+const PALETTE = 'palette';
+/** A run of edits to one field within this window is one undo step, not one per keystroke. */
+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;
+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' };
+/**
+ * LOGIN STUDIO: an administrator designs the page visitors see before they sign in. The design lives on
+ * the default Active theme (`LoginScreenDraft` while edited, `LoginScreen` once published), because a
+ * sign-in page belongs to a brand. The preview is drawn by `<mj-login-region>`, the renderer the live
+ * login screen uses; every drag also has a click or key (Add, Alt+Arrow, Delete).
+ *
+ * SAFETY BOUNDARY (agent): the agent reads the design and its problems (GetSignInPageDesign). Save draft,
+ * Publish and "Use the stock sign-in page" are human-only: the published page is what every visitor meets
+ * before signing in.
+ */
+let LoginStudioResourceComponent = class LoginStudioResourceComponent extends BaseResourceComponent {
+    cdr = inject(ChangeDetectorRef);
+    confirm = inject(MJConfirmService);
+    themeService = inject(ThemeService);
+    doc = inject(DOCUMENT);
+    Palette = LOGIN_BLOCK_TYPES.map((type) => ({ Type: type, ...LOGIN_BLOCK_META[type] }));
+    PaletteListID = PALETTE;
+    RegionLabel = LOGIN_REGION_LABEL;
+    DeviceOptions = [
+        { key: 'desktop', label: 'Desktop', icon: 'fa-solid fa-desktop' },
+        { key: 'mobile', label: 'Phone', icon: 'fa-solid fa-mobile-screen' },
+    ];
+    Loading = true;
+    Saving = false;
+    /** A failure to show, or null. */
+    ErrorMessage = null;
+    /** A confirmation to show, or null. */
+    NoticeMessage = null;
+    /** The theme being designed for: the default Active theme, or null when there is none. */
+    Theme = null;
+    Design = DefaultLoginDesign();
+    SelectedID = null;
+    /** The story panel or the sign-in column, when one is selected instead of a block. */
+    SelectedSurface = null;
+    Device = 'desktop';
+    Logos = {};
+    /** The default theme's look, as custom properties on the preview frame. */
+    FrameStyle = {};
+    /** 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. */
+    savedDraft = null;
+    published = null;
+    /** The design as it stands in storage (or the starter, before anything is saved). */
+    baseline = JSON.stringify(this.Design);
+    seeds = null;
+    undo = [];
+    redo = [];
+    lastEdit = null;
+    droppedAt = 0;
+    reportedEditing = false;
+    ngOnInit() {
+        super.ngOnInit();
+        // The preview restates the stock gradient per color mode, so it follows a light/dark switch.
+        this.themeService.AppliedTheme$.pipe(takeUntil(this.destroy$)).subscribe(() => this.changed());
+        void this.Reload();
+    }
+    ngAfterViewInit() {
+        this.registerAgentTools();
+    }
+    async GetResourceDisplayName(_data) {
+        return 'Sign-in Page';
+    }
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-right-to-bracket';
+    }
+    /** Unsaved edits: the shell keeps this tab rather than replace it. */
+    IsEditing() {
+        return this.Unsaved;
+    }
+    // ── Loading ─────────────────────────────────────────────────────────────────────────────────
+    /** Re-read the default theme and its sign-in page. */
+    async Reload() {
+        this.Loading = true;
+        this.ErrorMessage = null;
+        this.cdr.markForCheck();
+        try {
+            // The theme GET /auth/login-screen serves: the default Active one, most recently changed first.
+            const rv = await RunView.FromMetadataProvider(this.ProviderToUse).RunView({
+                EntityName: 'MJ: Themes',
+                ExtraFilter: `IsDefault = 1 AND Status = 'Active'`,
+                OrderBy: '__mj_UpdatedAt DESC',
+                MaxRows: 1,
+                ResultType: 'entity_object',
+            });
+            if (rv.Success) {
+                this.adoptTheme(rv.Results[0] ?? null);
+            }
+            else {
+                this.ErrorMessage = rv.ErrorMessage || 'Could not read the default theme.';
+            }
+        }
+        catch (e) {
+            LogError(e);
+            this.ErrorMessage = e instanceof Error ? e.message : String(e);
+        }
+        finally {
+            this.Loading = false;
+            this.changed();
+            this.NotifyLoadComplete();
+        }
+    }
+    /** Take the stored state from the theme, and edit its draft (else its live page, else the starter). */
+    adoptTheme(theme) {
+        this.readStored(theme);
+        this.Design = ParseLoginDesign(this.savedDraft ?? this.published) ?? DefaultLoginDesign();
+        this.baseline = this.CurrentJson;
+        this.undo = [];
+        this.redo = [];
+        this.SelectedID = null;
+        this.SelectedSurface = null;
+        this.problems = [];
+    }
+    /** What is stored on the theme: what is saved, what is live, and its seeds and logos. */
+    readStored(theme) {
+        this.Theme = theme;
+        // Seeds and logos as the live page gets them, so the preview wears exactly what visitors will see.
+        const pub = theme ? PublicLoginScreenFromTheme(theme) : null;
+        this.Logos = pub?.Logos ?? {};
+        this.seeds = pub?.Seeds ?? null;
+        const published = ParseLoginDesign(theme?.LoginScreen);
+        const draft = ParseLoginDesign(theme?.LoginScreenDraft);
+        this.published = published ? JSON.stringify(published) : null;
+        this.savedDraft = draft ? JSON.stringify(draft) : null;
+    }
+    // ── State ───────────────────────────────────────────────────────────────────────────────────
+    get CurrentJson() {
+        return JSON.stringify(this.Design);
+    }
+    /** Edits not yet saved as the draft. */
+    get Unsaved() {
+        return this.CurrentJson !== this.baseline;
+    }
+    /** The saved draft differs from what visitors see. */
+    get Unpublished() {
+        return this.savedDraft !== null && this.savedDraft !== this.published;
+    }
+    get IsLive() {
+        return this.published !== null;
+    }
+    get CanUndo() {
+        return this.undo.length > 0;
+    }
+    get CanRedo() {
+        return this.redo.length > 0;
+    }
+    get Stacked() {
+        return this.Device === 'mobile';
+    }
+    get StatusLabel() {
+        if (this.Unsaved)
+            return 'Unsaved changes';
+        if (this.Unpublished)
+            return 'Draft not published';
+        if (this.IsLive)
+            return 'Published';
+        return 'Stock sign-in page';
+    }
+    /** The header pill: shown only when there is something to say (live, or work waiting on you). */
+    get StatusVariant() {
+        if (this.Unsaved || this.Unpublished)
+            return 'warning';
+        return this.IsLive ? 'success' : null;
+    }
+    get Selected() {
+        const hit = this.SelectedID ? LocateLoginBlock(this.Design, this.SelectedID) : null;
+        return hit ? this.Design.Regions[hit.Region][hit.Index] : null;
+    }
+    /** The region of the selected block: a card's colors depend on which side of the page it is on. */
+    get SelectedRegion() {
+        return this.SelectedID ? LocateLoginBlock(this.Design, this.SelectedID)?.Region ?? null : null;
+    }
+    /** The selected surface; a selected block always wins. */
+    get Surface() {
+        return this.SelectedID ? null : this.SelectedSurface;
+    }
+    get SideTitle() {
+        if (this.Selected)
+            return LOGIN_BLOCK_META[this.Selected.Type].Label;
+        return this.Surface ? SURFACE_LABEL[this.Surface] : 'Page';
+    }
+    get SideIcon() {
+        if (this.Selected)
+            return 'fa-solid fa-sliders';
+        return this.Surface ? SURFACE_ICON[this.Surface] : 'fa-solid fa-table-columns';
+    }
+    /** Closing or reloading the browser with unsaved edits asks first. */
+    OnBeforeUnload(e) {
+        if (this.Unsaved)
+            e.preventDefault();
+    }
+    // ── Saving ──────────────────────────────────────────────────────────────────────────────────
+    async SaveDraft() {
+        if (!this.checkBeforeWrite())
+            return;
+        const json = this.CurrentJson;
+        if (await this.write((t) => { t.LoginScreenDraft = json; })) {
+            this.baseline = json;
+            this.done('Draft saved. Visitors still see the published page until you publish.');
+        }
+    }
+    async Publish() {
+        if (!this.checkBeforeWrite())
+            return;
+        const json = this.CurrentJson;
+        if (await this.write((t) => { t.LoginScreenDraft = json; t.LoginScreen = json; })) {
+            this.baseline = json;
+            // GET /auth/login-screen lets browsers keep its answer for a minute.
+            this.done('Published. Visitors see the new sign-in page within a minute.');
+        }
+    }
+    /** Back to what is stored (the saved draft, the live page, or the starter), dropping unsaved edits. */
+    Discard() {
+        this.pushHistory();
+        this.lastEdit = null;
+        this.Design = JSON.parse(this.baseline);
+        this.SelectedID = null;
+        this.problems = [];
+        this.ErrorMessage = null;
+        this.NoticeMessage = null;
+        this.changed();
+    }
+    /** Remove the custom page: visitors get the stock sign-in page again. */
+    async UseStockPage() {
+        const ok = await this.confirm.ConfirmDelete({
+            title: 'Use the stock sign-in page?',
+            message: 'Visitors will see the stock sign-in page, and this design and its draft are removed.',
+            confirmText: 'Remove the custom page',
+            cancelText: 'Keep it',
+        });
+        if (!ok)
+            return;
+        if (await this.write((t) => { t.LoginScreenDraft = null; t.LoginScreen = null; })) {
+            this.pushHistory();
+            this.lastEdit = null;
+            this.Design = DefaultLoginDesign();
+            this.baseline = this.CurrentJson;
+            this.SelectedID = null;
+            this.done('Visitors now see the stock sign-in page.');
+        }
+    }
+    DismissError() {
+        this.ErrorMessage = null;
+        this.cdr.markForCheck();
+    }
+    DismissNotice() {
+        this.NoticeMessage = null;
+        this.cdr.markForCheck();
+    }
+    done(notice) {
+        this.NoticeMessage = notice;
+        this.changed();
+    }
+    /** The editor's own list of problems, in its words. The entity's Validate runs the full check on save. */
+    checkBeforeWrite() {
+        this.NoticeMessage = null;
+        this.problems = LoginDesignProblems(this.Design);
+        this.ErrorMessage = this.problems.length ? this.problemsMessage() : null;
+        this.cdr.markForCheck();
+        return this.problems.length === 0;
+    }
+    problemsMessage() {
+        return `Fix these before saving: ${this.problems.join(' ')}`;
+    }
+    /**
+     * Writes the sign-in page columns to a FRESH copy of the theme, so a save never carries back a stale
+     * copy of the theme's other columns (another admin may have changed its colors or the default meanwhile).
+     */
+    async write(apply) {
+        if (!this.Theme)
+            return false;
+        this.Saving = true;
+        this.cdr.markForCheck();
+        try {
+            const theme = await this.ProviderToUse.GetEntityObject('MJ: Themes');
+            if (!(await theme.Load(this.Theme.ID))) {
+                this.ErrorMessage = 'The theme could not be read, so nothing was saved. Try again.';
+                return false;
+            }
+            if (!theme.IsDefault || theme.Status !== 'Active') {
+                this.ErrorMessage = `${theme.Name} is no longer the default theme, so nothing was saved. Close and reopen Login Studio to design the current one.`;
+                return false;
+            }
+            apply(theme);
+            if (!(await theme.Save())) {
+                this.ErrorMessage = theme.LatestResult?.CompleteMessage || 'The save was refused.';
+                return false;
+            }
+            // What is stored now, which another admin may have changed since this page loaded.
+            this.readStored(theme);
+            return true;
+        }
+        catch (e) {
+            LogError(e);
+            this.ErrorMessage = e instanceof Error ? e.message : String(e);
+            return false;
+        }
+        finally {
+            this.Saving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    // ── Editing ─────────────────────────────────────────────────────────────────────────────────
+    /** Every change goes through here: one undo step (or one per run of typing into a field) and a fresh object for OnPush. */
+    mutate(fn, coalesceKey) {
+        const now = Date.now();
+        const coalesce = !!coalesceKey && this.lastEdit?.key === coalesceKey && now - this.lastEdit.at < COALESCE_MS;
+        if (!coalesce)
+            this.pushHistory();
+        this.lastEdit = coalesceKey ? { key: coalesceKey, at: now } : null;
+        const next = JSON.parse(this.CurrentJson);
+        fn(next);
+        this.Design = next;
+        this.changed();
+    }
+    /** What the inspector asks for, applied as one undoable step. */
+    ApplyEdit(e) {
+        switch (e.Kind) {
+            case 'Block':
+                return this.editSelected((b) => { Object.assign(b, { [e.Field]: e.Value }); }, e.Field);
+            case 'Link':
+                return this.editSelected((b) => { if (b.Type === 'links' && b.Links[e.Index])
+                    b.Links[e.Index][e.Field] = e.Value; }, `link${e.Index}:${e.Field}`);
+            case 'AddLink':
+                return this.editSelected((b) => { if (b.Type === 'links' && b.Links.length < LOGIN_LIMITS.Links)
+                    b.Links.push({ Label: '', Href: 'https://' }); });
+            case 'RemoveLink':
+                return this.editSelected((b) => { if (b.Type === 'links')
+                    b.Links.splice(e.Index, 1); });
+            case 'Page':
+                return this.mutate((d) => { Object.assign(d, { [e.Field]: e.Value }); });
+            case 'Heading':
+                return this.mutate((d) => { d.Heading = e.Value.trim() ? e.Value.slice(0, LOGIN_LIMITS.Heading) : null; }, 'heading');
+            case 'Background':
+                return this.editBackground(e.Field, e.Value);
+            case 'Color':
+                return this.mutate((d) => {
+                    const v = typeof e.Value === 'string' ? e.Value.trim() : '';
+                    if (v)
+                        d.Colors[e.Key] = v;
+                    else
+                        delete d.Colors[e.Key];
+                }, `color:${e.Key}`);
+        }
+    }
+    editSelected(fn, coalesceField) {
+        const id = this.SelectedID;
+        if (!id)
+            return;
+        this.mutate((d) => {
+            const hit = LocateLoginBlock(d, id);
+            if (hit)
+                fn(d.Regions[hit.Region][hit.Index]);
+        }, coalesceField ? `${id}:${coalesceField}` : undefined);
+    }
+    editBackground(field, value) {
+        this.mutate((d) => {
+            const bg = d.Background;
+            if (field === 'Kind') {
+                bg.Kind = value;
+                // A half-typed value would block saving from a field this kind no longer shows.
+                if (bg.Color && !IsLoginHexColor(bg.Color))
+                    bg.Color = null;
+                if (bg.Color2 && !IsLoginHexColor(bg.Color2))
+                    bg.Color2 = null;
+                if (bg.Kind !== 'image' && bg.ImageURL && !IsSafeLoginImageURL(bg.ImageURL))
+                    bg.ImageURL = null;
+                // Start a color choice from the theme's own brand colors rather than an empty picker.
+                const primary = IsLoginHexColor(this.seeds?.primary) ? this.seeds.primary : null;
+                const accent = IsLoginHexColor(this.seeds?.accent) ? this.seeds.accent : primary;
+                if ((bg.Kind === 'color' || bg.Kind === 'gradient') && !bg.Color)
+                    bg.Color = primary;
+                if (bg.Kind === 'gradient' && !bg.Color2)
+                    bg.Color2 = accent;
+            }
+            else if (field === 'Overlay') {
+                bg.Overlay = Math.max(0, Math.min(LOGIN_LIMITS.OverlayMax, Math.round(Number(value) || 0)));
+            }
+            else {
+                bg[field] = typeof value === 'string' && value.trim() ? value.trim() : null;
+            }
+        }, `bg:${field}`);
+    }
+    pushHistory() {
+        this.undo.push(this.CurrentJson);
+        if (this.undo.length > HISTORY_CAP)
+            this.undo.shift();
+        this.redo = [];
+    }
+    Undo() {
+        const prev = this.undo.pop();
+        if (prev === undefined)
+            return;
+        this.redo.push(this.CurrentJson);
+        this.restore(prev);
+    }
+    Redo() {
+        const next = this.redo.pop();
+        if (next === undefined)
+            return;
+        this.undo.push(this.CurrentJson);
+        this.restore(next);
+    }
+    /** A snapshot this editor took itself, so it comes back exactly as it was, half-typed values included. */
+    restore(json) {
+        this.Design = JSON.parse(json);
+        this.lastEdit = null;
+        if (this.SelectedID && !LocateLoginBlock(this.Design, this.SelectedID))
+            this.SelectedID = null;
+        this.changed();
+    }
+    /** Ctrl/Cmd+Z and Shift+Ctrl/Cmd+Z while focus is in the studio, except in a field being typed in. */
+    OnKeydown(e) {
+        const target = e.target;
+        if (target && (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || target.isContentEditable))
+            return;
+        if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z')
+            return;
+        e.preventDefault();
+        if (e.shiftKey)
+            this.Redo();
+        else
+            this.Undo();
+    }
+    // ── Blocks ──────────────────────────────────────────────────────────────────────────────────
+    /** A click on the empty preview deselects, except the click that ends a drag. */
+    OnStageClick() {
+        if (Date.now() - this.droppedAt < DROP_CLICK_MS)
+            return;
+        this.Select(null);
+    }
+    OnDrop(e) {
+        this.droppedAt = Date.now();
+        const to = e.To;
+        if (typeof e.Item === 'string') {
+            this.AddBlock(e.Item, to, e.CurrentIndex);
+            return;
+        }
+        const from = LOGIN_REGIONS.find((r) => r === e.From);
+        if (!from || (from === to && e.PreviousIndex === e.CurrentIndex))
+            return;
+        if (from !== to && this.regionFull(to))
+            return;
+        this.mutate((d) => {
+            if (from === to)
+                moveItemInArray(d.Regions[to], e.PreviousIndex, e.CurrentIndex);
+            else
+                transferArrayItem(d.Regions[from], d.Regions[to], e.PreviousIndex, e.CurrentIndex);
+        });
+    }
+    /** The palette never accepts a drop: dragging a tile back onto it cancels. */
+    NoEnter = () => false;
+    /**
+     * Add a block: dropped at a spot, or (clicked in the palette) just after the selected block, else at
+     * the end of the selected surface's first region, else of the story panel.
+     */
+    AddBlock(type, region, index) {
+        const sel = !region && this.SelectedID ? LocateLoginBlock(this.Design, this.SelectedID) : null;
+        const where = region ?? sel?.Region ?? (this.Surface === 'Panel' ? 'PanelTop' : 'Banner');
+        if (this.regionFull(where))
+            return;
+        const at = index ?? (sel ? sel.Index + 1 : this.Design.Regions[where].length);
+        const block = NewLoginBlock(type);
+        this.SelectedID = block.ID;
+        this.SelectedSurface = null;
+        this.mutate((d) => d.Regions[where].splice(at, 0, block));
+    }
+    OnCommand(c) {
+        const hit = LocateLoginBlock(this.Design, c.ID);
+        if (!hit)
+            return;
+        const { Region: region, Index: index } = hit;
+        switch (c.Kind) {
+            case 'up':
+            case 'down': {
+                const to = index + (c.Kind === 'up' ? -1 : 1);
+                if (to < 0 || to >= this.Design.Regions[region].length)
+                    return;
+                this.mutate((d) => moveItemInArray(d.Regions[region], index, to));
+                break;
+            }
+            case 'duplicate': {
+                if (this.regionFull(region))
+                    return;
+                const copy = CloneLoginBlock(this.Design.Regions[region][index]);
+                this.SelectedID = copy.ID;
+                this.mutate((d) => d.Regions[region].splice(index + 1, 0, copy));
+                break;
+            }
+            case 'delete':
+                this.SelectedID = null;
+                this.mutate((d) => d.Regions[region].splice(index, 1));
+                break;
+        }
+    }
+    /** True, with a notice, when a region has no room for another block. */
+    regionFull(region) {
+        if (this.Design.Regions[region].length < LOGIN_LIMITS.BlocksPerRegion)
+            return false;
+        this.NoticeMessage = `${LOGIN_REGION_LABEL[region]} already has ${LOGIN_LIMITS.BlocksPerRegion} blocks.`;
+        this.cdr.markForCheck();
+        return true;
+    }
+    Select(id) {
+        this.SelectedID = id;
+        this.SelectedSurface = null;
+        this.publishAgentContext();
+        this.cdr.markForCheck();
+    }
+    /** Select the story panel or the sign-in column (a click on it in the preview, or the inspector's buttons). */
+    SelectSurface(surface, e) {
+        if (e) {
+            e.stopPropagation();
+            if (Date.now() - this.droppedAt < DROP_CLICK_MS)
+                return;
+        }
+        this.SelectedID = null;
+        this.SelectedSurface = surface;
+        this.publishAgentContext();
+        this.cdr.markForCheck();
+    }
+    SetDevice(device) {
+        this.Device = device === 'mobile' ? 'mobile' : 'desktop';
+        this.cdr.markForCheck();
+    }
+    // ── Preview, agent, shell ───────────────────────────────────────────────────────────────────
+    /** 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.
+        if (this.problems.length) {
+            this.problems = LoginDesignProblems(this.Design);
+            this.ErrorMessage = this.problems.length ? this.problemsMessage() : null;
+        }
+        // The frame wears the DEFAULT theme's look, which is not necessarily the viewer's, as the live login screen does.
+        const dark = this.doc.documentElement.getAttribute('data-theme') === 'dark';
+        this.FrameStyle = { ...LoginThemeTokens(this.seeds, dark), ...LoginDesignTokens(this.Design) };
+        this.publishAgentContext();
+        if (this.Unsaved !== this.reportedEditing) {
+            this.reportedEditing = this.Unsaved;
+            this.NotifyEditModeChanged(this.reportedEditing);
+        }
+        this.cdr.markForCheck();
+    }
+    publishAgentContext() {
+        this.navigationService.SetAgentContext(this, {
+            Surface: 'Login Studio',
+            ThemeName: this.Theme?.Name ?? null,
+            Status: this.StatusLabel,
+            Layout: this.Design.Layout,
+            BlockCounts: Object.fromEntries(LOGIN_REGIONS.map((r) => [r, this.Design.Regions[r].length])),
+            Selected: this.Selected ? LOGIN_BLOCK_META[this.Selected.Type].Label : this.Surface,
+            Problems: LoginDesignProblems(this.Design),
+        });
+    }
+    registerAgentTools() {
+        this.navigationService.SetAgentClientTools(this, [
+            {
+                Name: 'GetSignInPageDesign',
+                Description: 'Return the sign-in page design being edited (JSON), its status, and anything that would stop it being saved.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => ({
+                    Success: true,
+                    Data: { Status: this.StatusLabel, Design: this.Design, Problems: LoginDesignProblems(this.Design) },
+                }),
+            },
+        ]);
+    }
+    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) {
+            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);
+            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.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Subtitle", ctx.Theme ? "What visitors see before they sign in. Designed on the default theme, " + ctx.Theme.Name + "." : "What visitors see before they sign in.");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Theme && !ctx.Loading && ctx.StatusVariant ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Theme && !ctx.Loading ? 3 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.ErrorMessage ? 5 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.NoticeMessage ? 6 : -1);
+            i0.ɵɵadvance();
+            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 });
+};
+LoginStudioResourceComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'LoginStudioResource')
+], LoginStudioResourceComponent);
+export { LoginStudioResourceComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoginStudioResourceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-login-studio-resource', imports: [
+                    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: [{
+            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 }); })();
+//# sourceMappingURL=login-studio-resource.component.js.map