// app.config.ts
import { ApplicationConfig } from '@angular/core';
import {
  providePermissions,
  withPermissions,
  withRoles,
} from 'ngx-signal-permissions';

export const appConfig: ApplicationConfig = {
  providers: [
    providePermissions(
      withPermissions(['posts:read', 'posts:write']),
      withRoles({
        admin: ['users:manage', 'settings:edit'],
        editor: ['posts:publish'],
      })
    ),
  ],
};

import { Component } from '@angular/core';
import { hasPermission, hasRole } from 'ngx-signal-permissions';

@Component({
  selector: 'app-dashboard',
  template: `
    @if (canEdit()) {
      <button>Edit Post</button>
    }

    @if (isAdmin()) {
      <admin-panel />
    }
  `,
})
export class DashboardComponent {
  canEdit = hasPermission('posts:write');
  isAdmin = hasRole('admin');
}

import { inject } from '@angular/core';
import { PermissionsStore } from 'ngx-signal-permissions';

export class MyService {
  private store = inject(PermissionsStore);

  loadUserPermissions(user: User) {
    this.store.loadPermissions(user.permissions);
    this.store.loadRoles(user.roles);
  }

  checkAccess() {
    // Immediate value
    if (this.store.hasPermission('admin')) {
      // ...
    }

    // Reactive signal
    const canEdit = this.store.hasPermissionSignal('posts:edit');
  }
}

import {
  hasPermission,
  hasAnyPermission,
  hasAllPermissions,
  hasRole,
  hasAnyRole,
  authorize,
  withPermissions,
} from 'ngx-signal-permissions';

@Component({
  template: `
    @if (canRead()) { <content /> }
    @if (canManage()) { <admin-tools /> }
    @if (isPrivileged()) { <premium-content /> }
  `,
})
export class MyComponent {
  // Single permission
  canRead = hasPermission('posts:read');

  // Multiple permissions (any)
  canManage = hasAnyPermission(['posts:edit', 'posts:delete']);

  // Multiple permissions (all required)
  needsAll = hasAllPermissions(['read', 'write', 'delete']);

  // Role check
  isAdmin = hasRole('admin');

  // Combined check
  isPrivileged = authorize({
    permissions: ['premium:access'],
    roles: ['subscriber', 'admin'],
    strategy: 'any',
  });

  // Composable pattern
  protected perms = withPermissions();
  // Then use: this.perms.can('edit'), this.perms.isRole('admin'), etc.
}

import {
  HasPermissionDirective,
  HasRoleDirective,
  ExceptPermissionDirective,
} from 'ngx-signal-permissions';

@Component({
  imports: [HasPermissionDirective, HasRoleDirective, ExceptPermissionDirective],
  template: `
    <!-- Single permission -->
    <button *hasPermission="'delete'">Delete</button>

    <!-- Multiple permissions -->
    <nav *hasPermission="['admin', 'moderator']; strategy: 'any'">
      Admin Nav
    </nav>

    <!-- With else template -->
    <div *hasPermission="'premium'; else freeTpl">
      Premium Content
    </div>
    <ng-template #freeTpl>
      <button>Upgrade</button>
    </ng-template>

    <!-- Except directive -->
    <div *exceptPermission="'guest'">
      Logged in content
    </div>

    <!-- Role directive -->
    <admin-panel *hasRole="'admin'" />
  `,
})
export class MyComponent {}

import { WhenPermittedComponent } from 'ngx-signal-permissions';

@Component({
  imports: [WhenPermittedComponent],
  template: `
    <when-permitted only="admin">
      <admin-dashboard />
    </when-permitted>

    <when-permitted [only]="['edit', 'delete']" strategy="all">
      <editor-toolbar />
      <ng-template fallback>
        <read-only-view />
      </ng-template>
    </when-permitted>

    <when-permitted role="premium">
      <premium-features />
    </when-permitted>
  `,
})
export class MyComponent {}

import {
  permissionGuard,
  permissionMatcher,
  routePermissionGuard,
} from 'ngx-signal-permissions';

export const routes: Routes = [
  // Inline configuration
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component'),
    canActivate: [
      permissionGuard({
        only: 'admin',
        redirectTo: '/unauthorized',
      }),
    ],
  },

  // Multiple permissions
  {
    path: 'editor',
    loadComponent: () => import('./editor/editor.component'),
    canActivate: [
      permissionGuard({
        only: ['posts:write', 'posts:publish'],
        strategy: 'all',
        redirectTo: '/dashboard',
      }),
    ],
  },

  // Prevent lazy loading if no permission
  {
    path: 'premium',
    loadChildren: () => import('./premium/routes'),
    canMatch: [permissionMatcher({ only: 'premium' })],
  },

  // Route data based
  {
    path: 'settings',
    loadComponent: () => import('./settings/settings.component'),
    canActivate: [routePermissionGuard],
    data: {
      permissions: {
        only: ['settings:view'],
        except: ['banned'],
        redirectTo: '/home',
      },
    },
  },
];

import { HasPermissionPipe, HasRolePipe } from 'ngx-signal-permissions';

@Component({
  imports: [HasPermissionPipe, HasRolePipe],
  template: `
    <button [disabled]="!('edit' | hasPermission)">Edit</button>
    <button [class.hidden]="!('admin' | hasRole)">Admin</button>
  `,
})
export class MyComponent {}

import { PolicyBuilder, PolicyService } from 'ngx-signal-permissions';

// Define policies
const canManageUsers = new PolicyBuilder()
  .hasPermission('users:read')
  .hasAnyPermission(['users:write', 'users:admin'])
  .hasAnyRole(['admin', 'hr'])
  .build('canManageUsers');

const canPublishPosts = new PolicyBuilder()
  .hasAllPermissions(['posts:write', 'posts:publish'])
  .lacksRole('suspended')
  .build('canPublishPosts');

// Register in config
providePermissions(
  withPolicies([canManageUsers, canPublishPosts])
);

// Use in component
@Component({
  template: `
    @if (canManage()) {
      <user-management />
    }
  `,
})
export class MyComponent {
  private policyService = inject(PolicyService);
  canManage = this.policyService.checkSignal('canManageUsers');
}

// Grant wildcard permission
store.loadPermissions(['admin:*']);

// These all return true
store.hasPermission('admin:read');
store.hasPermission('admin:write');
store.hasPermission('admin:users:delete');

// Configure separator
store.configure({ hierarchySeparator: '.' });
store.loadPermissions(['admin.*']);
store.hasPermission('admin.users.read'); // true

// Simple async loading
await store.loadPermissionsAsync(async () => {
  const response = await fetch('/api/user/permissions');
  return response.json();
});

// Full source configuration
await store.loadFromSource({
  loader: () => fetch('/api/user').then(r => r.json()),
  mapper: (user) => ({
    permissions: user.permissions,
    roles: user.roles.reduce((acc, role) => {
      acc[role.name] = role.permissions;
      return acc;
    }, {}),
  }),
});

// With provider
providePermissions(
  withAsyncSource({
    loader: () => fetch('/api/auth').then(r => r.json()),
    mapper: (data) => ({
      permissions: data.permissions,
      roles: data.roles,
    }),
  })
);

import { TestBed } from '@angular/core/testing';
import {
  providePermissionsTesting,
  createTestStore,
} from 'ngx-signal-permissions/testing';

describe('MyComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [MyComponent],
      providers: [
        providePermissionsTesting({
          permissions: ['read', 'write'],
          roles: { admin: ['delete'] },
        }),
      ],
    });
  });

  it('should show edit button for users with write permission', () => {
    const fixture = TestBed.createComponent(MyComponent);
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('.edit-btn');
    expect(button).toBeTruthy();
  });
});

// Manual store for isolated tests
it('should check permissions', () => {
  const store = createTestStore({
    permissions: ['read'],
    roles: { user: [] },
  });

  expect(store.hasPermission('read')).toBeTrue();
  expect(store.hasPermission('write')).toBeFalse();
});

// Before (ngx-permissions)
<div *ngxPermissionsOnly="['admin']">Admin content</div>

// After (ngx-signal-permissions)
<div *hasPermission="'admin'">Admin content</div>

// Or with modern control flow (recommended)
@if (isAdmin()) {
  <div>Admin content</div>
}

// In component
isAdmin = hasRole('admin');