@memberjunction/ng-versions 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/label-create/label-create.component.js +2 -2
- package/dist/lib/label-detail/label-detail.component.js +245 -245
- package/dist/lib/label-detail/label-detail.component.js.map +1 -1
- package/dist/lib/panel/slide-panel.component.js +2 -2
- package/dist/lib/record-micro-view/record-micro-view.component.js +2 -2
- package/package.json +6 -6
|
@@ -778,11 +778,11 @@ export class MjLabelCreateComponent {
|
|
|
778
778
|
i0.ɵɵconditional(ctx.CreateStep === "creating" ? 5 : -1);
|
|
779
779
|
i0.ɵɵadvance();
|
|
780
780
|
i0.ɵɵconditional(ctx.CreateStep === "done" ? 6 : -1);
|
|
781
|
-
} }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.SlicePipe], styles: ["\n\n.label-create-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 24px;\n padding: 0 20px;\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n background: var(--hover-background, #f3f4f6);\n color: var(--text-tertiary, #9ca3af);\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: #6366f1;\n color: #ffffff;\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: #10b981;\n color: #ffffff;\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-tertiary, #9ca3af);\n}\n\n.step.active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--text-primary, #1f2937);\n font-weight: 600;\n}\n\n.step.completed[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: #10b981;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 40px;\n height: 2px;\n background: var(--border-color, #e5e7eb);\n margin: 0 8px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n background: #10b981;\n}\n\n\n\n.dialog-step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-height: 300px;\n}\n\n.step-description[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0;\n}\n\n.step-header-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.btn-back[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.btn-back[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n\n\n.dialog-search[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.dialog-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.dialog-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 9px 12px 9px 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.dialog-search-input[_ngcontent-%COMP%]:focus {\n border-color: #6366f1;\n}\n\n.dialog-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n max-height: 320px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n}\n\n.entity-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.entity-option[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.entity-option[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.entity-option-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.entity-option-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.entity-option-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.entity-option-arrow[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 12px;\n flex-shrink: 0;\n}\n\n.entity-list-empty[_ngcontent-%COMP%] {\n padding: 40px 20px;\n text-align: center;\n color: var(--text-tertiary, #9ca3af);\n font-size: 14px;\n}\n\n\n\n.records-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.selection-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n.btn-text[_ngcontent-%COMP%] {\n padding: 6px 12px;\n background: none;\n border: none;\n font-size: 13px;\n font-weight: 500;\n color: #6366f1;\n cursor: pointer;\n border-radius: 6px;\n transition: background 0.15s ease;\n}\n\n.btn-text[_ngcontent-%COMP%]:hover {\n background: rgba(99, 102, 241, 0.1);\n}\n\n.record-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n max-height: 280px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n}\n\n.record-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.record-option[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.record-option[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.record-option.selected[_ngcontent-%COMP%] {\n background: rgba(99, 102, 241, 0.05);\n}\n\n.record-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: 2px solid var(--border-color, #d1d5db);\n border-radius: 4px;\n font-size: 11px;\n color: transparent;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.record-option.selected[_ngcontent-%COMP%] .record-checkbox[_ngcontent-%COMP%] {\n background: #6366f1;\n border-color: #6366f1;\n color: #ffffff;\n}\n\n.record-name[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 8px;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary, #6b7280);\n}\n\n\n\n.details-summary[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 14px 16px;\n background: var(--hover-background, #f3f4f6);\n border-radius: 10px;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n}\n\n.summary-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 13px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n border-color: #6366f1;\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n padding: 10px 14px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n resize: vertical;\n font-family: inherit;\n transition: border-color 0.15s ease;\n}\n\n.form-textarea[_ngcontent-%COMP%]:focus {\n border-color: #6366f1;\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-textarea[_ngcontent-%COMP%]::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n.details-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 8px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: #6366f1;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: #4f46e5;\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--card-background, #ffffff);\n color: var(--text-secondary, #6b7280);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n\n\n.creating-step[_ngcontent-%COMP%] {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.creating-animation[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.creating-icon[_ngcontent-%COMP%] {\n font-size: 40px;\n color: #6366f1;\n}\n\n.creating-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 8px 0;\n}\n\n.creating-progress[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0;\n}\n\n\n\n.progress-container[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 420px;\n margin: 16px auto 0;\n text-align: left;\n}\n\n.progress-bar-track[_ngcontent-%COMP%] {\n width: 100%;\n height: 8px;\n background: var(--hover-background, #e5e7eb);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.progress-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, #6366f1, #818cf8);\n border-radius: 4px;\n transition: width 0.3s ease;\n}\n\n.progress-details[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n}\n\n.progress-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n margin-right: 12px;\n}\n\n.progress-pct[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: #6366f1;\n white-space: nowrap;\n}\n\n.progress-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 6px;\n}\n\n.progress-stat[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n}\n\n.progress-stat[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.done-step[_ngcontent-%COMP%] {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.done-icon-wrap[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.done-icon-wrap.success[_ngcontent-%COMP%] {\n background: rgba(16, 185, 129, 0.1);\n color: #10b981;\n}\n\n.done-icon-wrap.error[_ngcontent-%COMP%] {\n background: rgba(239, 68, 68, 0.1);\n color: #ef4444;\n}\n\n.done-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 8px 0;\n}\n\n.done-message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0 0 20px 0;\n}\n\n.error-text[_ngcontent-%COMP%] {\n color: #ef4444;\n}"], changeDetection: 0 });
|
|
781
|
+
} }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.SlicePipe], styles: ["\n\n.label-create-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 24px;\n padding: 0 20px;\n}\n\n.step[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-disabled);\n transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%] .step-number[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.step.active[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.step.completed[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.step-connector[_ngcontent-%COMP%] {\n width: 40px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n\n\n.dialog-step[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-height: 300px;\n}\n\n.step-description[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n.step-header-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.btn-back[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.btn-back[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.dialog-search[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.dialog-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.dialog-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 9px 12px 9px 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.dialog-search-input[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.dialog-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n max-height: 320px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n}\n\n.entity-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.entity-option[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.entity-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.entity-option-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.entity-option-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.entity-option-desc[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.entity-option-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n flex-shrink: 0;\n}\n\n.entity-list-empty[_ngcontent-%COMP%] {\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n\n\n.records-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.selection-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n.btn-text[_ngcontent-%COMP%] {\n padding: 6px 12px;\n background: none;\n border: none;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-brand-primary);\n cursor: pointer;\n border-radius: 6px;\n transition: background 0.15s ease;\n}\n\n.btn-text[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.record-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n max-height: 280px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n}\n\n.record-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.record-option[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.record-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.record-option.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.record-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 11px;\n color: transparent;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.record-option.selected[_ngcontent-%COMP%] .record-checkbox[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.record-name[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 8px;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n}\n\n\n\n.details-summary[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 14px 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\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-muted);\n}\n\n.summary-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 13px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-input[_ngcontent-%COMP%] {\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\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[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n resize: vertical;\n font-family: inherit;\n transition: border-color 0.15s ease;\n}\n\n.form-textarea[_ngcontent-%COMP%]:focus {\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-textarea[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.details-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 8px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.creating-step[_ngcontent-%COMP%] {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.creating-animation[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.creating-icon[_ngcontent-%COMP%] {\n font-size: 40px;\n color: var(--mj-brand-primary);\n}\n\n.creating-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 8px 0;\n}\n\n.creating-progress[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n\n\n.progress-container[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 420px;\n margin: 16px auto 0;\n text-align: left;\n}\n\n.progress-bar-track[_ngcontent-%COMP%] {\n width: 100%;\n height: 8px;\n background: var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.progress-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-brand-primary);\n border-radius: 4px;\n transition: width 0.3s ease;\n}\n\n.progress-details[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n}\n\n.progress-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n margin-right: 12px;\n}\n\n.progress-pct[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n white-space: nowrap;\n}\n\n.progress-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n margin-top: 6px;\n}\n\n.progress-stat[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.progress-stat[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.done-step[_ngcontent-%COMP%] {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.done-icon-wrap[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.done-icon-wrap.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n color: var(--mj-status-success);\n}\n\n.done-icon-wrap.error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n color: var(--mj-status-error);\n}\n\n.done-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 8px 0;\n}\n\n.done-message[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0 0 20px 0;\n}\n\n.error-text[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}"], changeDetection: 0 });
|
|
782
782
|
}
|
|
783
783
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjLabelCreateComponent, [{
|
|
784
784
|
type: Component,
|
|
785
|
-
args: [{ standalone: false, selector: 'mj-label-create', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label-create-container\">\n\n <!-- Step indicator -->\n @if (CreateStep !== 'creating' && CreateStep !== 'done') {\n <div class=\"step-indicator\">\n <div class=\"step\" [class.active]=\"CreateStep === 'entity'\" [class.completed]=\"CreateStep !== 'entity'\">\n <span class=\"step-number\">1</span>\n <span class=\"step-label\">Entity</span>\n </div>\n <div class=\"step-connector\" [class.active]=\"CreateStep !== 'entity'\"></div>\n <div class=\"step\" [class.active]=\"CreateStep === 'records'\" [class.completed]=\"CreateStep === 'details'\">\n <span class=\"step-number\">2</span>\n <span class=\"step-label\">Records</span>\n </div>\n <div class=\"step-connector\" [class.active]=\"CreateStep === 'details'\"></div>\n <div class=\"step\" [class.active]=\"CreateStep === 'details'\">\n <span class=\"step-number\">3</span>\n <span class=\"step-label\">Details</span>\n </div>\n </div>\n }\n\n <!-- Step 1: Pick Entity -->\n @if (CreateStep === 'entity') {\n <div class=\"dialog-step\">\n <p class=\"step-description\">Choose an entity type to label records from.</p>\n <div class=\"dialog-search\">\n <i class=\"fa-solid fa-search dialog-search-icon\"></i>\n <input type=\"text\"\n class=\"dialog-search-input\"\n placeholder=\"Search entities...\"\n [ngModel]=\"EntitySearchText\"\n (ngModelChange)=\"OnEntitySearchChange($event)\" />\n </div>\n <div class=\"entity-list\">\n @for (entity of FilteredEntities; track entity) {\n <div class=\"entity-option\"\n (click)=\"SelectEntity(entity)\">\n <div class=\"entity-option-info\">\n <span class=\"entity-option-name\">{{entity.Name}}</span>\n @if (entity.Description) {\n <span class=\"entity-option-desc\">{{entity.Description | slice:0:80}}</span>\n }\n </div>\n <i class=\"fa-solid fa-chevron-right entity-option-arrow\"></i>\n </div>\n }\n @if (FilteredEntities.length === 0) {\n <div class=\"entity-list-empty\">\n No entities match your search.\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Step 2: Select Records -->\n @if (CreateStep === 'records') {\n <div class=\"dialog-step\">\n <div class=\"step-header-row\">\n @if (!PreselectedEntity) {\n <button class=\"btn-back\" (click)=\"GoBackToEntity()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n }\n <div>\n <p class=\"step-description\">\n Select records from <strong>{{SelectedEntity?.Name}}</strong> to label.\n </p>\n </div>\n </div>\n @if (IsLoadingRecords) {\n <mj-loading text=\"Loading records...\"></mj-loading>\n }\n @if (!IsLoadingRecords) {\n <div class=\"records-toolbar\">\n <div class=\"dialog-search\" style=\"flex: 1;\">\n <i class=\"fa-solid fa-search dialog-search-icon\"></i>\n <input type=\"text\"\n class=\"dialog-search-input\"\n placeholder=\"Search records...\"\n [ngModel]=\"RecordSearchText\"\n (ngModelChange)=\"OnRecordSearchChange($event)\" />\n </div>\n <div class=\"selection-actions\">\n <button class=\"btn-text\" (click)=\"SelectAllRecords()\">Select All</button>\n <button class=\"btn-text\" (click)=\"DeselectAllRecords()\">Clear</button>\n </div>\n </div>\n <div class=\"record-list\">\n @for (record of FilteredRecords; track record) {\n <div class=\"record-option\"\n [class.selected]=\"record.Selected\"\n (click)=\"ToggleRecordSelection(record)\">\n <div class=\"record-checkbox\">\n @if (record.Selected) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </div>\n <span class=\"record-name\">{{record.DisplayName}}</span>\n </div>\n }\n @if (FilteredRecords.length === 0 && !IsLoadingRecords) {\n <div class=\"entity-list-empty\">\n No records found for this entity.\n </div>\n }\n </div>\n <div class=\"records-footer\">\n <span class=\"selection-count\">{{SelectedRecordCount}} selected</span>\n <button class=\"btn-primary\"\n [disabled]=\"SelectedRecordCount === 0\"\n (click)=\"GoToDetailsStep()\">\n Continue\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Step 3: Label Details -->\n @if (CreateStep === 'details') {\n <div class=\"dialog-step\">\n <div class=\"step-header-row\">\n <button class=\"btn-back\" (click)=\"GoBackToRecords()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <p class=\"step-description\">Name your version label.</p>\n </div>\n <div class=\"details-summary\">\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-table\"></i>\n <span>{{SelectedEntity?.Name}}</span>\n </div>\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-check-double\"></i>\n <span>{{SelectedRecordCount}} record{{SelectedRecordCount > 1 ? 's' : ''}} selected</span>\n </div>\n @if (SelectedRecordCount > 1) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-layer-group\"></i>\n <span>Will create 1 group + {{SelectedRecordCount}} child labels</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <label class=\"form-label\">Label Name</label>\n <input type=\"text\"\n class=\"form-input\"\n placeholder=\"e.g. Customer Support Agent v2.0\"\n [(ngModel)]=\"LabelName\" />\n </div>\n <div class=\"form-field\">\n <label class=\"form-label\">Description (optional)</label>\n <textarea class=\"form-textarea\"\n rows=\"3\"\n placeholder=\"What does this version represent?\"\n [(ngModel)]=\"LabelDescription\"></textarea>\n </div>\n <div class=\"details-footer\">\n <button class=\"btn-primary\"\n [disabled]=\"!LabelName.trim()\"\n (click)=\"CreateLabels()\">\n <i class=\"fa-solid fa-tag\"></i>\n Create Label{{SelectedRecordCount > 1 ? 's' : ''}}\n </button>\n <button class=\"btn-secondary\" (click)=\"OnCancel()\">\n Cancel\n </button>\n </div>\n </div>\n }\n\n <!-- Creating state -->\n @if (CreateStep === 'creating') {\n <div class=\"dialog-step creating-step\">\n <div class=\"creating-animation\">\n <i class=\"fa-solid fa-tag fa-spin creating-icon\"></i>\n </div>\n <h3 class=\"creating-title\">Creating Labels...</h3>\n <!-- Progress bar -->\n @if (CreateProgress) {\n <div class=\"progress-container\">\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"CreateProgress.Percentage\"></div>\n </div>\n <div class=\"progress-details\">\n <span class=\"progress-message\">{{CreateProgress.Message}}</span>\n <span class=\"progress-pct\">{{CreateProgress.Percentage}}%</span>\n </div>\n @if (CreateProgress.RecordsProcessed != null && CreateProgress.TotalRecords) {\n <div class=\"progress-stats\">\n <span class=\"progress-stat\">\n <i class=\"fa-solid fa-camera\"></i>\n {{CreateProgress.RecordsProcessed}} / {{CreateProgress.TotalRecords}} records\n </span>\n @if (CreateProgress.CurrentEntity) {\n <span class=\"progress-stat\">\n <i class=\"fa-solid fa-table\"></i>\n {{CreateProgress.CurrentEntity}}\n </span>\n }\n </div>\n }\n </div>\n }\n @if (!CreateProgress) {\n <p class=\"creating-progress\">\n {{CreatedLabelCount}} label{{CreatedLabelCount !== 1 ? 's' : ''}} created\n @if (CreatedItemCount > 0) {\n <span> · {{CreatedItemCount}} items captured</span>\n }\n </p>\n }\n </div>\n }\n\n <!-- Done state -->\n @if (CreateStep === 'done') {\n <div class=\"dialog-step done-step\">\n @if (!CreateError) {\n <div class=\"done-icon-wrap success\">\n <i class=\"fa-solid fa-check\"></i>\n </div>\n <h3 class=\"done-title\">Labels Created</h3>\n <p class=\"done-message\">\n Successfully created {{CreatedLabelCount}} label{{CreatedLabelCount !== 1 ? 's' : ''}}\n @if (CreatedItemCount > 0) {\n <span> with {{CreatedItemCount}} items captured</span>\n }.\n </p>\n }\n @if (CreateError) {\n <div class=\"done-icon-wrap error\">\n <i class=\"fa-solid fa-xmark\"></i>\n </div>\n <h3 class=\"done-title\">Error</h3>\n <p class=\"done-message error-text\">{{CreateError}}</p>\n }\n <button class=\"btn-primary\" (click)=\"FinishCreate()\">Done</button>\n </div>\n }\n </div>\n", styles: ["/* Label Create Wizard Container */\n.label-create-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Step Indicator */\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 24px;\n padding: 0 20px;\n}\n\n.step {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n background: var(--hover-background, #f3f4f6);\n color: var(--text-tertiary, #9ca3af);\n transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n background: #6366f1;\n color: #ffffff;\n}\n\n.step.completed .step-number {\n background: #10b981;\n color: #ffffff;\n}\n\n.step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-tertiary, #9ca3af);\n}\n\n.step.active .step-label {\n color: var(--text-primary, #1f2937);\n font-weight: 600;\n}\n\n.step.completed .step-label {\n color: #10b981;\n}\n\n.step-connector {\n width: 40px;\n height: 2px;\n background: var(--border-color, #e5e7eb);\n margin: 0 8px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active {\n background: #10b981;\n}\n\n/* Dialog Step Content */\n.dialog-step {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-height: 300px;\n}\n\n.step-description {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0;\n}\n\n.step-header-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.btn-back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.btn-back:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n/* Dialog Search */\n.dialog-search {\n position: relative;\n}\n\n.dialog-search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary, #9ca3af);\n font-size: 13px;\n}\n\n.dialog-search-input {\n width: 100%;\n padding: 9px 12px 9px 36px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.dialog-search-input:focus {\n border-color: #6366f1;\n}\n\n.dialog-search-input::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n/* Entity List */\n.entity-list {\n flex: 1;\n overflow-y: auto;\n max-height: 320px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n}\n\n.entity-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.entity-option:last-child {\n border-bottom: none;\n}\n\n.entity-option:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.entity-option-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.entity-option-name {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n}\n\n.entity-option-desc {\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.entity-option-arrow {\n color: var(--text-tertiary, #9ca3af);\n font-size: 12px;\n flex-shrink: 0;\n}\n\n.entity-list-empty {\n padding: 40px 20px;\n text-align: center;\n color: var(--text-tertiary, #9ca3af);\n font-size: 14px;\n}\n\n/* Records */\n.records-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.selection-actions {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n.btn-text {\n padding: 6px 12px;\n background: none;\n border: none;\n font-size: 13px;\n font-weight: 500;\n color: #6366f1;\n cursor: pointer;\n border-radius: 6px;\n transition: background 0.15s ease;\n}\n\n.btn-text:hover {\n background: rgba(99, 102, 241, 0.1);\n}\n\n.record-list {\n flex: 1;\n overflow-y: auto;\n max-height: 280px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 10px;\n}\n\n.record-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.record-option:last-child {\n border-bottom: none;\n}\n\n.record-option:hover {\n background: var(--hover-background, #f3f4f6);\n}\n\n.record-option.selected {\n background: rgba(99, 102, 241, 0.05);\n}\n\n.record-checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: 2px solid var(--border-color, #d1d5db);\n border-radius: 4px;\n font-size: 11px;\n color: transparent;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.record-option.selected .record-checkbox {\n background: #6366f1;\n border-color: #6366f1;\n color: #ffffff;\n}\n\n.record-name {\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 8px;\n}\n\n.selection-count {\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary, #6b7280);\n}\n\n/* Details step */\n.details-summary {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 14px 16px;\n background: var(--hover-background, #f3f4f6);\n border-radius: 10px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n}\n\n.summary-item i {\n color: #6366f1;\n font-size: 13px;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.form-input {\n padding: 10px 14px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n border-color: #6366f1;\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-input::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n.form-textarea {\n padding: 10px 14px;\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n color: var(--text-primary, #1f2937);\n outline: none;\n resize: vertical;\n font-family: inherit;\n transition: border-color 0.15s ease;\n}\n\n.form-textarea:focus {\n border-color: #6366f1;\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-textarea::placeholder {\n color: var(--text-tertiary, #9ca3af);\n}\n\n.details-footer {\n display: flex;\n gap: 12px;\n padding-top: 8px;\n}\n\n/* Buttons */\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: #6366f1;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: #4f46e5;\n}\n\n.btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--card-background, #ffffff);\n color: var(--text-secondary, #6b7280);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n/* Creating state */\n.creating-step {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.creating-animation {\n margin-bottom: 16px;\n}\n\n.creating-icon {\n font-size: 40px;\n color: #6366f1;\n}\n\n.creating-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 8px 0;\n}\n\n.creating-progress {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0;\n}\n\n/* Progress bar */\n.progress-container {\n width: 100%;\n max-width: 420px;\n margin: 16px auto 0;\n text-align: left;\n}\n\n.progress-bar-track {\n width: 100%;\n height: 8px;\n background: var(--hover-background, #e5e7eb);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.progress-bar-fill {\n height: 100%;\n background: linear-gradient(90deg, #6366f1, #818cf8);\n border-radius: 4px;\n transition: width 0.3s ease;\n}\n\n.progress-details {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n}\n\n.progress-message {\n font-size: 13px;\n color: var(--text-secondary, #6b7280);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n margin-right: 12px;\n}\n\n.progress-pct {\n font-size: 13px;\n font-weight: 600;\n color: #6366f1;\n white-space: nowrap;\n}\n\n.progress-stats {\n display: flex;\n gap: 16px;\n margin-top: 6px;\n}\n\n.progress-stat {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n}\n\n.progress-stat i {\n font-size: 11px;\n}\n\n/* Done state */\n.done-step {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.done-icon-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.done-icon-wrap.success {\n background: rgba(16, 185, 129, 0.1);\n color: #10b981;\n}\n\n.done-icon-wrap.error {\n background: rgba(239, 68, 68, 0.1);\n color: #ef4444;\n}\n\n.done-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n margin: 0 0 8px 0;\n}\n\n.done-message {\n font-size: 14px;\n color: var(--text-secondary, #6b7280);\n margin: 0 0 20px 0;\n}\n\n.error-text {\n color: #ef4444;\n}\n"] }]
|
|
785
|
+
args: [{ standalone: false, selector: 'mj-label-create', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label-create-container\">\n\n <!-- Step indicator -->\n @if (CreateStep !== 'creating' && CreateStep !== 'done') {\n <div class=\"step-indicator\">\n <div class=\"step\" [class.active]=\"CreateStep === 'entity'\" [class.completed]=\"CreateStep !== 'entity'\">\n <span class=\"step-number\">1</span>\n <span class=\"step-label\">Entity</span>\n </div>\n <div class=\"step-connector\" [class.active]=\"CreateStep !== 'entity'\"></div>\n <div class=\"step\" [class.active]=\"CreateStep === 'records'\" [class.completed]=\"CreateStep === 'details'\">\n <span class=\"step-number\">2</span>\n <span class=\"step-label\">Records</span>\n </div>\n <div class=\"step-connector\" [class.active]=\"CreateStep === 'details'\"></div>\n <div class=\"step\" [class.active]=\"CreateStep === 'details'\">\n <span class=\"step-number\">3</span>\n <span class=\"step-label\">Details</span>\n </div>\n </div>\n }\n\n <!-- Step 1: Pick Entity -->\n @if (CreateStep === 'entity') {\n <div class=\"dialog-step\">\n <p class=\"step-description\">Choose an entity type to label records from.</p>\n <div class=\"dialog-search\">\n <i class=\"fa-solid fa-search dialog-search-icon\"></i>\n <input type=\"text\"\n class=\"dialog-search-input\"\n placeholder=\"Search entities...\"\n [ngModel]=\"EntitySearchText\"\n (ngModelChange)=\"OnEntitySearchChange($event)\" />\n </div>\n <div class=\"entity-list\">\n @for (entity of FilteredEntities; track entity) {\n <div class=\"entity-option\"\n (click)=\"SelectEntity(entity)\">\n <div class=\"entity-option-info\">\n <span class=\"entity-option-name\">{{entity.Name}}</span>\n @if (entity.Description) {\n <span class=\"entity-option-desc\">{{entity.Description | slice:0:80}}</span>\n }\n </div>\n <i class=\"fa-solid fa-chevron-right entity-option-arrow\"></i>\n </div>\n }\n @if (FilteredEntities.length === 0) {\n <div class=\"entity-list-empty\">\n No entities match your search.\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Step 2: Select Records -->\n @if (CreateStep === 'records') {\n <div class=\"dialog-step\">\n <div class=\"step-header-row\">\n @if (!PreselectedEntity) {\n <button class=\"btn-back\" (click)=\"GoBackToEntity()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n }\n <div>\n <p class=\"step-description\">\n Select records from <strong>{{SelectedEntity?.Name}}</strong> to label.\n </p>\n </div>\n </div>\n @if (IsLoadingRecords) {\n <mj-loading text=\"Loading records...\"></mj-loading>\n }\n @if (!IsLoadingRecords) {\n <div class=\"records-toolbar\">\n <div class=\"dialog-search\" style=\"flex: 1;\">\n <i class=\"fa-solid fa-search dialog-search-icon\"></i>\n <input type=\"text\"\n class=\"dialog-search-input\"\n placeholder=\"Search records...\"\n [ngModel]=\"RecordSearchText\"\n (ngModelChange)=\"OnRecordSearchChange($event)\" />\n </div>\n <div class=\"selection-actions\">\n <button class=\"btn-text\" (click)=\"SelectAllRecords()\">Select All</button>\n <button class=\"btn-text\" (click)=\"DeselectAllRecords()\">Clear</button>\n </div>\n </div>\n <div class=\"record-list\">\n @for (record of FilteredRecords; track record) {\n <div class=\"record-option\"\n [class.selected]=\"record.Selected\"\n (click)=\"ToggleRecordSelection(record)\">\n <div class=\"record-checkbox\">\n @if (record.Selected) {\n <i class=\"fa-solid fa-check\"></i>\n }\n </div>\n <span class=\"record-name\">{{record.DisplayName}}</span>\n </div>\n }\n @if (FilteredRecords.length === 0 && !IsLoadingRecords) {\n <div class=\"entity-list-empty\">\n No records found for this entity.\n </div>\n }\n </div>\n <div class=\"records-footer\">\n <span class=\"selection-count\">{{SelectedRecordCount}} selected</span>\n <button class=\"btn-primary\"\n [disabled]=\"SelectedRecordCount === 0\"\n (click)=\"GoToDetailsStep()\">\n Continue\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n <!-- Step 3: Label Details -->\n @if (CreateStep === 'details') {\n <div class=\"dialog-step\">\n <div class=\"step-header-row\">\n <button class=\"btn-back\" (click)=\"GoBackToRecords()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <p class=\"step-description\">Name your version label.</p>\n </div>\n <div class=\"details-summary\">\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-table\"></i>\n <span>{{SelectedEntity?.Name}}</span>\n </div>\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-check-double\"></i>\n <span>{{SelectedRecordCount}} record{{SelectedRecordCount > 1 ? 's' : ''}} selected</span>\n </div>\n @if (SelectedRecordCount > 1) {\n <div class=\"summary-item\">\n <i class=\"fa-solid fa-layer-group\"></i>\n <span>Will create 1 group + {{SelectedRecordCount}} child labels</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <label class=\"form-label\">Label Name</label>\n <input type=\"text\"\n class=\"form-input\"\n placeholder=\"e.g. Customer Support Agent v2.0\"\n [(ngModel)]=\"LabelName\" />\n </div>\n <div class=\"form-field\">\n <label class=\"form-label\">Description (optional)</label>\n <textarea class=\"form-textarea\"\n rows=\"3\"\n placeholder=\"What does this version represent?\"\n [(ngModel)]=\"LabelDescription\"></textarea>\n </div>\n <div class=\"details-footer\">\n <button class=\"btn-primary\"\n [disabled]=\"!LabelName.trim()\"\n (click)=\"CreateLabels()\">\n <i class=\"fa-solid fa-tag\"></i>\n Create Label{{SelectedRecordCount > 1 ? 's' : ''}}\n </button>\n <button class=\"btn-secondary\" (click)=\"OnCancel()\">\n Cancel\n </button>\n </div>\n </div>\n }\n\n <!-- Creating state -->\n @if (CreateStep === 'creating') {\n <div class=\"dialog-step creating-step\">\n <div class=\"creating-animation\">\n <i class=\"fa-solid fa-tag fa-spin creating-icon\"></i>\n </div>\n <h3 class=\"creating-title\">Creating Labels...</h3>\n <!-- Progress bar -->\n @if (CreateProgress) {\n <div class=\"progress-container\">\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"CreateProgress.Percentage\"></div>\n </div>\n <div class=\"progress-details\">\n <span class=\"progress-message\">{{CreateProgress.Message}}</span>\n <span class=\"progress-pct\">{{CreateProgress.Percentage}}%</span>\n </div>\n @if (CreateProgress.RecordsProcessed != null && CreateProgress.TotalRecords) {\n <div class=\"progress-stats\">\n <span class=\"progress-stat\">\n <i class=\"fa-solid fa-camera\"></i>\n {{CreateProgress.RecordsProcessed}} / {{CreateProgress.TotalRecords}} records\n </span>\n @if (CreateProgress.CurrentEntity) {\n <span class=\"progress-stat\">\n <i class=\"fa-solid fa-table\"></i>\n {{CreateProgress.CurrentEntity}}\n </span>\n }\n </div>\n }\n </div>\n }\n @if (!CreateProgress) {\n <p class=\"creating-progress\">\n {{CreatedLabelCount}} label{{CreatedLabelCount !== 1 ? 's' : ''}} created\n @if (CreatedItemCount > 0) {\n <span> · {{CreatedItemCount}} items captured</span>\n }\n </p>\n }\n </div>\n }\n\n <!-- Done state -->\n @if (CreateStep === 'done') {\n <div class=\"dialog-step done-step\">\n @if (!CreateError) {\n <div class=\"done-icon-wrap success\">\n <i class=\"fa-solid fa-check\"></i>\n </div>\n <h3 class=\"done-title\">Labels Created</h3>\n <p class=\"done-message\">\n Successfully created {{CreatedLabelCount}} label{{CreatedLabelCount !== 1 ? 's' : ''}}\n @if (CreatedItemCount > 0) {\n <span> with {{CreatedItemCount}} items captured</span>\n }.\n </p>\n }\n @if (CreateError) {\n <div class=\"done-icon-wrap error\">\n <i class=\"fa-solid fa-xmark\"></i>\n </div>\n <h3 class=\"done-title\">Error</h3>\n <p class=\"done-message error-text\">{{CreateError}}</p>\n }\n <button class=\"btn-primary\" (click)=\"FinishCreate()\">Done</button>\n </div>\n }\n </div>\n", styles: ["/* Label Create Wizard Container */\n.label-create-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Step Indicator */\n.step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n margin-bottom: 24px;\n padding: 0 20px;\n}\n\n.step {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.step-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n font-size: 13px;\n font-weight: 700;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-disabled);\n transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.step.completed .step-number {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n}\n\n.step-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n}\n\n.step.active .step-label {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n.step.completed .step-label {\n color: var(--mj-status-success);\n}\n\n.step-connector {\n width: 40px;\n height: 2px;\n background: var(--mj-border-default);\n margin: 0 8px;\n transition: background 0.2s ease;\n}\n\n.step-connector.active {\n background: var(--mj-status-success);\n}\n\n/* Dialog Step Content */\n.dialog-step {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-height: 300px;\n}\n\n.step-description {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n.step-header-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.btn-back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.btn-back:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Dialog Search */\n.dialog-search {\n position: relative;\n}\n\n.dialog-search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.dialog-search-input {\n width: 100%;\n padding: 9px 12px 9px 36px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n.dialog-search-input:focus {\n border-color: var(--mj-brand-primary);\n}\n\n.dialog-search-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n/* Entity List */\n.entity-list {\n flex: 1;\n overflow-y: auto;\n max-height: 320px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n}\n\n.entity-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.entity-option:last-child {\n border-bottom: none;\n}\n\n.entity-option:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.entity-option-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.entity-option-name {\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.entity-option-desc {\n font-size: 12px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.entity-option-arrow {\n color: var(--mj-text-disabled);\n font-size: 12px;\n flex-shrink: 0;\n}\n\n.entity-list-empty {\n padding: 40px 20px;\n text-align: center;\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n/* Records */\n.records-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.selection-actions {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n.btn-text {\n padding: 6px 12px;\n background: none;\n border: none;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-brand-primary);\n cursor: pointer;\n border-radius: 6px;\n transition: background 0.15s ease;\n}\n\n.btn-text:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.record-list {\n flex: 1;\n overflow-y: auto;\n max-height: 280px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n}\n\n.record-option {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.15s ease;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.record-option:last-child {\n border-bottom: none;\n}\n\n.record-option:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.record-option.selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.record-checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: 2px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 11px;\n color: transparent;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.record-option.selected .record-checkbox {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.record-name {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.records-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 8px;\n}\n\n.selection-count {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-muted);\n}\n\n/* Details step */\n.details-summary {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n padding: 14px 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 10px;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.summary-item i {\n color: var(--mj-brand-primary);\n font-size: 13px;\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.form-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-input {\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\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::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.form-textarea {\n padding: 10px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n color: var(--mj-text-primary);\n outline: none;\n resize: vertical;\n font-family: inherit;\n transition: border-color 0.15s ease;\n}\n\n.form-textarea:focus {\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-textarea::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.details-footer {\n display: flex;\n gap: 12px;\n padding-top: 8px;\n}\n\n/* Buttons */\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-muted);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Creating state */\n.creating-step {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.creating-animation {\n margin-bottom: 16px;\n}\n\n.creating-icon {\n font-size: 40px;\n color: var(--mj-brand-primary);\n}\n\n.creating-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 8px 0;\n}\n\n.creating-progress {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n/* Progress bar */\n.progress-container {\n width: 100%;\n max-width: 420px;\n margin: 16px auto 0;\n text-align: left;\n}\n\n.progress-bar-track {\n width: 100%;\n height: 8px;\n background: var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.progress-bar-fill {\n height: 100%;\n background: var(--mj-brand-primary);\n border-radius: 4px;\n transition: width 0.3s ease;\n}\n\n.progress-details {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n}\n\n.progress-message {\n font-size: 13px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n margin-right: 12px;\n}\n\n.progress-pct {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-brand-primary);\n white-space: nowrap;\n}\n\n.progress-stats {\n display: flex;\n gap: 16px;\n margin-top: 6px;\n}\n\n.progress-stat {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.progress-stat i {\n font-size: 11px;\n}\n\n/* Done state */\n.done-step {\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px 20px;\n}\n\n.done-icon-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 24px;\n margin-bottom: 16px;\n}\n\n.done-icon-wrap.success {\n background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n color: var(--mj-status-success);\n}\n\n.done-icon-wrap.error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n color: var(--mj-status-error);\n}\n\n.done-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 8px 0;\n}\n\n.done-message {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0 0 20px 0;\n}\n\n.error-text {\n color: var(--mj-status-error);\n}\n"] }]
|
|
786
786
|
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { PreselectedEntity: [{
|
|
787
787
|
type: Input
|
|
788
788
|
}], PreselectedRecordIds: [{
|