@enigmatry/entry-components 17.0.0-preview.5.1 → 17.0.0-preview.7

package/file-input/README.md

@@ -1,71 +1,71 @@
-# Entry File Input
-
-`EntryFileInputComponent` is an Angular component that provides a custom file input button with additional functionality
-
-## Setup
-
-Import the [EntryFileInputModule] in your NgModule:
-
-```typescript
-import { EntryFileInputModule } from '@enigmatry/entry-components/file-input';
-@NgModule({
-  imports: [
-    EntryFileInputModule,
-    ...
-  ],
-  ...
-})
-export class MyModule {}
-```
-
-## Usage
-
-Use the entry-file-input component in your template:
-
-```html
-<entry-file-input 
- [label]="'Choose a file...'" 
- [matIcon]="'attachment'" 
- [accept]="'image/*'" 
- [multiple]="false" 
- [disabled]="false"
- [(ngModel)]="files"
- (selectedFile)="selectEvent($event)">
- </entry-file-input>
-```
-
-```typescript
-export class Sample {
-
-  files: File | FileList;
-
-  selectEvent(files: FileList | File): void {
-    if (files instanceof FileList) {
-      ...
-    } else {
-      ...
-    }
-  };
-}
-```
-
-## API Summary
-
-#### Inputs
-- matIcon: string
-  - MatIcon for the select file button. Defaults to 'insert_drive_file' (optional).
-- multiple: boolean
-  - Sets if multiple files can be selected at once in.
-- accept: string
-  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
-- disabled: boolean
-  - Disables input and clears selected files.
-
-#### Events
-
-- selectedFile: function($event)
-  - Emits a [File or FileList] object.
-
-#### Styling
-
+# Entry File Input
+
+`EntryFileInputComponent` is an Angular component that provides a custom file input button with additional functionality
+
+## Setup
+
+Import the [EntryFileInputModule] in your NgModule:
+
+```typescript
+import { EntryFileInputModule } from '@enigmatry/entry-components/file-input';
+@NgModule({
+  imports: [
+    EntryFileInputModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Use the entry-file-input component in your template:
+
+```html
+<entry-file-input 
+ [label]="'Choose a file...'" 
+ [matIcon]="'attachment'" 
+ [accept]="'image/*'" 
+ [multiple]="false" 
+ [disabled]="false"
+ [(ngModel)]="files"
+ (selectedFile)="selectEvent($event)">
+ </entry-file-input>
+```
+
+```typescript
+export class Sample {
+
+  files: File | FileList;
+
+  selectEvent(files: FileList | File): void {
+    if (files instanceof FileList) {
+      ...
+    } else {
+      ...
+    }
+  };
+}
+```
+
+## API Summary
+
+#### Inputs
+- matIcon: string
+  - MatIcon for the select file button. Defaults to 'insert_drive_file' (optional).
+- multiple: boolean
+  - Sets if multiple files can be selected at once in.
+- accept: string
+  - Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `<input/>` element.
+- disabled: boolean
+  - Disables input and clears selected files.
+
+#### Events
+
+- selectedFile: function($event)
+  - Emits a [File or FileList] object.
+
+#### Styling
+
 Button type and color can be styled by providing entry-button configuration. 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@enigmatry/entry-components",
-    "version": "17.0.0-preview.5.1",
+    "version": "17.0.0-preview.7",
     "author": "Enigmatry",
     "description": "Enigmatry entry angular material components",
     "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",
@@ -16,11 +16,11 @@
         "@angular/core": "^17.0.0",
         "@angular/material": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@angular/platform-browser": "^17.0.0",
-        "lodash-es": "^4.17.21"
+        "@angular/platform-browser": "^17.0.0"
     },
     "dependencies": {
-        "tslib": "^2.6.3"
+        "lodash-es": "^4.17.21",
+        "tslib": "^2.6.2"
     },
     "publishConfig": {
         "access": "public"

package/permissions/README.md

@@ -1,68 +1,68 @@
-# Entry Permissions
-
-Reusable angular components for applying permission-based authorization:
-- Route guard
-- View directives
-- Pipe
-
-## Integration
-
-Permissions is part of the `@enigmatry/entry-components`:
-
-```npm
-npm i @enigmatry/entry-components
-```
-
-Create a permission service that implements EntryPermissionService<T> where T is the permission type that you use in your application. You need to provide implementation of the hasPermissions method (for example by checking if the logged in user has needed permissions). 
-
-```ts
-export class PermissionService implements EntryPermissionService<PermissionId> {
-  hasPermissions(permissions: PermissionId[]): boolean {
-    // TODO: provide implementation
-  }
-}
-```
-
-Import permissions module:
-
-```ts
-import { EntryPermissionModule } from '@enigmatry/entry-components/permissions';
-```
-
-Provide implementation of the EntryPermissionService:
-
-```ts
-providers: [
-    {
-        provide: EntryPermissionService,
-        useClass: PermissionService
-    }
-]
-```
-
-<!-- `PermissionService` should be provided in the root scope. -- TODO: add more details with example from the blueprint app  -->
-
-## Basic usage
-
-### Route guard
-
-```ts
-    canActivate: [entryPermissionGuard],
-    data: {
-        permissions: {
-        only: [PermissionId.UsersRead]
-        }
-    }
-```
-
-### View directives
-
-```html
- <button mat-menu-item *entryPermissionsOnly="[PermissionId.UsersRead]" routerLink="users">Users</button>
-```
-
-### Pipe
-
-```ts
-[isEnabled]="[PermissionId.UsersWrite] | entryHasPermissions"
+# Entry Permissions
+
+Reusable angular components for applying permission-based authorization:
+- Route guard
+- View directives
+- Pipe
+
+## Integration
+
+Permissions is part of the `@enigmatry/entry-components`:
+
+```npm
+npm i @enigmatry/entry-components
+```
+
+Create a permission service that implements EntryPermissionService&lt;T&gt; where T is the permission type that you use in your application. You need to provide implementation of the hasPermissions method (for example by checking if the logged in user has needed permissions). 
+
+```ts
+export class PermissionService implements EntryPermissionService<PermissionId> {
+  hasPermissions(permissions: PermissionId[]): boolean {
+    // TODO: provide implementation
+  }
+}
+```
+
+Import permissions module:
+
+```ts
+import { EntryPermissionModule } from '@enigmatry/entry-components/permissions';
+```
+
+Provide implementation of the EntryPermissionService:
+
+```ts
+providers: [
+    {
+        provide: EntryPermissionService,
+        useClass: PermissionService
+    }
+]
+```
+
+<!-- `PermissionService` should be provided in the root scope. -- TODO: add more details with example from the blueprint app  -->
+
+## Basic usage
+
+### Route guard
+
+```ts
+    canActivate: [entryPermissionGuard],
+    data: {
+        permissions: {
+        only: [PermissionId.UsersRead]
+        }
+    }
+```
+
+### View directives
+
+```html
+ <button mat-menu-item *entryPermissionsOnly="[PermissionId.UsersRead]" routerLink="users">Users</button>
+```
+
+### Pipe
+
+```ts
+[isEnabled]="[PermissionId.UsersWrite] | entryHasPermissions"
 ```

package/search-filter/README.md

@@ -1,132 +1,132 @@
-# Entry Search Filter
-
-Entry component for providing standard filtering capabilities that can be consumed by entry-table component, but also any other list data representation component like Angular material table component. It supports the following filtering inputs:
-
-* Text filter
-* Select filter (fixed or dynamic options)
-* Autocomplete filter
-* Date filter
-* DateTime filter
-
-## Integration
-
-Import component package:
-
-```ts
-import { EntrySearchFilterModule } from '@enigmatry/entry-components/search-filter';
-```
-
-## Basic usage
-
-Provide filters in component and use `<entry-search-filter>` to display them in view
-
-```ts
-import {
-  AutocompleteSearchFilter,
-  SelectOption,
-  SelectSearchFilter,
-  TextSearchFilter,
-  DateTimeSearchFilter
-} from '@enigmatry/entry-components/search-filter';
-
-@Component({...})
-export class ExampleComponent {
-
-filters = [
-      new TextSearchFilter({
-        key: 'name',
-        label: 'Name',
-        placeholder: 'Name',
-        maxLength: 25
-      }),
-      new SelectSearchFilter({
-        key: 'username',
-        label: 'Username',
-        placeholder: 'Select username',
-        multiSelect: false,
-        options$: this._usersService
-          .getUsernames()
-          .pipe(map(usernames => usernames.map(un => new SelectOption(un, un))))
-      }),
-      new AutocompleteSearchFilter({
-        key: 'country',
-        label: 'Country',
-        placeholder: 'Select country',
-        minimumCharacters: 0,
-        search: (input: string) => of(Object.values(Country)
-          .filter(value => value.toLocaleLowerCase().includes(input.toLocaleLowerCase()))
-          .map((country => new SelectOption(country, country))))
-      }),
-      new DateTimeSearchFilter({
-        key: 'createdAt',
-        label: 'Created at',
-        placeholder: 'Created at'
-      })
-];
-}
-```
-
-```html
-<entry-search-filter
-    [searchFilters]="filters"
-    (searchFilterChange)="searchFilterChange($event)">
-</entry-search-filter>
-```
-
-## Configuration
-
-- provide entry search filter config (optional):
-  - `applyButtonText`: Apply button text
-  - `noneSelectedOptionText`: None option text in select dropdown
-
-- provide `ENTRY_MAT_DATE_TIME` for `DateTimeSearchFilter` (required when this filter is used):
-  - matDateFormats of type `MatDateFormats`
-  - `compareDate` function
-
-```ts
-import { EntrySearchFilterModule, provideEntrySearchFilterConfig } from '@enigmatry/entry-components/search-filter';
-// ...
-
-@NgModule({
-  imports: [
-    EntrySearchFilterModule
-  ],
-  providers: [
-    provideEntrySearchFilterConfig({
-      applyButtonText: 'Filter',
-      noneSelectedOptionText: '-'
-    }),
-    // provide date adapter used by mat-datepicker
-    // usually provided in shared or material module
-    {
-      provide: DateAdapter,
-      useClass: DateFnsAdapter,
-      deps: [MAT_DATE_LOCALE],
-    },
-    // provide matDateFormats along with compareDate function
-    {
-      provide: ENTRY_MAT_DATE_TIME,
-      useValue: {
-        matDateFormats: {
-          parse: {
-            // formats used for parsing:
-            dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy HH:mm'],
-          },
-          display: {
-            // display value in input always as 'dd-MM-yyyy HH:mm'
-            dateInput: 'dd-MM-yyyy HH:mm',
-            // standard mat-datepicker calendar options
-            monthYearLabel: 'LLL uuuu',
-            dateA11yLabel: 'PP',
-            monthYearA11yLabel: 'LLLL uuuu',
-          },
-        },
-        compareDate(first: Date, second: Date): number {
-          return first.getTime() - second.getTime();
-        }
-      }
-    }
-  ]
-})
-export class SharedModule { }
-```
+# Entry Search Filter
+
+Entry component for providing standard filtering capabilities that can be consumed by entry-table component, but also any other list data representation component like Angular material table component. It supports the following filtering inputs:
+
+* Text filter
+* Select filter (fixed or dynamic options)
+* Autocomplete filter
+* Date filter
+* DateTime filter
+
+## Integration
+
+Import component package:
+
+```ts
+import { EntrySearchFilterModule } from '@enigmatry/entry-components/search-filter';
+```
+
+## Basic usage
+
+Provide filters in component and use `<entry-search-filter>` to display them in view
+
+```ts
+import {
+  AutocompleteSearchFilter,
+  SelectOption,
+  SelectSearchFilter,
+  TextSearchFilter,
+  DateTimeSearchFilter
+} from '@enigmatry/entry-components/search-filter';
+
+@Component({...})
+export class ExampleComponent {
+
+filters = [
+      new TextSearchFilter({
+        key: 'name',
+        label: 'Name',
+        placeholder: 'Name',
+        maxLength: 25
+      }),
+      new SelectSearchFilter({
+        key: 'username',
+        label: 'Username',
+        placeholder: 'Select username',
+        multiSelect: false,
+        options$: this._usersService
+          .getUsernames()
+          .pipe(map(usernames => usernames.map(un => new SelectOption(un, un))))
+      }),
+      new AutocompleteSearchFilter({
+        key: 'country',
+        label: 'Country',
+        placeholder: 'Select country',
+        minimumCharacters: 0,
+        search: (input: string) => of(Object.values(Country)
+          .filter(value => value.toLocaleLowerCase().includes(input.toLocaleLowerCase()))
+          .map((country => new SelectOption(country, country))))
+      }),
+      new DateTimeSearchFilter({
+        key: 'createdAt',
+        label: 'Created at',
+        placeholder: 'Created at'
+      })
+];
+}
+```
+
+```html
+<entry-search-filter
+    [searchFilters]="filters"
+    (searchFilterChange)="searchFilterChange($event)">
+</entry-search-filter>
+```
+
+## Configuration
+
+- provide entry search filter config (optional):
+  - `applyButtonText`: Apply button text
+  - `noneSelectedOptionText`: None option text in select dropdown
+
+- provide `ENTRY_MAT_DATE_TIME` for `DateTimeSearchFilter` (required when this filter is used):
+  - matDateFormats of type `MatDateFormats`
+  - `compareDate` function
+
+```ts
+import { EntrySearchFilterModule, provideEntrySearchFilterConfig } from '@enigmatry/entry-components/search-filter';
+// ...
+
+@NgModule({
+  imports: [
+    EntrySearchFilterModule
+  ],
+  providers: [
+    provideEntrySearchFilterConfig({
+      applyButtonText: 'Filter',
+      noneSelectedOptionText: '-'
+    }),
+    // provide date adapter used by mat-datepicker
+    // usually provided in shared or material module
+    {
+      provide: DateAdapter,
+      useClass: DateFnsAdapter,
+      deps: [MAT_DATE_LOCALE],
+    },
+    // provide matDateFormats along with compareDate function
+    {
+      provide: ENTRY_MAT_DATE_TIME,
+      useValue: {
+        matDateFormats: {
+          parse: {
+            // formats used for parsing:
+            dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy HH:mm'],
+          },
+          display: {
+            // display value in input always as 'dd-MM-yyyy HH:mm'
+            dateInput: 'dd-MM-yyyy HH:mm',
+            // standard mat-datepicker calendar options
+            monthYearLabel: 'LLL uuuu',
+            dateA11yLabel: 'PP',
+            monthYearA11yLabel: 'LLLL uuuu',
+          },
+        },
+        compareDate(first: Date, second: Date): number {
+          return first.getTime() - second.getTime();
+        }
+      }
+    }
+  ]
+})
+export class SharedModule { }
+```

package/styles/_generator.scss

@@ -1,26 +1,26 @@
-@use 'modules/components/dialogs/generator' as dialogs;
-@use 'modules/components/forms/generator' as forms;
-@use 'modules/components/search-filter/generator' as search-filters;
-@use 'modules/components/tables/generator' as tables;
-@use 'modules/components/inputs/generator' as inputs;
-@use 'modules/components/buttons/generator' as buttons;
-@use 'modules/components/checkboxes/generator' as checkboxes;
-@use 'modules/components/toggle/generator' as toggle;
-@use 'modules/default-theme' as default;
-@use 'modules/vendors/angular-material/generator' as material-theme;
-@use 'sass:map';
-@use 'partials/theming';
-
-@mixin generate-from($custom-theme: ()) {
-	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
-
-	@include material-theme.generate-from($merged-theme);
-	@include inputs.generate-from($merged-theme);
-	@include buttons.generate-from($merged-theme);
-	@include tables.generate-from($merged-theme);
-	@include forms.generate-from($merged-theme);
-	@include search-filters.generate-from($merged-theme);
-	@include dialogs.generate-from($merged-theme);
-	@include checkboxes.generate-from($merged-theme);
-	@include toggle.generate-from($merged-theme);
+@use 'modules/components/dialogs/generator' as dialogs;
+@use 'modules/components/forms/generator' as forms;
+@use 'modules/components/search-filter/generator' as search-filters;
+@use 'modules/components/tables/generator' as tables;
+@use 'modules/components/inputs/generator' as inputs;
+@use 'modules/components/buttons/generator' as buttons;
+@use 'modules/components/checkboxes/generator' as checkboxes;
+@use 'modules/components/toggle/generator' as toggle;
+@use 'modules/default-theme' as default;
+@use 'modules/vendors/angular-material/generator' as material-theme;
+@use 'sass:map';
+@use 'partials/theming';
+
+@mixin generate-from($custom-theme: ()) {
+	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
+
+	@include material-theme.generate-from($merged-theme);
+	@include inputs.generate-from($merged-theme);
+	@include buttons.generate-from($merged-theme);
+	@include tables.generate-from($merged-theme);
+	@include forms.generate-from($merged-theme);
+	@include search-filters.generate-from($merged-theme);
+	@include dialogs.generate-from($merged-theme);
+	@include checkboxes.generate-from($merged-theme);
+	@include toggle.generate-from($merged-theme);
 }