@memberjunction/ng-entity-viewer 5.11.0 → 5.13.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/aggregate-panel/aggregate-panel.component.js +2 -2
- package/dist/lib/aggregate-setup-dialog/aggregate-setup-dialog.component.js +2 -2
- package/dist/lib/confirm-dialog/confirm-dialog.component.js +2 -2
- package/dist/lib/duplicate-view-dialog/duplicate-view-dialog.component.js +2 -2
- package/dist/lib/entity-cards/entity-cards.component.js +4 -4
- package/dist/lib/entity-cards/entity-cards.component.js.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts +26 -3
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.js +196 -137
- package/dist/lib/entity-data-grid/entity-data-grid.component.js.map +1 -1
- package/dist/lib/entity-data-grid/models/grid-types.js +4 -4
- package/dist/lib/entity-data-grid/models/grid-types.js.map +1 -1
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js +2 -2
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts +5 -4
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts.map +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.js +46 -69
- package/dist/lib/entity-viewer/entity-viewer.component.js.map +1 -1
- package/dist/lib/pill/pill.component.js +2 -2
- package/dist/lib/pill/pill.component.js.map +1 -1
- package/dist/lib/quick-save-dialog/quick-save-dialog.component.js +2 -2
- package/dist/lib/shared-view-warning-dialog/shared-view-warning-dialog.component.js +2 -2
- package/dist/lib/view-config-panel/view-config-panel.component.js +2 -2
- package/dist/lib/view-header/view-header.component.js +2 -2
- package/dist/module.d.ts +15 -16
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +4 -6
- package/dist/module.js.map +1 -1
- package/dist/public-api.d.ts +0 -1
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +0 -1
- package/dist/public-api.js.map +1 -1
- package/package.json +10 -9
- package/dist/lib/pagination/pagination.component.d.ts +0 -60
- package/dist/lib/pagination/pagination.component.d.ts.map +0 -1
- package/dist/lib/pagination/pagination.component.js +0 -201
- package/dist/lib/pagination/pagination.component.js.map +0 -1
|
@@ -339,11 +339,11 @@ export class QuickSaveDialogComponent {
|
|
|
339
339
|
i0.ɵɵconditional(ctx.Summary ? 29 : -1);
|
|
340
340
|
i0.ɵɵadvance(7);
|
|
341
341
|
i0.ɵɵconditional(ctx.ViewEntity ? 36 : 37);
|
|
342
|
-
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 480px;\n max-width: calc(100vw - 40px);\n max-height: calc(100vh - 60px);\n background:
|
|
342
|
+
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 480px;\n max-width: calc(100vw - 40px);\n max-height: calc(100vh - 60px);\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dialog-panel.open[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n border-radius: 16px 16px 0 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 18px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.entity-badge[_ngcontent-%COMP%] {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 3px 10px;\n border-radius: 12px;\n margin-left: auto;\n margin-right: 8px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 20px 24px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-group[_ngcontent-%COMP%] .optional[_ngcontent-%COMP%] {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input[_ngcontent-%COMP%] {\n padding: 9px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-input.invalid[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n font-family: inherit;\n min-height: 50px;\n}\n\n.validation-error[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n margin-top: 3px;\n flex-shrink: 0;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.checkbox-text[_ngcontent-%COMP%] small[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.summary-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 14px;\n}\n\n.summary-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin-bottom: 10px;\n}\n\n.summary-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.summary-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.summary-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n width: 16px;\n text-align: center;\n font-size: 12px;\n}\n\n.summary-item.smart-filter[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.summary-item.smart-filter[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.advanced-link[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n border: none;\n background: none;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.advanced-link[_ngcontent-%COMP%]:hover {\n color: var(--mj-color-info-600);\n text-decoration: underline;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n border-radius: 0 0 16px 16px;\n}\n\n.footer-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 20px;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-info-600);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n background: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n cursor: not-allowed;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-cancel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.btn-cancel[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-active);\n}"] });
|
|
343
343
|
}
|
|
344
344
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QuickSaveDialogComponent, [{
|
|
345
345
|
type: Component,
|
|
346
|
-
args: [{ standalone: false, selector: 'mj-quick-save-dialog', template: "<!-- Dialog Backdrop -->\n@if (IsOpen) {\n <div class=\"dialog-backdrop\" (click)=\"OnClose()\"></div>\n}\n\n<!-- Dialog Panel -->\n<div class=\"dialog-panel\" [class.open]=\"IsOpen\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-bookmark\"></i>\n <span>Save View</span>\n </div>\n @if (EntityName) {\n <span class=\"entity-badge\">{{ EntityName }}</span>\n }\n <button class=\"close-btn\" (click)=\"OnClose()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"dialog-content\">\n <!-- Name Field -->\n <div class=\"form-group\">\n <label for=\"quickSaveName\">View Name</label>\n <input\n id=\"quickSaveName\"\n type=\"text\"\n class=\"form-input\"\n [class.invalid]=\"NameTouched && !Name.trim()\"\n placeholder=\"e.g., Active West Coast Contacts\"\n [(ngModel)]=\"Name\"\n (blur)=\"NameTouched = true\"\n (keydown.enter)=\"OnSave(false)\"\n />\n @if (NameTouched && !Name.trim()) {\n <span class=\"validation-error\">Name is required</span>\n }\n </div>\n\n <!-- Description Field -->\n <div class=\"form-group\">\n <label for=\"quickSaveDescription\">Description <span class=\"optional\">(optional)</span></label>\n <textarea\n id=\"quickSaveDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"What does this view show?\"\n [(ngModel)]=\"Description\"\n rows=\"2\"\n ></textarea>\n </div>\n\n <!-- Share Toggle -->\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" [(ngModel)]=\"IsShared\" />\n <span class=\"checkbox-text\">\n <strong>Share with others</strong>\n <small>Allow other users to use this view</small>\n </span>\n </label>\n\n <!-- View Summary Preview -->\n @if (Summary) {\n <div class=\"summary-section\">\n <div class=\"summary-header\">\n <i class=\"fa-solid fa-list-check\"></i>\n <span>View includes:</span>\n </div>\n <div class=\"summary-items\">\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-columns\"></i>\n <span>{{ Summary.ColumnCount }} column{{ Summary.ColumnCount !== 1 ? 's' : '' }}</span>\n </div>\n @if (Summary.SortCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n <span>{{ Summary.SortCount }} sort level{{ Summary.SortCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n @if (Summary.SmartFilterActive) {\n <div class=\"summary-item smart-filter\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n <span>Smart filter: \"{{ Summary.SmartFilterPrompt }}\"</span>\n </div>\n }\n @if (Summary.FilterCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-filter\"></i>\n <span>{{ Summary.FilterCount }} filter{{ Summary.FilterCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n @if (Summary.AggregateCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-chart-simple\"></i>\n <span>{{ Summary.AggregateCount }} aggregate{{ Summary.AggregateCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Advanced Link -->\n <button class=\"advanced-link\" (click)=\"OnOpenAdvanced()\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>Customize columns, filters & sorting...</span>\n </button>\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-actions\">\n @if (ViewEntity) {\n <!-- Existing view: Update + Save As New -->\n <button\n class=\"btn btn-primary\"\n (click)=\"OnSave(false)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ IsSaving ? 'Saving...' : 'Update' }}\n </button>\n <button\n class=\"btn btn-secondary\"\n (click)=\"OnSave(true)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n <i class=\"fa-solid fa-plus\"></i>\n Save As New\n </button>\n } @else {\n <!-- New view: Create -->\n <button\n class=\"btn btn-primary\"\n (click)=\"OnSave(true)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n {{ IsSaving ? 'Saving...' : 'Create View' }}\n </button>\n }\n </div>\n <button class=\"btn btn-cancel\" (click)=\"OnClose()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Dialog Backdrop */\n.dialog-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Panel */\n.dialog-panel {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 480px;\n max-width: calc(100vw - 40px);\n max-height: calc(100vh - 60px);\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dialog-panel.open {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* Dialog Header */\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 24px;\n border-bottom: 1px solid #e5e7eb;\n background: #f8fafc;\n border-radius: 16px 16px 0 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 17px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.header-title i {\n color: #3b82f6;\n font-size: 18px;\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n color: #6b7280;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.close-btn:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n/* Entity Badge */\n.entity-badge {\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n background: #f3f4f6;\n padding: 3px 10px;\n border-radius: 12px;\n margin-left: auto;\n margin-right: 8px;\n}\n\n/* Dialog Content */\n.dialog-content {\n padding: 20px 24px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* Form Groups */\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.form-group label {\n font-size: 13px;\n font-weight: 500;\n color: #374151;\n}\n\n.form-group .optional {\n font-weight: 400;\n color: #9ca3af;\n}\n\n.form-input {\n padding: 9px 12px;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n font-size: 14px;\n color: #1f2937;\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.form-input.invalid {\n border-color: #ef4444;\n}\n\n.form-textarea {\n resize: vertical;\n font-family: inherit;\n min-height: 50px;\n}\n\n.validation-error {\n font-size: 12px;\n color: #ef4444;\n}\n\n/* Checkbox */\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n margin-top: 3px;\n flex-shrink: 0;\n}\n\n.checkbox-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text strong {\n font-size: 13px;\n color: #374151;\n}\n\n.checkbox-text small {\n font-size: 12px;\n color: #9ca3af;\n}\n\n/* Summary Section */\n.summary-section {\n background: #f8fafc;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n padding: 14px;\n}\n\n.summary-header {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 500;\n color: #6b7280;\n margin-bottom: 10px;\n}\n\n.summary-header i {\n color: #3b82f6;\n}\n\n.summary-items {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: #374151;\n}\n\n.summary-item i {\n color: #6b7280;\n width: 16px;\n text-align: center;\n font-size: 12px;\n}\n\n.summary-item.smart-filter {\n color: #7c3aed;\n}\n\n.summary-item.smart-filter i {\n color: #7c3aed;\n}\n\n/* Advanced Link */\n.advanced-link {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n border: none;\n background: none;\n color: #3b82f6;\n font-size: 13px;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.advanced-link:hover {\n color: #2563eb;\n text-decoration: underline;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid #e5e7eb;\n background: #f8fafc;\n border-radius: 0 0 16px 16px;\n}\n\n.footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n/* Buttons */\n.btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 20px;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.btn-primary {\n background: #3b82f6;\n color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n background: #2563eb;\n}\n\n.btn-primary:disabled {\n background: #93c5fd;\n cursor: not-allowed;\n}\n\n.btn-secondary {\n background: white;\n color: #374151;\n border: 1px solid #d1d5db;\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: #f9fafb;\n border-color: #9ca3af;\n}\n\n.btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-cancel {\n background: #f3f4f6;\n color: #374151;\n}\n\n.btn-cancel:hover {\n background: #e5e7eb;\n}\n"] }]
|
|
346
|
+
args: [{ standalone: false, selector: 'mj-quick-save-dialog', template: "<!-- Dialog Backdrop -->\n@if (IsOpen) {\n <div class=\"dialog-backdrop\" (click)=\"OnClose()\"></div>\n}\n\n<!-- Dialog Panel -->\n<div class=\"dialog-panel\" [class.open]=\"IsOpen\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-bookmark\"></i>\n <span>Save View</span>\n </div>\n @if (EntityName) {\n <span class=\"entity-badge\">{{ EntityName }}</span>\n }\n <button class=\"close-btn\" (click)=\"OnClose()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"dialog-content\">\n <!-- Name Field -->\n <div class=\"form-group\">\n <label for=\"quickSaveName\">View Name</label>\n <input\n id=\"quickSaveName\"\n type=\"text\"\n class=\"form-input\"\n [class.invalid]=\"NameTouched && !Name.trim()\"\n placeholder=\"e.g., Active West Coast Contacts\"\n [(ngModel)]=\"Name\"\n (blur)=\"NameTouched = true\"\n (keydown.enter)=\"OnSave(false)\"\n />\n @if (NameTouched && !Name.trim()) {\n <span class=\"validation-error\">Name is required</span>\n }\n </div>\n\n <!-- Description Field -->\n <div class=\"form-group\">\n <label for=\"quickSaveDescription\">Description <span class=\"optional\">(optional)</span></label>\n <textarea\n id=\"quickSaveDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"What does this view show?\"\n [(ngModel)]=\"Description\"\n rows=\"2\"\n ></textarea>\n </div>\n\n <!-- Share Toggle -->\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" [(ngModel)]=\"IsShared\" />\n <span class=\"checkbox-text\">\n <strong>Share with others</strong>\n <small>Allow other users to use this view</small>\n </span>\n </label>\n\n <!-- View Summary Preview -->\n @if (Summary) {\n <div class=\"summary-section\">\n <div class=\"summary-header\">\n <i class=\"fa-solid fa-list-check\"></i>\n <span>View includes:</span>\n </div>\n <div class=\"summary-items\">\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-columns\"></i>\n <span>{{ Summary.ColumnCount }} column{{ Summary.ColumnCount !== 1 ? 's' : '' }}</span>\n </div>\n @if (Summary.SortCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n <span>{{ Summary.SortCount }} sort level{{ Summary.SortCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n @if (Summary.SmartFilterActive) {\n <div class=\"summary-item smart-filter\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n <span>Smart filter: \"{{ Summary.SmartFilterPrompt }}\"</span>\n </div>\n }\n @if (Summary.FilterCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-filter\"></i>\n <span>{{ Summary.FilterCount }} filter{{ Summary.FilterCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n @if (Summary.AggregateCount > 0) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-chart-simple\"></i>\n <span>{{ Summary.AggregateCount }} aggregate{{ Summary.AggregateCount !== 1 ? 's' : '' }}</span>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Advanced Link -->\n <button class=\"advanced-link\" (click)=\"OnOpenAdvanced()\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>Customize columns, filters & sorting...</span>\n </button>\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <div class=\"footer-actions\">\n @if (ViewEntity) {\n <!-- Existing view: Update + Save As New -->\n <button\n class=\"btn btn-primary\"\n (click)=\"OnSave(false)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ IsSaving ? 'Saving...' : 'Update' }}\n </button>\n <button\n class=\"btn btn-secondary\"\n (click)=\"OnSave(true)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n <i class=\"fa-solid fa-plus\"></i>\n Save As New\n </button>\n } @else {\n <!-- New view: Create -->\n <button\n class=\"btn btn-primary\"\n (click)=\"OnSave(true)\"\n [disabled]=\"!Name.trim() || IsSaving\">\n @if (IsSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n {{ IsSaving ? 'Saving...' : 'Create View' }}\n </button>\n }\n </div>\n <button class=\"btn btn-cancel\" (click)=\"OnClose()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Dialog Backdrop */\n.dialog-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Panel */\n.dialog-panel {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 480px;\n max-width: calc(100vw - 40px);\n max-height: calc(100vh - 60px);\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dialog-panel.open {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* Dialog Header */\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n border-radius: 16px 16px 0 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.header-title i {\n color: var(--mj-brand-primary);\n font-size: 18px;\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Entity Badge */\n.entity-badge {\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 3px 10px;\n border-radius: 12px;\n margin-left: auto;\n margin-right: 8px;\n}\n\n/* Dialog Content */\n.dialog-content {\n padding: 20px 24px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n/* Form Groups */\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.form-group label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.form-group .optional {\n font-weight: 400;\n color: var(--mj-text-disabled);\n}\n\n.form-input {\n padding: 9px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-input.invalid {\n border-color: var(--mj-status-error);\n}\n\n.form-textarea {\n resize: vertical;\n font-family: inherit;\n min-height: 50px;\n}\n\n.validation-error {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n/* Checkbox */\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n margin-top: 3px;\n flex-shrink: 0;\n}\n\n.checkbox-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text strong {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.checkbox-text small {\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n/* Summary Section */\n.summary-section {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n padding: 14px;\n}\n\n.summary-header {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n margin-bottom: 10px;\n}\n\n.summary-header i {\n color: var(--mj-brand-primary);\n}\n\n.summary-items {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.summary-item i {\n color: var(--mj-text-muted);\n width: 16px;\n text-align: center;\n font-size: 12px;\n}\n\n.summary-item.smart-filter {\n color: var(--mj-brand-primary);\n}\n\n.summary-item.smart-filter i {\n color: var(--mj-brand-primary);\n}\n\n/* Advanced Link */\n.advanced-link {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n border: none;\n background: none;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.advanced-link:hover {\n color: var(--mj-color-info-600);\n text-decoration: underline;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n border-radius: 0 0 16px 16px;\n}\n\n.footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n/* Buttons */\n.btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 20px;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n background: var(--mj-color-info-600);\n}\n\n.btn-primary:disabled {\n background: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n cursor: not-allowed;\n}\n\n.btn-secondary {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.btn-secondary:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n.btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-cancel {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.btn-cancel:hover {\n background: var(--mj-bg-surface-active);\n}\n"] }]
|
|
347
347
|
}], () => [{ type: i0.ChangeDetectorRef }], { IsOpen: [{
|
|
348
348
|
type: Input
|
|
349
349
|
}], ViewEntity: [{
|
|
@@ -82,11 +82,11 @@ export class SharedViewWarningDialogComponent {
|
|
|
82
82
|
i0.ɵɵclassProp("open", ctx.IsOpen);
|
|
83
83
|
i0.ɵɵadvance(11);
|
|
84
84
|
i0.ɵɵtextInterpolate1("\"", ctx.ViewName, "\"");
|
|
85
|
-
} }, styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 440px;\n max-width: calc(100vw - 40px);\n background:
|
|
85
|
+
} }, styles: ["\n\n.dialog-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.dialog-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 440px;\n max-width: calc(100vw - 40px);\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dialog-panel.open[_ngcontent-%COMP%] {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 0;\n}\n\n.icon-circle[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.icon-circle.warning[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning);\n}\n\n.header-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.dialog-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n}\n\n.message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n line-height: 1.6;\n margin: 0 0 16px 0;\n}\n\n.message[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n}\n\n\n\n.warning-box[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n background: var(--mj-status-warning-bg);\n border-radius: 8px;\n padding: 10px 14px;\n font-size: 13px;\n color: var(--mj-status-warning);\n}\n\n.warning-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px 24px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 9px 16px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-color-info-600);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n.btn-ghost[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-text-muted);\n margin-left: auto;\n}\n\n.btn-ghost[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}"] });
|
|
86
86
|
}
|
|
87
87
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SharedViewWarningDialogComponent, [{
|
|
88
88
|
type: Component,
|
|
89
|
-
args: [{ standalone: false, selector: 'mj-shared-view-warning-dialog', template: "<!-- Dialog Backdrop -->\n@if (IsOpen) {\n <div class=\"dialog-backdrop\" (click)=\"OnCancel()\"></div>\n}\n\n<!-- Dialog Panel -->\n<div class=\"dialog-panel\" [class.open]=\"IsOpen\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"icon-circle warning\">\n <i class=\"fa-solid fa-users\"></i>\n </div>\n <span class=\"header-title\">Shared View</span>\n <button class=\"close-btn\" (click)=\"OnCancel()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Body -->\n <div class=\"dialog-body\">\n <p class=\"message\">\n <strong>\"{{ ViewName }}\"</strong> is shared with other users.\n Changes you save will affect everyone who uses this view.\n </p>\n <div class=\"warning-box\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n <span>Other users may be relying on this view's current configuration.</span>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <button class=\"btn btn-primary\" (click)=\"OnUpdateShared()\">\n <i class=\"fa-solid fa-save\"></i>\n Update Shared View\n </button>\n <button class=\"btn btn-secondary\" (click)=\"OnSaveAsCopy()\">\n <i class=\"fa-solid fa-plus\"></i>\n Save As My Copy\n </button>\n <button class=\"btn btn-ghost\" (click)=\"OnCancel()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Dialog Backdrop */\n.dialog-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Panel */\n.dialog-panel {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 440px;\n max-width: calc(100vw - 40px);\n background:
|
|
89
|
+
args: [{ standalone: false, selector: 'mj-shared-view-warning-dialog', template: "<!-- Dialog Backdrop -->\n@if (IsOpen) {\n <div class=\"dialog-backdrop\" (click)=\"OnCancel()\"></div>\n}\n\n<!-- Dialog Panel -->\n<div class=\"dialog-panel\" [class.open]=\"IsOpen\">\n <!-- Header -->\n <div class=\"dialog-header\">\n <div class=\"icon-circle warning\">\n <i class=\"fa-solid fa-users\"></i>\n </div>\n <span class=\"header-title\">Shared View</span>\n <button class=\"close-btn\" (click)=\"OnCancel()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Body -->\n <div class=\"dialog-body\">\n <p class=\"message\">\n <strong>\"{{ ViewName }}\"</strong> is shared with other users.\n Changes you save will affect everyone who uses this view.\n </p>\n <div class=\"warning-box\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n <span>Other users may be relying on this view's current configuration.</span>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"dialog-footer\">\n <button class=\"btn btn-primary\" (click)=\"OnUpdateShared()\">\n <i class=\"fa-solid fa-save\"></i>\n Update Shared View\n </button>\n <button class=\"btn btn-secondary\" (click)=\"OnSaveAsCopy()\">\n <i class=\"fa-solid fa-plus\"></i>\n Save As My Copy\n </button>\n <button class=\"btn btn-ghost\" (click)=\"OnCancel()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Dialog Backdrop */\n.dialog-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 2000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Dialog Panel */\n.dialog-panel {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n width: 440px;\n max-width: calc(100vw - 40px);\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);\n z-index: 2001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dialog-panel.open {\n opacity: 1;\n pointer-events: auto;\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* Dialog Header */\n.dialog-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px 24px 0;\n}\n\n.icon-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.icon-circle.warning {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning);\n}\n\n.header-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n}\n\n.close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Dialog Body */\n.dialog-body {\n padding: 20px 24px;\n}\n\n.message {\n font-size: 14px;\n color: var(--mj-text-muted);\n line-height: 1.6;\n margin: 0 0 16px 0;\n}\n\n.message strong {\n color: var(--mj-text-primary);\n}\n\n/* Warning Box */\n.warning-box {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n background: var(--mj-status-warning-bg);\n border-radius: 8px;\n padding: 10px 14px;\n font-size: 13px;\n color: var(--mj-status-warning);\n}\n\n.warning-box i {\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px 24px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* Buttons */\n.btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 9px 16px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover {\n background: var(--mj-color-info-600);\n}\n\n.btn-secondary {\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.btn-secondary:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-text-disabled);\n}\n\n.btn-ghost {\n background: transparent;\n color: var(--mj-text-muted);\n margin-left: auto;\n}\n\n.btn-ghost:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n"] }]
|
|
90
90
|
}], null, { IsOpen: [{
|
|
91
91
|
type: Input
|
|
92
92
|
}], ViewName: [{
|