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

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

@@ -0,0 +1,781 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MJAlertComponent, MJButtonDirective, MJDropdownComponent, MJNumericInputComponent, MJSwitchComponent, MJViewToggleComponent, } from '@memberjunction/ng-ui-components';
+import { LOGIN_CARD_ICONS, LOGIN_COLOR_LABEL, LOGIN_LAYOUTS, LOGIN_LIMITS, LOGIN_LOGO_SOURCE_LABEL, LOGIN_LOGO_SOURCES, LoginBlockProblems, LoginContrastWarnings, StartingLoginColor, } from '@memberjunction/theme-engine';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.Key;
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 7);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); const k_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SetColor(k_r2.Key, ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "input", 8);
+    i0.ɵɵlistener("change", function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_3_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); const k_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SetColor(k_r2.Key, ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 9);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const k_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SetColor(k_r2.Key, null)); });
+    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r4 = ctx;
+    const k_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", c_r4);
+    i0.ɵɵattribute("aria-label", ctx_r2.ColorLabel[k_r2.Key]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", c_r4);
+    i0.ɵɵattribute("aria-label", ctx_r2.ColorLabel[k_r2.Key] + ", hex value");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("AriaLabel", "Reset " + ctx_r2.ColorLabel[k_r2.Key] + " to the default");
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1, "Default");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 12);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_4_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const k_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.StartColor(k_r2.Key)); });
+    i0.ɵɵtext(3, "Choose");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const k_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("AriaLabel", "Choose a custom " + ctx_r2.ColorLabel[k_r2.Key]);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_3_Template, 4, 5)(4, LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Conditional_4_Template, 4, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_14_0;
+    const k_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(k_r2.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = ctx_r2.Design.Colors[k_r2.Key]) ? 3 : 4, tmp_14_0);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_8_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const w_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(w_r6);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-alert", 6)(1, "ul", 13);
+    i0.ɵɵrepeaterCreate(2, LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_8_For_3_Template, 2, 1, "li", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.ContrastWarnings);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "span", 3);
+    i0.ɵɵtext(2, "Colors");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_3_Template, 2, 1, "p", 4);
+    i0.ɵɵrepeaterCreate(4, LoginStudioInspectorComponent_ng_template_0_Conditional_0_For_5_Template, 5, 2, "div", 5, _forTrack0);
+    i0.ɵɵelementStart(6, "p", 4);
+    i0.ɵɵtext(7, "Default follows the theme. A color you choose stays the same in light and dark mode.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, LoginStudioInspectorComponent_ng_template_0_Conditional_0_Conditional_8_Template, 4, 0, "mj-alert", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r2.ColorScope) ? 3 : -1, tmp_3_0);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.Colors);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.ContrastWarnings.length ? 8 : -1);
+} }
+function LoginStudioInspectorComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, LoginStudioInspectorComponent_ng_template_0_Conditional_0_Template, 9, 2, "div", 2);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r2.Colors.length ? 0 : -1);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const p_r8 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(p_r8);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-alert", 6)(1, "ul", 13);
+    i0.ɵɵrepeaterCreate(2, LoginStudioInspectorComponent_Conditional_3_Conditional_0_For_3_Template, 2, 1, "li", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.SelectedProblems);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 27);
+    i0.ɵɵtext(2, "Which logo");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-dropdown", 28);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_1_Template_mj_dropdown_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Source", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "p", 4);
+    i0.ɵɵtext(5, "Logos come from the default theme in Theme Studio. A variant that is not set falls back to the light mark, and a theme with no logos shows the stock one.");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Data", ctx_r2.LogoSourceOptions)("ValuePrimitive", true)("ngModel", ctx.Source);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "Headline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 30);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_2_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Text", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx.Text)("maxLength", ctx_r2.Limits.Headline);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "Text");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "textarea", 31);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_3_Template_textarea_input_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Text", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 21)(5, "mj-switch", 32);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_3_Template_mj_switch_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Muted", $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, " Softer color");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const b_r12 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", b_r12.Text)("maxLength", ctx_r2.Limits.Text);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", b_r12.Muted);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 33);
+    i0.ɵɵtext(2, "Icon");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-dropdown", 34);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template_mj_dropdown_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlockOptional("Icon", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "label", 14)(5, "span", 29);
+    i0.ɵɵtext(6, "Title");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "input", 30);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Title", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "label", 14)(9, "span", 29);
+    i0.ɵɵtext(10, "Note ");
+    i0.ɵɵelementStart(11, "span", 11);
+    i0.ɵɵtext(12, "optional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "textarea", 35);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template_textarea_input_13_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlockOptional("Text", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "label", 14)(15, "span", 29);
+    i0.ɵɵtext(16, "Link ");
+    i0.ɵɵelementStart(17, "span", 11);
+    i0.ɵɵtext(18, "optional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "input", 36);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template_input_input_19_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlockOptional("Href", ctx_r2.ValueOf($event).trim())); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 21)(21, "mj-switch", 37);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template_mj_switch_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("NewTab", $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(22, " Open in a new tab (keeps the sign-in page open)");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const b_r14 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Data", ctx_r2.IconOptions)("ValuePrimitive", true)("ngModel", b_r14.Icon ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", b_r14.Title)("maxLength", ctx_r2.Limits.CardTitle);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", b_r14.Text ?? "")("maxLength", ctx_r2.Limits.CardText);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", b_r14.Href ?? "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", b_r14.NewTab);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38)(1, "input", 41);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_5_For_1_Template_input_input_1_listener($event) { const ɵ$index_132_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SetLink(ɵ$index_132_r17, "Label", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "input", 42);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_5_For_1_Template_input_input_2_listener($event) { const ɵ$index_132_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SetLink(ɵ$index_132_r17, "Href", ctx_r2.ValueOf($event).trim())); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 43);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_3_Conditional_5_For_1_Template_button_click_3_listener() { const ɵ$index_132_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.RemoveLink(ɵ$index_132_r17)); });
+    i0.ɵɵelement(4, "i", 26);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const l_r18 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", l_r18.Label)("maxLength", ctx_r2.Limits.LinkLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", l_r18.Href);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵrepeaterCreate(0, LoginStudioInspectorComponent_Conditional_3_Conditional_5_For_1_Template, 5, 3, "div", 38, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(2, "button", 39);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_3_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.AddLink()); });
+    i0.ɵɵelement(3, "i", 40);
+    i0.ɵɵtext(4, " Add link");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const b_r19 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(b_r19.Links);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", b_r19.Links.length >= ctx_r2.Limits.Links);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "Image address");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 44);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_6_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("URL", ctx_r2.ValueOf($event).trim())); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "label", 14)(5, "span", 29);
+    i0.ɵɵtext(6, "Description for screen readers");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "input", 30);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_3_Conditional_6_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Alt", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const b_r21 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", b_r21.URL);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", b_r21.Alt)("maxLength", ctx_r2.Limits.Alt);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "span", 45);
+    i0.ɵɵtext(2, "Size");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_7_Template_mj_view_toggle_KeyChange_3_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBlock("Size", $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Options", ctx_r2.SizeOptions)("ActiveKey", ctx);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 46);
+    i0.ɵɵtext(2, "Corners ");
+    i0.ɵɵelementStart(3, "span", 11);
+    i0.ɵɵtext(4, "every card");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_3_Conditional_15_Template_mj_view_toggle_KeyChange_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetPage("CardRadius", $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("Options", ctx_r2.RadiusOptions)("ActiveKey", ctx_r2.Design.CardRadius);
+} }
+function LoginStudioInspectorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, LoginStudioInspectorComponent_Conditional_3_Conditional_0_Template, 4, 0, "mj-alert", 6);
+    i0.ɵɵconditionalCreate(1, LoginStudioInspectorComponent_Conditional_3_Conditional_1_Template, 6, 3);
+    i0.ɵɵconditionalCreate(2, LoginStudioInspectorComponent_Conditional_3_Conditional_2_Template, 4, 2, "label", 14);
+    i0.ɵɵconditionalCreate(3, LoginStudioInspectorComponent_Conditional_3_Conditional_3_Template, 7, 3);
+    i0.ɵɵconditionalCreate(4, LoginStudioInspectorComponent_Conditional_3_Conditional_4_Template, 23, 9);
+    i0.ɵɵconditionalCreate(5, LoginStudioInspectorComponent_Conditional_3_Conditional_5_Template, 5, 1);
+    i0.ɵɵconditionalCreate(6, LoginStudioInspectorComponent_Conditional_3_Conditional_6_Template, 8, 3);
+    i0.ɵɵconditionalCreate(7, LoginStudioInspectorComponent_Conditional_3_Conditional_7_Template, 4, 2, "div", 15);
+    i0.ɵɵelementStart(8, "div", 16)(9, "span", 17);
+    i0.ɵɵtext(10, "Width");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_3_Template_mj_view_toggle_KeyChange_11_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetBlock("Width", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "p", 4);
+    i0.ɵɵtext(13, "Half or Third puts two or three blocks side by side. On a phone each block takes its own row.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainer(14, 19);
+    i0.ɵɵconditionalCreate(15, LoginStudioInspectorComponent_Conditional_3_Conditional_15_Template, 6, 2, "div", 20);
+    i0.ɵɵelementStart(16, "div", 21)(17, "mj-switch", 22);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_3_Template_mj_switch_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetBlock("HideWhenStacked", $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(18, " Hide on small screens");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "p", 4);
+    i0.ɵɵtext(20, "Tablets and phones show a short banner above the sign-in options, so keep it to the essentials.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 23)(22, "button", 24);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_3_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Run("duplicate")); });
+    i0.ɵɵelement(23, "i", 25);
+    i0.ɵɵtext(24, " Duplicate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "button", 24);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_3_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Run("delete")); });
+    i0.ɵɵelement(26, "i", 26);
+    i0.ɵɵtext(27, " Delete");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    let tmp_5_0;
+    let tmp_6_0;
+    let tmp_7_0;
+    let tmp_8_0;
+    let tmp_9_0;
+    let tmp_10_0;
+    const sel_r24 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    const colors_r25 = i0.ɵɵreference(1);
+    i0.ɵɵconditional(ctx_r2.SelectedProblems.length ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_4_0 = ctx_r2.AsLogo) ? 1 : -1, tmp_4_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_5_0 = ctx_r2.AsHeadline) ? 2 : -1, tmp_5_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_6_0 = ctx_r2.AsText) ? 3 : -1, tmp_6_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_7_0 = ctx_r2.AsCard) ? 4 : -1, tmp_7_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_8_0 = ctx_r2.AsLinks) ? 5 : -1, tmp_8_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_9_0 = ctx_r2.AsImage) ? 6 : -1, tmp_9_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_10_0 = ctx_r2.SelectedSize) ? 7 : -1, tmp_10_0);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Options", ctx_r2.WidthOptions)("ActiveKey", sel_r24.Width);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngTemplateOutlet", colors_r25);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.AsCard ? 15 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", sel_r24.HideWhenStacked);
+} }
+function LoginStudioInspectorComponent_Conditional_4_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
+    i0.ɵɵtext(1, "The default theme's brand gradient, from Theme Studio.");
+    i0.ɵɵelementEnd();
+} }
+function LoginStudioInspectorComponent_Conditional_4_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "Color");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 54)(4, "input", 55);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_4_Case_5_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "input", 56);
+    i0.ɵɵlistener("change", function LoginStudioInspectorComponent_Conditional_4_Case_5_Template_input_change_5_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color ?? "");
+} }
+function LoginStudioInspectorComponent_Conditional_4_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "From");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 54)(4, "input", 57);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_4_Case_6_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "input", 58);
+    i0.ɵɵlistener("change", function LoginStudioInspectorComponent_Conditional_4_Case_6_Template_input_change_5_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(6, "div", 14)(7, "span", 29);
+    i0.ɵɵtext(8, "To");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 54)(10, "input", 59);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_4_Case_6_Template_input_input_10_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color2", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "input", 60);
+    i0.ɵɵlistener("change", function LoginStudioInspectorComponent_Conditional_4_Case_6_Template_input_change_11_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Color2", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color ?? "");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color2 ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.Color2 ?? "");
+} }
+function LoginStudioInspectorComponent_Conditional_4_Case_7_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 14)(1, "span", 29);
+    i0.ɵɵtext(2, "Image address");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 61);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_4_Case_7_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("ImageURL", ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 14)(5, "span", 62);
+    i0.ɵɵtext(6, "Darken the image (%)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "mj-numeric-input", 63);
+    i0.ɵɵlistener("ngModelChange", function LoginStudioInspectorComponent_Conditional_4_Case_7_Template_mj_numeric_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetBackground("Overlay", $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r2.Design.Background.ImageURL ?? "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Min", 0)("Max", ctx_r2.Limits.OverlayMax)("Step", 5)("Decimals", 0)("ngModel", ctx_r2.Design.Background.Overlay);
+} }
+function LoginStudioInspectorComponent_Conditional_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "span", 64);
+    i0.ɵɵtext(2, "Width");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_4_Conditional_17_Template_mj_view_toggle_KeyChange_3_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetPage("BannerShare", $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Options", ctx_r2.BannerShareOptions)("ActiveKey", ctx_r2.Design.BannerShare);
+} }
+function LoginStudioInspectorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 47)(1, "span", 48);
+    i0.ɵɵtext(2, "Background");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_4_Template_mj_view_toggle_KeyChange_3_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetBackground("Kind", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(4, LoginStudioInspectorComponent_Conditional_4_Case_4_Template, 2, 0, "p", 4)(5, LoginStudioInspectorComponent_Conditional_4_Case_5_Template, 6, 2, "div", 14)(6, LoginStudioInspectorComponent_Conditional_4_Case_6_Template, 12, 4)(7, LoginStudioInspectorComponent_Conditional_4_Case_7_Template, 8, 6);
+    i0.ɵɵelementStart(8, "div", 49)(9, "span", 50);
+    i0.ɵɵtext(10, "Light or dark text");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_4_Template_mj_view_toggle_KeyChange_11_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetPage("Tone", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainer(12, 19);
+    i0.ɵɵelementStart(13, "div", 51)(14, "span", 52);
+    i0.ɵɵtext(15, "Alignment");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_4_Template_mj_view_toggle_KeyChange_16_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetPage("Alignment", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(17, LoginStudioInspectorComponent_Conditional_4_Conditional_17_Template, 4, 2, "div", 53);
+    i0.ɵɵelementStart(18, "p", 4);
+    i0.ɵɵtext(19, "To change the color of the cards here, select one.");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    const colors_r25 = i0.ɵɵreference(1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Options", ctx_r2.BackgroundOptions)("ActiveKey", ctx_r2.Design.Background.Kind);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_4_0 = ctx_r2.Design.Background.Kind) === "brand" ? 4 : tmp_4_0 === "color" ? 5 : tmp_4_0 === "gradient" ? 6 : tmp_4_0 === "image" ? 7 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("Options", ctx_r2.ToneOptions)("ActiveKey", ctx_r2.Design.Tone);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", colors_r25);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Options", ctx_r2.AlignmentOptions)("ActiveKey", ctx_r2.Design.Alignment);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Design.Layout !== "centered" ? 17 : -1);
+} }
+function LoginStudioInspectorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainer(0, 19);
+    i0.ɵɵelementStart(1, "p", 4);
+    i0.ɵɵtext(2, "The sign-in button uses the default theme's brand color.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "label", 14)(4, "span", 29);
+    i0.ɵɵtext(5, "Heading above the sign-in options ");
+    i0.ɵɵelementStart(6, "span", 11);
+    i0.ɵɵtext(7, "optional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "input", 65);
+    i0.ɵɵlistener("input", function LoginStudioInspectorComponent_Conditional_5_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetHeading(ctx_r2.ValueOf($event))); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 66)(10, "span", 67);
+    i0.ɵɵtext(11, "Width");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "mj-view-toggle", 18);
+    i0.ɵɵlistener("KeyChange", function LoginStudioInspectorComponent_Conditional_5_Template_mj_view_toggle_KeyChange_12_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetPage("PanelWidth", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "p", 4);
+    i0.ɵɵtext(14, "To change the color of the cards here, select one.");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    const colors_r25 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("ngTemplateOutlet", colors_r25);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("value", ctx_r2.Design.Heading ?? "")("maxLength", ctx_r2.Limits.Heading);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Options", ctx_r2.PanelWidthOptions)("ActiveKey", ctx_r2.Design.PanelWidth);
+} }
+function LoginStudioInspectorComponent_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 75);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_6_For_5_Template_button_click_0_listener() { const l_r34 = i0.ɵɵrestoreView(_r33).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SetPage("Layout", l_r34)); });
+    i0.ɵɵelementStart(1, "span", 76);
+    i0.ɵɵelement(2, "span")(3, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const l_r34 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.Design.Layout === l_r34);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-layout", l_r34);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.LayoutLabel[l_r34], " ");
+} }
+function LoginStudioInspectorComponent_Conditional_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74)(1, "button", 39);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_6_Conditional_18_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.StockPageRequested.emit()); });
+    i0.ɵɵelement(2, "i", 77);
+    i0.ɵɵtext(3, " Use the stock sign-in page ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.Saving);
+} }
+function LoginStudioInspectorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68)(1, "span", 29);
+    i0.ɵɵtext(2, "Layout");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 69);
+    i0.ɵɵrepeaterCreate(4, LoginStudioInspectorComponent_Conditional_6_For_5_Template, 5, 4, "button", 70, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 71)(7, "span", 29);
+    i0.ɵɵtext(8, "Change a part of the page");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 23)(10, "button", 24);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_6_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SurfaceSelectRequested.emit("Banner")); });
+    i0.ɵɵelement(11, "i", 72);
+    i0.ɵɵtext(12, " Story panel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 24);
+    i0.ɵɵlistener("click", function LoginStudioInspectorComponent_Conditional_6_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SurfaceSelectRequested.emit("Panel")); });
+    i0.ɵɵelement(14, "i", 73);
+    i0.ɵɵtext(15, " Sign-in column");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "p", 4);
+    i0.ɵɵtext(17, "Or click it in the preview (the story panel, the sign-in column or any block) to see its settings and colors. Alt+\u2191/\u2193 moves the focused block; Delete removes it.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(18, LoginStudioInspectorComponent_Conditional_6_Conditional_18_Template, 4, 1, "div", 74);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.Layouts);
+    i0.ɵɵadvance(14);
+    i0.ɵɵconditional(ctx_r2.CanReset ? 18 : -1);
+} }
+const toggle = (labels) => Object.entries(labels).map(([key, label]) => ({ key, label }));
+/**
+ * Login Studio's settings column: the selected block's fields, the selected surface's, or the page's.
+ * A color appears with the thing it paints. Owns no state: every change goes out as a {@link LoginEdit}
+ * the studio applies, so undo, the preview and the unsaved state live in one place.
+ */
+export class LoginStudioInspectorComponent {
+    Design;
+    Selected = null;
+    /** The region the selected block sits in: a card's colors depend on which side of the page it is on. */
+    SelectedRegion = null;
+    /** The selected surface, when no block is selected. */
+    Surface = null;
+    /** A published page or a draft exists, so "Use the stock sign-in page" applies. */
+    CanReset = false;
+    Saving = false;
+    EditRequested = new EventEmitter();
+    CommandRequested = new EventEmitter();
+    StockPageRequested = new EventEmitter();
+    SurfaceSelectRequested = new EventEmitter();
+    Limits = LOGIN_LIMITS;
+    Layouts = LOGIN_LAYOUTS;
+    LayoutLabel = { split: 'Split', 'split-reverse': 'Reversed', centered: 'Centered' };
+    SizeOptions = toggle({ sm: 'Small', md: 'Medium', lg: 'Large' });
+    WidthOptions = toggle({ full: 'Full', half: 'Half', third: 'Third' });
+    RadiusOptions = toggle({ none: 'Square', sm: 'S', md: 'M', lg: 'L', xl: 'XL' });
+    BackgroundOptions = toggle({ brand: 'Brand', color: 'Color', gradient: 'Gradient', image: 'Image' });
+    ToneOptions = toggle({ light: 'Light text', dark: 'Dark text' });
+    AlignmentOptions = toggle({ start: 'Left', center: 'Centered' });
+    BannerShareOptions = toggle({ narrow: 'Narrow', balanced: 'Balanced', wide: 'Wide' });
+    PanelWidthOptions = toggle({ compact: 'Compact', wide: 'Wide' });
+    ColorLabel = LOGIN_COLOR_LABEL;
+    LogoSourceOptions = LOGIN_LOGO_SOURCES.map((s) => ({ Value: s, Label: LOGIN_LOGO_SOURCE_LABEL[s] }));
+    IconOptions = [
+        { Value: '', Label: 'No icon' }, ...Object.entries(LOGIN_CARD_ICONS).map(([Value, Label]) => ({ Value, Label })),
+    ];
+    get SelectedProblems() {
+        return this.Selected ? LoginBlockProblems(this.Selected) : [];
+    }
+    /** Only the warnings about the colors on screen. */
+    get ContrastWarnings() {
+        const keys = this.Colors.map((c) => c.Key);
+        return keys.length ? LoginContrastWarnings(this.Design, keys) : [];
+    }
+    /** The colors of what is selected. Each is one --mj-login-* token, so it is shared across that side of the page. */
+    get Colors() {
+        if (this.Surface === 'Banner')
+            return [{ Key: 'BannerText', Name: 'Text' }];
+        if (this.Surface === 'Panel')
+            return [{ Key: 'PanelBg', Name: 'Background' }, { Key: 'PanelText', Name: 'Text' }];
+        const b = this.Selected;
+        if (!b || !this.SelectedRegion)
+            return [];
+        const onBanner = this.SelectedRegion === 'Banner';
+        if (b.Type === 'card') {
+            return onBanner
+                ? [{ Key: 'BannerCardBg', Name: 'Card background' }, { Key: 'BannerCardText', Name: 'Card text' }]
+                : [{ Key: 'CardBg', Name: 'Card background' }, { Key: 'CardText', Name: 'Card text' }, { Key: 'CardBorder', Name: 'Card border' }];
+        }
+        if (b.Type === 'headline' || b.Type === 'text' || b.Type === 'links') {
+            return [{ Key: onBanner ? 'BannerText' : 'PanelText', Name: 'Text' }];
+        }
+        return [];
+    }
+    /** Says who else a color change reaches, so one card's color repainting the others is no surprise. */
+    get ColorScope() {
+        const b = this.Selected;
+        if (this.Surface || !b || !this.Colors.length)
+            return null;
+        const where = this.SelectedRegion === 'Banner' ? 'the story panel' : 'the sign-in column';
+        return b.Type === 'card' ? `Shared by every card in ${where}.` : `Shared by all the text in ${where}.`;
+    }
+    // The selected block, typed by kind: what each section of the template binds to.
+    get AsLogo() { return this.Selected?.Type === 'logo' ? this.Selected : null; }
+    get AsHeadline() { return this.Selected?.Type === 'headline' ? this.Selected : null; }
+    get AsText() { return this.Selected?.Type === 'text' ? this.Selected : null; }
+    get AsCard() { return this.Selected?.Type === 'card' ? this.Selected : null; }
+    get AsLinks() { return this.Selected?.Type === 'links' ? this.Selected : null; }
+    get AsImage() { return this.Selected?.Type === 'image' ? this.Selected : null; }
+    /** The selected block's size, when its kind comes in sizes (logo, headline, image, spacer). */
+    get SelectedSize() {
+        const b = this.Selected;
+        return b && 'Size' in b ? b.Size : null;
+    }
+    SetBlock(field, value) {
+        this.EditRequested.emit({ Kind: 'Block', Field: field, Value: value });
+    }
+    /** Text that may be cleared: an empty field is stored as null, not ''. */
+    SetBlockOptional(field, value) {
+        this.SetBlock(field, value.trim() ? value : null);
+    }
+    SetLink(index, field, value) {
+        this.EditRequested.emit({ Kind: 'Link', Index: index, Field: field, Value: value });
+    }
+    AddLink() {
+        this.EditRequested.emit({ Kind: 'AddLink' });
+    }
+    RemoveLink(index) {
+        this.EditRequested.emit({ Kind: 'RemoveLink', Index: index });
+    }
+    SetPage(field, value) {
+        this.EditRequested.emit({ Kind: 'Page', Field: field, Value: value });
+    }
+    SetHeading(value) {
+        this.EditRequested.emit({ Kind: 'Heading', Value: value });
+    }
+    SetBackground(field, value) {
+        this.EditRequested.emit({ Kind: 'Background', Field: field, Value: value });
+    }
+    SetColor(key, value) {
+        this.EditRequested.emit({ Kind: 'Color', Key: key, Value: value });
+    }
+    StartColor(key) {
+        this.SetColor(key, StartingLoginColor(this.Design, key));
+    }
+    Run(kind) {
+        if (this.Selected)
+            this.CommandRequested.emit({ Kind: kind, ID: this.Selected.ID });
+    }
+    /** A text input's value, typed, so the template never needs a cast to read it. */
+    ValueOf(e) {
+        return e.target?.value ?? '';
+    }
+    static ɵfac = function LoginStudioInspectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LoginStudioInspectorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoginStudioInspectorComponent, selectors: [["mj-login-studio-inspector"]], inputs: { Design: "Design", Selected: "Selected", SelectedRegion: "SelectedRegion", Surface: "Surface", CanReset: "CanReset", Saving: "Saving" }, outputs: { EditRequested: "EditRequested", CommandRequested: "CommandRequested", StockPageRequested: "StockPageRequested", SurfaceSelectRequested: "SurfaceSelectRequested" }, decls: 7, vars: 1, consts: [["colors", ""], [1, "lsi"], ["role", "group", "aria-label", "Colors", 1, "lsi__colors"], [1, "lsi__section"], [1, "lsi__help"], [1, "lsi__color-row"], ["Variant", "warning", "Size", "sm", "Role", "status"], ["type", "color", 3, "input", "value"], ["type", "text", "maxlength", "7", 1, "mj-input", "lsi__hex", 3, "change", "value"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "title", "Back to the default", 3, "click", "AriaLabel"], [1, "fa-solid", "fa-rotate-left"], [1, "lsi__optional"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 1, "lsi__set", 3, "click", "AriaLabel"], [1, "lsi__list"], [1, "lsi__field"], ["role", "group", "aria-labelledby", "lsi-size", 1, "lsi__field"], ["role", "group", "aria-labelledby", "lsi-width", 1, "lsi__field"], ["id", "lsi-width", 1, "lsi__label"], [3, "KeyChange", "Options", "ActiveKey"], [3, "ngTemplateOutlet"], ["role", "group", "aria-labelledby", "lsi-corners", 1, "lsi__field"], [1, "lsi__switch"], ["AriaLabel", "Hide on small screens", 3, "ngModelChange", "ngModel"], [1, "lsi__row"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click"], [1, "fa-regular", "fa-clone"], [1, "fa-regular", "fa-trash-can"], ["id", "lsi-logo", 1, "lsi__label"], ["TextField", "Label", "ValueField", "Value", "AriaLabelledBy", "lsi-logo", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel"], [1, "lsi__label"], ["type", "text", 1, "mj-input", 3, "input", "value", "maxLength"], ["rows", "4", 1, "mj-textarea", 3, "input", "value", "maxLength"], ["AriaLabel", "Softer color", 3, "ngModelChange", "ngModel"], ["id", "lsi-icon", 1, "lsi__label"], ["TextField", "Label", "ValueField", "Value", "AriaLabelledBy", "lsi-icon", 3, "ngModelChange", "Data", "ValuePrimitive", "ngModel"], ["rows", "2", 1, "mj-textarea", 3, "input", "value", "maxLength"], ["type", "url", "placeholder", "https://\u2026 or mailto:\u2026", 1, "mj-input", 3, "input", "value"], ["AriaLabel", "Open in a new tab", 3, "ngModelChange", "ngModel"], [1, "lsi__link"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["type", "text", "aria-label", "Link label", "placeholder", "Label", 1, "mj-input", 3, "input", "value", "maxLength"], ["type", "url", "aria-label", "Link address", "placeholder", "https://\u2026", 1, "mj-input", 3, "input", "value"], ["type", "button", "mjButton", "", "Variant", "icon", "Size", "sm", "AriaLabel", "Remove link", "title", "Remove link", 3, "click"], ["type", "url", "placeholder", "https://\u2026/picture.png", 1, "mj-input", 3, "input", "value"], ["id", "lsi-size", 1, "lsi__label"], ["id", "lsi-corners", 1, "lsi__label"], ["role", "group", "aria-labelledby", "lsi-bg", 1, "lsi__field"], ["id", "lsi-bg", 1, "lsi__label"], ["role", "group", "aria-labelledby", "lsi-tone", 1, "lsi__field"], ["id", "lsi-tone", 1, "lsi__label"], ["role", "group", "aria-labelledby", "lsi-align", 1, "lsi__field"], ["id", "lsi-align", 1, "lsi__label"], ["role", "group", "aria-labelledby", "lsi-share", 1, "lsi__field"], [1, "lsi__color"], ["type", "color", "aria-label", "Background color", 3, "input", "value"], ["type", "text", "maxlength", "7", "aria-label", "Background color, hex value", 1, "mj-input", "lsi__hex", 3, "change", "value"], ["type", "color", "aria-label", "Gradient start color", 3, "input", "value"], ["type", "text", "maxlength", "7", "aria-label", "Gradient start, hex value", 1, "mj-input", "lsi__hex", 3, "change", "value"], ["type", "color", "aria-label", "Gradient end color", 3, "input", "value"], ["type", "text", "maxlength", "7", "aria-label", "Gradient end, hex value", 1, "mj-input", "lsi__hex", 3, "change", "value"], ["type", "url", "placeholder", "https://\u2026/photo.jpg", 1, "mj-input", 3, "input", "value"], ["id", "lsi-overlay", 1, "lsi__label"], ["AriaLabelledBy", "lsi-overlay", 3, "ngModelChange", "Min", "Max", "Step", "Decimals", "ngModel"], ["id", "lsi-share", 1, "lsi__label"], ["type", "text", "placeholder", "None", 1, "mj-input", 3, "input", "value", "maxLength"], ["role", "group", "aria-labelledby", "lsi-panel-width", 1, "lsi__field"], ["id", "lsi-panel-width", 1, "lsi__label"], ["role", "group", "aria-label", "Layout", 1, "lsi__field"], [1, "lsi__layouts"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 1, "lsi__layout", 3, "Toggleable", "Selected"], ["role", "group", "aria-label", "Parts of the page", 1, "lsi__field"], ["aria-hidden", "true", 1, "fa-solid", "fa-image"], ["aria-hidden", "true", 1, "fa-solid", "fa-right-to-bracket"], [1, "lsi__row", "lsi__row--reset"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 1, "lsi__layout", 3, "click", "Toggleable", "Selected"], ["aria-hidden", "true", 1, "lsi__layout-art"], [1, "fa-solid", "fa-arrow-rotate-left"]], template: function LoginStudioInspectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, LoginStudioInspectorComponent_ng_template_0_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementStart(2, "div", 1);
+            i0.ɵɵconditionalCreate(3, LoginStudioInspectorComponent_Conditional_3_Template, 28, 13)(4, LoginStudioInspectorComponent_Conditional_4_Template, 20, 9)(5, LoginStudioInspectorComponent_Conditional_5_Template, 15, 5)(6, LoginStudioInspectorComponent_Conditional_6_Template, 19, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional((tmp_1_0 = ctx.Selected) ? 3 : ctx.Surface === "Banner" ? 4 : ctx.Surface === "Panel" ? 5 : 6, tmp_1_0);
+        } }, dependencies: [FormsModule, i1.NgControlStatus, i1.NgModel, NgTemplateOutlet, MJAlertComponent, MJButtonDirective, MJDropdownComponent, MJNumericInputComponent, MJSwitchComponent,
+            MJViewToggleComponent], styles: ["\n\n[_nghost-%COMP%] { display: block; }\n\n\n.lsi[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-4) var(--mj-space-6);\n}\n\n.lsi__field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n}\n.lsi__field[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.lsi__field[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%] { font-weight: var(--mj-font-normal); }\n.lsi__label[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--mj-space-2);\n}\n.lsi__optional[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-normal);\n  color: var(--mj-text-muted);\n}\n.lsi__section[_ngcontent-%COMP%] {\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.lsi__help[_ngcontent-%COMP%] {\n  margin: calc(-1 * var(--mj-space-2)) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.lsi__switch[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.lsi__row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n}\n.lsi__row--reset[_ngcontent-%COMP%] {\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.lsi__list[_ngcontent-%COMP%] {\n  margin: 0;\n  padding-left: var(--mj-space-4);\n}\n.lsi__list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] { margin-top: var(--mj-space-1); }\n\n.lsi__link[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1.4fr auto;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n\n.lsi__colors[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n}\n\n.lsi__colors[_ngcontent-%COMP%]:not(:first-child) {\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n.lsi__color-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto auto;\n  gap: var(--mj-space-2);\n  align-items: center;\n  font-weight: var(--mj-font-normal);\n}\n.lsi__color[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n.lsi__color[_ngcontent-%COMP%]   input[type='color'][_ngcontent-%COMP%], \n.lsi__color-row[_ngcontent-%COMP%]   input[type='color'][_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 2rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: none;\n}\n.lsi__hex[_ngcontent-%COMP%] {\n  width: 6rem;\n  font-family: var(--mj-font-family-mono);\n}\n.lsi__set[_ngcontent-%COMP%] { grid-column: 3 / -1; justify-self: end; }\n\n\n.lsi__layouts[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2);\n}\n\n.lsi__layout[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n}\n\n\n.lsi__layout-art[_ngcontent-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  overflow: hidden;\n  border: 1px solid currentColor;\n  border-radius: var(--mj-radius-sm);\n}\n.lsi__layout-art[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-child { flex: 1.05; background: color-mix(in srgb, currentColor 65%, transparent); }\n.lsi__layout-art[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:last-child { flex: 1; }\n.lsi__layout-art[data-layout='split-reverse'][_ngcontent-%COMP%] { flex-direction: row-reverse; }\n.lsi__layout-art[data-layout='centered'][_ngcontent-%COMP%] {\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, currentColor 65%, transparent);\n}\n.lsi__layout-art[data-layout='centered'][_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-child { display: none; }\n.lsi__layout-art[data-layout='centered'][_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:last-child {\n  flex: 0 0 40%;\n  height: 70%;\n  border: 1px solid currentColor;\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoginStudioInspectorComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-login-studio-inspector', imports: [
+                    FormsModule, NgTemplateOutlet, MJAlertComponent, MJButtonDirective, MJDropdownComponent, MJNumericInputComponent, MJSwitchComponent,
+                    MJViewToggleComponent,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The colors of whatever is selected: only the ones it uses (Colors), with the contrast warnings about them. -->\n<ng-template #colors>\n  @if (Colors.length) {\n    <div class=\"lsi__colors\" role=\"group\" aria-label=\"Colors\">\n      <span class=\"lsi__section\">Colors</span>\n      @if (ColorScope; as scope) { <p class=\"lsi__help\">{{ scope }}</p> }\n      @for (k of Colors; track k.Key) {\n        <div class=\"lsi__color-row\">\n          <span>{{ k.Name }}</span>\n          @if (Design.Colors[k.Key]; as c) {\n            <input type=\"color\" [value]=\"c\" [attr.aria-label]=\"ColorLabel[k.Key]\" (input)=\"SetColor(k.Key, ValueOf($event))\" />\n            <input class=\"mj-input lsi__hex\" type=\"text\" maxlength=\"7\" [value]=\"c\" [attr.aria-label]=\"ColorLabel[k.Key] + ', hex value'\" (change)=\"SetColor(k.Key, ValueOf($event))\" />\n            <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" title=\"Back to the default\" [AriaLabel]=\"'Reset ' + ColorLabel[k.Key] + ' to the default'\" (click)=\"SetColor(k.Key, null)\"><i class=\"fa-solid fa-rotate-left\"></i></button>\n          } @else {\n            <span class=\"lsi__optional\">Default</span>\n            <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" class=\"lsi__set\" [AriaLabel]=\"'Choose a custom ' + ColorLabel[k.Key]\" (click)=\"StartColor(k.Key)\">Choose</button>\n          }\n        </div>\n      }\n      <p class=\"lsi__help\">Default follows the theme. A color you choose stays the same in light and dark mode.</p>\n      @if (ContrastWarnings.length) {\n        <mj-alert Variant=\"warning\" Size=\"sm\" Role=\"status\">\n          <ul class=\"lsi__list\">\n            @for (w of ContrastWarnings; track $index) { <li>{{ w }}</li> }\n          </ul>\n        </mj-alert>\n      }\n    </div>\n  }\n</ng-template>\n\n<div class=\"lsi\">\n  @if (Selected; as sel) {\n    <!-- A BLOCK -->\n    @if (SelectedProblems.length) {\n      <mj-alert Variant=\"warning\" Size=\"sm\" Role=\"status\">\n        <ul class=\"lsi__list\">\n          @for (p of SelectedProblems; track $index) { <li>{{ p }}</li> }\n        </ul>\n      </mj-alert>\n    }\n\n    @if (AsLogo; as b) {\n      <div class=\"lsi__field\"><span class=\"lsi__label\" id=\"lsi-logo\">Which logo</span>\n        <mj-dropdown [Data]=\"LogoSourceOptions\" TextField=\"Label\" ValueField=\"Value\" [ValuePrimitive]=\"true\" AriaLabelledBy=\"lsi-logo\"\n                     [ngModel]=\"b.Source\" (ngModelChange)=\"SetBlock('Source', $event)\"></mj-dropdown>\n      </div>\n      <p class=\"lsi__help\">Logos come from the default theme in Theme Studio. A variant that is not set falls back to the light mark, and a theme with no logos shows the stock one.</p>\n    }\n\n    @if (AsHeadline; as b) {\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Headline</span>\n        <input class=\"mj-input\" type=\"text\" [value]=\"b.Text\" [maxLength]=\"Limits.Headline\" (input)=\"SetBlock('Text', ValueOf($event))\" />\n      </label>\n    }\n\n    @if (AsText; as b) {\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Text</span>\n        <textarea class=\"mj-textarea\" rows=\"4\" [value]=\"b.Text\" [maxLength]=\"Limits.Text\" (input)=\"SetBlock('Text', ValueOf($event))\"></textarea>\n      </label>\n      <div class=\"lsi__switch\"><mj-switch AriaLabel=\"Softer color\" [ngModel]=\"b.Muted\" (ngModelChange)=\"SetBlock('Muted', $event)\"></mj-switch> Softer color</div>\n    }\n\n    @if (AsCard; as b) {\n      <div class=\"lsi__field\"><span class=\"lsi__label\" id=\"lsi-icon\">Icon</span>\n        <mj-dropdown [Data]=\"IconOptions\" TextField=\"Label\" ValueField=\"Value\" [ValuePrimitive]=\"true\" AriaLabelledBy=\"lsi-icon\"\n                     [ngModel]=\"b.Icon ?? ''\" (ngModelChange)=\"SetBlockOptional('Icon', $event)\"></mj-dropdown>\n      </div>\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Title</span>\n        <input class=\"mj-input\" type=\"text\" [value]=\"b.Title\" [maxLength]=\"Limits.CardTitle\" (input)=\"SetBlock('Title', ValueOf($event))\" />\n      </label>\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Note <span class=\"lsi__optional\">optional</span></span>\n        <textarea class=\"mj-textarea\" rows=\"2\" [value]=\"b.Text ?? ''\" [maxLength]=\"Limits.CardText\" (input)=\"SetBlockOptional('Text', ValueOf($event))\"></textarea>\n      </label>\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Link <span class=\"lsi__optional\">optional</span></span>\n        <input class=\"mj-input\" type=\"url\" placeholder=\"https://\u2026 or mailto:\u2026\" [value]=\"b.Href ?? ''\" (input)=\"SetBlockOptional('Href', ValueOf($event).trim())\" />\n      </label>\n      <div class=\"lsi__switch\"><mj-switch AriaLabel=\"Open in a new tab\" [ngModel]=\"b.NewTab\" (ngModelChange)=\"SetBlock('NewTab', $event)\"></mj-switch> Open in a new tab (keeps the sign-in page open)</div>\n    }\n\n    @if (AsLinks; as b) {\n      @for (l of b.Links; track $index; let i = $index) {\n        <div class=\"lsi__link\">\n          <input class=\"mj-input\" type=\"text\" aria-label=\"Link label\" placeholder=\"Label\" [value]=\"l.Label\" [maxLength]=\"Limits.LinkLabel\" (input)=\"SetLink(i, 'Label', ValueOf($event))\" />\n          <input class=\"mj-input\" type=\"url\" aria-label=\"Link address\" placeholder=\"https://\u2026\" [value]=\"l.Href\" (input)=\"SetLink(i, 'Href', ValueOf($event).trim())\" />\n          <button type=\"button\" mjButton Variant=\"icon\" Size=\"sm\" AriaLabel=\"Remove link\" title=\"Remove link\" (click)=\"RemoveLink(i)\"><i class=\"fa-regular fa-trash-can\"></i></button>\n        </div>\n      }\n      <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"AddLink()\" [disabled]=\"b.Links.length >= Limits.Links\"><i class=\"fa-solid fa-plus\"></i> Add link</button>\n    }\n\n    @if (AsImage; as b) {\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Image address</span>\n        <input class=\"mj-input\" type=\"url\" placeholder=\"https://\u2026/picture.png\" [value]=\"b.URL\" (input)=\"SetBlock('URL', ValueOf($event).trim())\" />\n      </label>\n      <label class=\"lsi__field\"><span class=\"lsi__label\">Description for screen readers</span>\n        <input class=\"mj-input\" type=\"text\" [value]=\"b.Alt\" [maxLength]=\"Limits.Alt\" (input)=\"SetBlock('Alt', ValueOf($event))\" />\n      </label>\n    }\n\n    @if (SelectedSize; as size) {\n      <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-size\"><span class=\"lsi__label\" id=\"lsi-size\">Size</span>\n        <mj-view-toggle [Options]=\"SizeOptions\" [ActiveKey]=\"size\" (KeyChange)=\"SetBlock('Size', $event)\"></mj-view-toggle>\n      </div>\n    }\n\n    <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-width\"><span class=\"lsi__label\" id=\"lsi-width\">Width</span>\n      <mj-view-toggle [Options]=\"WidthOptions\" [ActiveKey]=\"sel.Width\" (KeyChange)=\"SetBlock('Width', $event)\"></mj-view-toggle>\n    </div>\n    <p class=\"lsi__help\">Half or Third puts two or three blocks side by side. On a phone each block takes its own row.</p>\n\n    <ng-container [ngTemplateOutlet]=\"colors\"></ng-container>\n\n    @if (AsCard) {\n      <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-corners\"><span class=\"lsi__label\" id=\"lsi-corners\">Corners <span class=\"lsi__optional\">every card</span></span>\n        <mj-view-toggle [Options]=\"RadiusOptions\" [ActiveKey]=\"Design.CardRadius\" (KeyChange)=\"SetPage('CardRadius', $event)\"></mj-view-toggle>\n      </div>\n    }\n\n    <div class=\"lsi__switch\"><mj-switch AriaLabel=\"Hide on small screens\" [ngModel]=\"sel.HideWhenStacked\" (ngModelChange)=\"SetBlock('HideWhenStacked', $event)\"></mj-switch> Hide on small screens</div>\n    <p class=\"lsi__help\">Tablets and phones show a short banner above the sign-in options, so keep it to the essentials.</p>\n\n    <div class=\"lsi__row\">\n      <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"Run('duplicate')\"><i class=\"fa-regular fa-clone\"></i> Duplicate</button>\n      <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"Run('delete')\"><i class=\"fa-regular fa-trash-can\"></i> Delete</button>\n    </div>\n\n  } @else if (Surface === 'Banner') {\n    <!-- THE STORY PANEL -->\n    <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-bg\"><span class=\"lsi__label\" id=\"lsi-bg\">Background</span>\n      <mj-view-toggle [Options]=\"BackgroundOptions\" [ActiveKey]=\"Design.Background.Kind\" (KeyChange)=\"SetBackground('Kind', $event)\"></mj-view-toggle>\n    </div>\n    @switch (Design.Background.Kind) {\n      @case ('brand') { <p class=\"lsi__help\">The default theme's brand gradient, from Theme Studio.</p> }\n      @case ('color') {\n        <div class=\"lsi__field\"><span class=\"lsi__label\">Color</span>\n          <span class=\"lsi__color\">\n            <input type=\"color\" aria-label=\"Background color\" [value]=\"Design.Background.Color ?? ''\" (input)=\"SetBackground('Color', ValueOf($event))\" />\n            <input class=\"mj-input lsi__hex\" type=\"text\" maxlength=\"7\" aria-label=\"Background color, hex value\" [value]=\"Design.Background.Color ?? ''\" (change)=\"SetBackground('Color', ValueOf($event))\" />\n          </span>\n        </div>\n      }\n      @case ('gradient') {\n        <div class=\"lsi__field\"><span class=\"lsi__label\">From</span>\n          <span class=\"lsi__color\">\n            <input type=\"color\" aria-label=\"Gradient start color\" [value]=\"Design.Background.Color ?? ''\" (input)=\"SetBackground('Color', ValueOf($event))\" />\n            <input class=\"mj-input lsi__hex\" type=\"text\" maxlength=\"7\" aria-label=\"Gradient start, hex value\" [value]=\"Design.Background.Color ?? ''\" (change)=\"SetBackground('Color', ValueOf($event))\" />\n          </span>\n        </div>\n        <div class=\"lsi__field\"><span class=\"lsi__label\">To</span>\n          <span class=\"lsi__color\">\n            <input type=\"color\" aria-label=\"Gradient end color\" [value]=\"Design.Background.Color2 ?? ''\" (input)=\"SetBackground('Color2', ValueOf($event))\" />\n            <input class=\"mj-input lsi__hex\" type=\"text\" maxlength=\"7\" aria-label=\"Gradient end, hex value\" [value]=\"Design.Background.Color2 ?? ''\" (change)=\"SetBackground('Color2', ValueOf($event))\" />\n          </span>\n        </div>\n      }\n      @case ('image') {\n        <label class=\"lsi__field\"><span class=\"lsi__label\">Image address</span>\n          <input class=\"mj-input\" type=\"url\" placeholder=\"https://\u2026/photo.jpg\" [value]=\"Design.Background.ImageURL ?? ''\" (input)=\"SetBackground('ImageURL', ValueOf($event))\" />\n        </label>\n        <div class=\"lsi__field\"><span class=\"lsi__label\" id=\"lsi-overlay\">Darken the image (%)</span>\n          <mj-numeric-input [Min]=\"0\" [Max]=\"Limits.OverlayMax\" [Step]=\"5\" [Decimals]=\"0\" AriaLabelledBy=\"lsi-overlay\"\n                            [ngModel]=\"Design.Background.Overlay\" (ngModelChange)=\"SetBackground('Overlay', $event)\"></mj-numeric-input>\n        </div>\n      }\n    }\n\n    <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-tone\"><span class=\"lsi__label\" id=\"lsi-tone\">Light or dark text</span>\n      <mj-view-toggle [Options]=\"ToneOptions\" [ActiveKey]=\"Design.Tone\" (KeyChange)=\"SetPage('Tone', $event)\"></mj-view-toggle>\n    </div>\n\n    <ng-container [ngTemplateOutlet]=\"colors\"></ng-container>\n\n    <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-align\"><span class=\"lsi__label\" id=\"lsi-align\">Alignment</span>\n      <mj-view-toggle [Options]=\"AlignmentOptions\" [ActiveKey]=\"Design.Alignment\" (KeyChange)=\"SetPage('Alignment', $event)\"></mj-view-toggle>\n    </div>\n\n    @if (Design.Layout !== 'centered') {\n      <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-share\"><span class=\"lsi__label\" id=\"lsi-share\">Width</span>\n        <mj-view-toggle [Options]=\"BannerShareOptions\" [ActiveKey]=\"Design.BannerShare\" (KeyChange)=\"SetPage('BannerShare', $event)\"></mj-view-toggle>\n      </div>\n    }\n\n    <p class=\"lsi__help\">To change the color of the cards here, select one.</p>\n\n  } @else if (Surface === 'Panel') {\n    <!-- THE SIGN-IN COLUMN -->\n    <ng-container [ngTemplateOutlet]=\"colors\"></ng-container>\n    <p class=\"lsi__help\">The sign-in button uses the default theme's brand color.</p>\n\n    <label class=\"lsi__field\"><span class=\"lsi__label\">Heading above the sign-in options <span class=\"lsi__optional\">optional</span></span>\n      <input class=\"mj-input\" type=\"text\" placeholder=\"None\" [value]=\"Design.Heading ?? ''\" [maxLength]=\"Limits.Heading\" (input)=\"SetHeading(ValueOf($event))\" />\n    </label>\n\n    <div class=\"lsi__field\" role=\"group\" aria-labelledby=\"lsi-panel-width\"><span class=\"lsi__label\" id=\"lsi-panel-width\">Width</span>\n      <mj-view-toggle [Options]=\"PanelWidthOptions\" [ActiveKey]=\"Design.PanelWidth\" (KeyChange)=\"SetPage('PanelWidth', $event)\"></mj-view-toggle>\n    </div>\n\n    <p class=\"lsi__help\">To change the color of the cards here, select one.</p>\n\n  } @else {\n    <!-- THE PAGE -->\n    <div class=\"lsi__field\" role=\"group\" aria-label=\"Layout\"><span class=\"lsi__label\">Layout</span>\n      <div class=\"lsi__layouts\">\n        @for (l of Layouts; track l) {\n          <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" class=\"lsi__layout\" [Toggleable]=\"true\" [Selected]=\"Design.Layout === l\"\n                  (click)=\"SetPage('Layout', l)\">\n            <span class=\"lsi__layout-art\" [attr.data-layout]=\"l\" aria-hidden=\"true\"><span></span><span></span></span>\n            {{ LayoutLabel[l] }}\n          </button>\n        }\n      </div>\n    </div>\n\n    <div class=\"lsi__field\" role=\"group\" aria-label=\"Parts of the page\"><span class=\"lsi__label\">Change a part of the page</span>\n      <div class=\"lsi__row\">\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"SurfaceSelectRequested.emit('Banner')\"><i class=\"fa-solid fa-image\" aria-hidden=\"true\"></i> Story panel</button>\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"SurfaceSelectRequested.emit('Panel')\"><i class=\"fa-solid fa-right-to-bracket\" aria-hidden=\"true\"></i> Sign-in column</button>\n      </div>\n    </div>\n    <p class=\"lsi__help\">Or click it in the preview (the story panel, the sign-in column or any block) to see its settings and colors. Alt+\u2191/\u2193 moves the focused block; Delete removes it.</p>\n\n    @if (CanReset) {\n      <div class=\"lsi__row lsi__row--reset\">\n        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"StockPageRequested.emit()\" [disabled]=\"Saving\">\n          <i class=\"fa-solid fa-arrow-rotate-left\"></i> Use the stock sign-in page\n        </button>\n      </div>\n    }\n  }\n</div>\n", styles: ["/* Login Studio's settings column: layout around MJ's own controls, plus the layout thumbnails and color rows. */\n\n:host { display: block; }\n\n/* The settings column pads nothing itself; a form needs its own gutter. */\n.lsi {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-4);\n  padding: var(--mj-space-4) var(--mj-space-4) var(--mj-space-6);\n}\n\n.lsi__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n}\n.lsi__field .mj-input,\n.lsi__field .mj-textarea { font-weight: var(--mj-font-normal); }\n.lsi__label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--mj-space-2);\n}\n.lsi__optional {\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-normal);\n  color: var(--mj-text-muted);\n}\n.lsi__section {\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.lsi__help {\n  margin: calc(-1 * var(--mj-space-2)) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.lsi__switch {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.lsi__row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-2);\n}\n.lsi__row--reset {\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.lsi__list {\n  margin: 0;\n  padding-left: var(--mj-space-4);\n}\n.lsi__list li + li { margin-top: var(--mj-space-1); }\n\n.lsi__link {\n  display: grid;\n  grid-template-columns: 1fr 1.4fr auto;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n/* \u2500\u2500 colors \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.lsi__colors {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  font-size: var(--mj-text-sm);\n}\n/* A divider only when the colors follow other settings (the sign-in column opens on them). */\n.lsi__colors:not(:first-child) {\n  padding-top: var(--mj-space-3);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n.lsi__color-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto auto;\n  gap: var(--mj-space-2);\n  align-items: center;\n  font-weight: var(--mj-font-normal);\n}\n.lsi__color {\n  display: flex;\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n.lsi__color input[type='color'],\n.lsi__color-row input[type='color'] {\n  flex: 0 0 auto;\n  width: 2rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: none;\n}\n.lsi__hex {\n  width: 6rem;\n  font-family: var(--mj-font-family-mono);\n}\n.lsi__set { grid-column: 3 / -1; justify-self: end; }\n\n/* \u2500\u2500 layout thumbnails \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.lsi__layouts {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--mj-space-2);\n}\n/* Layout only: the button's look is mjButton's. */\n.lsi__layout {\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n}\n/* A thumbnail of each layout, in the button's own text color so it reads selected or not: the story\n   panel filled, the sign-in column outlined. */\n.lsi__layout-art {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  overflow: hidden;\n  border: 1px solid currentColor;\n  border-radius: var(--mj-radius-sm);\n}\n.lsi__layout-art span:first-child { flex: 1.05; background: color-mix(in srgb, currentColor 65%, transparent); }\n.lsi__layout-art span:last-child { flex: 1; }\n.lsi__layout-art[data-layout='split-reverse'] { flex-direction: row-reverse; }\n.lsi__layout-art[data-layout='centered'] {\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, currentColor 65%, transparent);\n}\n.lsi__layout-art[data-layout='centered'] span:first-child { display: none; }\n.lsi__layout-art[data-layout='centered'] span:last-child {\n  flex: 0 0 40%;\n  height: 70%;\n  border: 1px solid currentColor;\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n}\n"] }]
+    }], null, { Design: [{
+            type: Input
+        }], Selected: [{
+            type: Input
+        }], SelectedRegion: [{
+            type: Input
+        }], Surface: [{
+            type: Input
+        }], CanReset: [{
+            type: Input
+        }], Saving: [{
+            type: Input
+        }], EditRequested: [{
+            type: Output
+        }], CommandRequested: [{
+            type: Output
+        }], StockPageRequested: [{
+            type: Output
+        }], SurfaceSelectRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoginStudioInspectorComponent, { className: "LoginStudioInspectorComponent", filePath: "src/LoginStudio/login-studio-inspector.component.ts", lineNumber: 57 }); })();
+//# sourceMappingURL=login-studio-inspector.component.js.map