@memberjunction/ng-dashboards 3.2.0 → 3.4.0

package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js

@@ -0,0 +1,221 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/component-studio-state.service";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@progress/kendo-angular-buttons";
+function DataRequirementsEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4)(1, "button", 8);
+    i0.ɵɵlistener("click", function DataRequirementsEditorComponent_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ApplyChanges()); });
+    i0.ɵɵelement(2, "i", 9);
+    i0.ɵɵtext(3, " Apply Changes ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 8);
+    i0.ɵɵlistener("click", function DataRequirementsEditorComponent_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
+    i0.ɵɵelement(5, "i", 10);
+    i0.ɵɵtext(6, " Cancel ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("themeColor", "primary");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("themeColor", "base");
+} }
+function DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "span", 13);
+    i0.ɵɵelement(2, "i", 14);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 13);
+    i0.ɵɵelement(5, "i", 15);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 16);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.EntityCount, " ", ctx_r1.EntityCount === 1 ? "entity" : "entities", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.QueryCount, " ", ctx_r1.QueryCount === 1 ? "query" : "queries", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.DataMode, " ");
+} }
+function DataRequirementsEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵtemplate(0, DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template, 9, 5, "div", 11);
+    i0.ɵɵelementStart(1, "div", 6)(2, "mj-code-editor", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.HasDataRequirements ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditableContent);
+    i0.ɵɵproperty("language", "json")("indentWithTab", true)("placeholder", "Enter data requirements JSON...");
+} }
+function DataRequirementsEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Select a component to edit its data requirements.");
+    i0.ɵɵelementEnd()();
+} }
+export class DataRequirementsEditorComponent {
+    State;
+    cdr;
+    EditableContent = '';
+    IsEditing = false;
+    _parsedRequirements = null;
+    constructor(State, cdr) {
+        this.State = State;
+        this.cdr = cdr;
+    }
+    get HasDataRequirements() {
+        return this._parsedRequirements != null;
+    }
+    get EntityCount() {
+        if (!this._parsedRequirements)
+            return 0;
+        const entities = this._parsedRequirements['entities'];
+        return Array.isArray(entities) ? entities.length : 0;
+    }
+    get QueryCount() {
+        if (!this._parsedRequirements)
+            return 0;
+        const queries = this._parsedRequirements['queries'];
+        return Array.isArray(queries) ? queries.length : 0;
+    }
+    get DataMode() {
+        if (!this._parsedRequirements)
+            return '';
+        return this._parsedRequirements['mode'] || 'views';
+    }
+    ngOnInit() {
+        this.loadContent();
+        this.State.StateChanged.subscribe(() => {
+            this.loadContent();
+            this.cdr.detectChanges();
+        });
+    }
+    OnContentChanged() {
+        this.IsEditing = true;
+        this.parseContent();
+    }
+    ApplyChanges() {
+        try {
+            const spec = JSON.parse(this.State.EditableSpec);
+            const dataReq = JSON.parse(this.EditableContent);
+            spec.dataRequirements = dataReq;
+            this.State.UpdateSpec(spec);
+            this.IsEditing = false;
+        }
+        catch (error) {
+            console.error('Error applying data requirements changes:', error);
+        }
+    }
+    CancelChanges() {
+        this.loadContent();
+        this.IsEditing = false;
+        this.cdr.detectChanges();
+    }
+    loadContent() {
+        try {
+            const spec = JSON.parse(this.State.EditableSpec);
+            const dataReq = spec.dataRequirements || { mode: 'views', entities: [], queries: [] };
+            this.EditableContent = JSON.stringify(dataReq, null, 2);
+            this.parseContent();
+        }
+        catch {
+            this.EditableContent = '';
+            this._parsedRequirements = null;
+        }
+    }
+    parseContent() {
+        try {
+            this._parsedRequirements = JSON.parse(this.EditableContent);
+        }
+        catch {
+            this._parsedRequirements = null;
+        }
+    }
+    static ɵfac = function DataRequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataRequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataRequirementsEditorComponent, selectors: [["mj-data-requirements-editor"]], decls: 9, vars: 2, consts: [[1, "data-requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "action-buttons"], [1, "editor-body"], [1, "json-editor-container"], [1, "empty-state"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], [1, "summary-bar"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [1, "summary-item"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-search"], [1, "summary-item", "mode-badge"]], template: function DataRequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " Data Requirements ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(5, DataRequirementsEditorComponent_Conditional_5_Template, 7, 2, "div", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 5);
+            i0.ɵɵtemplate(7, DataRequirementsEditorComponent_Conditional_7_Template, 3, 5, "div", 6)(8, DataRequirementsEditorComponent_Conditional_8_Template, 4, 0, "div", 7);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.IsEditing ? 5 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.State.SelectedComponent ? 7 : 8);
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.ButtonComponent], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface-container-lowest);\n      flex-shrink: 0;\n    }\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mat-sys-on-surface);\n    }\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mat-sys-on-surface-variant);\n    }\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: var(--mat-sys-primary-container);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      font-size: 12px;\n      color: var(--mat-sys-on-primary-container);\n      flex-shrink: 0;\n    }\n    .summary-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge[_ngcontent-%COMP%] {\n      background: var(--mat-sys-surface-container-high);\n      color: var(--mat-sys-on-surface);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n      flex: 1;\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataRequirementsEditorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-data-requirements-editor', template: `
+    <div class="data-requirements-editor">
+      <div class="editor-header">
+        <span class="header-title">
+          <i class="fa-solid fa-database"></i>
+          Data Requirements
+        </span>
+        @if (IsEditing) {
+          <div class="action-buttons">
+            <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()">
+              <i class="fa-solid fa-check"></i> Apply Changes
+            </button>
+            <button kendoButton [themeColor]="'base'" (click)="CancelChanges()">
+              <i class="fa-solid fa-times"></i> Cancel
+            </button>
+          </div>
+        }
+      </div>
+
+      <div class="editor-body">
+        @if (State.SelectedComponent) {
+          @if (HasDataRequirements) {
+            <div class="summary-bar">
+              <span class="summary-item">
+                <i class="fa-solid fa-table"></i>
+                {{ EntityCount }} {{ EntityCount === 1 ? 'entity' : 'entities' }}
+              </span>
+              <span class="summary-item">
+                <i class="fa-solid fa-search"></i>
+                {{ QueryCount }} {{ QueryCount === 1 ? 'query' : 'queries' }}
+              </span>
+              <span class="summary-item mode-badge">
+                {{ DataMode }}
+              </span>
+            </div>
+          }
+          <div class="json-editor-container">
+            <mj-code-editor
+              [(ngModel)]="EditableContent"
+              [language]="'json'"
+              [indentWithTab]="true"
+              [placeholder]="'Enter data requirements JSON...'"
+              (ngModelChange)="OnContentChanged()">
+            </mj-code-editor>
+          </div>
+        } @else {
+          <div class="empty-state">
+            <i class="fa-solid fa-database"></i>
+            <p>Select a component to edit its data requirements.</p>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    .data-requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface-container-lowest);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mat-sys-on-surface);\n    }\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mat-sys-on-surface-variant);\n    }\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: var(--mat-sys-primary-container);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      font-size: 12px;\n      color: var(--mat-sys-on-primary-container);\n      flex-shrink: 0;\n    }\n    .summary-item {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge {\n      background: var(--mat-sys-surface-container-high);\n      color: var(--mat-sys-on-surface);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n      flex: 1;\n    }\n    .empty-state i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  "] }]
+    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataRequirementsEditorComponent, { className: "DataRequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/data-requirements-editor.component.ts", lineNumber: 147 }); })();
+//# sourceMappingURL=data-requirements-editor.component.js.map

package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/data-requirements-editor.component.ts"],"names":[],"mappings":"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"}

package/dist/ComponentStudio/components/editors/requirements-editor.component.d.ts

@@ -0,0 +1,28 @@
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ComponentStudioStateService } from '../../services/component-studio-state.service';
+import * as i0 from "@angular/core";
+type RequirementsField = 'functionalRequirements' | 'technicalDesign';
+type EditorMode = 'preview' | 'edit';
+export declare class RequirementsEditorComponent implements OnInit, OnDestroy {
+    State: ComponentStudioStateService;
+    private cdr;
+    Field: RequirementsField;
+    Title: string;
+    EditableContent: string;
+    IsEditing: boolean;
+    ViewMode: EditorMode;
+    private stateChangedSub;
+    constructor(State: ComponentStudioStateService, cdr: ChangeDetectorRef);
+    get FieldIcon(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    SetViewMode(mode: EditorMode): void;
+    OnContentChanged(): void;
+    ApplyChanges(): void;
+    CancelChanges(): void;
+    private loadContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RequirementsEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RequirementsEditorComponent, "mj-requirements-editor", never, { "Field": { "alias": "Field"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; }, {}, never, never, false, never>;
+}
+export {};
+//# sourceMappingURL=requirements-editor.component.d.ts.map

package/dist/ComponentStudio/components/editors/requirements-editor.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"requirements-editor.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/requirements-editor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;;AAG5F,KAAK,iBAAiB,GAAG,wBAAwB,GAAG,iBAAiB,CAAC;AACtE,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,qBA6Oa,2BAA4B,YAAW,MAAM,EAAE,SAAS;IAW1D,KAAK,EAAE,2BAA2B;IACzC,OAAO,CAAC,GAAG;IAXJ,KAAK,EAAE,iBAAiB,CAA4B;IACpD,KAAK,EAAE,MAAM,CAA6B;IAEnD,eAAe,EAAE,MAAM,CAAM;IAC7B,SAAS,EAAE,OAAO,CAAS;IAC3B,QAAQ,EAAE,UAAU,CAAa;IAEjC,OAAO,CAAC,eAAe,CAA6B;gBAG3C,KAAK,EAAE,2BAA2B,EACjC,GAAG,EAAE,iBAAiB;IAGhC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,QAAQ,IAAI,IAAI;IAUhB,WAAW,IAAI,IAAI;IAOnB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAKnC,gBAAgB,IAAI,IAAI;IAIxB,YAAY,IAAI,IAAI;IAYpB,aAAa,IAAI,IAAI;IAOrB,OAAO,CAAC,WAAW;yCAhER,2BAA2B;2CAA3B,2BAA2B;CAwEvC"}

package/dist/ComponentStudio/components/editors/requirements-editor.component.js

@@ -0,0 +1,263 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/component-studio-state.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@memberjunction/ng-markdown";
+function RequirementsEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "button", 12);
+    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ApplyChanges()); });
+    i0.ɵɵelement(2, "i", 13);
+    i0.ɵɵtext(3, " Apply ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 12);
+    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
+    i0.ɵɵtext(5, " Cancel ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("themeColor", "primary");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("themeColor", "base");
+} }
+function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-markdown", 16);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("data", ctx_r1.EditableContent)("enableCodeCopy", true);
+} }
+function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "lowercase");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 19);
+    i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SetViewMode("edit")); });
+    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵtext(7, " Start writing ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("No ", i0.ɵɵpipeBind1(4, 1, ctx_r1.Title), " defined yet.");
+} }
+function RequirementsEditorComponent_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtemplate(1, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template, 1, 2, "mj-markdown", 16)(2, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template, 8, 3, "div", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditableContent ? 1 : 2);
+} }
+function RequirementsEditorComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "mj-code-editor", 20);
+    i0.ɵɵtwoWayListener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditableContent);
+    i0.ɵɵproperty("language", "markdown")("indentWithTab", true)("placeholder", "Enter " + ctx_r1.Title + " in markdown format...");
+} }
+function RequirementsEditorComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, RequirementsEditorComponent_Conditional_15_Conditional_0_Template, 3, 1, "div", 14)(1, RequirementsEditorComponent_Conditional_15_Conditional_1_Template, 2, 4, "div", 15);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.ViewMode === "preview" ? 0 : 1);
+} }
+function RequirementsEditorComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "lowercase");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Select a component to view its ", i0.ɵɵpipeBind1(4, 1, ctx_r1.Title), ".");
+} }
+export class RequirementsEditorComponent {
+    State;
+    cdr;
+    Field = 'functionalRequirements';
+    Title = 'Functional Requirements';
+    EditableContent = '';
+    IsEditing = false;
+    ViewMode = 'preview';
+    stateChangedSub = null;
+    constructor(State, cdr) {
+        this.State = State;
+        this.cdr = cdr;
+    }
+    get FieldIcon() {
+        return this.Field === 'functionalRequirements' ? 'fa-clipboard-list' : 'fa-drafting-compass';
+    }
+    ngOnInit() {
+        this.loadContent();
+        this.stateChangedSub = this.State.StateChanged.subscribe(() => {
+            if (!this.IsEditing) {
+                this.loadContent();
+            }
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.stateChangedSub) {
+            this.stateChangedSub.unsubscribe();
+            this.stateChangedSub = null;
+        }
+    }
+    SetViewMode(mode) {
+        this.ViewMode = mode;
+        this.cdr.detectChanges();
+    }
+    OnContentChanged() {
+        this.IsEditing = true;
+    }
+    ApplyChanges() {
+        try {
+            const spec = JSON.parse(this.State.EditableSpec);
+            spec[this.Field] = this.EditableContent;
+            this.State.UpdateSpec(spec);
+            this.IsEditing = false;
+            this.ViewMode = 'preview';
+        }
+        catch (error) {
+            console.error('Error applying requirements changes:', error);
+        }
+    }
+    CancelChanges() {
+        this.loadContent();
+        this.IsEditing = false;
+        this.ViewMode = 'preview';
+        this.cdr.detectChanges();
+    }
+    loadContent() {
+        try {
+            const spec = JSON.parse(this.State.EditableSpec);
+            this.EditableContent = spec[this.Field] || '';
+        }
+        catch {
+            this.EditableContent = '';
+        }
+    }
+    static ɵfac = function RequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RequirementsEditorComponent, selectors: [["mj-requirements-editor"]], inputs: { Field: "Field", Title: "Title" }, decls: 17, vars: 8, consts: [[1, "requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", 3, "ngClass"], [1, "header-right"], [1, "action-buttons"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pencil"], [1, "editor-body"], [1, "empty-state"], ["kendoButton", "", 1, "action-btn", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "preview-container"], [1, "code-editor-container"], [3, "data", "enableCodeCopy"], [1, "empty-preview"], [1, "fa-solid", "fa-file-lines"], [1, "edit-link", 3, "click"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"]], template: function RequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 4);
+            i0.ɵɵtemplate(6, RequirementsEditorComponent_Conditional_6_Template, 6, 2, "div", 5);
+            i0.ɵɵelementStart(7, "div", 6)(8, "button", 7);
+            i0.ɵɵlistener("click", function RequirementsEditorComponent_Template_button_click_8_listener() { return ctx.SetViewMode("preview"); });
+            i0.ɵɵelement(9, "i", 8);
+            i0.ɵɵtext(10, " Preview ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "button", 7);
+            i0.ɵɵlistener("click", function RequirementsEditorComponent_Template_button_click_11_listener() { return ctx.SetViewMode("edit"); });
+            i0.ɵɵelement(12, "i", 9);
+            i0.ɵɵtext(13, " Edit ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(14, "div", 10);
+            i0.ɵɵtemplate(15, RequirementsEditorComponent_Conditional_15_Template, 2, 1)(16, RequirementsEditorComponent_Conditional_16_Template, 5, 3, "div", 11);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.FieldIcon);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.Title, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.IsEditing ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.ViewMode === "preview");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.ViewMode === "edit");
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.State.SelectedComponent ? 15 : 16);
+        } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.CodeEditorComponent, i5.ButtonComponent, i6.MarkdownComponent, i2.LowerCasePipe], styles: [".requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mat-sys-on-surface);\n      white-space: nowrap;\n    }\n\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mat-sys-primary);\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mat-sys-outline);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mat-sys-surface-container);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mat-sys-primary);\n      color: var(--mat-sys-on-primary, #fff);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n    }\n\n    .empty-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 14px;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mat-sys-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .edit-link[_ngcontent-%COMP%]:hover {\n      background: var(--mat-sys-primary-container, #e0e7ff);\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n      flex: 1;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RequirementsEditorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-requirements-editor', template: `
+    <div class="requirements-editor">
+      <div class="editor-header">
+        <span class="header-title">
+          <i class="fa-solid" [ngClass]="FieldIcon"></i>
+          {{ Title }}
+        </span>
+        <div class="header-right">
+          @if (IsEditing) {
+            <div class="action-buttons">
+              <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()" class="action-btn">
+                <i class="fa-solid fa-check"></i> Apply
+              </button>
+              <button kendoButton [themeColor]="'base'" (click)="CancelChanges()" class="action-btn">
+                Cancel
+              </button>
+            </div>
+          }
+          <div class="mode-toggle">
+            <button class="mode-btn" [class.active]="ViewMode === 'preview'" (click)="SetViewMode('preview')">
+              <i class="fa-solid fa-eye"></i> Preview
+            </button>
+            <button class="mode-btn" [class.active]="ViewMode === 'edit'" (click)="SetViewMode('edit')">
+              <i class="fa-solid fa-pencil"></i> Edit
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="editor-body">
+        @if (State.SelectedComponent) {
+          @if (ViewMode === 'preview') {
+            <div class="preview-container">
+              @if (EditableContent) {
+                <mj-markdown [data]="EditableContent" [enableCodeCopy]="true"></mj-markdown>
+              } @else {
+                <div class="empty-preview">
+                  <i class="fa-solid fa-file-lines"></i>
+                  <p>No {{ Title | lowercase }} defined yet.</p>
+                  <button class="edit-link" (click)="SetViewMode('edit')">
+                    <i class="fa-solid fa-pencil"></i> Start writing
+                  </button>
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="code-editor-container">
+              <mj-code-editor
+                [(ngModel)]="EditableContent"
+                [language]="'markdown'"
+                [indentWithTab]="true"
+                [placeholder]="'Enter ' + Title + ' in markdown format...'"
+                (ngModelChange)="OnContentChanged()">
+              </mj-code-editor>
+            </div>
+          }
+        } @else {
+          <div class="empty-state">
+            <i class="fa-solid fa-file-lines"></i>
+            <p>Select a component to view its {{ Title | lowercase }}.</p>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    .requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .header-title {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mat-sys-on-surface);\n      white-space: nowrap;\n    }\n\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mat-sys-primary);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn:not(:last-child) {\n      border-right: 1px solid var(--mat-sys-outline);\n    }\n\n    .mode-btn:hover {\n      background: var(--mat-sys-surface-container);\n    }\n\n    .mode-btn.active {\n      background: var(--mat-sys-primary);\n      color: var(--mat-sys-on-primary, #fff);\n    }\n\n    .mode-btn i {\n      font-size: 10px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n    }\n\n    .empty-preview i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview p {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 14px;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mat-sys-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .edit-link:hover {\n      background: var(--mat-sys-primary-container, #e0e7ff);\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n      flex: 1;\n    }\n\n    .empty-state i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  "] }]
+    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { Field: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RequirementsEditorComponent, { className: "RequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/requirements-editor.component.ts", lineNumber: 246 }); })();
+//# sourceMappingURL=requirements-editor.component.js.map

package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/requirements-editor.component.ts"],"names":[],"mappings":"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"}

package/dist/ComponentStudio/components/editors/spec-editor.component.d.ts

@@ -0,0 +1,34 @@
+import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ComponentStudioStateService } from '../../services/component-studio-state.service';
+import * as i0 from "@angular/core";
+type SpecEditorMode = 'form' | 'json';
+interface SpecFormModel {
+    name: string;
+    title: string;
+    description: string;
+    type: string;
+    location: string;
+    exampleUsage: string;
+}
+export declare class SpecEditorComponent implements OnInit, OnDestroy {
+    State: ComponentStudioStateService;
+    private cdr;
+    Mode: SpecEditorMode;
+    FormModel: SpecFormModel;
+    ComponentTypes: string[];
+    private stateChangedSub;
+    constructor(State: ComponentStudioStateService, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    SetMode(mode: SpecEditorMode): void;
+    OnFormChanged(): void;
+    OnJsonChanged(): void;
+    ApplyChanges(): void;
+    CancelChanges(): void;
+    private syncSpecToForm;
+    private syncFormToSpec;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpecEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpecEditorComponent, "mj-spec-editor", never, {}, {}, never, never, false, never>;
+}
+export {};
+//# sourceMappingURL=spec-editor.component.d.ts.map

package/dist/ComponentStudio/components/editors/spec-editor.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spec-editor.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/spec-editor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;;AAE5F,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;CACtB;AAMD,qBA+Oa,mBAAoB,YAAW,MAAM,EAAE,SAAS;IAQlD,KAAK,EAAE,2BAA2B;IACzC,OAAO,CAAC,GAAG;IARb,IAAI,EAAE,cAAc,CAAU;IAC9B,SAAS,EAAE,aAAa,CAAsF;IAC9G,cAAc,EAAE,MAAM,EAAE,CAAmB;IAE3C,OAAO,CAAC,eAAe,CAA6B;gBAG3C,KAAK,EAAE,2BAA2B,EACjC,GAAG,EAAE,iBAAiB;IAGhC,QAAQ,IAAI,IAAI;IAUhB,WAAW,IAAI,IAAI;IAOnB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IASnC,aAAa,IAAI,IAAI;IAKrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;IAOpB,aAAa,IAAI,IAAI;IAMrB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;yCA5EX,mBAAmB;2CAAnB,mBAAmB;CA0F/B"}