npm - @memberjunction/ng-explorer-settings - Versions diffs - 4.0.0 → 4.1.0 - Mend

@memberjunction/ng-explorer-settings 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -1,21 +1,67 @@
 # @memberjunction/ng-explorer-settings
-Angular components for managing MemberJunction application settings, including users, roles, applications, and entity permissions. This package provides a comprehensive administrative interface for configuring system access and permissions.
+Angular components for the Settings section of MemberJunction Explorer. Provides a tabbed settings interface covering general preferences, user management, role management, application management, entity permissions, appearance, notifications, SQL logging, and profile settings.
 ## Overview
-The `@memberjunction/ng-explorer-settings` package provides a complete settings management interface for MemberJunction Explorer applications. It offers a unified navigation system with dedicated components for managing users, roles, applications, and entity permissions.
+The `SettingsComponent` serves as the main container, registered via `@RegisterClass(BaseNavigationComponent, 'Settings')`. It provides a searchable, tabbed interface for administrative and user settings. Each settings area is implemented as a standalone component that can be used independently.
+```mermaid
+graph TD
+    SC["SettingsComponent\n(<mj-settings>)"] --> GS["GeneralSettingsComponent"]
+    SC --> AI["AccountInfoComponent"]
+    SC --> AS["AppearanceSettingsComponent"]
+    SC --> APS["ApplicationSettingsComponent"]
+    SC --> UM["UserManagementComponent"]
+    SC --> RM["RoleManagementComponent"]
+    SC --> AM["ApplicationManagementComponent"]
+    SC --> EP["EntityPermissionsComponent"]
+    SC --> NP["NotificationPreferencesComponent"]
+    SC --> SL["SQLLoggingComponent"]
+    SC --> UP["UserProfileSettingsComponent"]
+    SC --> UAC["UserAppConfigComponent"]
+    UM --> UD["UserDialogComponent"]
+    RM --> RD["RoleDialogComponent"]
+    AM --> AD["ApplicationDialogComponent"]
+    EP --> PD["PermissionDialogComponent"]
+    style SC fill:#7c5295,stroke:#563a6b,color:#fff
+    style GS fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style AI fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style AS fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style APS fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style UM fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style RM fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style AM fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style EP fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style NP fill:#b8762f,stroke:#8a5722,color:#fff
+    style SL fill:#b8762f,stroke:#8a5722,color:#fff
+    style UP fill:#b8762f,stroke:#8a5722,color:#fff
+    style UAC fill:#b8762f,stroke:#8a5722,color:#fff
+    style UD fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style RD fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style AD fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style PD fill:#2d8659,stroke:#1a5c3a,color:#fff
+```
 ## Features
-- **User Management**: Create, edit, activate/deactivate users with role assignments
-- **Role Management**: Define and manage security roles with user assignments
-- **Application Configuration**: Configure applications and their associated entities
-- **Entity Permissions**: Granular control over entity-level permissions
-- **SQL Logging Management**: Real-time SQL logging configuration and session control
-- **Transaction-based Updates**: Batch updates using MemberJunction's transaction system
-- **Responsive Navigation**: Left-side navigation with dynamic content area
-- **Real-time Updates**: Immediate reflection of permission and assignment changes
+- **Tabbed settings interface** with search across all settings
+- **General settings**: Core application preferences
+- **Account info**: User account details
+- **Appearance settings**: Theme and display preferences
+- **Application settings**: Application-specific configuration
+- **User management**: CRUD for users with dialog-based editing
+- **Role management**: CRUD for roles with dialog-based editing
+- **Application management**: CRUD for applications with dialog-based editing
+- **Entity permissions**: Permission grid integrated from `@memberjunction/ng-entity-permissions`
+- **Notification preferences**: Notification configuration
+- **SQL logging**: SQL query logging viewer
+- **User profile settings**: Profile editing
+- **User app configuration**: Per-user application configuration
+- **Reusable settings card**: `SettingsCardComponent` for consistent card layout
+- **Shared settings module**: Common settings UI elements
 ## Installation
@@ -23,461 +69,63 @@ The `@memberjunction/ng-explorer-settings` package provides a complete settings
 npm install @memberjunction/ng-explorer-settings
 ```
-## Usage
+## Key Dependencies
-### Module Import
+| Dependency | Purpose |
+|---|---|
+| `@memberjunction/core`, `@memberjunction/core-entities` | Entity metadata and data |
+| `@memberjunction/ng-base-application` | BaseNavigationComponent |
+| `@memberjunction/ng-entity-permissions` | Entity permission grid |
+| `@memberjunction/ng-entity-form-dialog` | Entity form dialogs |
+| `@memberjunction/ng-simple-record-list` | Simple record CRUD lists |
+| `@memberjunction/ng-join-grid` | Join/relationship grid |
+| `@memberjunction/ng-user-avatar` | User avatar display |
+| `@progress/kendo-angular-*` | Kendo UI components |
+| `@angular/cdk` | Angular CDK utilities |
-Import the `ExplorerSettingsModule` in your Angular application:
+## Usage
 ```typescript
 import { ExplorerSettingsModule } from '@memberjunction/ng-explorer-settings';
 @NgModule({
-  imports: [
-    CommonModule,
-    ExplorerSettingsModule,
-    // other imports...
-  ]
+  imports: [ExplorerSettingsModule]
 })
-export class YourModule { }
-```
-### Basic Implementation
-Add the main settings component to your application:
-```html
-<mj-settings></mj-settings>
-```
-The component automatically handles routing to different settings sections based on the URL path.
-## Components
-### SettingsComponent
-The main navigation component that provides a consistent interface for all settings sections.
-**Selector**: `mj-settings`
-**Features**:
-- Left-side navigation menu
-- Dynamic content area based on selected section
-- URL-based routing support
-- Responsive layout using MemberJunction's container directives
-**Routes Handled**:
-- `/settings/users` - User list view
-- `/settings/user/:id` - Individual user details
-- `/settings/roles` - Role list view
-- `/settings/role/:id` - Individual role details
-- `/settings/applications` - Application list view
-- `/settings/application/:name` - Individual application details
-- `/settings/entitypermissions` - Entity permission management
-- `/settings/sqllogging` - SQL logging configuration and session management
-**Example**:
-```typescript
-// Navigate to a specific user
-this.router.navigate(['/settings/user', userId]);
-// Navigate to roles section
-this.router.navigate(['/settings/roles']);
-```
-### SingleUserComponent
-Manages individual user details and configurations.
-**Selector**: `mj-single-user`
-**Inputs**:
-- `UserID: string` - The ID of the user to display/edit
-**Features**:
-- User information display and editing
-- User role assignments via embedded grid
-- User views management
-- Integration with entity form dialog for editing
-**Example**:
-```html
-<mj-single-user [UserID]="selectedUserId"></mj-single-user>
-```
-### SingleRoleComponent
-Manages individual role details and user assignments.
-**Selector**: `mj-single-role`
-**Inputs**:
-- `RoleID: string` - The ID of the role to display/edit
-**Features**:
-- Role information display and editing
-- User assignments to the role
-- Batch operations for user-role assignments
-**Example**:
-```html
-<mj-single-role [RoleID]="selectedRoleId"></mj-single-role>
-```
-### SingleApplicationComponent
-Manages application configurations and entity associations.
-**Selector**: `mj-single-application`
-**Inputs**:
-- `ApplicationID: string` - The ID of the application to manage
-**Features**:
-- Application details management
-- Entity associations configuration
-- Bulk entity assignment operations
-**Example**:
-```html
-<mj-single-application [ApplicationID]="selectedApplicationId"></mj-single-application>
-```
-### UserRolesGridComponent
-A specialized grid for managing user-role relationships.
-**Selector**: `mj-user-roles-grid`
-**Inputs**:
-- `UserID: string` - User ID when in 'Users' mode
-- `RoleID: string` - Role ID when in 'Roles' mode
-- `Mode: 'Users' | 'Roles'` - Determines the grid's perspective
-- `UserRecord: UserEntity | null` - User entity when in 'Users' mode
-- `RoleRecord: RoleEntity | null` - Role entity when in 'Roles' mode
-**Features**:
-- Checkbox-based role/user selection
-- Batch save/cancel operations
-- Flip all functionality
-- Transaction-based updates
-- Visual indication of pending changes
-**Example**:
-```html
-<!-- For managing roles assigned to a user -->
-<mj-user-roles-grid
-  [UserID]="userId"
-  [UserRecord]="userEntity"
-  Mode="Users">
-</mj-user-roles-grid>
-<!-- For managing users assigned to a role -->
-<mj-user-roles-grid
-  [RoleID]="roleId"
-  [RoleRecord]="roleEntity"
-  Mode="Roles">
-</mj-user-roles-grid>
-```
-### ApplicationEntitiesGridComponent
-Manages entity associations with applications.
-**Selector**: `mj-application-entities-grid`
-**Inputs**:
-- `ApplicationID: string` - Application ID when in 'Applications' mode
-- `EntityID: string` - Entity ID when in 'Entities' mode
-- `Mode: 'Applications' | 'Entities'` - Determines the grid's perspective
-- `ApplicationRecord: ApplicationEntity | null` - Application entity
-- `EntityRecord: EntityEntity | null` - Entity record
-**Features**:
-- Entity-application association management
-- Bulk selection/deselection
-- Transaction-based saves
-- Dirty state tracking
-**Example**:
-```html
-<mj-application-entities-grid
-  [ApplicationID]="appId"
-  [ApplicationRecord]="appEntity"
-  Mode="Applications">
-</mj-application-entities-grid>
-```
-### SqlLoggingComponent
-Provides comprehensive SQL logging management for debugging and migration generation.
-**Selector**: `mj-sql-logging`
-**Features**:
-- Real-time SQL logging session management
-- Owner-level access control (requires `Type = 'Owner'`)
-- Session configuration with filtering options
-- Live session monitoring with statement counts
-- Multiple concurrent session support
-- Auto-refresh capabilities
-- Integration with MemberJunction's GraphQL API
-**Key Capabilities**:
-- **Session Creation**: Start new SQL logging sessions with custom options
-- **User Filtering**: Capture SQL statements from specific users only
-- **Format Options**: Standard SQL logs or migration-ready files
-- **Real-time Monitoring**: View active sessions and their progress
-- **Batch Operations**: Stop individual sessions or all sessions at once
-- **Auto-cleanup**: Sessions automatically expire and clean up empty files
-**Security Requirements**:
-- User must have `Type = 'Owner'` in the Users table
-- SQL logging must be enabled in server configuration
-- Valid authentication required for all operations
-**Example Usage**:
-```html
-<!-- Include in settings navigation -->
-<mj-sql-logging></mj-sql-logging>
-```
-**Session Configuration Options**:
-```typescript
-interface SessionOptions {
-  fileName?: string;              // Custom log file name
-  sessionName?: string;           // Human-readable session name
-  filterToCurrentUser?: boolean;  // Filter to current user's SQL only
-  formatAsMigration?: boolean;    // Format as migration file
-  prettyPrint?: boolean;          // Format SQL with indentation
-  statementTypes?: 'queries' | 'mutations' | 'both';  // SQL types to capture
-}
-```
-**GraphQL Integration**:
-```typescript
-// The component automatically handles GraphQL operations:
-// - sqlLoggingConfig: Get current configuration
-// - activeSqlLoggingSessions: List active sessions
-// - startSqlLogging: Create new session
-// - stopSqlLogging: Stop specific session
-// - stopAllSqlLogging: Stop all sessions
-```
-**UI Features**:
-- **Dashboard-style interface** with modern AI dashboard styling
-- **Status indicators** showing configuration state and active sessions
-- **Interactive session cards** with duration, statement counts, and controls
-- **Dialog-based session creation** with comprehensive options
-- **Auto-refresh toggle** for real-time session monitoring
-- **Responsive layout** optimized for desktop use
-**Access Control**:
-- Non-Owner users see access denied message with permission refresh option
-- Disabled state shown when SQL logging not enabled in server config
-- Clear instructions provided for enabling SQL logging
-**Error Handling**:
-- Comprehensive error messages for common issues
-- Graceful handling of permission and configuration problems
-- User-friendly notifications for all operations
-- Debug logging for troubleshooting
-**Integration Notes**:
-- Requires MJServer with SqlLoggingConfigResolver
-- Works with SQLServerDataProvider logging capabilities
-- Follows MemberJunction's security and styling patterns
-- Compatible with modern Angular control flow syntax (`@if`, `@for`)
-## User Management Features
-### User Activation/Deactivation
-The settings module implements a soft-delete pattern for users:
-```typescript
-// Example implementation in SettingsComponent
-public async toggleUserActivation(record: BaseEntity) {
-  try {
-    const user = record as UserEntity;
-    const currentlyActive = user.IsActive;
-    // Toggle the IsActive flag
-    user.IsActive = !currentlyActive;
-    if (await user.Save()) {
-      MJNotificationService.Instance.CreateSimpleNotification(
-        `User ${user.Name} has been ${currentlyActive ? 'deactivated' : 'activated'} successfully.`,
-        'success',
-        3000
-      );
-    }
-  } catch (error) {
-    console.error('Error toggling user activation:', error);
-    MJNotificationService.Instance.CreateSimpleNotification(
-      'An error occurred while toggling user activation.',
-      'error',
-      5000
-    );
-  }
-}
-```
-### Custom Action Support
-The user list supports custom actions with configurable icons and tooltips:
-```typescript
-// Icon function for toggle button
-public getUserToggleIcon(record: BaseEntity): string {
-  const user = record as UserEntity;
-  return user.IsActive ? 'fa-user-lock' : 'fa-user-check';
-}
-// Tooltip function for toggle button
-public getUserToggleTooltip(record: BaseEntity): string {
-  const user = record as UserEntity;
-  return user.IsActive ? 'Deactivate user' : 'Activate user';
-}
-```
-## Configuration Options
-### Navigation Options
-The settings component defines navigation options:
-```typescript
-public options = [
-  { label: 'Users', value: SettingsItem.Users },
-  { label: 'Roles', value: SettingsItem.Roles },
-  { label: 'Applications', value: SettingsItem.Applications },
-  { label: 'Entity Permissions', value: SettingsItem.EntityPermissions },
-  { label: 'SQL Logging', value: SettingsItem.SqlLogging }
-];
-```
-### Grid Configuration
-User roles and application entities grids support various configurations:
-```typescript
-// Example: Configure grid height
-<mj-user-roles-grid
-  [UserID]="userId"
-  style="height: 600px;">
-</mj-user-roles-grid>
-```
-## Dependencies
-This package depends on several MemberJunction and third-party packages:
-### MemberJunction Dependencies
-- `@memberjunction/core`: Core functionality and metadata
-- `@memberjunction/core-entities`: Entity definitions
-- `@memberjunction/global`: Global utilities and decorators
-- `@memberjunction/ng-container-directives`: Layout directives
-- `@memberjunction/ng-shared`: Shared Angular components
-- `@memberjunction/ng-notifications`: Notification service
-- `@memberjunction/ng-entity-permissions`: Entity permission components
-- `@memberjunction/ng-base-forms`: Base form components
-- `@memberjunction/ng-entity-form-dialog`: Entity editing dialogs
-- `@memberjunction/ng-user-view-grid`: User view grid component
-- `@memberjunction/ng-simple-record-list`: Record list component
-- `@memberjunction/ng-tabstrip`: Tab navigation component
-- `@memberjunction/graphql-dataprovider`: GraphQL operations for SQL logging
-### Kendo UI Dependencies
-- `@progress/kendo-angular-dropdowns`: Dropdown components
-- `@progress/kendo-angular-grid`: Grid functionality
-- `@progress/kendo-angular-buttons`: Button components
-- `@progress/kendo-angular-dialog`: Dialog components
-- `@progress/kendo-angular-layout`: Layout utilities
-- `@progress/kendo-angular-indicators`: Loading indicators
-- `@progress/kendo-angular-inputs`: Form input components
-- `@progress/kendo-angular-label`: Label components
-- `@progress/kendo-angular-dialog`: Modal dialogs for session configuration
-### Angular Dependencies (Peer)
-- `@angular/common`: ^18.0.2
-- `@angular/core`: ^18.0.2
-- `@angular/forms`: ^18.0.2
-- `@angular/router`: ^18.0.2
-## Integration with MemberJunction
-### Entity Registration
-Components register with MemberJunction's class system:
-```typescript
-@RegisterClass(BaseNavigationComponent, 'Settings')
-export class SettingsComponent extends BaseNavigationComponent {
-  // Component implementation
-}
-```
-### Transaction Support
-Batch operations use MemberJunction's transaction system:
-```typescript
-const md = new Metadata();
-const tg = await md.CreateTransactionGroup();
-for (const record of records) {
-  record.TransactionGroup = tg;
-  await record.Save();
-}
-await tg.Submit();
-```
-### Metadata Integration
-Components leverage MemberJunction's metadata system:
-```typescript
-const md = new Metadata();
-const userEntity = await md.GetEntityObject<UserEntity>('Users');
-const applications = md.Applications;
-const roles = md.Roles;
-```
-## Build and Development
-### Building the Package
+export class AppModule {}
+```
+The `SettingsComponent` is registered via `@RegisterClass(BaseNavigationComponent, 'Settings')` and is typically loaded through Explorer's navigation system.
+## Exported API
+| Export | Type | Description |
+|---|---|---|
+| `ExplorerSettingsModule` | NgModule | Main settings module |
+| `SettingsComponent` | Component | Main tabbed settings container |
+| `GeneralSettingsComponent` | Component | General preferences |
+| `AccountInfoComponent` | Component | Account information |
+| `AppearanceSettingsComponent` | Component | Theme/display settings |
+| `ApplicationSettingsComponent` | Component | Application preferences |
+| `UserManagementComponent` | Component | User CRUD management |
+| `RoleManagementComponent` | Component | Role CRUD management |
+| `ApplicationManagementComponent` | Component | Application CRUD management |
+| `EntityPermissionsSettingsComponent` | Component | Entity permission management |
+| `NotificationPreferencesComponent` | Component | Notification settings |
+| `SQLLoggingComponent` | Component | SQL logging viewer |
+| `UserProfileSettingsComponent` | Component | Profile editing |
+| `UserAppConfigComponent` | Component | User app configuration |
+| `SettingsCardComponent` | Component | Reusable settings card layout |
+| `UserDialogComponent` | Component | User edit dialog |
+| `RoleDialogComponent` | Component | Role edit dialog |
+| `ApplicationDialogComponent` | Component | Application edit dialog |
+| `PermissionDialogComponent` | Component | Permission edit dialog |
+## Build
 ```bash
-# From the package directory
-npm run build
-# Or from the repository root
-npm run build -- --filter="@memberjunction/ng-explorer-settings"
+cd packages/Angular/Explorer/explorer-settings && npm run build
 ```
-### TypeScript Configuration
-The package uses strict TypeScript settings:
-- Target: ES2015
-- Module: ES2020
-- Strict mode enabled
-- Source maps generated
-- Declaration files generated
-## Best Practices
-1. **Always use transactions** for batch operations to ensure data consistency
-2. **Leverage entity metadata** instead of hardcoding entity names
-3. **Use the provided navigation methods** for consistent routing behavior
-4. **Handle errors appropriately** with user-friendly notifications
-5. **Follow MemberJunction patterns** for entity instantiation and data loading
-## Version
-Current version: 2.43.0
 ## License
-ISC
+ISC

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-settings",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "MemberJunction: Reusable Angular components for the settings section of the MJ Explorer App",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,23 +25,23 @@
     "@angular/router": "21.1.3"
   },
   "dependencies": {
-    "@memberjunction/core": "4.0.0",
-    "@memberjunction/core-entities": "4.0.0",
-    "@memberjunction/global": "4.0.0",
-    "@memberjunction/graphql-dataprovider": "4.0.0",
-    "@memberjunction/ng-base-application": "4.0.0",
-    "@memberjunction/ng-base-forms": "4.0.0",
-    "@memberjunction/ng-code-editor": "4.0.0",
-    "@memberjunction/ng-container-directives": "4.0.0",
-    "@memberjunction/ng-entity-form-dialog": "4.0.0",
-    "@memberjunction/ng-entity-permissions": "4.0.0",
-    "@memberjunction/ng-join-grid": "4.0.0",
-    "@memberjunction/ng-notifications": "4.0.0",
-    "@memberjunction/ng-shared": "4.0.0",
-    "@memberjunction/ng-shared-generic": "4.0.0",
-    "@memberjunction/ng-simple-record-list": "4.0.0",
-    "@memberjunction/ng-tabstrip": "4.0.0",
-    "@memberjunction/ng-user-avatar": "4.0.0",
+    "@memberjunction/core": "4.1.0",
+    "@memberjunction/core-entities": "4.1.0",
+    "@memberjunction/global": "4.1.0",
+    "@memberjunction/graphql-dataprovider": "4.1.0",
+    "@memberjunction/ng-base-application": "4.1.0",
+    "@memberjunction/ng-base-forms": "4.1.0",
+    "@memberjunction/ng-code-editor": "4.1.0",
+    "@memberjunction/ng-container-directives": "4.1.0",
+    "@memberjunction/ng-entity-form-dialog": "4.1.0",
+    "@memberjunction/ng-entity-permissions": "4.1.0",
+    "@memberjunction/ng-join-grid": "4.1.0",
+    "@memberjunction/ng-notifications": "4.1.0",
+    "@memberjunction/ng-shared": "4.1.0",
+    "@memberjunction/ng-shared-generic": "4.1.0",
+    "@memberjunction/ng-simple-record-list": "4.1.0",
+    "@memberjunction/ng-tabstrip": "4.1.0",
+    "@memberjunction/ng-user-avatar": "4.1.0",
     "@progress/kendo-angular-buttons": "22.0.1",
     "@progress/kendo-angular-dialog": "22.0.1",
     "@progress/kendo-angular-dropdowns": "22.0.1",

package/dist/lib/shared/components/settings-card/settings-card.component.d.ts DELETED Viewed

@@ -1,27 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * A reusable settings card component providing consistent styling and layout
- * across all settings sections. Follows the modern AI dashboard design patterns.
- */
-export declare class SettingsCardComponent {
-    /** Card title displayed in the header */
-    title?: string;
-    /** Card subtitle displayed below the title */
-    subtitle?: string;
-    /** Whether to use floating card style (higher elevation) */
-    floating: boolean;
-    /** Card size variant */
-    size: 'sm' | 'md' | 'lg';
-    /** Whether to remove padding from content area */
-    noPadding: boolean;
-    /** Template for custom header content */
-    headerTemplate?: TemplateRef<any>;
-    /** Template for header action buttons */
-    actionTemplate?: TemplateRef<any>;
-    /** Template for footer content */
-    footerTemplate?: TemplateRef<any>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SettingsCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SettingsCardComponent, "mj-settings-card", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "floating": { "alias": "floating"; "required": false; }; "size": { "alias": "size"; "required": false; }; "noPadding": { "alias": "noPadding"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "actionTemplate": { "alias": "actionTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; }, {}, never, ["*"], true, never>;
-}
-//# sourceMappingURL=settings-card.component.d.ts.map

package/dist/lib/shared/components/settings-card/settings-card.component.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"settings-card.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/shared/components/settings-card/settings-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,WAAW,EAAE,MAAM,eAAe,CAAC;;AAG9D;;;GAGG;AACH,qBA0Ca,qBAAqB;IAChC,yCAAyC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB,8CAA8C;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,4DAA4D;IACnD,QAAQ,UAAS;IAE1B,wBAAwB;IACf,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEzC,kDAAkD;IACzC,SAAS,UAAS;IAE3B,yCAAyC;IAChC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAE3C,yCAAyC;IAChC,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAE3C,kCAAkC;IACzB,cAAc,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;yCAvBhC,qBAAqB;2CAArB,qBAAqB;CAwBjC"}

package/dist/lib/shared/components/settings-card/settings-card.component.js DELETED Viewed

@@ -1,170 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-const _c0 = ["*"];
-function SettingsCardComponent_Conditional_1_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function SettingsCardComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SettingsCardComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 4);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.headerTemplate);
-} }
-function SettingsCardComponent_Conditional_1_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 7);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.subtitle);
-} }
-function SettingsCardComponent_Conditional_1_Conditional_2_Conditional_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function SettingsCardComponent_Conditional_1_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, SettingsCardComponent_Conditional_1_Conditional_2_Conditional_4_ng_container_1_Template, 1, 0, "ng-container", 4);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.actionTemplate);
-} }
-function SettingsCardComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "h3", 6);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, SettingsCardComponent_Conditional_1_Conditional_2_Conditional_3_Template, 2, 1, "p", 7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SettingsCardComponent_Conditional_1_Conditional_2_Conditional_4_Template, 2, 1, "div", 8);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.title);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.subtitle ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.actionTemplate ? 4 : -1);
-} }
-function SettingsCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtemplate(1, SettingsCardComponent_Conditional_1_Conditional_1_Template, 1, 1, "ng-container")(2, SettingsCardComponent_Conditional_1_Conditional_2_Template, 5, 3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.headerTemplate ? 1 : 2);
-} }
-function SettingsCardComponent_Conditional_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function SettingsCardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtemplate(1, SettingsCardComponent_Conditional_4_ng_container_1_Template, 1, 0, "ng-container", 4);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.footerTemplate);
-} }
-/**
- * A reusable settings card component providing consistent styling and layout
- * across all settings sections. Follows the modern AI dashboard design patterns.
- */
-export class SettingsCardComponent {
-    /** Card title displayed in the header */
-    title;
-    /** Card subtitle displayed below the title */
-    subtitle;
-    /** Whether to use floating card style (higher elevation) */
-    floating = false;
-    /** Card size variant */
-    size = 'md';
-    /** Whether to remove padding from content area */
-    noPadding = false;
-    /** Template for custom header content */
-    headerTemplate;
-    /** Template for header action buttons */
-    actionTemplate;
-    /** Template for footer content */
-    footerTemplate;
-    static ɵfac = function SettingsCardComponent_Factory(t) { return new (t || SettingsCardComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsCardComponent, selectors: [["mj-settings-card"]], inputs: { title: "title", subtitle: "subtitle", floating: "floating", size: "size", noPadding: "noPadding", headerTemplate: "headerTemplate", actionTemplate: "actionTemplate", footerTemplate: "footerTemplate" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c0, decls: 5, vars: 10, consts: [[1, "mj-card"], [1, "mj-card-header"], [1, "mj-card-body"], [1, "mj-card-footer"], [4, "ngTemplateOutlet"], [1, "header-content"], [1, "card-title"], [1, "card-subtitle"], [1, "mj-card-actions"]], template: function SettingsCardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, SettingsCardComponent_Conditional_1_Template, 3, 1, "div", 1);
-            i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵprojection(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, SettingsCardComponent_Conditional_4_Template, 2, 1, "div", 3);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassProp("mj-card-floating", ctx.floating)("mj-card-sm", ctx.size === "sm")("mj-card-lg", ctx.size === "lg");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.title || ctx.headerTemplate ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("no-padding", ctx.noPadding);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.footerTemplate ? 4 : -1);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n[_nghost-%COMP%] {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  color: #212121;\n}\n[_nghost-%COMP%]   *[_ngcontent-%COMP%] {\n  box-sizing: border-box;\n}\n\n.settings-card[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 20px;\n}\n.settings-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.settings-card-floating[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  padding: 20px;\n}\n.settings-card-floating[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-2px);\n}\n\n.settings-card-sm[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 16px;\n}\n.settings-card-sm[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.settings-card-lg[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 24px;\n}\n.settings-card-lg[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding: 24px 0 16px 0;\n}\n.dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], .dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], .dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-weight: 600;\n  color: #212121;\n  font-size: 24px;\n  line-height: 1.2;\n}\n.dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n.dashboard-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n.dashboard-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e0e0e0;\n}\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-weight: 500;\n  color: #212121;\n  font-size: 16px;\n}\n.section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #ffffff;\n  color: #212121;\n  border-color: #bdbdbd;\n}\n.control-btn[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #2196f3;\n  color: #ffffff;\n  border-color: #2196f3;\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n.control-btn.control-btn-primary[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n.control-btn.control-btn-danger[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #f44336;\n  color: #ffffff;\n  border-color: #f44336;\n}\n.control-btn.control-btn-danger[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-danger[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.control-btn.control-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ea1c0d;\n  border-color: #ea1c0d;\n  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);\n  transform: translateY(-1px);\n}\n.control-btn.control-btn-ghost[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: transparent;\n  color: #666666;\n  border-color: transparent;\n}\n.control-btn.control-btn-ghost[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-ghost[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-ghost[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.control-btn.control-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f8f9fa;\n  color: #2196f3;\n}\n.control-btn.control-btn-sm[_ngcontent-%COMP%] {\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n}\n.control-btn.control-btn-sm[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.control-btn.control-btn-lg[_ngcontent-%COMP%] {\n  height: 44px;\n  padding: 0 24px;\n  font-size: 14px;\n}\n.control-btn.control-btn-lg[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: transparent;\n  color: #666666;\n  border-color: transparent;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f8f9fa;\n  color: #2196f3;\n}\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #2196f3;\n  color: #ffffff;\n  border-color: #2196f3;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n.action-btn.action-btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #f44336;\n  color: #ffffff;\n  border-color: #f44336;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%]:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #ea1c0d;\n  border-color: #ea1c0d;\n  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);\n  transform: translateY(-1px);\n}\n.action-btn.action-btn-danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.info-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n  border: 1px solid rgba(33, 150, 243, 0.2);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(158, 158, 158, 0.1);\n  color: #666666;\n  border: 1px solid rgba(158, 158, 158, 0.2);\n}\n.status-badge.status-active[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(76, 175, 80, 0.1);\n  color: #3d8b40;\n  border: 1px solid rgba(76, 175, 80, 0.2);\n}\n.status-badge.status-migration[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n  border: 1px solid rgba(33, 150, 243, 0.2);\n}\n.status-badge.status-warning[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(255, 193, 7, 0.1);\n  color: #6d5200;\n  border: 1px solid rgba(255, 193, 7, 0.2);\n}\n.status-badge.status-error[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(244, 67, 54, 0.1);\n  color: #ea1c0d;\n  border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.settings-nav[_ngcontent-%COMP%] {\n  width: 220px;\n  min-width: 220px;\n  max-width: 220px;\n  background: #ffffff;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: auto;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  margin: 0 8px 4px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 400;\n  color: #666666;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  position: relative;\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3px;\n  height: 0;\n  background: #2196f3;\n  border-radius: 0 2px 2px 0;\n  transition: height all 0.15s ease;\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  color: #2196f3;\n  transform: translateX(2px);\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%] {\n  background: rgba(33, 150, 243, 0.1);\n  color: #2196f3;\n  font-weight: 500;\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item.active[_ngcontent-%COMP%]::before {\n  height: 24px;\n}\n.settings-nav[_ngcontent-%COMP%]   .nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  width: 18px;\n  text-align: center;\n}\n\n.form-field[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n.form-field[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n}\n.form-field[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-size: 11px;\n  color: #9e9e9e;\n}\n.form-field[_ngcontent-%COMP%]   .field-error[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-size: 11px;\n  color: #f44336;\n}\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%], .form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  background: #ffffff;\n  color: #212121;\n  transition: all 0.15s ease;\n  outline: none;\n}\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder, .form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder, .form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\n}\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, .form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus, .form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n.form-field[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:disabled, .form-field[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:disabled, .form-field[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n  background: #f8f9fa;\n  color: #bdbdbd;\n  cursor: not-allowed;\n}\n\n.form-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n}\n.form-row[_ngcontent-%COMP%]   .form-field[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.checkbox-field[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n.checkbox-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #212121;\n  cursor: pointer;\n  margin: 0;\n}\n\n.status-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding: 16px;\n  background: #fafafa;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%]   .status-label[_ngcontent-%COMP%] {\n  color: #666666;\n  font-weight: 500;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%]   .status-value[_ngcontent-%COMP%] {\n  color: #212121;\n  font-weight: 600;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%]   .status-value.text-success[_ngcontent-%COMP%] {\n  color: #4caf50;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%]   .status-value.text-warning[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n.status-bar[_ngcontent-%COMP%]   .status-item[_ngcontent-%COMP%]   .status-value.text-danger[_ngcontent-%COMP%] {\n  color: #f44336;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 16px;\n  padding: 48px;\n  text-align: center;\n  color: #666666;\n}\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: #9e9e9e;\n  margin-bottom: 8px;\n}\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 500;\n  color: #212121;\n}\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  line-height: 1.6;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 16px;\n  padding: 48px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border: 3px solid #e0e0e0;\n  border-top-color: #2196f3;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666666;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.text-success[_ngcontent-%COMP%] {\n  color: #4caf50 !important;\n}\n\n.text-warning[_ngcontent-%COMP%] {\n  color: #ffc107 !important;\n}\n\n.text-danger[_ngcontent-%COMP%] {\n  color: #f44336 !important;\n}\n\n.text-info[_ngcontent-%COMP%] {\n  color: #00bcd4 !important;\n}\n\n.text-muted[_ngcontent-%COMP%] {\n  color: #9e9e9e !important;\n}\n\n.text-primary[_ngcontent-%COMP%] {\n  color: #212121 !important;\n}\n\n.text-secondary[_ngcontent-%COMP%] {\n  color: #666666 !important;\n}\n\n.mb-0[_ngcontent-%COMP%] {\n  margin-bottom: 0 !important;\n}\n\n.mb-1[_ngcontent-%COMP%] {\n  margin-bottom: 4px !important;\n}\n\n.mb-2[_ngcontent-%COMP%] {\n  margin-bottom: 8px !important;\n}\n\n.mb-3[_ngcontent-%COMP%] {\n  margin-bottom: 16px !important;\n}\n\n.mb-4[_ngcontent-%COMP%] {\n  margin-bottom: 24px !important;\n}\n\n.mb-5[_ngcontent-%COMP%] {\n  margin-bottom: 32px !important;\n}\n\n.mt-0[_ngcontent-%COMP%] {\n  margin-top: 0 !important;\n}\n\n.mt-1[_ngcontent-%COMP%] {\n  margin-top: 4px !important;\n}\n\n.mt-2[_ngcontent-%COMP%] {\n  margin-top: 8px !important;\n}\n\n.mt-3[_ngcontent-%COMP%] {\n  margin-top: 16px !important;\n}\n\n.mt-4[_ngcontent-%COMP%] {\n  margin-top: 24px !important;\n}\n\n.mt-5[_ngcontent-%COMP%] {\n  margin-top: 32px !important;\n}\n\n.d-flex[_ngcontent-%COMP%] {\n  display: flex !important;\n}\n\n.d-block[_ngcontent-%COMP%] {\n  display: block !important;\n}\n\n.d-inline-block[_ngcontent-%COMP%] {\n  display: inline-block !important;\n}\n\n.d-none[_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n.flex-1[_ngcontent-%COMP%] {\n  flex: 1 !important;\n}\n\n.flex-column[_ngcontent-%COMP%] {\n  flex-direction: column !important;\n}\n\n.flex-row[_ngcontent-%COMP%] {\n  flex-direction: row !important;\n}\n\n.align-center[_ngcontent-%COMP%] {\n  align-items: center !important;\n}\n\n.justify-center[_ngcontent-%COMP%] {\n  justify-content: center !important;\n}\n\n.justify-between[_ngcontent-%COMP%] {\n  justify-content: space-between !important;\n}\n\n.stats-grid[_ngcontent-%COMP%] {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  width: 100%;\n}\n@media (max-width: 768px) {\n  .stats-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n  margin-right: 10px;\n}\n\n.role-card[_ngcontent-%COMP%] {\n  margin-bottom: 5px;\n}\n\n@media (max-width: 768px) {\n  .settings-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n  .dashboard-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n  .dashboard-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .form-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n}\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n}\n\n.settings-card[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.settings-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n.settings-card.settings-card-floating[_ngcontent-%COMP%] {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n.settings-card.settings-card-floating[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-2px);\n}\n.settings-card.settings-card-sm[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n.settings-card.settings-card-lg[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  padding: 24px 24px 16px 24px;\n  margin: 0;\n}\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-weight: 500;\n  color: #212121;\n  font-size: 16px;\n}\n.card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.card-header[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.card-header[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  line-height: 1.2;\n}\n.card-header[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%]   .card-subtitle[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n}\n.card-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: flex;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n.card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  padding: 0 24px 24px 24px;\n}\n.card-content.no-padding[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.card-footer[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 16px 24px 24px 24px;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  border-radius: 0 0 8px 8px;\n}\n\n.settings-card-sm[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%] {\n  padding: 16px 16px 8px 16px;\n}\n.settings-card-sm[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n.settings-card-sm[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .card-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n.settings-card-sm[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%] {\n  padding: 0 16px 16px 16px;\n}\n.settings-card-sm[_ngcontent-%COMP%]   .card-content.no-padding[_ngcontent-%COMP%] {\n  padding: 0;\n}\n.settings-card-sm[_ngcontent-%COMP%]   .card-footer[_ngcontent-%COMP%] {\n  padding: 8px 16px 16px 16px;\n}\n\n.settings-card-lg[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%] {\n  padding: 32px 32px 24px 32px;\n}\n.settings-card-lg[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n.settings-card-lg[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%] {\n  padding: 0 32px 32px 32px;\n}\n.settings-card-lg[_ngcontent-%COMP%]   .card-content.no-padding[_ngcontent-%COMP%] {\n  padding: 0;\n}\n.settings-card-lg[_ngcontent-%COMP%]   .card-footer[_ngcontent-%COMP%] {\n  padding: 24px 32px 32px 32px;\n}"] });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsCardComponent, [{
-        type: Component,
-        args: [{ selector: 'mj-settings-card', standalone: true, imports: [CommonModule], template: `
-    <div class="mj-card"
-         [class.mj-card-floating]="floating"
-         [class.mj-card-sm]="size === 'sm'"
-         [class.mj-card-lg]="size === 'lg'">
-      @if (title || headerTemplate) {
-        <div class="mj-card-header">
-          @if (headerTemplate) {
-            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-          } @else {
-            <div class="header-content">
-              <h3 class="card-title">{{ title }}</h3>
-              @if (subtitle) {
-                <p class="card-subtitle">{{ subtitle }}</p>
-              }
-            </div>
-            @if (actionTemplate) {
-              <div class="mj-card-actions">
-                <ng-container *ngTemplateOutlet="actionTemplate"></ng-container>
-              </div>
-            }
-          }
-        </div>
-      }
-      <div class="mj-card-body" [class.no-padding]="noPadding">
-        <ng-content></ng-content>
-      </div>
-      @if (footerTemplate) {
-        <div class="mj-card-footer">
-          <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-        </div>
-      }
-    </div>
-  `, styles: ["@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n:host {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  color: #212121;\n}\n:host * {\n  box-sizing: border-box;\n}\n\n.settings-card {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 20px;\n}\n.settings-card:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.settings-card-floating {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  padding: 20px;\n}\n.settings-card-floating:hover {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-2px);\n}\n\n.settings-card-sm {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 16px;\n}\n.settings-card-sm:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.settings-card-lg {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  padding: 24px;\n}\n.settings-card-lg:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n\n.dashboard-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding: 24px 0 16px 0;\n}\n.dashboard-header .header-info {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n.dashboard-header .header-info h1, .dashboard-header .header-info h2, .dashboard-header .header-info h3 {\n  margin: 0;\n  font-weight: 600;\n  color: #212121;\n  font-size: 24px;\n  line-height: 1.2;\n}\n.dashboard-header .header-info h2 {\n  font-size: 18px;\n}\n.dashboard-header .header-info h3 {\n  font-size: 16px;\n}\n.dashboard-header .header-controls {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e0e0e0;\n}\n.section-header h3, .section-header h4 {\n  margin: 0;\n  font-weight: 500;\n  color: #212121;\n  font-size: 16px;\n}\n.section-header h4 {\n  font-size: 14px;\n}\n\n.control-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #ffffff;\n  color: #212121;\n  border-color: #bdbdbd;\n}\n.control-btn:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn i {\n  font-size: 14px;\n}\n.control-btn:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n.control-btn.control-btn-primary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #2196f3;\n  color: #ffffff;\n  border-color: #2196f3;\n}\n.control-btn.control-btn-primary:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-primary i {\n  font-size: 14px;\n}\n.control-btn.control-btn-primary:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n.control-btn.control-btn-primary:active {\n  transform: translateY(0);\n}\n.control-btn.control-btn-danger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #f44336;\n  color: #ffffff;\n  border-color: #f44336;\n}\n.control-btn.control-btn-danger:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-danger:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-danger i {\n  font-size: 14px;\n}\n.control-btn.control-btn-danger:hover:not(:disabled) {\n  background: #ea1c0d;\n  border-color: #ea1c0d;\n  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);\n  transform: translateY(-1px);\n}\n.control-btn.control-btn-ghost {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: transparent;\n  color: #666666;\n  border-color: transparent;\n}\n.control-btn.control-btn-ghost:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.control-btn.control-btn-ghost:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control-btn.control-btn-ghost i {\n  font-size: 14px;\n}\n.control-btn.control-btn-ghost:hover:not(:disabled) {\n  background: #f8f9fa;\n  color: #2196f3;\n}\n.control-btn.control-btn-sm {\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n}\n.control-btn.control-btn-sm i {\n  font-size: 12px;\n}\n.control-btn.control-btn-lg {\n  height: 44px;\n  padding: 0 24px;\n  font-size: 14px;\n}\n.control-btn.control-btn-lg i {\n  font-size: 16px;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: transparent;\n  color: #666666;\n  border-color: transparent;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn i {\n  font-size: 14px;\n}\n.action-btn:hover:not(:disabled) {\n  background: #f8f9fa;\n  color: #2196f3;\n}\n.action-btn i {\n  font-size: 12px;\n}\n.action-btn.action-btn-primary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #2196f3;\n  color: #ffffff;\n  border-color: #2196f3;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn.action-btn-primary:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn.action-btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn.action-btn-primary i {\n  font-size: 14px;\n}\n.action-btn.action-btn-primary:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n.action-btn.action-btn-primary:active {\n  transform: translateY(0);\n}\n.action-btn.action-btn-primary i {\n  font-size: 12px;\n}\n.action-btn.action-btn-danger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 0 16px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  outline: none;\n  white-space: nowrap;\n  background: #f44336;\n  color: #ffffff;\n  border-color: #f44336;\n  height: 28px;\n  padding: 0 8px;\n  font-size: 11px;\n  width: 28px;\n  padding: 0;\n}\n.action-btn.action-btn-danger:focus {\n  outline: 2px solid rgba(33, 150, 243, 0.2);\n  outline-offset: 2px;\n}\n.action-btn.action-btn-danger:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.action-btn.action-btn-danger i {\n  font-size: 14px;\n}\n.action-btn.action-btn-danger:hover:not(:disabled) {\n  background: #ea1c0d;\n  border-color: #ea1c0d;\n  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);\n  transform: translateY(-1px);\n}\n.action-btn.action-btn-danger i {\n  font-size: 12px;\n}\n\n.info-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n  border: 1px solid rgba(33, 150, 243, 0.2);\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(158, 158, 158, 0.1);\n  color: #666666;\n  border: 1px solid rgba(158, 158, 158, 0.2);\n}\n.status-badge.status-active {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(76, 175, 80, 0.1);\n  color: #3d8b40;\n  border: 1px solid rgba(76, 175, 80, 0.2);\n}\n.status-badge.status-migration {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n  border: 1px solid rgba(33, 150, 243, 0.2);\n}\n.status-badge.status-warning {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(255, 193, 7, 0.1);\n  color: #6d5200;\n  border: 1px solid rgba(255, 193, 7, 0.2);\n}\n.status-badge.status-error {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  height: 20px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  background: rgba(244, 67, 54, 0.1);\n  color: #ea1c0d;\n  border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.settings-nav {\n  width: 220px;\n  min-width: 220px;\n  max-width: 220px;\n  background: #ffffff;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: auto;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n.settings-nav .nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  margin: 0 8px 4px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 400;\n  color: #666666;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  position: relative;\n}\n.settings-nav .nav-item::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3px;\n  height: 0;\n  background: #2196f3;\n  border-radius: 0 2px 2px 0;\n  transition: height all 0.15s ease;\n}\n.settings-nav .nav-item:hover {\n  background: #f8f9fa;\n  color: #2196f3;\n  transform: translateX(2px);\n}\n.settings-nav .nav-item.active {\n  background: rgba(33, 150, 243, 0.1);\n  color: #2196f3;\n  font-weight: 500;\n}\n.settings-nav .nav-item.active::before {\n  height: 24px;\n}\n.settings-nav .nav-item i {\n  font-size: 14px;\n  width: 18px;\n  text-align: center;\n}\n\n.form-field {\n  margin-bottom: 16px;\n}\n.form-field .field-label {\n  display: block;\n  margin-bottom: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n}\n.form-field .field-hint {\n  margin-top: 4px;\n  font-size: 11px;\n  color: #9e9e9e;\n}\n.form-field .field-error {\n  margin-top: 4px;\n  font-size: 11px;\n  color: #f44336;\n}\n.form-field input, .form-field textarea, .form-field select {\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  background: #ffffff;\n  color: #212121;\n  transition: all 0.15s ease;\n  outline: none;\n}\n.form-field input::placeholder, .form-field textarea::placeholder, .form-field select::placeholder {\n  color: #9e9e9e;\n}\n.form-field input:focus, .form-field textarea:focus, .form-field select:focus {\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n.form-field input:disabled, .form-field textarea:disabled, .form-field select:disabled {\n  background: #f8f9fa;\n  color: #bdbdbd;\n  cursor: not-allowed;\n}\n\n.form-row {\n  display: flex;\n  gap: 16px;\n}\n.form-row .form-field {\n  flex: 1;\n}\n\n.checkbox-field {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n.checkbox-field label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: #212121;\n  cursor: pointer;\n  margin: 0;\n}\n\n.status-bar {\n  display: flex;\n  gap: 24px;\n  padding: 16px;\n  background: #fafafa;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n.status-bar .status-item {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n}\n.status-bar .status-item .status-label {\n  color: #666666;\n  font-weight: 500;\n}\n.status-bar .status-item .status-value {\n  color: #212121;\n  font-weight: 600;\n}\n.status-bar .status-item .status-value.text-success {\n  color: #4caf50;\n}\n.status-bar .status-item .status-value.text-warning {\n  color: #ffc107;\n}\n.status-bar .status-item .status-value.text-danger {\n  color: #f44336;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 16px;\n  padding: 48px;\n  text-align: center;\n  color: #666666;\n}\n.empty-state i {\n  font-size: 48px;\n  color: #9e9e9e;\n  margin-bottom: 8px;\n}\n.empty-state h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 500;\n  color: #212121;\n}\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  line-height: 1.6;\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 16px;\n  padding: 48px;\n}\n.loading-container .loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid #e0e0e0;\n  border-top-color: #2196f3;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n}\n.loading-container .loading-text {\n  font-size: 12px;\n  color: #666666;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.text-success {\n  color: #4caf50 !important;\n}\n\n.text-warning {\n  color: #ffc107 !important;\n}\n\n.text-danger {\n  color: #f44336 !important;\n}\n\n.text-info {\n  color: #00bcd4 !important;\n}\n\n.text-muted {\n  color: #9e9e9e !important;\n}\n\n.text-primary {\n  color: #212121 !important;\n}\n\n.text-secondary {\n  color: #666666 !important;\n}\n\n.mb-0 {\n  margin-bottom: 0 !important;\n}\n\n.mb-1 {\n  margin-bottom: 4px !important;\n}\n\n.mb-2 {\n  margin-bottom: 8px !important;\n}\n\n.mb-3 {\n  margin-bottom: 16px !important;\n}\n\n.mb-4 {\n  margin-bottom: 24px !important;\n}\n\n.mb-5 {\n  margin-bottom: 32px !important;\n}\n\n.mt-0 {\n  margin-top: 0 !important;\n}\n\n.mt-1 {\n  margin-top: 4px !important;\n}\n\n.mt-2 {\n  margin-top: 8px !important;\n}\n\n.mt-3 {\n  margin-top: 16px !important;\n}\n\n.mt-4 {\n  margin-top: 24px !important;\n}\n\n.mt-5 {\n  margin-top: 32px !important;\n}\n\n.d-flex {\n  display: flex !important;\n}\n\n.d-block {\n  display: block !important;\n}\n\n.d-inline-block {\n  display: inline-block !important;\n}\n\n.d-none {\n  display: none !important;\n}\n\n.flex-1 {\n  flex: 1 !important;\n}\n\n.flex-column {\n  flex-direction: column !important;\n}\n\n.flex-row {\n  flex-direction: row !important;\n}\n\n.align-center {\n  align-items: center !important;\n}\n\n.justify-center {\n  justify-content: center !important;\n}\n\n.justify-between {\n  justify-content: space-between !important;\n}\n\n.stats-grid {\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  width: 100%;\n}\n@media (max-width: 768px) {\n  .stats-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n}\n\n.stat-card {\n  margin-right: 10px;\n}\n\n.role-card {\n  margin-bottom: 5px;\n}\n\n@media (max-width: 768px) {\n  .settings-card {\n    padding: 16px;\n  }\n  .dashboard-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n  .dashboard-header .header-controls {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .form-row {\n    flex-direction: column;\n  }\n}\n:host {\n  display: block;\n  width: 100%;\n}\n\n.settings-card {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.settings-card:hover {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-1px);\n}\n.settings-card.settings-card-floating {\n  background: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n.settings-card.settings-card-floating:hover {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n  transform: translateY(-2px);\n}\n.settings-card.settings-card-sm {\n  padding: 16px;\n}\n.settings-card.settings-card-lg {\n  padding: 24px;\n}\n\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  padding: 24px 24px 16px 24px;\n  margin: 0;\n}\n.card-header h3, .card-header h4 {\n  margin: 0;\n  font-weight: 500;\n  color: #212121;\n  font-size: 16px;\n}\n.card-header h4 {\n  font-size: 14px;\n}\n.card-header .header-content {\n  flex: 1;\n}\n.card-header .header-content .card-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  line-height: 1.2;\n}\n.card-header .header-content .card-subtitle {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n}\n.card-header .header-actions {\n  flex-shrink: 0;\n  display: flex;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n.card-content {\n  flex: 1;\n  min-height: 0;\n  padding: 0 24px 24px 24px;\n}\n.card-content.no-padding {\n  padding: 0;\n}\n\n.card-footer {\n  flex-shrink: 0;\n  padding: 16px 24px 24px 24px;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  border-radius: 0 0 8px 8px;\n}\n\n.settings-card-sm .card-header {\n  padding: 16px 16px 8px 16px;\n}\n.settings-card-sm .card-header .card-title {\n  font-size: 14px;\n}\n.settings-card-sm .card-header .card-subtitle {\n  font-size: 11px;\n}\n.settings-card-sm .card-content {\n  padding: 0 16px 16px 16px;\n}\n.settings-card-sm .card-content.no-padding {\n  padding: 0;\n}\n.settings-card-sm .card-footer {\n  padding: 8px 16px 16px 16px;\n}\n\n.settings-card-lg .card-header {\n  padding: 32px 32px 24px 32px;\n}\n.settings-card-lg .card-header .card-title {\n  font-size: 18px;\n}\n.settings-card-lg .card-content {\n  padding: 0 32px 32px 32px;\n}\n.settings-card-lg .card-content.no-padding {\n  padding: 0;\n}\n.settings-card-lg .card-footer {\n  padding: 24px 32px 32px 32px;\n}\n"] }]
-    }], null, { title: [{
-            type: Input
-        }], subtitle: [{
-            type: Input
-        }], floating: [{
-            type: Input
-        }], size: [{
-            type: Input
-        }], noPadding: [{
-            type: Input
-        }], headerTemplate: [{
-            type: Input
-        }], actionTemplate: [{
-            type: Input
-        }], footerTemplate: [{
-            type: Input
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsCardComponent, { className: "SettingsCardComponent" }); })();
-//# sourceMappingURL=settings-card.component.js.map

package/dist/lib/shared/components/settings-card/settings-card.component.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"settings-card.component.js","sourceRoot":"","sources":["../../../../../src/lib/shared/components/settings-card/settings-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;;;;;IAkBnC,wBAAgE;;;IAAhE,oHAAiD;;;IAAlC,wDAAgC;;;IAK3C,4BAAyB;IAAA,YAAc;IAAA,iBAAI;;;IAAlB,cAAc;IAAd,qCAAc;;;IAKvC,wBAAgE;;;IADlE,8BAA6B;IAC3B,kIAAiD;IACnD,iBAAM;;;IADW,cAAgC;IAAhC,wDAAgC;;;IAPjD,AADF,8BAA4B,YACH;IAAA,YAAW;IAAA,iBAAK;IACvC,wGAAgB;IAGlB,iBAAM;IACN,0GAAsB;;;IALG,eAAW;IAAX,kCAAW;IAClC,cAEC;IAFD,0CAEC;IAEH,cAIC;IAJD,gDAIC;;;IAdL,8BAA4B;IAGxB,AAFF,kGAAsB,qEAEb;IAaX,iBAAM;;;IAfJ,cAcC;IAdD,+CAcC;;;IAUD,wBAAgE;;;IADlE,8BAA4B;IAC1B,sGAAiD;IACnD,iBAAM;;;IADW,cAAgC;IAAhC,wDAAgC;;AAvCzD;;;GAGG;AA2CH,MAAM,OAAO,qBAAqB;IAChC,yCAAyC;IAChC,KAAK,CAAU;IAExB,8CAA8C;IACrC,QAAQ,CAAU;IAE3B,4DAA4D;IACnD,QAAQ,GAAG,KAAK,CAAC;IAE1B,wBAAwB;IACf,IAAI,GAAuB,IAAI,CAAC;IAEzC,kDAAkD;IACzC,SAAS,GAAG,KAAK,CAAC;IAE3B,yCAAyC;IAChC,cAAc,CAAoB;IAE3C,yCAAyC;IAChC,cAAc,CAAoB;IAE3C,kCAAkC;IACzB,cAAc,CAAoB;+EAvBhC,qBAAqB;6DAArB,qBAAqB;;YArC9B,8BAGwC;YACtC,8EAA+B;YAoB/B,8BAAyD;YACvD,kBAAyB;YAC3B,iBAAM;YAEN,8EAAsB;YAKxB,iBAAM;;YA9BD,AADA,AADA,gDAAmC,iCACD,iCACA;YACrC,cAkBC;YAlBD,0DAkBC;YAEyB,cAA8B;YAA9B,2CAA8B;YAIxD,eAIC;YAJD,6CAIC;4BAlCK,YAAY;;iFAuCX,qBAAqB;cA1CjC,SAAS;2BACE,kBAAkB,cAChB,IAAI,WACP,CAAC,YAAY,CAAC,YACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT;gBAKQ,KAAK;kBAAb,KAAK;YAGG,QAAQ;kBAAhB,KAAK;YAGG,QAAQ;kBAAhB,KAAK;YAGG,IAAI;kBAAZ,KAAK;YAGG,SAAS;kBAAjB,KAAK;YAGG,cAAc;kBAAtB,KAAK;YAGG,cAAc;kBAAtB,KAAK;YAGG,cAAc;kBAAtB,KAAK;;kFAvBK,qBAAqB"}