@memberjunction/ng-dashboard-viewer 5.10.1 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/breadcrumb/dashboard-breadcrumb.component.js +2 -2
- package/dist/lib/config-dialogs/confirm-dialog.component.js +2 -2
- package/dist/lib/config-panels/artifact-config-panel.component.js +2 -2
- package/dist/lib/config-panels/query-config-panel.component.js +2 -2
- package/dist/lib/config-panels/view-config-panel.component.js +2 -2
- package/dist/lib/config-panels/weburl-config-panel.component.js +2 -2
- package/dist/lib/dashboard-browser/dashboard-browser.component.js +5 -5
- package/dist/lib/dashboard-browser/dashboard-browser.component.js.map +1 -1
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js +54 -54
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js.map +1 -1
- package/dist/lib/dialogs/add-panel-dialog/add-panel-dialog.component.js +2 -2
- package/dist/lib/dialogs/edit-part-dialog/edit-part-dialog.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js.map +1 -1
- package/dist/lib/parts/query-part.component.js +2 -2
- package/dist/lib/parts/query-part.component.js.map +1 -1
- package/dist/lib/parts/view-part.component.js +2 -2
- package/dist/lib/parts/view-part.component.js.map +1 -1
- package/dist/lib/parts/weburl-part.component.js +2 -2
- package/dist/lib/parts/weburl-part.component.js.map +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js.map +1 -1
- package/package.json +9 -9
|
@@ -420,7 +420,7 @@ let ViewConfigPanelComponent = class ViewConfigPanelComponent extends BaseConfig
|
|
|
420
420
|
i0.ɵɵclassProp("fa-chevron-down", !ctx.showAdvancedOptions)("fa-chevron-up", ctx.showAdvancedOptions);
|
|
421
421
|
i0.ɵɵadvance();
|
|
422
422
|
i0.ɵɵconditional(ctx.showAdvancedOptions ? 43 : -1);
|
|
423
|
-
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TreeDropdownComponent], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: #aaa;\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: #d32f2f;\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: #d32f2f;\n}"] });
|
|
423
|
+
} }, 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}"] });
|
|
424
424
|
};
|
|
425
425
|
ViewConfigPanelComponent = __decorate([
|
|
426
426
|
RegisterClass(BaseConfigPanel, 'ViewPanelConfigDialog')
|
|
@@ -428,7 +428,7 @@ ViewConfigPanelComponent = __decorate([
|
|
|
428
428
|
export { ViewConfigPanelComponent };
|
|
429
429
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewConfigPanelComponent, [{
|
|
430
430
|
type: Component,
|
|
431
|
-
args: [{ standalone: false, selector: 'mj-dashboard-view-config-panel', template: "<!-- View Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- View Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-table\"></i>\n Select View\n <span class=\"optional-tag\">(or enter entity below)</span>\n </label>\n <mj-tree-dropdown\n #viewDropdown\n [BranchConfig]=\"ViewCategoryConfig\"\n [LeafConfig]=\"ViewLeafConfig\"\n [Value]=\"ViewIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse saved views...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onViewSelection($event)\"\n [class.error]=\"viewError\">\n </mj-tree-dropdown>\n @if (viewError) {\n <span class=\"form-error\">{{ viewError }}</span>\n }\n @if (!viewError && !viewId && !entityName) {\n <span class=\"form-hint\">\n Select a saved view or enter an entity name below\n </span>\n }\n @if (!viewError && viewId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ viewName }}\n </span>\n }\n </div>\n\n <!-- Entity Name (Alternative) -->\n <div class=\"form-group\">\n <label for=\"entityName\">\n <i class=\"fa-solid fa-database\"></i>\n Entity Name\n <span class=\"optional-tag\">(alternative to view)</span>\n </label>\n <input\n type=\"text\"\n id=\"entityName\"\n [(ngModel)]=\"entityName\"\n (input)=\"onEntityChange()\"\n placeholder=\"e.g., Accounts, Contacts, Users\"\n class=\"form-input\">\n <span class=\"form-hint\">\n Use this to display all records from an entity without a saved view\n </span>\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]=\"viewName || entityName ? 'Default: ' + (viewName || entityName) : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use view/entity 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)=\"toggleDisplayOptions()\"\n [attr.aria-expanded]=\"showDisplayOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-grip\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showDisplayOptions\"\n [class.fa-chevron-up]=\"showDisplayOptions\"></i>\n </button>\n\n @if (showDisplayOptions) {\n <div class=\"collapsible-content\">\n <!-- Display Mode -->\n <div class=\"form-group\">\n <label>Display Mode</label>\n <div class=\"radio-group radio-group--horizontal\">\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'grid'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"grid\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-table-cells\"></i>\n Grid\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'cards'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"cards\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-id-card\"></i>\n Cards\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'timeline'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"timeline\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-timeline\"></i>\n Timeline\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getDisplayModeDescription() }}</span>\n </div>\n <!-- Selection 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)]=\"allowModeSwitch\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Allow Mode Switch</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"enableSelection\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Enable Selection</span>\n </label>\n </div>\n </div>\n <!-- Selection Mode -->\n @if (enableSelection) {\n <div class=\"form-group\">\n <label for=\"selectionMode\">Selection Mode</label>\n <select\n id=\"selectionMode\"\n class=\"form-select\"\n [(ngModel)]=\"selectionMode\"\n (change)=\"onSelectionModeChange()\">\n <option value=\"single\">Single Selection</option>\n <option value=\"multiple\">Multiple Selection</option>\n </select>\n </div>\n }\n </div>\n }\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-filter\"></i>\n Advanced Filtering\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 <!-- Extra Filter -->\n <div class=\"form-group\">\n <label for=\"extraFilter\">\n Extra Filter\n </label>\n <input\n type=\"text\"\n id=\"extraFilter\"\n [(ngModel)]=\"extraFilter\"\n (input)=\"onFilterChange()\"\n placeholder=\"e.g., Status = 'Active'\"\n class=\"form-input\">\n <span class=\"form-hint\">\n SQL WHERE clause to filter records (applied in addition to view filters)\n </span>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: #d32f2f;\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input::placeholder {\n color: #aaa;\n}\n\n.form-input.error {\n border-color: #d32f2f;\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: #2e7d32;\n}\n\n.form-hint--selected i {\n color: #2e7d32;\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title i {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: #d32f2f;\n}\n"] }]
|
|
431
|
+
args: [{ standalone: false, selector: 'mj-dashboard-view-config-panel', template: "<!-- View Config Panel - Compact layout with tree dropdown and collapsible sections -->\n<div class=\"config-panel config-panel--compact\">\n <!-- View Selection (Primary) -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-table\"></i>\n Select View\n <span class=\"optional-tag\">(or enter entity below)</span>\n </label>\n <mj-tree-dropdown\n #viewDropdown\n [BranchConfig]=\"ViewCategoryConfig\"\n [LeafConfig]=\"ViewLeafConfig\"\n [Value]=\"ViewIdAsKey\"\n [SelectableTypes]=\"'leaf'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Search or browse saved views...'\"\n [EnableSearch]=\"true\"\n (SelectionChange)=\"onViewSelection($event)\"\n [class.error]=\"viewError\">\n </mj-tree-dropdown>\n @if (viewError) {\n <span class=\"form-error\">{{ viewError }}</span>\n }\n @if (!viewError && !viewId && !entityName) {\n <span class=\"form-hint\">\n Select a saved view or enter an entity name below\n </span>\n }\n @if (!viewError && viewId) {\n <span class=\"form-hint form-hint--selected\">\n <i class=\"fa-solid fa-check\"></i>\n Selected: {{ viewName }}\n </span>\n }\n </div>\n\n <!-- Entity Name (Alternative) -->\n <div class=\"form-group\">\n <label for=\"entityName\">\n <i class=\"fa-solid fa-database\"></i>\n Entity Name\n <span class=\"optional-tag\">(alternative to view)</span>\n </label>\n <input\n type=\"text\"\n id=\"entityName\"\n [(ngModel)]=\"entityName\"\n (input)=\"onEntityChange()\"\n placeholder=\"e.g., Accounts, Contacts, Users\"\n class=\"form-input\">\n <span class=\"form-hint\">\n Use this to display all records from an entity without a saved view\n </span>\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]=\"viewName || entityName ? 'Default: ' + (viewName || entityName) : 'Enter a custom title'\"\n class=\"form-input\">\n <span class=\"form-hint\">Leave empty to use view/entity 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)=\"toggleDisplayOptions()\"\n [attr.aria-expanded]=\"showDisplayOptions\">\n <span class=\"collapsible-title\">\n <i class=\"fa-solid fa-grip\"></i>\n Display Options\n </span>\n <i class=\"collapsible-chevron fa-solid\"\n [class.fa-chevron-down]=\"!showDisplayOptions\"\n [class.fa-chevron-up]=\"showDisplayOptions\"></i>\n </button>\n\n @if (showDisplayOptions) {\n <div class=\"collapsible-content\">\n <!-- Display Mode -->\n <div class=\"form-group\">\n <label>Display Mode</label>\n <div class=\"radio-group radio-group--horizontal\">\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'grid'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"grid\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-table-cells\"></i>\n Grid\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'cards'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"cards\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-id-card\"></i>\n Cards\n </span>\n </label>\n <label class=\"radio-option radio-option--compact\" [class.selected]=\"displayMode === 'timeline'\">\n <input\n type=\"radio\"\n name=\"displayMode\"\n value=\"timeline\"\n [(ngModel)]=\"displayMode\"\n (change)=\"onDisplayModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-label\">\n <i class=\"fa-solid fa-timeline\"></i>\n Timeline\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getDisplayModeDescription() }}</span>\n </div>\n <!-- Selection 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)]=\"allowModeSwitch\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Allow Mode Switch</span>\n </label>\n <label class=\"checkbox-option checkbox-option--compact\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"enableSelection\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-label\">Enable Selection</span>\n </label>\n </div>\n </div>\n <!-- Selection Mode -->\n @if (enableSelection) {\n <div class=\"form-group\">\n <label for=\"selectionMode\">Selection Mode</label>\n <select\n id=\"selectionMode\"\n class=\"form-select\"\n [(ngModel)]=\"selectionMode\"\n (change)=\"onSelectionModeChange()\">\n <option value=\"single\">Single Selection</option>\n <option value=\"multiple\">Multiple Selection</option>\n </select>\n </div>\n }\n </div>\n }\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-filter\"></i>\n Advanced Filtering\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 <!-- Extra Filter -->\n <div class=\"form-group\">\n <label for=\"extraFilter\">\n Extra Filter\n </label>\n <input\n type=\"text\"\n id=\"extraFilter\"\n [(ngModel)]=\"extraFilter\"\n (input)=\"onFilterChange()\"\n placeholder=\"e.g., Status = 'Active'\"\n class=\"form-input\">\n <span class=\"form-hint\">\n SQL WHERE clause to filter records (applied in addition to view filters)\n </span>\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"] }]
|
|
432
432
|
}], () => [{ type: i0.ChangeDetectorRef }], { viewDropdown: [{
|
|
433
433
|
type: ViewChild,
|
|
434
434
|
args: ['viewDropdown']
|
|
@@ -272,7 +272,7 @@ let WebURLConfigPanelComponent = class WebURLConfigPanelComponent extends BaseCo
|
|
|
272
272
|
i0.ɵɵtwoWayProperty("ngModel", ctx.allowFullscreen);
|
|
273
273
|
i0.ɵɵadvance(8);
|
|
274
274
|
i0.ɵɵtwoWayProperty("ngModel", ctx.refreshOnResize);
|
|
275
|
-
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n\n\n\n\n\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n\n\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] > label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n\n\n\n\n\n.form-input[_ngcontent-%COMP%] {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: #aaa;\n}\n\n.form-input.error[_ngcontent-%COMP%] {\n border-color: #d32f2f;\n}\n\n.form-input.error[_ngcontent-%COMP%]:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.input-action-btn[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n\n\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error[_ngcontent-%COMP%]::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n\n\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.radio-mark[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended[_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure[_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning[_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n\n\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option[_ngcontent-%COMP%]:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.checkbox-mark[_ngcontent-%COMP%] {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%] {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:checked + .checkbox-mark[_ngcontent-%COMP%]::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-select[_ngcontent-%COMP%] {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n\n\n\n\n\n.config-panel--compact[_ngcontent-%COMP%] {\n gap: 16px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-group[_ngcontent-%COMP%] {\n gap: 8px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact[_ngcontent-%COMP%] .form-select[_ngcontent-%COMP%] {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n\n\n\n\n\n.optional-tag[_ngcontent-%COMP%] {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n\n\n\n\n\n.form-hint--selected[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n.form-hint--selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2e7d32;\n}\n\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%] {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content[_ngcontent-%COMP%] {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n\n\n\n.radio-group--horizontal[_ngcontent-%COMP%] {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected[_ngcontent-%COMP%] .radio-mark[_ngcontent-%COMP%]::after {\n width: 8px;\n height: 8px;\n}\n\n\n\n\n\n\n.checkbox-group--compact[_ngcontent-%COMP%] {\n gap: 4px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-mark[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact[_ngcontent-%COMP%] .checkbox-label[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n\n\n\nmj-tree-dropdown.error[_ngcontent-%COMP%] {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error[_ngcontent-%COMP%]:focus-within {\n --dropdown-border-focus: #d32f2f;\n}"] });
|
|
275
|
+
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel], 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}"] });
|
|
276
276
|
};
|
|
277
277
|
WebURLConfigPanelComponent = __decorate([
|
|
278
278
|
RegisterClass(BaseConfigPanel, 'WebURLPanelConfigDialog')
|
|
@@ -280,7 +280,7 @@ WebURLConfigPanelComponent = __decorate([
|
|
|
280
280
|
export { WebURLConfigPanelComponent };
|
|
281
281
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WebURLConfigPanelComponent, [{
|
|
282
282
|
type: Component,
|
|
283
|
-
args: [{ standalone: false, selector: 'mj-weburl-config-panel', template: "<!-- WebURL Config Panel - Form content only, no dialog chrome -->\n<div class=\"config-panel\">\n <!-- Title -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n placeholder=\"Enter a title for this part\"\n class=\"form-input\">\n </div>\n\n <!-- URL -->\n <div class=\"form-group\">\n <label for=\"webUrl\">\n <i class=\"fa-solid fa-link\"></i>\n URL\n <span class=\"required\">*</span>\n </label>\n <div class=\"input-with-action\">\n <input\n type=\"url\"\n id=\"webUrl\"\n [(ngModel)]=\"url\"\n (input)=\"onUrlChange()\"\n placeholder=\"https://example.com\"\n class=\"form-input\"\n [class.error]=\"urlError\">\n @if (showUrlPreview) {\n <button\n class=\"input-action-btn\"\n (click)=\"previewUrl()\"\n title=\"Preview in new tab\">\n <i class=\"fa-solid fa-external-link\"></i>\n </button>\n }\n </div>\n @if (urlError) {\n <span class=\"form-error\">{{ urlError }}</span>\n }\n @if (!urlError) {\n <span class=\"form-hint\">\n Enter the full URL including https://\n </span>\n }\n </div>\n\n <!-- Security Mode -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-shield-halved\"></i>\n Security Mode\n </label>\n <div class=\"radio-group\">\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'standard'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"standard\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Standard</span>\n <span class=\"radio-badge recommended\">Recommended</span>\n </span>\n </label>\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'strict'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"strict\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Strict</span>\n <span class=\"radio-badge secure\">Most Secure</span>\n </span>\n </label>\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'permissive'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"permissive\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Permissive</span>\n <span class=\"radio-badge warning\">Least Secure</span>\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getSandboxModeDescription() }}</span>\n </div>\n\n <!-- Options -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-sliders\"></i>\n Options\n </label>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-option\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"allowFullscreen\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-content\">\n <span class=\"checkbox-label\">Allow Fullscreen</span>\n <span class=\"checkbox-desc\">Enable fullscreen mode for the embedded content</span>\n </span>\n </label>\n <label class=\"checkbox-option\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"refreshOnResize\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-content\">\n <span class=\"checkbox-label\">Refresh on Resize</span>\n <span class=\"checkbox-desc\">Reload the page when the part is resized</span>\n </span>\n </label>\n </div>\n </div>\n</div>\n", styles: ["/**\n * Shared styles for Config Panels (form content only, no dialog chrome)\n */\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.config-panel {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 8px 0;\n}\n\n/* ========================================\n Form Groups\n ======================================== */\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.form-group > label {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.form-group > label i {\n color: #5c6bc0;\n font-size: 14px;\n width: 16px;\n}\n\n.form-group > label .required {\n color: #d32f2f;\n}\n\n/* ========================================\n Form Inputs\n ======================================== */\n\n.form-input {\n padding: 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n.form-input::placeholder {\n color: #aaa;\n}\n\n.form-input.error {\n border-color: #d32f2f;\n}\n\n.form-input.error:focus {\n box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.12);\n}\n\n.input-with-action {\n display: flex;\n gap: 8px;\n}\n\n.input-with-action .form-input {\n flex: 1;\n}\n\n.input-action-btn {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n background: #fff;\n color: #666;\n cursor: pointer;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.input-action-btn:hover {\n border-color: #5c6bc0;\n background: #e8eaf6;\n color: #5c6bc0;\n}\n\n/* ========================================\n Form Hints & Errors\n ======================================== */\n\n.form-hint {\n font-size: 13px;\n color: #888;\n line-height: 1.4;\n}\n\n.form-error {\n font-size: 13px;\n color: #d32f2f;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.form-error::before {\n content: '\\f071';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n}\n\n/* ========================================\n Radio Group\n ======================================== */\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.radio-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.radio-option.selected {\n border-color: #5c6bc0;\n background: #e8eaf6;\n}\n\n.radio-option input[type=\"radio\"] {\n display: none;\n}\n\n.radio-mark {\n width: 20px;\n height: 20px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.radio-option.selected .radio-mark {\n border-color: #5c6bc0;\n}\n\n.radio-option.selected .radio-mark::after {\n content: '';\n width: 10px;\n height: 10px;\n background: #5c6bc0;\n border-radius: 50%;\n}\n\n.radio-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.radio-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.radio-badge {\n font-size: 11px;\n font-weight: 600;\n padding: 3px 8px;\n border-radius: 4px;\n text-transform: uppercase;\n}\n\n.radio-badge.recommended {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.radio-badge.secure {\n background: #e3f2fd;\n color: #1565c0;\n}\n\n.radio-badge.warning {\n background: #fff3e0;\n color: #ef6c00;\n}\n\n/* ========================================\n Checkbox Group\n ======================================== */\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.checkbox-option {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 16px;\n border: 2px solid #e8eaf6;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #fff;\n}\n\n.checkbox-option:hover {\n border-color: #c5cae9;\n background: #fafafa;\n}\n\n.checkbox-option input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-mark {\n width: 22px;\n height: 22px;\n border: 2px solid #ccc;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.2s ease;\n margin-top: 2px;\n}\n\n.checkbox-option input:checked + .checkbox-mark {\n background: #5c6bc0;\n border-color: #5c6bc0;\n}\n\n.checkbox-option input:checked + .checkbox-mark::after {\n content: '\\f00c';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 12px;\n color: #fff;\n}\n\n.checkbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.checkbox-desc {\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Select/Dropdown\n ======================================== */\n\n.form-select {\n padding: 14px 40px 14px 16px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 15px;\n color: #333;\n background: #fff;\n transition: all 0.2s ease;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n}\n\n.form-select:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.12);\n}\n\n/* ========================================\n Compact Panel Variant\n ======================================== */\n\n.config-panel--compact {\n gap: 16px;\n}\n\n.config-panel--compact .form-group {\n gap: 8px;\n}\n\n.config-panel--compact .form-input {\n padding: 10px 14px;\n font-size: 14px;\n}\n\n.config-panel--compact .form-select {\n padding: 10px 36px 10px 14px;\n font-size: 14px;\n}\n\n/* ========================================\n Optional Tag\n ======================================== */\n\n.optional-tag {\n font-weight: 400;\n font-size: 12px;\n color: #888;\n}\n\n/* ========================================\n Selected Hint (Success State)\n ======================================== */\n\n.form-hint--selected {\n color: #2e7d32;\n}\n\n.form-hint--selected i {\n color: #2e7d32;\n}\n\n/* ========================================\n Collapsible Section\n ======================================== */\n\n.collapsible-section {\n border: 1px solid #e8eaf6;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: #f5f7fa;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.collapsible-header:hover {\n background: #e8eaf6;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.collapsible-title i {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.collapsible-chevron {\n color: #888;\n font-size: 12px;\n transition: transform 0.2s ease;\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #e8eaf6;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* ========================================\n Horizontal Radio Group\n ======================================== */\n\n.radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.radio-option--compact {\n padding: 10px 14px;\n flex: 1;\n min-width: 100px;\n}\n\n.radio-option--compact .radio-label {\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.radio-option--compact .radio-label i {\n color: #5c6bc0;\n font-size: 12px;\n}\n\n.radio-option--compact .radio-mark {\n width: 16px;\n height: 16px;\n}\n\n.radio-option--compact.selected .radio-mark::after {\n width: 8px;\n height: 8px;\n}\n\n/* ========================================\n Compact Checkbox Group\n ======================================== */\n\n.checkbox-group--compact {\n gap: 4px;\n}\n\n.checkbox-option--compact {\n padding: 10px 14px;\n}\n\n.checkbox-option--compact .checkbox-mark {\n width: 18px;\n height: 18px;\n margin-top: 0;\n}\n\n.checkbox-option--compact .checkbox-label {\n font-size: 13px;\n}\n\n/* ========================================\n Tree Dropdown Error State\n ======================================== */\n\nmj-tree-dropdown.error {\n --dropdown-border-color: #d32f2f;\n}\n\nmj-tree-dropdown.error:focus-within {\n --dropdown-border-focus: #d32f2f;\n}\n"] }]
|
|
283
|
+
args: [{ standalone: false, selector: 'mj-weburl-config-panel', template: "<!-- WebURL Config Panel - Form content only, no dialog chrome -->\n<div class=\"config-panel\">\n <!-- Title -->\n <div class=\"form-group\">\n <label for=\"partTitle\">\n <i class=\"fa-solid fa-heading\"></i>\n Part Title\n </label>\n <input\n type=\"text\"\n id=\"partTitle\"\n [(ngModel)]=\"title\"\n (input)=\"onTitleChange()\"\n placeholder=\"Enter a title for this part\"\n class=\"form-input\">\n </div>\n\n <!-- URL -->\n <div class=\"form-group\">\n <label for=\"webUrl\">\n <i class=\"fa-solid fa-link\"></i>\n URL\n <span class=\"required\">*</span>\n </label>\n <div class=\"input-with-action\">\n <input\n type=\"url\"\n id=\"webUrl\"\n [(ngModel)]=\"url\"\n (input)=\"onUrlChange()\"\n placeholder=\"https://example.com\"\n class=\"form-input\"\n [class.error]=\"urlError\">\n @if (showUrlPreview) {\n <button\n class=\"input-action-btn\"\n (click)=\"previewUrl()\"\n title=\"Preview in new tab\">\n <i class=\"fa-solid fa-external-link\"></i>\n </button>\n }\n </div>\n @if (urlError) {\n <span class=\"form-error\">{{ urlError }}</span>\n }\n @if (!urlError) {\n <span class=\"form-hint\">\n Enter the full URL including https://\n </span>\n }\n </div>\n\n <!-- Security Mode -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-shield-halved\"></i>\n Security Mode\n </label>\n <div class=\"radio-group\">\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'standard'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"standard\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Standard</span>\n <span class=\"radio-badge recommended\">Recommended</span>\n </span>\n </label>\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'strict'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"strict\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Strict</span>\n <span class=\"radio-badge secure\">Most Secure</span>\n </span>\n </label>\n <label class=\"radio-option\" [class.selected]=\"sandboxMode === 'permissive'\">\n <input\n type=\"radio\"\n name=\"sandboxMode\"\n value=\"permissive\"\n [(ngModel)]=\"sandboxMode\"\n (change)=\"onSandboxModeChange()\">\n <span class=\"radio-mark\"></span>\n <span class=\"radio-content\">\n <span class=\"radio-label\">Permissive</span>\n <span class=\"radio-badge warning\">Least Secure</span>\n </span>\n </label>\n </div>\n <span class=\"form-hint\">{{ getSandboxModeDescription() }}</span>\n </div>\n\n <!-- Options -->\n <div class=\"form-group\">\n <label>\n <i class=\"fa-solid fa-sliders\"></i>\n Options\n </label>\n <div class=\"checkbox-group\">\n <label class=\"checkbox-option\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"allowFullscreen\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-content\">\n <span class=\"checkbox-label\">Allow Fullscreen</span>\n <span class=\"checkbox-desc\">Enable fullscreen mode for the embedded content</span>\n </span>\n </label>\n <label class=\"checkbox-option\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"refreshOnResize\"\n (change)=\"onOptionChange()\">\n <span class=\"checkbox-mark\"></span>\n <span class=\"checkbox-content\">\n <span class=\"checkbox-label\">Refresh on Resize</span>\n <span class=\"checkbox-desc\">Reload the page when the part is resized</span>\n </span>\n </label>\n </div>\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"] }]
|
|
284
284
|
}], () => [{ type: i0.ChangeDetectorRef }], null); })();
|
|
285
285
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WebURLConfigPanelComponent, { className: "WebURLConfigPanelComponent", filePath: "src/lib/config-panels/weburl-config-panel.component.ts", lineNumber: 17 }); })();
|
|
286
286
|
//# sourceMappingURL=weburl-config-panel.component.js.map
|