@memberjunction/ng-dashboard-viewer 5.24.0 → 5.26.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/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.d.ts +2 -1
- package/dist/lib/config-panels/view-config-panel.component.d.ts.map +1 -1
- package/dist/lib/config-panels/view-config-panel.component.js +100 -32
- package/dist/lib/config-panels/view-config-panel.component.js.map +1 -1
- package/dist/lib/config-panels/weburl-config-panel.component.js +2 -2
- package/dist/lib/parts/view-part.component.d.ts +2 -0
- package/dist/lib/parts/view-part.component.d.ts.map +1 -1
- package/dist/lib/parts/view-part.component.js +7 -4
- package/dist/lib/parts/view-part.component.js.map +1 -1
- package/package.json +10 -9
|
@@ -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: 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}"] });
|
|
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: 120px;\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: 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"] }]
|
|
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: 120px;\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: 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}"] });
|
|
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: 120px;\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: 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"] }]
|
|
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: 120px;\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']
|
|
@@ -15,7 +15,8 @@ export declare class ViewConfigPanelComponent extends BaseConfigPanel {
|
|
|
15
15
|
viewId: string;
|
|
16
16
|
viewName: string;
|
|
17
17
|
extraFilter: string;
|
|
18
|
-
displayMode: 'grid' | 'cards' | 'timeline';
|
|
18
|
+
displayMode: 'grid' | 'cards' | 'timeline' | 'map';
|
|
19
|
+
mapRenderMode: 'point' | 'choropleth' | 'heatmap';
|
|
19
20
|
allowModeSwitch: boolean;
|
|
20
21
|
enableSelection: boolean;
|
|
21
22
|
selectionMode: 'none' | 'single' | 'multiple';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-config-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/config-panels/view-config-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,iBAAiB,EAAa,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,0BAA0B,CAAC;;AAElC;;;GAGG;AACH,qBAOa,wBAAyB,SAAQ,eAAe;IAE9B,YAAY,EAAG,qBAAqB,CAAC;IAGzD,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,MAAM,SAAM;IACZ,QAAQ,SAAM;IACd,WAAW,SAAM;IACjB,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAU;
|
|
1
|
+
{"version":3,"file":"view-config-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/config-panels/view-config-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,iBAAiB,EAAa,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,0BAA0B,CAAC;;AAElC;;;GAGG;AACH,qBAOa,wBAAyB,SAAQ,eAAe;IAE9B,YAAY,EAAG,qBAAqB,CAAC;IAGzD,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,MAAM,SAAM;IACZ,QAAQ,SAAM;IACd,WAAW,SAAM;IACjB,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAU;IAC5D,aAAa,EAAE,OAAO,GAAG,YAAY,GAAG,SAAS,CAAW;IAC5D,eAAe,UAAQ;IACvB,eAAe,UAAQ;IACvB,aAAa,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAY;IAGhE,OAAO,CAAC,gBAAgB,CAAM;IAGvB,kBAAkB,UAAS;IAC3B,mBAAmB,UAAS;IAG5B,SAAS,SAAM;IAGf,kBAAkB,EAAE,gBAAgB,CAQzC;IAEK,cAAc,EAAE,cAAc,CAQnC;gBAEU,GAAG,EAAE,iBAAiB;IAIlC;;OAEG;IACH,IAAW,WAAW,IAAI,YAAY,GAAG,IAAI,CAE5C;IAEM,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IA4BhD,WAAW,IAAI,WAAW;IAcjB,QAAQ,IAAI;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAczD,eAAe,IAAI,MAAM;IAUzB,QAAQ,IAAI,MAAM;IAKlB,aAAa,IAAI,IAAI;IAI5B;;OAEG;IACI,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI;IAgCzD,cAAc,IAAI,IAAI;IAKtB,mBAAmB,IAAI,IAAI;IAI3B,cAAc,IAAI,IAAI;IAItB,qBAAqB,IAAI,IAAI;IAI7B,cAAc,IAAI,IAAI;IAItB,oBAAoB,IAAI,IAAI;IAI5B,qBAAqB,IAAI,IAAI;IAI7B,yBAAyB,IAAI,MAAM;yCArMjC,wBAAwB;2CAAxB,wBAAwB;CAiNpC"}
|