@memberjunction/ng-dashboard-viewer 5.10.1 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/breadcrumb/dashboard-breadcrumb.component.js +2 -2
- package/dist/lib/config-dialogs/confirm-dialog.component.js +2 -2
- package/dist/lib/config-panels/artifact-config-panel.component.js +2 -2
- package/dist/lib/config-panels/query-config-panel.component.js +2 -2
- package/dist/lib/config-panels/view-config-panel.component.js +2 -2
- package/dist/lib/config-panels/weburl-config-panel.component.js +2 -2
- package/dist/lib/dashboard-browser/dashboard-browser.component.js +5 -5
- package/dist/lib/dashboard-browser/dashboard-browser.component.js.map +1 -1
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js +54 -54
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js.map +1 -1
- package/dist/lib/dialogs/add-panel-dialog/add-panel-dialog.component.js +2 -2
- package/dist/lib/dialogs/edit-part-dialog/edit-part-dialog.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js.map +1 -1
- package/dist/lib/parts/query-part.component.js +2 -2
- package/dist/lib/parts/query-part.component.js.map +1 -1
- package/dist/lib/parts/view-part.component.js +2 -2
- package/dist/lib/parts/view-part.component.js.map +1 -1
- package/dist/lib/parts/weburl-part.component.js +2 -2
- package/dist/lib/parts/weburl-part.component.js.map +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js.map +1 -1
- package/package.json +9 -9
|
@@ -221,11 +221,11 @@ export class DashboardBreadcrumbComponent {
|
|
|
221
221
|
i0.ɵɵconditionalCreate(0, DashboardBreadcrumbComponent_Conditional_0_Template, 8, 8, "div", 0);
|
|
222
222
|
} if (rf & 2) {
|
|
223
223
|
i0.ɵɵconditional(ctx.Visible ? 0 : -1);
|
|
224
|
-
} }, styles: ["\n\n\n.dashboard-breadcrumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background:
|
|
224
|
+
} }, styles: ["\n\n\n.dashboard-breadcrumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n\n\n.dashboard-breadcrumb.large[_ngcontent-%COMP%] {\n padding: 16px 24px;\n}\n\n.dashboard-breadcrumb.large[_ngcontent-%COMP%] .breadcrumb-item[_ngcontent-%COMP%] {\n font-size: 15px;\n padding: 8px 12px;\n}\n\n.dashboard-breadcrumb.large[_ngcontent-%COMP%] .breadcrumb-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.dashboard-breadcrumb.large[_ngcontent-%COMP%] .breadcrumb-item.root[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n.dashboard-breadcrumb.large[_ngcontent-%COMP%] .breadcrumb-separator[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s, border-color 0.15s;\n border: 2px solid transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.breadcrumb-item.root[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.breadcrumb-item.drop-target[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n\n\n.breadcrumb-item.dashboard-name[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.dashboard-name[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.breadcrumb-item.dashboard-name[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}"], changeDetection: 0 });
|
|
225
225
|
}
|
|
226
226
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBreadcrumbComponent, [{
|
|
227
227
|
type: Component,
|
|
228
|
-
args: [{ standalone: false, selector: 'mj-dashboard-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Breadcrumb Component -->\n@if (Visible) {\n <div\n class=\"dashboard-breadcrumb\"\n [class.large]=\"Size === 'large'\"\n >\n <!-- Root item -->\n <button\n class=\"breadcrumb-item root\"\n [class.drop-target]=\"DragOverCategoryId === null\"\n (click)=\"OnNavigate(null)\"\n (dragover)=\"OnDragOver(null, $event)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop(null, $event)\">\n <i [class]=\"RootIcon\"></i>\n <span>{{ RootLabel }}</span>\n </button>\n <!-- Category path -->\n @for (crumb of Breadcrumbs; track TrackByCategory($index, crumb); let last = $last) {\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <button\n class=\"breadcrumb-item\"\n [class.current]=\"last && !ShowDashboardName\"\n [class.drop-target]=\"DragOverCategoryId === crumb.ID\"\n (click)=\"!last || ShowDashboardName ? OnNavigate(crumb.ID) : null\"\n (dragover)=\"OnDragOver(crumb.ID, $event)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop(crumb.ID, $event)\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ crumb.Name }}</span>\n </button>\n }\n <!-- Dashboard name (when viewing a specific dashboard) -->\n @if (ShowDashboardName && CurrentDashboard) {\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <span class=\"breadcrumb-item current dashboard-name\">\n <i class=\"fa-solid fa-chart-line\"></i>\n <span>{{ CurrentDashboard.Name }}</span>\n </span>\n }\n </div>\n}\n", styles: ["/* Dashboard Breadcrumb Component Styles */\n\n.dashboard-breadcrumb {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background:
|
|
228
|
+
args: [{ standalone: false, selector: 'mj-dashboard-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Breadcrumb Component -->\n@if (Visible) {\n <div\n class=\"dashboard-breadcrumb\"\n [class.large]=\"Size === 'large'\"\n >\n <!-- Root item -->\n <button\n class=\"breadcrumb-item root\"\n [class.drop-target]=\"DragOverCategoryId === null\"\n (click)=\"OnNavigate(null)\"\n (dragover)=\"OnDragOver(null, $event)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop(null, $event)\">\n <i [class]=\"RootIcon\"></i>\n <span>{{ RootLabel }}</span>\n </button>\n <!-- Category path -->\n @for (crumb of Breadcrumbs; track TrackByCategory($index, crumb); let last = $last) {\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <button\n class=\"breadcrumb-item\"\n [class.current]=\"last && !ShowDashboardName\"\n [class.drop-target]=\"DragOverCategoryId === crumb.ID\"\n (click)=\"!last || ShowDashboardName ? OnNavigate(crumb.ID) : null\"\n (dragover)=\"OnDragOver(crumb.ID, $event)\"\n (dragleave)=\"OnDragLeave()\"\n (drop)=\"OnDrop(crumb.ID, $event)\">\n <i class=\"fa-solid fa-folder\"></i>\n <span>{{ crumb.Name }}</span>\n </button>\n }\n <!-- Dashboard name (when viewing a specific dashboard) -->\n @if (ShowDashboardName && CurrentDashboard) {\n <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n <span class=\"breadcrumb-item current dashboard-name\">\n <i class=\"fa-solid fa-chart-line\"></i>\n <span>{{ CurrentDashboard.Name }}</span>\n </span>\n }\n </div>\n}\n", styles: ["/* Dashboard Breadcrumb Component Styles */\n\n.dashboard-breadcrumb {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n/* Large size variant */\n.dashboard-breadcrumb.large {\n padding: 16px 24px;\n}\n\n.dashboard-breadcrumb.large .breadcrumb-item {\n font-size: 15px;\n padding: 8px 12px;\n}\n\n.dashboard-breadcrumb.large .breadcrumb-item i {\n font-size: 14px;\n}\n\n.dashboard-breadcrumb.large .breadcrumb-item.root i {\n font-size: 18px;\n}\n\n.dashboard-breadcrumb.large .breadcrumb-separator {\n font-size: 12px;\n}\n\n/* Breadcrumb items */\n.breadcrumb-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s, border-color 0.15s;\n border: 2px solid transparent;\n}\n\n.breadcrumb-item:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n background: transparent;\n}\n\n.breadcrumb-item i {\n font-size: 12px;\n}\n\n.breadcrumb-item.root i {\n font-size: 14px;\n}\n\n/* Drop target highlighting */\n.breadcrumb-item.drop-target {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-separator {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n/* Dashboard name styling */\n.breadcrumb-item.dashboard-name {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.dashboard-name:hover {\n background: transparent;\n}\n\n.breadcrumb-item.dashboard-name i {\n color: var(--mj-brand-primary);\n}\n"] }]
|
|
229
229
|
}], () => [{ type: i0.ChangeDetectorRef }], { Categories: [{
|
|
230
230
|
type: Input
|
|
231
231
|
}], CurrentCategoryId: [{
|
|
@@ -89,11 +89,11 @@ export class ConfirmDialogComponent {
|
|
|
89
89
|
i0.ɵɵconditionalCreate(0, ConfirmDialogComponent_Conditional_0_Template, 14, 12, "div", 0);
|
|
90
90
|
} if (rf & 2) {
|
|
91
91
|
i0.ɵɵconditional(ctx.visible ? 0 : -1);
|
|
92
|
-
} }, styles: ["\n\n\n\n\n\n\n\n\n\n.config-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n\n.config-dialog[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);\n width: 520px;\n max-width: 90vw;\n max-height: 85vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n\n\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 24px;\n border-bottom: 1px solid #e8eaf6;\n background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);\n}\n\n.header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 20px;\n flex-shrink: 0;\n box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);\n}\n\n.dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n flex: 1;\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #333;\n}\n\n.close-button[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 10px;\n background: transparent;\n color: #666;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.08);\n color: #333;\n}\n\n.close-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n\n\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: #aaa;\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: #d32f2f;\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n\n\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px 24px;\n border-top: 1px solid #e8eaf6;\n background: #fafafa;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n border: 2px solid #ddd;\n color: #333;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n border-color: #ccc;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);\n border: none;\n color: #fff;\n box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(92, 107, 192, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n\n\n\n.confirm-dialog[_ngcontent-%COMP%] {\n width: 400px;\n}\n\n.confirm-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n text-align: center;\n padding: 32px 24px;\n}\n\n.confirm-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n}\n\n.confirm-icon.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n}\n\n.confirm-icon.warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n color: #ff9800;\n}\n\n.confirm-icon.danger[_ngcontent-%COMP%] {\n background: #ffebee;\n}\n\n.confirm-icon.danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n color: #d32f2f;\n}\n\n.confirm-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: #333;\n margin: 0 0 12px 0;\n}\n\n.confirm-message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #666;\n margin: 0;\n line-height: 1.5;\n}\n\n.confirm-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n justify-content: center;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%);\n border: none;\n color: #fff;\n box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);\n}"] });
|
|
92
|
+
} }, styles: ["\n\n\n\n\n\n\n\n\n\n.config-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n\n\n\n.config-dialog[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);\n width: 520px;\n max-width: 90vw;\n max-height: 85vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n\n\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 24px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.header-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 20px;\n flex-shrink: 0;\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n flex: 1;\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.close-button[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 10px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.08);\n color: var(--mj-text-primary);\n}\n\n.close-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n}\n\n\n\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px 24px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-brand-primary);\n border: none;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n\n\n\n.confirm-dialog[_ngcontent-%COMP%] {\n width: 400px;\n}\n\n.confirm-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n text-align: center;\n padding: 32px 24px;\n}\n\n.confirm-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n}\n\n.confirm-icon.warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.confirm-icon.warning[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n color: var(--mj-status-warning);\n}\n\n.confirm-icon.danger[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.confirm-icon.danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.confirm-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.confirm-message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n line-height: 1.5;\n}\n\n.confirm-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n justify-content: center;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-status-error);\n border: none;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}"] });
|
|
93
93
|
}
|
|
94
94
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogComponent, [{
|
|
95
95
|
type: Component,
|
|
96
|
-
args: [{ standalone: false, selector: 'mj-confirm-dialog', template: "<!-- Confirm Dialog -->\n@if (visible) {\n <div class=\"config-dialog-overlay\" (click)=\"cancel()\">\n <div class=\"config-dialog confirm-dialog\" (click)=\"$event.stopPropagation()\">\n <!-- Content -->\n <div class=\"dialog-content\">\n <div class=\"confirm-icon\" [class.warning]=\"type === 'warning'\" [class.danger]=\"type === 'danger'\">\n <i [class]=\"getIcon()\"></i>\n </div>\n <h3 class=\"confirm-title\">{{ title }}</h3>\n <p class=\"confirm-message\">{{ message }}</p>\n </div>\n <!-- Footer - Action button on left, Cancel on right -->\n <div class=\"dialog-footer\">\n <button\n [class]=\"type === 'danger' ? 'btn-danger' : 'btn-primary'\"\n (click)=\"confirm()\">\n {{ confirmText }}\n </button>\n <button class=\"btn-secondary\" (click)=\"cancel()\">{{ cancelText }}</button>\n </div>\n </div>\n </div>\n}\n", styles: ["/**\n * Shared styles for Config Dialogs\n */\n\n/* ========================================\n Overlay\n ======================================== */\n\n.config-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ========================================\n Dialog Container\n ======================================== */\n\n.config-dialog {\n display: flex;\n flex-direction: column;\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);\n width: 520px;\n max-width: 90vw;\n max-height: 85vh;\n overflow: hidden;\n animation: slideUp 0.2s ease;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n/* ========================================\n Header\n ======================================== */\n\n.dialog-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 24px;\n border-bottom: 1px solid #e8eaf6;\n background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);\n}\n\n.header-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 20px;\n flex-shrink: 0;\n box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);\n}\n\n.dialog-header h3 {\n flex: 1;\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #333;\n}\n\n.close-button {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 10px;\n background: transparent;\n color: #666;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.close-button:hover {\n background: rgba(0, 0, 0, 0.08);\n color: #333;\n}\n\n.close-button i {\n font-size: 18px;\n}\n\n/* ========================================\n Content\n ======================================== */\n\n.dialog-content {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: #d32f2f;\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input::placeholder {\n color: #aaa;\n}\n\n.form-input.error {\n border-color: #d32f2f;\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n/* ========================================\n Footer\n ======================================== */\n\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px 24px;\n border-top: 1px solid #e8eaf6;\n background: #fafafa;\n}\n\n.btn-secondary {\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n border: 2px solid #ddd;\n color: #333;\n}\n\n.btn-secondary:hover {\n background: #f5f5f5;\n border-color: #ccc;\n}\n\n.btn-primary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);\n border: none;\n color: #fff;\n box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);\n}\n\n.btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(92, 107, 192, 0.4);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* ========================================\n Confirmation Dialog\n ======================================== */\n\n.confirm-dialog {\n width: 400px;\n}\n\n.confirm-dialog .dialog-content {\n text-align: center;\n padding: 32px 24px;\n}\n\n.confirm-icon {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n}\n\n.confirm-icon.warning {\n background: #fff3e0;\n}\n\n.confirm-icon.warning i {\n font-size: 28px;\n color: #ff9800;\n}\n\n.confirm-icon.danger {\n background: #ffebee;\n}\n\n.confirm-icon.danger i {\n font-size: 28px;\n color: #d32f2f;\n}\n\n.confirm-title {\n font-size: 18px;\n font-weight: 600;\n color: #333;\n margin: 0 0 12px 0;\n}\n\n.confirm-message {\n font-size: 14px;\n color: #666;\n margin: 0;\n line-height: 1.5;\n}\n\n.confirm-dialog .dialog-footer {\n justify-content: center;\n}\n\n.btn-danger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%);\n border: none;\n color: #fff;\n box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);\n}\n\n.btn-danger:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);\n}\n"] }]
|
|
96
|
+
args: [{ standalone: false, selector: 'mj-confirm-dialog', template: "<!-- Confirm Dialog -->\n@if (visible) {\n <div class=\"config-dialog-overlay\" (click)=\"cancel()\">\n <div class=\"config-dialog confirm-dialog\" (click)=\"$event.stopPropagation()\">\n <!-- Content -->\n <div class=\"dialog-content\">\n <div class=\"confirm-icon\" [class.warning]=\"type === 'warning'\" [class.danger]=\"type === 'danger'\">\n <i [class]=\"getIcon()\"></i>\n </div>\n <h3 class=\"confirm-title\">{{ title }}</h3>\n <p class=\"confirm-message\">{{ message }}</p>\n </div>\n <!-- Footer - Action button on left, Cancel on right -->\n <div class=\"dialog-footer\">\n <button\n [class]=\"type === 'danger' ? 'btn-danger' : 'btn-primary'\"\n (click)=\"confirm()\">\n {{ confirmText }}\n </button>\n <button class=\"btn-secondary\" (click)=\"cancel()\">{{ cancelText }}</button>\n </div>\n </div>\n </div>\n}\n", styles: ["/**\n * Shared styles for Config Dialogs\n */\n\n/* ========================================\n Overlay\n ======================================== */\n\n.config-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.15s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ========================================\n Dialog Container\n ======================================== */\n\n.config-dialog {\n display: flex;\n flex-direction: column;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);\n width: 520px;\n max-width: 90vw;\n max-height: 85vh;\n overflow: hidden;\n animation: slideUp 0.2s ease;\n}\n\n@keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n/* ========================================\n Header\n ======================================== */\n\n.dialog-header {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 24px;\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.header-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--mj-brand-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 20px;\n flex-shrink: 0;\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.dialog-header h3 {\n flex: 1;\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.close-button {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 10px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.close-button:hover {\n background: rgba(0, 0, 0, 0.08);\n color: var(--mj-text-primary);\n}\n\n.close-button i {\n font-size: 18px;\n}\n\n/* ========================================\n Content\n ======================================== */\n\n.dialog-content {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: var(--mj-status-error);\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* ========================================\n Footer\n ======================================== */\n\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px 24px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.btn-secondary {\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n.btn-secondary:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.btn-primary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-brand-primary);\n border: none;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* ========================================\n Confirmation Dialog\n ======================================== */\n\n.confirm-dialog {\n width: 400px;\n}\n\n.confirm-dialog .dialog-content {\n text-align: center;\n padding: 32px 24px;\n}\n\n.confirm-icon {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n}\n\n.confirm-icon.warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.confirm-icon.warning i {\n font-size: 28px;\n color: var(--mj-status-warning);\n}\n\n.confirm-icon.danger {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.confirm-icon.danger i {\n font-size: 28px;\n color: var(--mj-status-error);\n}\n\n.confirm-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.confirm-message {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin: 0;\n line-height: 1.5;\n}\n\n.confirm-dialog .dialog-footer {\n justify-content: center;\n}\n\n.btn-danger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 28px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-status-error);\n border: none;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.btn-danger:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n"] }]
|
|
97
97
|
}], () => [{ type: i0.ChangeDetectorRef }], { visible: [{
|
|
98
98
|
type: Input
|
|
99
99
|
}], type: [{
|
|
@@ -412,7 +412,7 @@ let ArtifactConfigPanelComponent = class ArtifactConfigPanelComponent extends Ba
|
|
|
412
412
|
i0.ɵɵclassProp("fa-chevron-down", !ctx.showOptions)("fa-chevron-up", ctx.showOptions);
|
|
413
413
|
i0.ɵɵadvance();
|
|
414
414
|
i0.ɵɵconditional(ctx.showOptions ? 28 : -1);
|
|
415
|
-
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: #aaa;\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: #d32f2f;\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: #d32f2f;\n}"] });
|
|
415
|
+
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: var(--mj-bg-page);\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: var(--mj-status-error);\n}"] });
|
|
416
416
|
};
|
|
417
417
|
ArtifactConfigPanelComponent = __decorate([
|
|
418
418
|
RegisterClass(BaseConfigPanel, 'ArtifactPanelConfigDialog')
|
|
@@ -420,7 +420,7 @@ ArtifactConfigPanelComponent = __decorate([
|
|
|
420
420
|
export { ArtifactConfigPanelComponent };
|
|
421
421
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactConfigPanelComponent, [{
|
|
422
422
|
type: Component,
|
|
423
|
-
args: [{ standalone: false, selector: 'mj-artifact-config-panel', template: "<!-- Artifact Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- Artifact Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-cube\"></i>\n Select Artifact\n <span class=\"required\">*</span>\n </label>\n <mj-tree-dropdown\n #artifactDropdown\n [BranchConfig]=\"CollectionConfig\"\n [LeafConfig]=\"ArtifactLeafConfig\"\n [Value]=\"ArtifactIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse artifacts...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onArtifactSelection($event)\"\n [class.error]=\"artifactError\">\n </mj-tree-dropdown>\n @if (artifactError) {\n <span class=\"form-error\">{{ artifactError }}</span>\n }\n @if (!artifactError && !artifactId) {\n <span class=\"form-hint\">\n Browse collections or search to find an artifact\n </span>\n }\n @if (!artifactError && artifactId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ artifactName }}\n </span>\n }\n </div>\n\n <!-- Version Selection (Available only after artifact is selected) -->\n @if (artifactId) {\n <div class=\"form-group\">\n <label for=\"versionSelect\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Version\n </label>\n <div class=\"version-select-wrapper\">\n @if (!isLoadingVersions && versions.length > 0) {\n <select\n id=\"versionSelect\"\n [(ngModel)]=\"versionNumber\"\n (change)=\"onVersionChange()\"\n class=\"form-select\">\n @for (v of versions; track v) {\n <option [ngValue]=\"v.VersionNumber\">\n v{{ v.VersionNumber }} - {{ v.__mj_CreatedAt | date:'short' }}\n </option>\n }\n </select>\n }\n @if (isLoadingVersions) {\n <span class=\"form-hint\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Loading versions...\n </span>\n }\n @if (!isLoadingVersions && versions.length === 0) {\n <span class=\"form-hint\">\n No versions available\n </span>\n }\n </div>\n @if (versions.length > 0) {\n <span class=\"form-hint\">\n Select which version to display (latest is default)\n </span>\n }\n </div>\n }\n\n <!-- Title (Optional) -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n <span class=\"optional-tag\">(optional)</span>\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n [placeholder]=\"artifactName ? 'Default: ' + artifactName : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use artifact name as title</span>\n </div>\n\n <!-- Display Options (Collapsible) -->\n <div class=\"collapsible-section\">\n <button\n type=\"button\"\n class=\"collapsible-header\"\n (click)=\"toggleOptions()\"\n [attr.aria-expanded]=\"showOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showOptions\"\n [class.fa-chevron-up]=\"showOptions\"></i>\n </button>\n\n @if (showOptions) {\n <div class=\"collapsible-content\">\n <div class=\"checkbox-group checkbox-group--compact\">\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showHeader\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Header</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showTabs\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Tabs</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showMetadata\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Metadata</span>\n </label>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: #d32f2f;\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input::placeholder {\n color: #aaa;\n}\n\n.form-input.error {\n border-color: #d32f2f;\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: #2e7d32;\n}\n\n.form-hint--selected i {\n color: #2e7d32;\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title i {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: #d32f2f;\n}\n"] }]
|
|
423
|
+
args: [{ standalone: false, selector: 'mj-artifact-config-panel', template: "<!-- Artifact Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- Artifact Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-cube\"></i>\n Select Artifact\n <span class=\"required\">*</span>\n </label>\n <mj-tree-dropdown\n #artifactDropdown\n [BranchConfig]=\"CollectionConfig\"\n [LeafConfig]=\"ArtifactLeafConfig\"\n [Value]=\"ArtifactIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse artifacts...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onArtifactSelection($event)\"\n [class.error]=\"artifactError\">\n </mj-tree-dropdown>\n @if (artifactError) {\n <span class=\"form-error\">{{ artifactError }}</span>\n }\n @if (!artifactError && !artifactId) {\n <span class=\"form-hint\">\n Browse collections or search to find an artifact\n </span>\n }\n @if (!artifactError && artifactId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ artifactName }}\n </span>\n }\n </div>\n\n <!-- Version Selection (Available only after artifact is selected) -->\n @if (artifactId) {\n <div class=\"form-group\">\n <label for=\"versionSelect\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Version\n </label>\n <div class=\"version-select-wrapper\">\n @if (!isLoadingVersions && versions.length > 0) {\n <select\n id=\"versionSelect\"\n [(ngModel)]=\"versionNumber\"\n (change)=\"onVersionChange()\"\n class=\"form-select\">\n @for (v of versions; track v) {\n <option [ngValue]=\"v.VersionNumber\">\n v{{ v.VersionNumber }} - {{ v.__mj_CreatedAt | date:'short' }}\n </option>\n }\n </select>\n }\n @if (isLoadingVersions) {\n <span class=\"form-hint\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Loading versions...\n </span>\n }\n @if (!isLoadingVersions && versions.length === 0) {\n <span class=\"form-hint\">\n No versions available\n </span>\n }\n </div>\n @if (versions.length > 0) {\n <span class=\"form-hint\">\n Select which version to display (latest is default)\n </span>\n }\n </div>\n }\n\n <!-- Title (Optional) -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n <span class=\"optional-tag\">(optional)</span>\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n [placeholder]=\"artifactName ? 'Default: ' + artifactName : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use artifact name as title</span>\n </div>\n\n <!-- Display Options (Collapsible) -->\n <div class=\"collapsible-section\">\n <button\n type=\"button\"\n class=\"collapsible-header\"\n (click)=\"toggleOptions()\"\n [attr.aria-expanded]=\"showOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showOptions\"\n [class.fa-chevron-up]=\"showOptions\"></i>\n </button>\n\n @if (showOptions) {\n <div class=\"collapsible-content\">\n <div class=\"checkbox-group checkbox-group--compact\">\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showHeader\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Header</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showTabs\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Tabs</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showMetadata\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Metadata</span>\n </label>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: var(--mj-status-error);\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: var(--mj-status-success);\n}\n\n.form-hint--selected i {\n color: var(--mj-status-success);\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: var(--mj-bg-page);\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-title i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: var(--mj-brand-primary);\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: var(--mj-status-error);\n}\n"] }]
|
|
424
424
|
}], () => [{ type: i0.ChangeDetectorRef }], { artifactDropdown: [{
|
|
425
425
|
type: ViewChild,
|
|
426
426
|
args: ['artifactDropdown']
|
|
@@ -358,7 +358,7 @@ let QueryConfigPanelComponent = class QueryConfigPanelComponent extends BaseConf
|
|
|
358
358
|
i0.ɵɵclassProp("fa-chevron-down", !ctx.showAdvancedOptions)("fa-chevron-up", ctx.showAdvancedOptions);
|
|
359
359
|
i0.ɵɵadvance();
|
|
360
360
|
i0.ɵɵconditional(ctx.showAdvancedOptions ? 27 : -1);
|
|
361
|
-
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: #aaa;\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: #d32f2f;\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: #d32f2f;\n}"] });
|
|
361
|
+
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: var(--mj-bg-page);\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: var(--mj-status-error);\n}"] });
|
|
362
362
|
};
|
|
363
363
|
QueryConfigPanelComponent = __decorate([
|
|
364
364
|
RegisterClass(BaseConfigPanel, 'QueryPanelConfigDialog')
|
|
@@ -366,7 +366,7 @@ QueryConfigPanelComponent = __decorate([
|
|
|
366
366
|
export { QueryConfigPanelComponent };
|
|
367
367
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryConfigPanelComponent, [{
|
|
368
368
|
type: Component,
|
|
369
|
-
args: [{ standalone: false, selector: 'mj-query-config-panel', template: "<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- Query Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-flask\"></i>\n Select Query\n <span class=\"required\">*</span>\n </label>\n <mj-tree-dropdown\n #queryDropdown\n [BranchConfig]=\"QueryCategoryConfig\"\n [LeafConfig]=\"QueryLeafConfig\"\n [Value]=\"QueryIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse queries...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onQuerySelection($event)\"\n [class.error]=\"queryError\">\n </mj-tree-dropdown>\n @if (queryError) {\n <span class=\"form-error\">{{ queryError }}</span>\n }\n @if (!queryError && !queryId) {\n <span class=\"form-hint\">\n Browse categories or search to find a query\n </span>\n }\n @if (!queryError && queryId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ queryName }}\n </span>\n }\n </div>\n\n <!-- Title (Optional) -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n <span class=\"optional-tag\">(optional)</span>\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n [placeholder]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use query name as title</span>\n </div>\n\n <!-- Advanced Options (Collapsible) -->\n <div class=\"collapsible-section\">\n <button\n type=\"button\"\n class=\"collapsible-header\"\n (click)=\"toggleAdvancedOptions()\"\n [attr.aria-expanded]=\"showAdvancedOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showAdvancedOptions\"\n [class.fa-chevron-up]=\"showAdvancedOptions\"></i>\n </button>\n\n @if (showAdvancedOptions) {\n <div class=\"collapsible-content\">\n <!-- Parameter Layout -->\n <div class=\"form-group\">\n <label>Parameter Layout</label>\n <div class=\"radio-group radio-group--horizontal\">\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"header\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n Header\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"sidebar\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-table-columns\"></i>\n Sidebar\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"dialog\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-window-restore\"></i>\n Dialog\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n </div>\n <!-- Auto Refresh -->\n <div class=\"form-group\">\n <label for=\"autoRefresh\">\n <i class=\"fa-solid fa-rotate\"></i>\n Auto Refresh\n </label>\n <select\n class=\"form-select\"\n [(ngModel)]=\"autoRefreshSeconds\"\n (change)=\"onAutoRefreshChange()\">\n <option [ngValue]=\"0\">Disabled</option>\n <option [ngValue]=\"30\">Every 30 seconds</option>\n <option [ngValue]=\"60\">Every minute</option>\n <option [ngValue]=\"300\">Every 5 minutes</option>\n <option [ngValue]=\"600\">Every 10 minutes</option>\n </select>\n </div>\n <!-- Options -->\n <div class=\"form-group\">\n <div class=\"checkbox-group checkbox-group--compact\">\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showParameterControls\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Parameter Controls</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showExecutionMetadata\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Execution Metadata</span>\n </label>\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: #d32f2f;\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input::placeholder {\n color: #aaa;\n}\n\n.form-input.error {\n border-color: #d32f2f;\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: #2e7d32;\n}\n\n.form-hint--selected i {\n color: #2e7d32;\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title i {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: #d32f2f;\n}\n"] }]
|
|
369
|
+
args: [{ standalone: false, selector: 'mj-query-config-panel', template: "<!-- Query Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- Query Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-flask\"></i>\n Select Query\n <span class=\"required\">*</span>\n </label>\n <mj-tree-dropdown\n #queryDropdown\n [BranchConfig]=\"QueryCategoryConfig\"\n [LeafConfig]=\"QueryLeafConfig\"\n [Value]=\"QueryIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse queries...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onQuerySelection($event)\"\n [class.error]=\"queryError\">\n </mj-tree-dropdown>\n @if (queryError) {\n <span class=\"form-error\">{{ queryError }}</span>\n }\n @if (!queryError && !queryId) {\n <span class=\"form-hint\">\n Browse categories or search to find a query\n </span>\n }\n @if (!queryError && queryId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ queryName }}\n </span>\n }\n </div>\n\n <!-- Title (Optional) -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n <span class=\"optional-tag\">(optional)</span>\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n [placeholder]=\"queryName ? 'Default: ' + queryName : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use query name as title</span>\n </div>\n\n <!-- Advanced Options (Collapsible) -->\n <div class=\"collapsible-section\">\n <button\n type=\"button\"\n class=\"collapsible-header\"\n (click)=\"toggleAdvancedOptions()\"\n [attr.aria-expanded]=\"showAdvancedOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showAdvancedOptions\"\n [class.fa-chevron-up]=\"showAdvancedOptions\"></i>\n </button>\n\n @if (showAdvancedOptions) {\n <div class=\"collapsible-content\">\n <!-- Parameter Layout -->\n <div class=\"form-group\">\n <label>Parameter Layout</label>\n <div class=\"radio-group radio-group--horizontal\">\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'header'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"header\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n Header\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'sidebar'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"sidebar\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-table-columns\"></i>\n Sidebar\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"parameterLayout === 'dialog'\">\n <input\n type=\"radio\"\n name=\"parameterLayout\"\n value=\"dialog\"\n [(ngModel)]=\"parameterLayout\"\n (change)=\"onParameterLayoutChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-window-restore\"></i>\n Dialog\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getParameterLayoutDescription() }}</span>\n </div>\n <!-- Auto Refresh -->\n <div class=\"form-group\">\n <label for=\"autoRefresh\">\n <i class=\"fa-solid fa-rotate\"></i>\n Auto Refresh\n </label>\n <select\n class=\"form-select\"\n [(ngModel)]=\"autoRefreshSeconds\"\n (change)=\"onAutoRefreshChange()\">\n <option [ngValue]=\"0\">Disabled</option>\n <option [ngValue]=\"30\">Every 30 seconds</option>\n <option [ngValue]=\"60\">Every minute</option>\n <option [ngValue]=\"300\">Every 5 minutes</option>\n <option [ngValue]=\"600\">Every 10 minutes</option>\n </select>\n </div>\n <!-- Options -->\n <div class=\"form-group\">\n <div class=\"checkbox-group checkbox-group--compact\">\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showParameterControls\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Parameter Controls</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"showExecutionMetadata\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Show Execution Metadata</span>\n </label>\n </div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: var(--mj-status-error);\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.form-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-input.error {\n border-color: var(--mj-status-error);\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: var(--mj-text-muted);\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.radio-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.radio-option.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: var(--mj-brand-primary);\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.radio-badge.secure {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.radio-badge.warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.checkbox-option:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-card);\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: var(--mj-text-inverse);\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 15px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: var(--mj-status-success);\n}\n\n.form-hint--selected i {\n color: var(--mj-status-success);\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: var(--mj-bg-page);\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.collapsible-title i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: var(--mj-text-muted);\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: var(--mj-brand-primary);\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: var(--mj-status-error);\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: var(--mj-status-error);\n}\n"] }]
|
|
370
370
|
}], () => [{ type: i0.ChangeDetectorRef }], { queryDropdown: [{
|
|
371
371
|
type: ViewChild,
|
|
372
372
|
args: ['queryDropdown']
|