import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Validators } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@memberjunction/ng-ui-components";
const _forTrack0 = ($index, $item) => $item.value;
function NewComponentDialogComponent_Conditional_0_For_16_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 19);
    i0.ɵɵlistener("click", function NewComponentDialogComponent_Conditional_0_For_16_Template_div_click_0_listener() { const option_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSelectType(option_r4.value)); });
    i0.ɵɵelementStart(1, "div", 20);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 21);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 22);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const option_r4 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("selected", ctx_r1.SelectedType === option_r4.value);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(option_r4.icon);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(option_r4.label);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(option_r4.description);
} }
function NewComponentDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "mj-dialog", 1);
    i0.ɵɵlistener("Close", function NewComponentDialogComponent_Conditional_0_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancel()); });
    i0.ɵɵelementStart(1, "form", 2)(2, "div", 3)(3, "div", 4)(4, "label", 5);
    i0.ɵɵtext(5, "Name ");
    i0.ɵɵelementStart(6, "span", 6);
    i0.ɵɵtext(7, "*");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "input", 7);
    i0.ɵɵlistener("input", function NewComponentDialogComponent_Conditional_0_Template_input_input_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNameChange()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "span", 8);
    i0.ɵɵtext(10, "A unique name for your component");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(11, "div", 4)(12, "label", 9);
    i0.ɵɵtext(13, "Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "div", 10);
    i0.ɵɵrepeaterCreate(15, NewComponentDialogComponent_Conditional_0_For_16_Template, 7, 6, "div", 11, _forTrack0);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(17, "div", 4)(18, "label", 12);
    i0.ɵɵtext(19, "Title");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(20, "input", 13);
    i0.ɵɵelementStart(21, "span", 8);
    i0.ɵɵtext(22, "The display title shown in the component header");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(23, "div", 4)(24, "label", 14);
    i0.ɵɵtext(25, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(26, "textarea", 15);
    i0.ɵɵelementStart(27, "span", 8);
    i0.ɵɵtext(28, "Optional description of the component's purpose");
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(29, "mj-dialog-actions")(30, "button", 16);
    i0.ɵɵlistener("click", function NewComponentDialogComponent_Conditional_0_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCreate()); });
    i0.ɵɵelement(31, "span", 17);
    i0.ɵɵtext(32, " Create ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(33, "button", 18);
    i0.ɵɵlistener("click", function NewComponentDialogComponent_Conditional_0_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancel()); });
    i0.ɵɵtext(34, "Cancel");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("Visible", true)("Width", 520)("MinWidth", 400);
    i0.ɵɵadvance();
    i0.ɵɵproperty("formGroup", ctx_r1.form);
    i0.ɵɵadvance(14);
    i0.ɵɵrepeater(ctx_r1.TypeOptions);
    i0.ɵɵadvance(15);
    i0.ɵɵproperty("disabled", !ctx_r1.form.valid);
} }
export class NewComponentDialogComponent {
    fb;
    Visible = false;
    Close = new EventEmitter();
    form;
    SelectedType = 'dashboard';
    TypeOptions = [
        { value: 'dashboard', label: 'Dashboard', icon: 'fa-solid fa-gauge-high', description: 'Interactive data dashboard' },
        { value: 'report', label: 'Report', icon: 'fa-solid fa-file-lines', description: 'Formatted data report' },
        { value: 'chart', label: 'Chart', icon: 'fa-solid fa-chart-bar', description: 'Data visualization chart' },
        { value: 'form', label: 'Form', icon: 'fa-solid fa-rectangle-list', description: 'Interactive input form' },
        { value: 'component', label: 'Component', icon: 'fa-solid fa-puzzle-piece', description: 'Reusable UI component' }
    ];
    lastAutoFilledTitle = '';
    constructor(fb) {
        this.fb = fb;
        this.form = this.fb.group({
            name: ['', Validators.required],
            title: [''],
            description: ['']
        });
    }
    OnNameChange() {
        const nameValue = this.form.get('name')?.value || '';
        const titleControl = this.form.get('title');
        if (!titleControl)
            return;
        const currentTitle = titleControl.value || '';
        if (currentTitle === '' || currentTitle === this.lastAutoFilledTitle) {
            titleControl.setValue(nameValue);
            this.lastAutoFilledTitle = nameValue;
        }
    }
    OnSelectType(type) {
        this.SelectedType = type;
    }
    OnCreate() {
        if (!this.form.valid)
            return;
        const result = {
            name: this.form.get('name')?.value?.trim() || '',
            title: this.form.get('title')?.value?.trim() || this.form.get('name')?.value?.trim() || '',
            description: this.form.get('description')?.value?.trim() || '',
            type: this.SelectedType
        };
        this.resetForm();
        this.Close.emit(result);
    }
    OnCancel() {
        this.resetForm();
        this.Close.emit(null);
    }
    resetForm() {
        this.form.reset();
        this.SelectedType = 'dashboard';
        this.lastAutoFilledTitle = '';
    }
    static ɵfac = function NewComponentDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NewComponentDialogComponent)(i0.ɵɵdirectiveInject(i1.FormBuilder)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NewComponentDialogComponent, selectors: [["mj-new-component-dialog"]], inputs: { Visible: "Visible" }, outputs: { Close: "Close" }, standalone: false, decls: 1, vars: 1, consts: [["Title", "Create New Component", 3, "Visible", "Width", "MinWidth"], ["Title", "Create New Component", 3, "Close", "Visible", "Width", "MinWidth"], [3, "formGroup"], [1, "dialog-form"], [1, "form-field"], ["for", "component-name", 1, "form-label"], [1, "required"], ["id", "component-name", "type", "text", "formControlName", "name", "placeholder", "e.g. Sales Overview Dashboard", "autocomplete", "off", 1, "form-input", 3, "input"], [1, "form-hint"], [1, "form-label"], [1, "type-options"], [1, "type-card", 3, "selected"], ["for", "component-title", 1, "form-label"], ["id", "component-title", "type", "text", "formControlName", "title", "placeholder", "Display title (auto-filled from name)", "autocomplete", "off", 1, "form-input"], ["for", "component-description", 1, "form-label"], ["id", "component-description", "formControlName", "description", "placeholder", "Describe what this component does...", "rows", "3", 1, "form-textarea"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["mjButton", "", 3, "click"], [1, "type-card", 3, "click"], [1, "type-card-icon"], [1, "type-card-label"], [1, "type-card-description"]], template: function NewComponentDialogComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, NewComponentDialogComponent_Conditional_0_Template, 35, 5, "mj-dialog", 0);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], styles: ["\n\n.dialog-form[_ngcontent-%COMP%] {\n  padding: 16px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n\n\n.form-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.form-label[_ngcontent-%COMP%]   .required[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n\n\n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n\n\n.form-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  box-sizing: border-box;\n  resize: vertical;\n  min-height: 72px;\n}\n\n.form-textarea[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  opacity: 0.7;\n}\n\n\n\n.type-options[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n\n\n.type-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 14px 10px 12px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;\n  text-align: center;\n  user-select: none;\n}\n\n.type-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n\n\n.type-card-icon[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--mj-text-secondary);\n  margin-bottom: 6px;\n  transition: color 0.2s ease;\n}\n\n.type-card.selected[_ngcontent-%COMP%]   .type-card-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.type-card.selected[_ngcontent-%COMP%]   .type-card-label[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-description[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n}\n\n.type-card.selected[_ngcontent-%COMP%]   .type-card-description[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  opacity: 0.8;\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewComponentDialogComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-new-component-dialog', template: "@if (Visible) {\n  <mj-dialog [Visible]=\"true\" Title=\"Create New Component\" (Close)=\"OnCancel()\" [Width]=\"520\" [MinWidth]=\"400\">\n    <form [formGroup]=\"form\">\n      <div class=\"dialog-form\">\n        <!-- Name field (required) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-name\">Name <span class=\"required\">*</span></label>\n          <input\n            id=\"component-name\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"name\"\n            (input)=\"OnNameChange()\"\n            placeholder=\"e.g. Sales Overview Dashboard\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">A unique name for your component</span>\n        </div>\n\n        <!-- Type selection (card grid) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\">Type</label>\n          <div class=\"type-options\">\n            @for (option of TypeOptions; track option.value) {\n              <div\n                class=\"type-card\"\n                [class.selected]=\"SelectedType === option.value\"\n                (click)=\"OnSelectType(option.value)\">\n                <div class=\"type-card-icon\">\n                  <i [class]=\"option.icon\"></i>\n                </div>\n                <div class=\"type-card-label\">{{ option.label }}</div>\n                <div class=\"type-card-description\">{{ option.description }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Title field (auto-filled from name) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-title\">Title</label>\n          <input\n            id=\"component-title\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"title\"\n            placeholder=\"Display title (auto-filled from name)\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">The display title shown in the component header</span>\n        </div>\n\n        <!-- Description (optional textarea) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-description\">Description</label>\n          <textarea\n            id=\"component-description\"\n            class=\"form-textarea\"\n            formControlName=\"description\"\n            placeholder=\"Describe what this component does...\"\n            rows=\"3\"></textarea>\n          <span class=\"form-hint\">Optional description of the component's purpose</span>\n        </div>\n      </div>\n    </form>\n\n    <mj-dialog-actions>\n      <button mjButton variant=\"primary\" (click)=\"OnCreate()\" [disabled]=\"!form.valid\">\n        <span class=\"fa-solid fa-plus\"></span> Create\n      </button>\n      <button mjButton (click)=\"OnCancel()\">Cancel</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: ["/* Dialog form container */\n.dialog-form {\n  padding: 16px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Form field wrapper */\n.form-field {\n  margin-bottom: 16px;\n}\n\n/* Form label */\n.form-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.form-label .required {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n/* Text inputs */\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  box-sizing: border-box;\n}\n\n.form-input:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-input::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Textarea */\n.form-textarea {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-family: inherit;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  outline: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  box-sizing: border-box;\n  resize: vertical;\n  min-height: 72px;\n}\n\n.form-textarea:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.form-textarea::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Helper text */\n.form-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  opacity: 0.7;\n}\n\n/* Type selection grid */\n.type-options {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n/* Type card */\n.type-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 14px 10px 12px;\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 10px;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;\n  text-align: center;\n  user-select: none;\n}\n\n.type-card:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n/* Type card icon */\n.type-card-icon {\n  font-size: 22px;\n  color: var(--mj-text-secondary);\n  margin-bottom: 6px;\n  transition: color 0.2s ease;\n}\n\n.type-card.selected .type-card-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card label */\n.type-card-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.type-card.selected .type-card-label {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card description */\n.type-card-description {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n}\n\n.type-card.selected .type-card-description {\n  color: var(--mj-brand-primary);\n  opacity: 0.8;\n}\n"] }]
    }], () => [{ type: i1.FormBuilder }], { Visible: [{
            type: Input
        }], Close: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewComponentDialogComponent, { className: "NewComponentDialogComponent", filePath: "src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.ts", lineNumber: 18 }); })();
//# sourceMappingURL=new-component-dialog.component.js.map