@memberjunction/ng-explorer-settings 5.42.0 → 5.44.0

package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js

@@ -4,66 +4,65 @@ import { UUIDsEqual } from '@memberjunction/global';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@angular/common";
 const _c0 = () => ({ standalone: true });
 const _forTrack0 = ($index, $item) => $item.roleId;
 const _forTrack1 = ($index, $item) => $item.ID;
 function PermissionDialogComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 49);
-    i0.ɵɵelement(2, "i", 50);
-    i0.ɵɵelementStart(3, "div");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "mj-alert", 49);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.error);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Message", ctx_r1.error);
 } }
 function PermissionDialogComponent_Conditional_0_For_79_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 54);
+    i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1, "New");
     i0.ɵɵelementEnd();
 } }
 function PermissionDialogComponent_Conditional_0_For_79_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 55);
+    i0.ɵɵelementStart(0, "span", 54);
     i0.ɵɵtext(1, "Modified");
     i0.ɵɵelementEnd();
 } }
 function PermissionDialogComponent_Conditional_0_For_79_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 51)(1, "td", 52)(2, "div", 53);
+    i0.ɵɵelementStart(0, "tr", 50)(1, "td", 51)(2, "div", 52);
     i0.ɵɵelement(3, "i", 24);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, PermissionDialogComponent_Conditional_0_For_79_Conditional_6_Template, 2, 0, "span", 54);
-    i0.ɵɵconditionalCreate(7, PermissionDialogComponent_Conditional_0_For_79_Conditional_7_Template, 2, 0, "span", 55);
+    i0.ɵɵconditionalCreate(6, PermissionDialogComponent_Conditional_0_For_79_Conditional_6_Template, 2, 0, "span", 53);
+    i0.ɵɵconditionalCreate(7, PermissionDialogComponent_Conditional_0_For_79_Conditional_7_Template, 2, 0, "span", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td", 56)(9, "div", 57)(10, "input", 58);
+    i0.ɵɵelementStart(8, "td", 55)(9, "div", 56)(10, "input", 57);
     i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_Conditional_0_For_79_Template_input_ngModelChange_10_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanCreate, $event) || (rolePermission_r4.entityPermission.CanCreate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "label", 59);
-    i0.ɵɵelement(12, "div", 60);
+    i0.ɵɵelementStart(11, "label", 58);
+    i0.ɵɵelement(12, "div", 59);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "td", 56)(14, "div", 57)(15, "input", 58);
+    i0.ɵɵelementStart(13, "td", 55)(14, "div", 56)(15, "input", 57);
     i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_Conditional_0_For_79_Template_input_ngModelChange_15_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanRead, $event) || (rolePermission_r4.entityPermission.CanRead = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "label", 59);
-    i0.ɵɵelement(17, "div", 60);
+    i0.ɵɵelementStart(16, "label", 58);
+    i0.ɵɵelement(17, "div", 59);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "td", 56)(19, "div", 57)(20, "input", 58);
+    i0.ɵɵelementStart(18, "td", 55)(19, "div", 56)(20, "input", 57);
     i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_Conditional_0_For_79_Template_input_ngModelChange_20_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanUpdate, $event) || (rolePermission_r4.entityPermission.CanUpdate = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "label", 59);
-    i0.ɵɵelement(22, "div", 60);
+    i0.ɵɵelementStart(21, "label", 58);
+    i0.ɵɵelement(22, "div", 59);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "td", 56)(24, "div", 57)(25, "input", 58);
+    i0.ɵɵelementStart(23, "td", 55)(24, "div", 56)(25, "input", 57);
     i0.ɵɵtwoWayListener("ngModelChange", function PermissionDialogComponent_Conditional_0_For_79_Template_input_ngModelChange_25_listener($event) { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(rolePermission_r4.entityPermission.CanDelete, $event) || (rolePermission_r4.entityPermission.CanDelete = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "label", 59);
-    i0.ɵɵelement(27, "div", 60);
+    i0.ɵɵelementStart(26, "label", 58);
+    i0.ɵɵelement(27, "div", 59);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "td", 61)(29, "button", 62);
+    i0.ɵɵelementStart(28, "td", 60)(29, "button", 61);
     i0.ɵɵlistener("click", function PermissionDialogComponent_Conditional_0_For_79_Template_button_click_29_listener() { const rolePermission_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.removeRolePermission(rolePermission_r4)); });
     i0.ɵɵelement(30, "i", 9);
     i0.ɵɵelementEnd()()();
@@ -110,13 +109,13 @@ function PermissionDialogComponent_Conditional_0_Conditional_80_Template(rf, ctx
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No role permissions configured");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 63);
+    i0.ɵɵelementStart(4, "p", 62);
     i0.ɵɵtext(5, "Add permissions for specific roles to control access to this entity");
     i0.ɵɵelementEnd()();
 } }
 function PermissionDialogComponent_Conditional_0_For_89_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵelementStart(0, "button", 63);
     i0.ɵɵlistener("click", function PermissionDialogComponent_Conditional_0_For_89_Template_button_click_0_listener() { const role_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addRolePermission(role_r6)); });
     i0.ɵɵelement(1, "i", 31);
     i0.ɵɵtext(2);
@@ -135,7 +134,7 @@ function PermissionDialogComponent_Conditional_0_Conditional_90_Template(rf, ctx
 } }
 function PermissionDialogComponent_Conditional_0_Conditional_93_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵtext(2, " You have unsaved changes ");
     i0.ɵɵelementEnd();
 } }
@@ -166,7 +165,7 @@ function PermissionDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(11, "div", 10)(12, "form", 11);
     i0.ɵɵlistener("ngSubmit", function PermissionDialogComponent_Conditional_0_Template_form_ngSubmit_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
-    i0.ɵɵconditionalCreate(13, PermissionDialogComponent_Conditional_0_Conditional_13_Template, 5, 1, "div", 12);
+    i0.ɵɵconditionalCreate(13, PermissionDialogComponent_Conditional_0_Conditional_13_Template, 2, 1, "div", 12);
     i0.ɵɵelementStart(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "h3", 15);
     i0.ɵɵelement(18, "i", 16);
     i0.ɵɵtext(19, " Entity Information ");
@@ -466,15 +465,15 @@ export class PermissionDialogComponent extends BaseAngularComponent {
     static ɵfac = function PermissionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PermissionDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PermissionDialogComponent, selectors: [["mj-permission-dialog"]], hostBindings: function PermissionDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function PermissionDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-key"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-database"], [1, "section-description"], [1, "entity-info-card"], [1, "entity-meta"], [1, "meta-item"], [1, "fa-solid", "fa-table"], [1, "meta-label"], [1, "meta-value"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-users-cog"], [1, "permissions-table-container"], [1, "permissions-table"], [1, "role-column"], [1, "permission-column"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-trash"], [1, "actions-column"], [1, "permission-row", 3, "has-changes", "is-new"], [1, "empty-permissions"], [1, "add-role-section"], [1, "add-role-header"], [1, "available-roles"], ["type", "button", 1, "role-chip", 3, "title"], [1, "no-available-roles"], [1, "modal-footer"], [1, "footer-info"], [1, "changes-indicator"], [1, "footer-actions"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "permission-row"], [1, "role-name"], [1, "role-info"], [1, "new-badge"], [1, "changed-badge"], [1, "permission-cell"], [1, "permission-toggle"], ["type", "checkbox", 1, "permission-checkbox", 3, "ngModelChange", "id", "ngModel", "ngModelOptions"], [1, "permission-label", 3, "for"], [1, "checkbox-indicator"], [1, "actions-cell"], ["type", "button", "title", "Remove permissions for this role", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], ["type", "button", 1, "role-chip", 3, "click", "title"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function PermissionDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "modal-backdrop"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-key"], [1, "dialog-subtitle"], ["type", "button", "aria-label", "Close dialog", 1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-database"], [1, "section-description"], [1, "entity-info-card"], [1, "entity-meta"], [1, "meta-item"], [1, "fa-solid", "fa-table"], [1, "meta-label"], [1, "meta-value"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-users-cog"], [1, "permissions-table-container"], [1, "permissions-table"], [1, "role-column"], [1, "permission-column"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-trash"], [1, "actions-column"], [1, "permission-row", 3, "has-changes", "is-new"], [1, "empty-permissions"], [1, "add-role-section"], [1, "add-role-header"], [1, "available-roles"], ["type", "button", 1, "role-chip", 3, "title"], [1, "no-available-roles"], [1, "modal-footer"], [1, "footer-info"], [1, "changes-indicator"], [1, "footer-actions"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], ["Variant", "error", 3, "Message"], [1, "permission-row"], [1, "role-name"], [1, "role-info"], [1, "new-badge"], [1, "changed-badge"], [1, "permission-cell"], [1, "permission-toggle"], ["type", "checkbox", 1, "permission-checkbox", 3, "ngModelChange", "id", "ngModel", "ngModelOptions"], [1, "permission-label", 3, "for"], [1, "checkbox-indicator"], [1, "actions-cell"], ["type", "button", "title", "Remove permissions for this role", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], ["type", "button", 1, "role-chip", 3, "click", "title"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function PermissionDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PermissionDialogComponent_Conditional_0_Template, 101, 16, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.visible ? 0 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.FormGroupDirective, i2.DatePipe], styles: ["/* ==============================================\n   Permission Dialog - MJ Design System\n   Using MJ design tokens from _tokens.scss\n   Pure Modal (No Kendo UI)\n   ============================================== */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--mj-brand-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--mj-radius-md);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--mj-brand-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--mj-brand-on-primary);\n  border-radius: var(--mj-radius-md);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--mj-brand-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--mj-color-accent-300);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--mj-color-success-100);\n  border-left: 3px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--mj-text-secondary);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: var(--mj-color-error-100);\n  border: 1px solid var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.alert.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--mj-color-warning-500);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: var(--mj-color-brand-700);\n  border-color: var(--mj-color-brand-700);\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: var(--mj-color-brand-350);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: var(--mj-color-brand-300);\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"], encapsulation: 2 });
+        } }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.FormGroupDirective, i2.MJAlertComponent, i3.DatePipe], styles: ["/* ==============================================\n   Permission Dialog - MJ Design System\n   Using MJ design tokens from _tokens.scss\n   Pure Modal (No Kendo UI)\n   ============================================== */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--mj-brand-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--mj-radius-md);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--mj-brand-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--mj-brand-on-primary);\n  border-radius: var(--mj-radius-md);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--mj-brand-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--mj-color-accent-300);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--mj-color-success-100);\n  border-left: 3px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--mj-text-secondary);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--mj-color-warning-500);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: var(--mj-color-brand-700);\n  border-color: var(--mj-color-brand-700);\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: var(--mj-color-brand-350);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: var(--mj-color-brand-300);\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PermissionDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-permission-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            Edit Entity Permissions\n          </h2>\n          <p class=\"dialog-subtitle\">\n            Configure role-based permissions for {{ data?.entity?.Name }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <div class=\"alert alert-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                <div>{{ error }}</div>\n              </div>\n            </div>\n          }\n          <!-- Entity Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  Entity Information\n                </h3>\n                <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n              </div>\n              <div class=\"entity-info-card\">\n                <div class=\"entity-meta\">\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-table\"></i>\n                    <span class=\"meta-label\">Entity:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span class=\"meta-label\">Schema Name:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.SchemaName || 'N/A' }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span class=\"meta-label\">Total Permissions:</span>\n                    <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"meta-label\">Last Updated:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Configuration Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-users-cog\"></i>\n                  Role Permissions\n                </h3>\n                <p class=\"section-description\">Configure CRUD permissions for each role</p>\n              </div>\n              <div class=\"permissions-table-container\">\n                <table class=\"permissions-table\">\n                  <thead>\n                    <tr>\n                      <th class=\"role-column\">Role</th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        Read\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                        Update\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                        Delete\n                      </th>\n                      <th class=\"actions-column\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                      <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                        <td class=\"role-name\">\n                          <div class=\"role-info\">\n                            <i class=\"fa-solid fa-shield-halved\"></i>\n                            <span>{{ rolePermission.roleName }}</span>\n                            @if (rolePermission.isNew) {\n                              <span class=\"new-badge\">New</span>\n                            }\n                            @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                              <span class=\"changed-badge\">Modified</span>\n                            }\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'create-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'read-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'update-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'delete-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"actions-cell\">\n                          <button\n                            type=\"button\"\n                            class=\"btn-icon btn-danger\"\n                            (click)=\"removeRolePermission(rolePermission)\"\n                            title=\"Remove permissions for this role\"\n                            attr.aria-label=\"Remove permissions for {{ rolePermission.roleName }}\"\n                            >\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (rolePermissions.length === 0) {\n                  <div class=\"empty-permissions\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No role permissions configured</p>\n                    <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Add Role Permissions -->\n              <div class=\"add-role-section\">\n                <div class=\"add-role-header\">\n                  <h4>Add Role Permissions</h4>\n                  <p>Select roles to configure permissions for this entity</p>\n                </div>\n                <div class=\"available-roles\">\n                  @for (role of availableRoles; track role.ID) {\n                    <button\n                      type=\"button\"\n                      class=\"role-chip\"\n                      (click)=\"addRolePermission(role)\"\n                      title=\"Add permissions for {{ role.Name }}\"\n                      attr.aria-label=\"Add permissions for {{ role.Name }}\"\n                      >\n                      <i class=\"fa-solid fa-plus\"></i>\n                      {{ role.Name }}\n                    </button>\n                  }\n                  @if (availableRoles.length === 0) {\n                    <p class=\"no-available-roles\">All roles have been configured</p>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <div class=\"footer-info\">\n              @if (hasChanges) {\n                <span class=\"changes-indicator\">\n                  <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                  You have unsaved changes\n                </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <button\n                type=\"submit\"\n                class=\"btn btn-primary\"\n                [disabled]=\"!hasChanges || isLoading\"\n                >\n                @if (isLoading) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Saving...\n                } @else {\n                  <i class=\"fa-solid fa-save\"></i>\n                  Save Permissions\n                }\n              </button>\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Cancel\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ==============================================\n   Permission Dialog - MJ Design System\n   Using MJ design tokens from _tokens.scss\n   Pure Modal (No Kendo UI)\n   ============================================== */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--mj-brand-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--mj-radius-md);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--mj-brand-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--mj-brand-on-primary);\n  border-radius: var(--mj-radius-md);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--mj-brand-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--mj-color-accent-300);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--mj-color-success-100);\n  border-left: 3px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--mj-text-secondary);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: var(--mj-color-error-100);\n  border: 1px solid var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.alert.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--mj-color-warning-500);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: var(--mj-color-brand-700);\n  border-color: var(--mj-color-brand-700);\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: var(--mj-color-brand-350);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: var(--mj-color-brand-300);\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-permission-dialog', encapsulation: ViewEncapsulation.None, template: "<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            Edit Entity Permissions\n          </h2>\n          <p class=\"dialog-subtitle\">\n            Configure role-based permissions for {{ data?.entity?.Name }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <mj-alert Variant=\"error\" [Message]=\"error\" />\n            </div>\n          }\n          <!-- Entity Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  Entity Information\n                </h3>\n                <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n              </div>\n              <div class=\"entity-info-card\">\n                <div class=\"entity-meta\">\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-table\"></i>\n                    <span class=\"meta-label\">Entity:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span class=\"meta-label\">Schema Name:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.SchemaName || 'N/A' }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span class=\"meta-label\">Total Permissions:</span>\n                    <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"meta-label\">Last Updated:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Configuration Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-users-cog\"></i>\n                  Role Permissions\n                </h3>\n                <p class=\"section-description\">Configure CRUD permissions for each role</p>\n              </div>\n              <div class=\"permissions-table-container\">\n                <table class=\"permissions-table\">\n                  <thead>\n                    <tr>\n                      <th class=\"role-column\">Role</th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        Read\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                        Update\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                        Delete\n                      </th>\n                      <th class=\"actions-column\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                      <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                        <td class=\"role-name\">\n                          <div class=\"role-info\">\n                            <i class=\"fa-solid fa-shield-halved\"></i>\n                            <span>{{ rolePermission.roleName }}</span>\n                            @if (rolePermission.isNew) {\n                              <span class=\"new-badge\">New</span>\n                            }\n                            @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                              <span class=\"changed-badge\">Modified</span>\n                            }\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'create-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'read-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'update-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'delete-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"actions-cell\">\n                          <button\n                            type=\"button\"\n                            class=\"btn-icon btn-danger\"\n                            (click)=\"removeRolePermission(rolePermission)\"\n                            title=\"Remove permissions for this role\"\n                            attr.aria-label=\"Remove permissions for {{ rolePermission.roleName }}\"\n                            >\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (rolePermissions.length === 0) {\n                  <div class=\"empty-permissions\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No role permissions configured</p>\n                    <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Add Role Permissions -->\n              <div class=\"add-role-section\">\n                <div class=\"add-role-header\">\n                  <h4>Add Role Permissions</h4>\n                  <p>Select roles to configure permissions for this entity</p>\n                </div>\n                <div class=\"available-roles\">\n                  @for (role of availableRoles; track role.ID) {\n                    <button\n                      type=\"button\"\n                      class=\"role-chip\"\n                      (click)=\"addRolePermission(role)\"\n                      title=\"Add permissions for {{ role.Name }}\"\n                      attr.aria-label=\"Add permissions for {{ role.Name }}\"\n                      >\n                      <i class=\"fa-solid fa-plus\"></i>\n                      {{ role.Name }}\n                    </button>\n                  }\n                  @if (availableRoles.length === 0) {\n                    <p class=\"no-available-roles\">All roles have been configured</p>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <div class=\"footer-info\">\n              @if (hasChanges) {\n                <span class=\"changes-indicator\">\n                  <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                  You have unsaved changes\n                </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <button\n                type=\"submit\"\n                class=\"btn btn-primary\"\n                [disabled]=\"!hasChanges || isLoading\"\n                >\n                @if (isLoading) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Saving...\n                } @else {\n                  <i class=\"fa-solid fa-save\"></i>\n                  Save Permissions\n                }\n              </button>\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Cancel\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ==============================================\n   Permission Dialog - MJ Design System\n   Using MJ design tokens from _tokens.scss\n   Pure Modal (No Kendo UI)\n   ============================================== */\n\n/* Modal Backdrop */\n.modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 1rem;\n  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Modal Dialog Container */\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\n  width: 900px;\n  max-width: calc(100vw - 2rem);\n  max-height: calc(100vh - 2rem);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Modal Header - MJ Blue Background */\n.modal-header {\n  background: var(--mj-brand-primary);\n  padding: 24px 32px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.dialog-header {\n  flex: 1;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title {\n  font-size: 20px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0 0 4px 0;\n  color: var(--mj-brand-on-primary);\n}\n\n.dialog-header .dialog-title i {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: var(--mj-radius-md);\n  font-size: 16px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 0;\n  font-size: 13px;\n  opacity: 0.9;\n  font-weight: 400;\n  color: var(--mj-brand-on-primary);\n}\n\n/* Modal Close Button */\n.modal-close {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: var(--mj-brand-on-primary);\n  border-radius: var(--mj-radius-md);\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  flex-shrink: 0;\n}\n\n.modal-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.modal-close i {\n  font-size: 16px;\n}\n\n/* Modal Body - Scrollable Content */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface);\n}\n\n/* Content Sections */\n.content-section {\n  padding: 32px;\n}\n\n.content-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Entity Info Card - Static Display (Non-interactive) */\n.entity-info-card {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  padding: 24px;\n  cursor: default;\n}\n\n.entity-info-card .entity-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n\n.entity-info-card .entity-meta .meta-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-info-card .entity-meta .meta-item i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.entity-info-card .entity-meta .meta-item .meta-value {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Permissions Table */\n.permissions-table-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.permissions-table-container .permissions-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.permissions-table-container .permissions-table thead {\n  background: var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table thead th {\n  padding: 16px 24px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  border-bottom: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n}\n\n.permissions-table-container .permissions-table thead th.role-column {\n  width: 25%;\n  min-width: 200px;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column {\n  width: 15%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table thead th.permission-column i {\n  color: var(--mj-brand-primary);\n  margin-right: 4px;\n}\n\n.permissions-table-container .permissions-table thead th.actions-column {\n  width: 10%;\n  text-align: center;\n}\n\n.permissions-table-container .permissions-table tbody tr {\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permissions-table-container .permissions-table tbody tr:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.permissions-table-container .permissions-table tbody tr.has-changes {\n  background: var(--mj-color-accent-300);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr.is-new {\n  background: var(--mj-color-success-100);\n  border-left: 3px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td {\n  padding: 16px 24px;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info i {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  flex-shrink: 0;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge,\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.875rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  margin-left: 8px;\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .new-badge {\n  background: var(--mj-color-success-100);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.role-name .role-info .changed-badge {\n  background: var(--mj-color-warning-100);\n  color: var(--mj-color-warning-800);\n  border: 1px solid var(--mj-color-warning-500);\n}\n\n.permissions-table-container .permissions-table tbody tr td.permission-cell,\n.permissions-table-container .permissions-table tbody tr td.actions-cell {\n  text-align: center;\n}\n\n/* Permission Toggle - Checkbox */\n.permission-toggle {\n  display: flex;\n  justify-content: center;\n}\n\n.permission-toggle .permission-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.permission-toggle .permission-checkbox:checked + .permission-label .checkbox-indicator::after {\n  opacity: 1;\n  transform: rotate(45deg) scale(1);\n}\n\n.permission-toggle .permission-checkbox:focus + .permission-label .checkbox-indicator {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.permission-toggle .permission-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin: 0;\n  min-width: 44px;\n  min-height: 44px;\n  justify-content: center;\n}\n\n.permission-toggle .checkbox-indicator {\n  width: 20px;\n  height: 20px;\n  border: 2px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  position: relative;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.permission-toggle .checkbox-indicator::after {\n  content: '';\n  position: absolute;\n  left: 6px;\n  top: 2px;\n  width: 4px;\n  height: 8px;\n  border: solid var(--mj-brand-on-primary);\n  border-width: 0 2px 2px 0;\n  opacity: 0;\n  transform: rotate(45deg) scale(0.8);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Action Buttons - Danger Icon Button */\n.btn-icon {\n  width: 44px;\n  height: 44px;\n  min-width: 44px;\n  min-height: 44px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon.btn-danger {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n.btn-icon.btn-danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n  transform: scale(1.05);\n}\n\n/* Empty Permissions */\n.empty-permissions {\n  text-align: center;\n  padding: 32px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-permissions i {\n  font-size: 2rem;\n  color: var(--mj-border-default);\n  margin-bottom: 16px;\n}\n\n.empty-permissions p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.empty-permissions .empty-subtext {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* Add Role Section */\n.add-role-section {\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.add-role-section .add-role-header {\n  margin-bottom: 24px;\n}\n\n.add-role-section .add-role-header h4 {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 4px 0;\n}\n\n.add-role-section .add-role-header p {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n.add-role-section .available-roles {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.add-role-section .available-roles .role-chip {\n  padding: 8px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-height: 44px;\n}\n\n.add-role-section .available-roles .role-chip i {\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n}\n\n.add-role-section .available-roles .role-chip:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.add-role-section .available-roles .no-available-roles {\n  color: var(--mj-text-secondary);\n  font-style: italic;\n  margin: 0;\n}\n\n/* Modal Footer */\n.modal-footer {\n  padding: 24px 32px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.modal-footer .footer-info {\n  flex: 1;\n}\n\n.modal-footer .footer-info .changes-indicator {\n  color: var(--mj-color-warning-500);\n  font-size: 12px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer .footer-info .changes-indicator i {\n  font-size: 14px;\n}\n\n.modal-footer .footer-actions {\n  display: flex;\n  gap: 16px;\n}\n\n/* Button Styles */\n.modal-footer .btn {\n  padding: 0.75rem 1.5rem;\n  border-radius: var(--mj-radius-full);\n  font-size: 14px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n}\n\n.modal-footer .btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.modal-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n/* Secondary Button - Light, fills with primary on hover */\n.modal-footer .btn.btn-secondary {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.modal-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-footer .btn.btn-secondary:active:not(:disabled) {\n  background: var(--mj-color-brand-700);\n  border-color: var(--mj-color-brand-700);\n}\n\n/* Primary Button - Dark, lightens on hover */\n.modal-footer .btn.btn-primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.modal-footer .btn.btn-primary:hover:not(:disabled) {\n  background: var(--mj-color-brand-350);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-1px);\n}\n\n.modal-footer .btn.btn-primary:active:not(:disabled) {\n  background: var(--mj-color-brand-300);\n  transform: scale(0.98);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Accessibility - Focus Indicators */\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .modal-backdrop {\n    padding: 0;\n    align-items: flex-start;\n  }\n\n  .modal-dialog {\n    width: 100vw;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n    margin: 0;\n  }\n\n  .modal-header {\n    padding: 16px 20px;\n  }\n\n  .dialog-header .dialog-title {\n    font-size: 18px;\n  }\n\n  .content-section {\n    padding: 24px 20px;\n  }\n\n  .modal-footer {\n    padding: 16px 20px;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-footer .footer-info,\n  .modal-footer .footer-actions {\n    width: 100%;\n  }\n\n  .modal-footer .footer-actions {\n    display: flex;\n    gap: 12px;\n  }\n\n  .modal-footer .footer-actions .btn {\n    flex: 1;\n    justify-content: center;\n  }\n\n  .permissions-table-container {\n    overflow-x: auto;\n  }\n\n  .permissions-table-container .permissions-table {\n    min-width: 600px;\n  }\n\n  .available-roles .role-chip {\n    flex: 1;\n    min-width: 120px;\n    justify-content: center;\n  }\n}\n\n@media (max-width: 640px) {\n  .entity-info-card .entity-meta {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], () => [], { data: [{
             type: Input
         }], visible: [{

package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"permission-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/entity-permissions/permission-dialog/permission-dialog.component.ts","../../../../src/lib/entity-permissions/permission-dialog/permission-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, inject, HostListener, ChangeDetectorRef, NgZone, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';\nimport { Metadata, RunView } from '@memberjunction/core';\nimport { MJEntityPermissionEntity, MJEntityEntity, MJRoleEntity } from '@memberjunction/core-entities';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nexport interface PermissionDialogData {\n  entity: MJEntityEntity;\n  roles: MJRoleEntity[];\n  existingPermissions: MJEntityPermissionEntity[];\n}\n\nexport interface PermissionDialogResult {\n  action: 'save' | 'cancel';\n  entity?: MJEntityEntity;\n}\n\ninterface RolePermissions {\n  roleId: string;\n  roleName: string;\n  entityPermission: MJEntityPermissionEntity;\n  isNew: boolean;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-permission-dialog',\n  encapsulation: ViewEncapsulation.None,\n  templateUrl: './permission-dialog.component.html',\n  styleUrls: ['./permission-dialog.component.css']\n})\nexport class PermissionDialogComponent extends BaseAngularComponent implements OnInit, OnDestroy, OnChanges {\n  @Input() data: PermissionDialogData | null = null;\n  @Input() visible = false;\n  @Output() result = new EventEmitter<PermissionDialogResult>();\n\n  private fb = inject(FormBuilder);\n  private cdr = inject(ChangeDetectorRef);\n  private ngZone = inject(NgZone);\n  private get metadata() { return this.ProviderToUse; }\n  public permissionForm: FormGroup;\n  public isLoading = false;\n  public error: string | null = null;\n  public rolePermissions: RolePermissions[] = [];\n  public availableRoles: MJRoleEntity[] = [];\n\n  constructor() {\n    super();\n    this.permissionForm = this.fb.group({});\n  }\n\n  ngOnInit(): void {\n    // Initial setup\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    console.log('Permission dialog ngOnChanges called:', changes);\n    \n    if (changes['visible'] && this.visible) {\n      this.resetDialog();\n      // Load data when dialog becomes visible and we have data\n      if (this.data) {\n        console.log('Dialog became visible, loading permission data');\n        this.loadPermissionData();\n      }\n    }\n    \n    if (changes['data'] && this.data && this.visible) {\n      console.log('Data changed while dialog is visible, reloading permission data');\n      this.loadPermissionData();\n    }\n  }\n\n  ngOnDestroy(): void {\n    // Cleanup if needed\n  }\n\n  private resetDialog(): void {\n    this.error = null;\n    this.isLoading = false;\n  }\n\n  @HostListener('document:keydown.escape', ['$event'])\n  onEscapeKey(event: Event): void {\n    if (this.visible) {\n      this.onCancel();\n    }\n  }\n\n  public get hasChanges(): boolean {\n    return this.rolePermissions.some(rp => rp.isNew || rp.entityPermission.Dirty);\n  }\n\n  public hasEntityChanges(rolePermission: RolePermissions): boolean {\n    return rolePermission.isNew || rolePermission.entityPermission.Dirty;\n  }\n\n  private loadPermissionData(): void {\n    if (!this.data) return;\n\n    console.log('Loading permission data for entity:', this.data.entity.Name);\n    console.log('Existing permissions:', this.data.existingPermissions);\n    console.log('Available roles:', this.data.roles);\n\n    // Initialize role permissions from existing data\n    this.rolePermissions = [];\n    const existingRoleIds = new Set<string>();\n\n    // Process existing permissions\n    for (const permission of this.data.existingPermissions) {\n      const role = this.data.roles.find(r => UUIDsEqual(r.ID, permission.RoleID));\n      if (role) {\n        console.log(`Processing permission for role ${role.Name}:`, {\n          canCreate: permission.CanCreate,\n          canRead: permission.CanRead,\n          canUpdate: permission.CanUpdate,\n          canDelete: permission.CanDelete\n        });\n        \n        this.rolePermissions.push({\n          roleId: role.ID,\n          roleName: role.Name || '',\n          entityPermission: permission,\n          isNew: false\n        });\n        existingRoleIds.add(role.ID);\n      }\n    }\n\n    console.log('Loaded role permissions:', this.rolePermissions);\n\n    // Set available roles (those not already configured)\n    this.availableRoles = this.data.roles.filter(role => !existingRoleIds.has(role.ID));\n    \n    console.log('Available roles for adding:', this.availableRoles.map(r => r.Name));\n    \n    // Trigger change detection to update the UI\n    this.cdr.detectChanges();\n  }\n\n  public async addRolePermission(role: MJRoleEntity): Promise<void> {\n    // Create new EntityPermission entity\n    const entityPermission = await this.metadata.GetEntityObject<MJEntityPermissionEntity>('MJ: Entity Permissions');\n    entityPermission.NewRecord();\n    entityPermission.EntityID = this.data!.entity.ID;\n    entityPermission.RoleID = role.ID;\n    entityPermission.CanCreate = false;\n    entityPermission.CanRead = true; // Default to read access\n    entityPermission.CanUpdate = false;\n    entityPermission.CanDelete = false;\n\n    // Add new role permission\n    this.rolePermissions.push({\n      roleId: role.ID,\n      roleName: role.Name || '',\n      entityPermission: entityPermission,\n      isNew: true\n    });\n\n    // Remove from available roles\n    this.availableRoles = this.availableRoles.filter(r => !UUIDsEqual(r.ID, role.ID));\n    this.cdr.detectChanges();\n  }\n\n  public removeRolePermission(rolePermission: RolePermissions): void {\n    // Add back to available roles if not new\n    if (!rolePermission.isNew) {\n      const role = this.data?.roles.find(r => UUIDsEqual(r.ID, rolePermission.roleId));\n      if (role) {\n        this.availableRoles.push(role);\n        this.availableRoles.sort((a, b) => (a.Name || '').localeCompare(b.Name || ''));\n      }\n    } else {\n      // Add back to available roles\n      const role = this.data?.roles.find(r => UUIDsEqual(r.ID, rolePermission.roleId));\n      if (role) {\n        this.availableRoles.push(role);\n        this.availableRoles.sort((a, b) => (a.Name || '').localeCompare(b.Name || ''));\n      }\n    }\n\n    // Remove from role permissions\n    this.rolePermissions = this.rolePermissions.filter(rp => rp.roleId !== rolePermission.roleId);\n    this.cdr.detectChanges();\n  }\n\n  public async onSubmit(): Promise<void> {\n    if (!this.data || !this.hasChanges) return;\n\n    this.isLoading = true;\n    this.error = null;\n\n    try {\n      // Process each role permission\n      for (const rolePermission of this.rolePermissions) {\n        if (rolePermission.isNew || rolePermission.entityPermission.Dirty) {\n          await this.saveRolePermission(rolePermission);\n        }\n      }\n\n      this.result.emit({ action: 'save', entity: this.data.entity });\n\n    } catch (error: unknown) {\n      console.error('Error saving permissions:', error);\n      this.ngZone.run(() => {\n        this.error = error instanceof Error ? error.message : 'An unexpected error occurred while saving permissions';\n        this.cdr.markForCheck();\n      });\n    } finally {\n      this.ngZone.run(() => {\n        this.isLoading = false;\n        this.cdr.markForCheck();\n      });\n    }\n  }\n\n  private async saveRolePermission(rolePermission: RolePermissions): Promise<void> {\n    // Save the entity directly - it already has all the values bound\n    const saveResult = await rolePermission.entityPermission.Save();\n    if (!saveResult) {\n      throw new Error(rolePermission.entityPermission.LatestResult?.Message || `Failed to save permissions for role ${rolePermission.roleName}`);\n    }\n  }\n\n  public onCancel(): void {\n    this.result.emit({ action: 'cancel' });\n  }\n}","<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            Edit Entity Permissions\n          </h2>\n          <p class=\"dialog-subtitle\">\n            Configure role-based permissions for {{ data?.entity?.Name }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <div class=\"alert alert-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                <div>{{ error }}</div>\n              </div>\n            </div>\n          }\n          <!-- Entity Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  Entity Information\n                </h3>\n                <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n              </div>\n              <div class=\"entity-info-card\">\n                <div class=\"entity-meta\">\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-table\"></i>\n                    <span class=\"meta-label\">Entity:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span class=\"meta-label\">Schema Name:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.SchemaName || 'N/A' }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span class=\"meta-label\">Total Permissions:</span>\n                    <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"meta-label\">Last Updated:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Configuration Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-users-cog\"></i>\n                  Role Permissions\n                </h3>\n                <p class=\"section-description\">Configure CRUD permissions for each role</p>\n              </div>\n              <div class=\"permissions-table-container\">\n                <table class=\"permissions-table\">\n                  <thead>\n                    <tr>\n                      <th class=\"role-column\">Role</th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        Read\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                        Update\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                        Delete\n                      </th>\n                      <th class=\"actions-column\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                      <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                        <td class=\"role-name\">\n                          <div class=\"role-info\">\n                            <i class=\"fa-solid fa-shield-halved\"></i>\n                            <span>{{ rolePermission.roleName }}</span>\n                            @if (rolePermission.isNew) {\n                              <span class=\"new-badge\">New</span>\n                            }\n                            @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                              <span class=\"changed-badge\">Modified</span>\n                            }\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'create-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'read-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'update-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'delete-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"actions-cell\">\n                          <button\n                            type=\"button\"\n                            class=\"btn-icon btn-danger\"\n                            (click)=\"removeRolePermission(rolePermission)\"\n                            title=\"Remove permissions for this role\"\n                            attr.aria-label=\"Remove permissions for {{ rolePermission.roleName }}\"\n                            >\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (rolePermissions.length === 0) {\n                  <div class=\"empty-permissions\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No role permissions configured</p>\n                    <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Add Role Permissions -->\n              <div class=\"add-role-section\">\n                <div class=\"add-role-header\">\n                  <h4>Add Role Permissions</h4>\n                  <p>Select roles to configure permissions for this entity</p>\n                </div>\n                <div class=\"available-roles\">\n                  @for (role of availableRoles; track role.ID) {\n                    <button\n                      type=\"button\"\n                      class=\"role-chip\"\n                      (click)=\"addRolePermission(role)\"\n                      title=\"Add permissions for {{ role.Name }}\"\n                      attr.aria-label=\"Add permissions for {{ role.Name }}\"\n                      >\n                      <i class=\"fa-solid fa-plus\"></i>\n                      {{ role.Name }}\n                    </button>\n                  }\n                  @if (availableRoles.length === 0) {\n                    <p class=\"no-available-roles\">All roles have been configured</p>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <div class=\"footer-info\">\n              @if (hasChanges) {\n                <span class=\"changes-indicator\">\n                  <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                  You have unsaved changes\n                </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <button\n                type=\"submit\"\n                class=\"btn btn-primary\"\n                [disabled]=\"!hasChanges || isLoading\"\n                >\n                @if (isLoading) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Saving...\n                } @else {\n                  <i class=\"fa-solid fa-save\"></i>\n                  Save Permissions\n                }\n              </button>\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Cancel\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n"]}
+{"version":3,"file":"permission-dialog.component.js","sourceRoot":"","sources":["../../../../src/lib/entity-permissions/permission-dialog/permission-dialog.component.ts","../../../../src/lib/entity-permissions/permission-dialog/permission-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, inject, HostListener, ChangeDetectorRef, NgZone, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';\nimport { Metadata, RunView } from '@memberjunction/core';\nimport { MJEntityPermissionEntity, MJEntityEntity, MJRoleEntity } from '@memberjunction/core-entities';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nexport interface PermissionDialogData {\n  entity: MJEntityEntity;\n  roles: MJRoleEntity[];\n  existingPermissions: MJEntityPermissionEntity[];\n}\n\nexport interface PermissionDialogResult {\n  action: 'save' | 'cancel';\n  entity?: MJEntityEntity;\n}\n\ninterface RolePermissions {\n  roleId: string;\n  roleName: string;\n  entityPermission: MJEntityPermissionEntity;\n  isNew: boolean;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-permission-dialog',\n  encapsulation: ViewEncapsulation.None,\n  templateUrl: './permission-dialog.component.html',\n  styleUrls: ['./permission-dialog.component.css']\n})\nexport class PermissionDialogComponent extends BaseAngularComponent implements OnInit, OnDestroy, OnChanges {\n  @Input() data: PermissionDialogData | null = null;\n  @Input() visible = false;\n  @Output() result = new EventEmitter<PermissionDialogResult>();\n\n  private fb = inject(FormBuilder);\n  private cdr = inject(ChangeDetectorRef);\n  private ngZone = inject(NgZone);\n  private get metadata() { return this.ProviderToUse; }\n  public permissionForm: FormGroup;\n  public isLoading = false;\n  public error: string | null = null;\n  public rolePermissions: RolePermissions[] = [];\n  public availableRoles: MJRoleEntity[] = [];\n\n  constructor() {\n    super();\n    this.permissionForm = this.fb.group({});\n  }\n\n  ngOnInit(): void {\n    // Initial setup\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    console.log('Permission dialog ngOnChanges called:', changes);\n    \n    if (changes['visible'] && this.visible) {\n      this.resetDialog();\n      // Load data when dialog becomes visible and we have data\n      if (this.data) {\n        console.log('Dialog became visible, loading permission data');\n        this.loadPermissionData();\n      }\n    }\n    \n    if (changes['data'] && this.data && this.visible) {\n      console.log('Data changed while dialog is visible, reloading permission data');\n      this.loadPermissionData();\n    }\n  }\n\n  ngOnDestroy(): void {\n    // Cleanup if needed\n  }\n\n  private resetDialog(): void {\n    this.error = null;\n    this.isLoading = false;\n  }\n\n  @HostListener('document:keydown.escape', ['$event'])\n  onEscapeKey(event: Event): void {\n    if (this.visible) {\n      this.onCancel();\n    }\n  }\n\n  public get hasChanges(): boolean {\n    return this.rolePermissions.some(rp => rp.isNew || rp.entityPermission.Dirty);\n  }\n\n  public hasEntityChanges(rolePermission: RolePermissions): boolean {\n    return rolePermission.isNew || rolePermission.entityPermission.Dirty;\n  }\n\n  private loadPermissionData(): void {\n    if (!this.data) return;\n\n    console.log('Loading permission data for entity:', this.data.entity.Name);\n    console.log('Existing permissions:', this.data.existingPermissions);\n    console.log('Available roles:', this.data.roles);\n\n    // Initialize role permissions from existing data\n    this.rolePermissions = [];\n    const existingRoleIds = new Set<string>();\n\n    // Process existing permissions\n    for (const permission of this.data.existingPermissions) {\n      const role = this.data.roles.find(r => UUIDsEqual(r.ID, permission.RoleID));\n      if (role) {\n        console.log(`Processing permission for role ${role.Name}:`, {\n          canCreate: permission.CanCreate,\n          canRead: permission.CanRead,\n          canUpdate: permission.CanUpdate,\n          canDelete: permission.CanDelete\n        });\n        \n        this.rolePermissions.push({\n          roleId: role.ID,\n          roleName: role.Name || '',\n          entityPermission: permission,\n          isNew: false\n        });\n        existingRoleIds.add(role.ID);\n      }\n    }\n\n    console.log('Loaded role permissions:', this.rolePermissions);\n\n    // Set available roles (those not already configured)\n    this.availableRoles = this.data.roles.filter(role => !existingRoleIds.has(role.ID));\n    \n    console.log('Available roles for adding:', this.availableRoles.map(r => r.Name));\n    \n    // Trigger change detection to update the UI\n    this.cdr.detectChanges();\n  }\n\n  public async addRolePermission(role: MJRoleEntity): Promise<void> {\n    // Create new EntityPermission entity\n    const entityPermission = await this.metadata.GetEntityObject<MJEntityPermissionEntity>('MJ: Entity Permissions');\n    entityPermission.NewRecord();\n    entityPermission.EntityID = this.data!.entity.ID;\n    entityPermission.RoleID = role.ID;\n    entityPermission.CanCreate = false;\n    entityPermission.CanRead = true; // Default to read access\n    entityPermission.CanUpdate = false;\n    entityPermission.CanDelete = false;\n\n    // Add new role permission\n    this.rolePermissions.push({\n      roleId: role.ID,\n      roleName: role.Name || '',\n      entityPermission: entityPermission,\n      isNew: true\n    });\n\n    // Remove from available roles\n    this.availableRoles = this.availableRoles.filter(r => !UUIDsEqual(r.ID, role.ID));\n    this.cdr.detectChanges();\n  }\n\n  public removeRolePermission(rolePermission: RolePermissions): void {\n    // Add back to available roles if not new\n    if (!rolePermission.isNew) {\n      const role = this.data?.roles.find(r => UUIDsEqual(r.ID, rolePermission.roleId));\n      if (role) {\n        this.availableRoles.push(role);\n        this.availableRoles.sort((a, b) => (a.Name || '').localeCompare(b.Name || ''));\n      }\n    } else {\n      // Add back to available roles\n      const role = this.data?.roles.find(r => UUIDsEqual(r.ID, rolePermission.roleId));\n      if (role) {\n        this.availableRoles.push(role);\n        this.availableRoles.sort((a, b) => (a.Name || '').localeCompare(b.Name || ''));\n      }\n    }\n\n    // Remove from role permissions\n    this.rolePermissions = this.rolePermissions.filter(rp => rp.roleId !== rolePermission.roleId);\n    this.cdr.detectChanges();\n  }\n\n  public async onSubmit(): Promise<void> {\n    if (!this.data || !this.hasChanges) return;\n\n    this.isLoading = true;\n    this.error = null;\n\n    try {\n      // Process each role permission\n      for (const rolePermission of this.rolePermissions) {\n        if (rolePermission.isNew || rolePermission.entityPermission.Dirty) {\n          await this.saveRolePermission(rolePermission);\n        }\n      }\n\n      this.result.emit({ action: 'save', entity: this.data.entity });\n\n    } catch (error: unknown) {\n      console.error('Error saving permissions:', error);\n      this.ngZone.run(() => {\n        this.error = error instanceof Error ? error.message : 'An unexpected error occurred while saving permissions';\n        this.cdr.markForCheck();\n      });\n    } finally {\n      this.ngZone.run(() => {\n        this.isLoading = false;\n        this.cdr.markForCheck();\n      });\n    }\n  }\n\n  private async saveRolePermission(rolePermission: RolePermissions): Promise<void> {\n    // Save the entity directly - it already has all the values bound\n    const saveResult = await rolePermission.entityPermission.Save();\n    if (!saveResult) {\n      throw new Error(rolePermission.entityPermission.LatestResult?.Message || `Failed to save permissions for role ${rolePermission.roleName}`);\n    }\n  }\n\n  public onCancel(): void {\n    this.result.emit({ action: 'cancel' });\n  }\n}","<!-- MD3 Modal Dialog -->\n@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\">\n    <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <!-- Modal Header -->\n      <div class=\"modal-header\">\n        <div class=\"dialog-header\">\n          <h2 class=\"dialog-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            Edit Entity Permissions\n          </h2>\n          <p class=\"dialog-subtitle\">\n            Configure role-based permissions for {{ data?.entity?.Name }}\n          </p>\n        </div>\n        <button type=\"button\" class=\"modal-close\" (click)=\"onCancel()\" aria-label=\"Close dialog\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"permissionForm\" (ngSubmit)=\"onSubmit()\">\n          @if (error) {\n            <div class=\"content-section\">\n              <mj-alert Variant=\"error\" [Message]=\"error\" />\n            </div>\n          }\n          <!-- Entity Information Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  Entity Information\n                </h3>\n                <p class=\"section-description\">{{ data?.entity?.Description || 'Entity permissions configuration' }}</p>\n              </div>\n              <div class=\"entity-info-card\">\n                <div class=\"entity-meta\">\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-table\"></i>\n                    <span class=\"meta-label\">Entity:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.Name }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <span class=\"meta-label\">Schema Name:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.SchemaName || 'N/A' }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-key\"></i>\n                    <span class=\"meta-label\">Total Permissions:</span>\n                    <span class=\"meta-value\">{{ rolePermissions.length }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span class=\"meta-label\">Last Updated:</span>\n                    <span class=\"meta-value\">{{ data?.entity?.__mj_UpdatedAt | date:'medium' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Permissions Configuration Section -->\n          <div class=\"content-section\">\n            <div class=\"form-section\">\n              <div class=\"section-header\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-users-cog\"></i>\n                  Role Permissions\n                </h3>\n                <p class=\"section-description\">Configure CRUD permissions for each role</p>\n              </div>\n              <div class=\"permissions-table-container\">\n                <table class=\"permissions-table\">\n                  <thead>\n                    <tr>\n                      <th class=\"role-column\">Role</th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        Read\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                        Update\n                      </th>\n                      <th class=\"permission-column\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                        Delete\n                      </th>\n                      <th class=\"actions-column\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (rolePermission of rolePermissions; track rolePermission.roleId) {\n                      <tr class=\"permission-row\" [class.has-changes]=\"hasEntityChanges(rolePermission)\" [class.is-new]=\"rolePermission.isNew\">\n                        <td class=\"role-name\">\n                          <div class=\"role-info\">\n                            <i class=\"fa-solid fa-shield-halved\"></i>\n                            <span>{{ rolePermission.roleName }}</span>\n                            @if (rolePermission.isNew) {\n                              <span class=\"new-badge\">New</span>\n                            }\n                            @if (hasEntityChanges(rolePermission) && !rolePermission.isNew) {\n                              <span class=\"changed-badge\">Modified</span>\n                            }\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'create-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanCreate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'create-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'read-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanRead\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'read-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'update-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanUpdate\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'update-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"permission-cell\">\n                          <div class=\"permission-toggle\">\n                            <input\n                              type=\"checkbox\"\n                              [id]=\"'delete-' + rolePermission.roleId\"\n                              [(ngModel)]=\"rolePermission.entityPermission.CanDelete\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              class=\"permission-checkbox\"\n                              />\n                            <label [for]=\"'delete-' + rolePermission.roleId\" class=\"permission-label\">\n                              <div class=\"checkbox-indicator\"></div>\n                            </label>\n                          </div>\n                        </td>\n                        <td class=\"actions-cell\">\n                          <button\n                            type=\"button\"\n                            class=\"btn-icon btn-danger\"\n                            (click)=\"removeRolePermission(rolePermission)\"\n                            title=\"Remove permissions for this role\"\n                            attr.aria-label=\"Remove permissions for {{ rolePermission.roleName }}\"\n                            >\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (rolePermissions.length === 0) {\n                  <div class=\"empty-permissions\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No role permissions configured</p>\n                    <p class=\"empty-subtext\">Add permissions for specific roles to control access to this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Add Role Permissions -->\n              <div class=\"add-role-section\">\n                <div class=\"add-role-header\">\n                  <h4>Add Role Permissions</h4>\n                  <p>Select roles to configure permissions for this entity</p>\n                </div>\n                <div class=\"available-roles\">\n                  @for (role of availableRoles; track role.ID) {\n                    <button\n                      type=\"button\"\n                      class=\"role-chip\"\n                      (click)=\"addRolePermission(role)\"\n                      title=\"Add permissions for {{ role.Name }}\"\n                      attr.aria-label=\"Add permissions for {{ role.Name }}\"\n                      >\n                      <i class=\"fa-solid fa-plus\"></i>\n                      {{ role.Name }}\n                    </button>\n                  }\n                  @if (availableRoles.length === 0) {\n                    <p class=\"no-available-roles\">All roles have been configured</p>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- Modal Footer -->\n          <div class=\"modal-footer\">\n            <div class=\"footer-info\">\n              @if (hasChanges) {\n                <span class=\"changes-indicator\">\n                  <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                  You have unsaved changes\n                </span>\n              }\n            </div>\n            <div class=\"footer-actions\">\n              <button\n                type=\"submit\"\n                class=\"btn btn-primary\"\n                [disabled]=\"!hasChanges || isLoading\"\n                >\n                @if (isLoading) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  Saving...\n                } @else {\n                  <i class=\"fa-solid fa-save\"></i>\n                  Save Permissions\n                }\n              </button>\n              <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n                <i class=\"fa-solid fa-times\"></i>\n                Cancel\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n}\n"]}

package/dist/lib/module.d.ts

@@ -29,7 +29,7 @@ import * as i27 from "@memberjunction/ng-shared-generic";
 import * as i28 from "@memberjunction/ng-ui-components";
 export declare class ExplorerSettingsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerSettingsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SettingsComponent, typeof i2.UserProfileSettingsComponent, typeof i3.UserAppConfigComponent, typeof i4.NotificationPreferencesComponent, typeof i5.GeneralSettingsComponent, typeof i6.AccountInfoComponent, typeof i7.ApplicationSettingsComponent, typeof i8.AppearanceSettingsComponent, typeof i9.SqlLoggingComponent, typeof i10.UserManagementComponent, typeof i11.RoleManagementComponent, typeof i12.ApplicationManagementComponent, typeof i13.EntityPermissionsComponent, typeof i14.RoleDialogComponent, typeof i15.UserDialogComponent, typeof i16.PermissionDialogComponent, typeof i17.ApplicationDialogComponent], [typeof i18.CommonModule, typeof i19.FormsModule, typeof i19.ReactiveFormsModule, typeof i20.DragDropModule, typeof i21.EntityPermissionsModule, typeof i22.EntityFormDialogModule, typeof i23.SimpleRecordListModule, typeof i24.JoinGridModule, typeof i25.CodeEditorModule, typeof i26.SharedSettingsModule, typeof i27.SharedGenericModule, typeof i28.MJButtonDirective, typeof i28.MJPageHeaderInteriorComponent, typeof i28.MJPageBodyInteriorComponent, typeof i28.MJPageSearchComponent, typeof i28.MJFilterPopoverComponent, typeof i28.MJFilterPanelComponent, typeof i28.MJFilterChipComponent, typeof i28.MJRefreshButtonComponent, typeof i28.MJStatBadgeComponent, typeof i28.MJViewToggleComponent], [typeof i1.SettingsComponent, typeof i2.UserProfileSettingsComponent, typeof i3.UserAppConfigComponent, typeof i4.NotificationPreferencesComponent, typeof i5.GeneralSettingsComponent, typeof i6.AccountInfoComponent, typeof i7.ApplicationSettingsComponent, typeof i8.AppearanceSettingsComponent, typeof i9.SqlLoggingComponent, typeof i10.UserManagementComponent, typeof i11.RoleManagementComponent, typeof i12.ApplicationManagementComponent, typeof i13.EntityPermissionsComponent, typeof i14.RoleDialogComponent, typeof i15.UserDialogComponent, typeof i16.PermissionDialogComponent, typeof i17.ApplicationDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SettingsComponent, typeof i2.UserProfileSettingsComponent, typeof i3.UserAppConfigComponent, typeof i4.NotificationPreferencesComponent, typeof i5.GeneralSettingsComponent, typeof i6.AccountInfoComponent, typeof i7.ApplicationSettingsComponent, typeof i8.AppearanceSettingsComponent, typeof i9.SqlLoggingComponent, typeof i10.UserManagementComponent, typeof i11.RoleManagementComponent, typeof i12.ApplicationManagementComponent, typeof i13.EntityPermissionsComponent, typeof i14.RoleDialogComponent, typeof i15.UserDialogComponent, typeof i16.PermissionDialogComponent, typeof i17.ApplicationDialogComponent], [typeof i18.CommonModule, typeof i19.FormsModule, typeof i19.ReactiveFormsModule, typeof i20.DragDropModule, typeof i21.EntityPermissionsModule, typeof i22.EntityFormDialogModule, typeof i23.SimpleRecordListModule, typeof i24.JoinGridModule, typeof i25.CodeEditorModule, typeof i26.SharedSettingsModule, typeof i27.SharedGenericModule, typeof i28.MJButtonDirective, typeof i28.MJPageHeaderInteriorComponent, typeof i28.MJPageBodyInteriorComponent, typeof i28.MJPageSearchComponent, typeof i28.MJFilterPopoverComponent, typeof i28.MJFilterPanelComponent, typeof i28.MJFilterChipComponent, typeof i28.MJRefreshButtonComponent, typeof i28.MJStatBadgeComponent, typeof i28.MJViewToggleComponent, typeof i28.MJEmptyStateComponent, typeof i28.MJAlertComponent, typeof i28.MJAccordionModule], [typeof i1.SettingsComponent, typeof i2.UserProfileSettingsComponent, typeof i3.UserAppConfigComponent, typeof i4.NotificationPreferencesComponent, typeof i5.GeneralSettingsComponent, typeof i6.AccountInfoComponent, typeof i7.ApplicationSettingsComponent, typeof i8.AppearanceSettingsComponent, typeof i9.SqlLoggingComponent, typeof i10.UserManagementComponent, typeof i11.RoleManagementComponent, typeof i12.ApplicationManagementComponent, typeof i13.EntityPermissionsComponent, typeof i14.RoleDialogComponent, typeof i15.UserDialogComponent, typeof i16.PermissionDialogComponent, typeof i17.ApplicationDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ExplorerSettingsModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/lib/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,qBAyEa,sBAAsB;yCAAtB,sBAAsB;0CAAtB,sBAAsB;0CAAtB,sBAAsB;CAAI"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,qBA4Ea,sBAAsB;yCAAtB,sBAAsB;0CAAtB,sBAAsB;0CAAtB,sBAAsB;CAAI"}