>
+ : never;
/**
* This should be avoided if possible, and instead use a more precise type with some constraints on it to ensure that the model
diff --git a/projects/natural/src/public-api.ts b/projects/natural/src/public-api.ts
index 12e16486..5c931c02 100644
--- a/projects/natural/src/public-api.ts
+++ b/projects/natural/src/public-api.ts
@@ -1,5 +1,4 @@
-// Load `$localize` onto the global scope - to be able to use that function to translate strings in components/services.
-import '@angular/localize/init';
+///
-
diff --git a/src/app/avatar/avatar.component.html b/src/app/avatar/avatar.component.html
index 8e50f868..d94aba8d 100644
--- a/src/app/avatar/avatar.component.html
+++ b/src/app/avatar/avatar.component.html
@@ -4,60 +4,60 @@ natural-avatar
Avatar from different sources
-
Avatar with fallback
-
Ignore special chars
-
Colors
-
Misc
-
Failed sources are not retried
@@ -67,8 +67,10 @@ Failed sources are not retried
-
-
+ @for (i of failedSources; track i) {
+
+
+ }
diff --git a/src/app/avatar/avatar.component.ts b/src/app/avatar/avatar.component.ts
index 41e0c8a5..6297bdd1 100644
--- a/src/app/avatar/avatar.component.ts
+++ b/src/app/avatar/avatar.component.ts
@@ -1,5 +1,5 @@
import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
+
import {MatButtonModule} from '@angular/material/button';
import {NaturalAvatarComponent} from '../../../projects/natural/src/lib/modules/avatar/component/avatar.component';
import {FlexModule} from '@ngbracket/ngx-layout/flex';
@@ -8,7 +8,7 @@ import {FlexModule} from '@ngbracket/ngx-layout/flex';
templateUrl: './avatar.component.html',
styleUrls: ['./avatar.component.scss'],
standalone: true,
- imports: [FlexModule, NaturalAvatarComponent, MatButtonModule, CommonModule],
+ imports: [FlexModule, NaturalAvatarComponent, MatButtonModule],
})
export class AvatarComponent {
public failedSources: number[] = [];
diff --git a/src/app/avatar/user.model.ts b/src/app/avatar/user.model.ts
index 9cc99f45..16bfa48e 100644
--- a/src/app/avatar/user.model.ts
+++ b/src/app/avatar/user.model.ts
@@ -1,7 +1,7 @@
/**
* Represents the User contract
*/
-export interface User {
+export type User = {
username: string;
facebookId: string;
-}
+};
diff --git a/src/app/demo.error-handler.ts b/src/app/demo.error-handler.ts
index 1d4da949..6c07beb1 100644
--- a/src/app/demo.error-handler.ts
+++ b/src/app/demo.error-handler.ts
@@ -3,7 +3,7 @@ import {MatSnackBar} from '@angular/material/snack-bar';
import {Observable, of} from 'rxjs';
import {NaturalLoggerExtra, NaturalLoggerType} from '@ecodev/natural';
-@Injectable()
+@Injectable({providedIn: 'root'})
export class DemoLoggerExtra implements NaturalLoggerExtra {
public constructor(private readonly snackBar: MatSnackBar) {}
diff --git a/src/app/detail-header/detail-header.component.html b/src/app/detail-header/detail-header.component.html
index c4b41ce1..a6868ad8 100644
--- a/src/app/detail-header/detail-header.component.html
+++ b/src/app/detail-header/detail-header.component.html
@@ -21,17 +21,12 @@ NaturalDetailHeaderComponent
Simple
-
With icon
-
@@ -54,6 +49,6 @@
All
Minimal
-
+ NaturalAbstractDetail
form.value: {{ form.value | json }}form.errors: {{ collectErrors(form) | json }}Tab 2 content
@@ -74,5 +75,5 @@ Unlinkable tabs (set to false)
- NaturalAbstractEditableList
Name
- Maximum {{ formArray.at(i).get('name')?.errors?.maxlength.requiredLength }} caractĂšres
-
- Requis
+ @if (formArray.at(i).get('name')?.hasError('maxlength')) {
+
+ Maximum {{ formArray.at(i).get('name')?.errors?.maxlength.requiredLength }} caractĂšres
+
+ }
+ @if (formArray.at(i).get('name')?.hasError('required')) {
+ Requis
+ }
@@ -27,10 +31,12 @@ NaturalAbstractEditableList
Description
- Maximum
- {{ formArray.at(i).get('description')?.errors?.maxlength.requiredLength }} caractĂšres
-
+ @if (formArray.at(i).get('description')?.hasError('maxlength')) {
+
+ Maximum
+ {{ formArray.at(i).get('description')?.errors?.maxlength.requiredLength }} caractĂšres
+
+ }
@@ -39,7 +45,7 @@ NaturalAbstractEditableList
-
NaturalAbstractEditableList
-
As a *ngFor
-
-
-
- Name
-
- Maximum {{ formArray.at(i).get('name')?.errors?.maxlength.requiredLength }} caractĂšres
-
- Requis
-
-
-
- Description
-
- Maximum {{ formArray.at(i).get('description')?.errors?.maxlength.requiredLength }} caractĂšres
-
-
+
As a `for` loop
+ @for (element of dataSource.data; track element) {
+
-
+ }
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index dedb5b55..171e521b 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -3,7 +3,7 @@
-
+
Preview
@@ -23,7 +23,7 @@
Debug
(save)="update()"
[naturalCustomCss]="css"
[disabled]="disabled"
- >
+ />
Preview
diff --git a/src/app/file/file.component.html b/src/app/file/file.component.html
index 0af3d387..dcccd6b6 100644
--- a/src/app/file/file.component.html
+++ b/src/app/file/file.component.html
@@ -223,6 +223,6 @@ File component
[model]="model"
[uploader]="uploadAndLink.bind(this)"
action="upload"
- >
+ />
diff --git a/src/app/file/file.component.ts b/src/app/file/file.component.ts
index 59e0f144..f3e818e6 100644
--- a/src/app/file/file.component.ts
+++ b/src/app/file/file.component.ts
@@ -12,20 +12,20 @@ import {FormsModule} from '@angular/forms';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {FlexModule} from '@ngbracket/ngx-layout/flex';
-interface JsonFile {
+type JsonFile = {
name: string;
type: string;
size: number;
lastModified: number;
-}
+};
-interface JsonFileSelection {
+type JsonFileSelection = {
valid: JsonFile[];
invalid: {
error: string;
file: JsonFile;
}[];
-}
+};
function fileToJson(file: File): JsonFile {
return {
@@ -76,7 +76,10 @@ export class FileComponent {
public model: FileModel | null = null;
- public constructor(private readonly uploadService: NaturalFileService, private readonly fileService: FileService) {}
+ public constructor(
+ private readonly uploadService: NaturalFileService,
+ private readonly fileService: FileService,
+ ) {}
public fileChange(file: File): void {
console.log('fileChange', fileToJson(file));
diff --git a/src/app/hierarchic/hierarchic.component.html b/src/app/hierarchic/hierarchic.component.html
index 7aa9e0c5..bab08461 100644
--- a/src/app/hierarchic/hierarchic.component.html
+++ b/src/app/hierarchic/hierarchic.component.html
@@ -11,7 +11,7 @@
natural-search
[selected]="selected"
[searchFacets]="searchFacets"
[searchSelections]="searchSelections"
- >
+ />
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 45f86f86..aa6089ec 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,18 +1,20 @@
-
-
+ @if (menu) {
+
+
+ }
@ecodev/natural
+ @ecodev/natural
-
@@ -29,17 +31,17 @@
- Home
- Search
- List A
@@ -47,93 +49,95 @@
[routerLink]="['/nested/anyValue', {cat: 'cat'}, 'list', {dog: 'dog'}]"
mat-list-item
>
- List B
- Editable list
- Navigable list
- Detail
- Detail header
- Select
- Select hierarchic
- Select Enum
- Relation
- Hiérarchic
- Panels
- File
- Alert service
- Avatar
- Editor
- Other tools
-
-
+ @if (!menu.isMobileView) {
+
+
+ }
@@ -143,7 +147,7 @@
-
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 39841ecb..ef833441 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import {DOCUMENT, CommonModule} from '@angular/common';
+import {DOCUMENT} from '@angular/common';
import {Component, Inject, OnInit} from '@angular/core';
import {ThemeService} from '../shared/services/theme.service';
import {NaturalSidenavContentComponent} from '../../../projects/natural/src/lib/modules/sidenav/sidenav-content/sidenav-content.component';
@@ -21,7 +21,6 @@ import {FlexModule} from '@ngbracket/ngx-layout/flex';
imports: [
FlexModule,
MatToolbarModule,
- CommonModule,
MatButtonModule,
MatIconModule,
NaturalIconDirective,
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index d48fdd19..0bda2a1a 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1,3 +1,3 @@
@ecodev/natural @ecodev/natural
diff --git a/src/app/homepage/homepage.component.spec.ts b/src/app/homepage/homepage.component.spec.ts
index de531dd6..bbe3e406 100644
--- a/src/app/homepage/homepage.component.spec.ts
+++ b/src/app/homepage/homepage.component.spec.ts
@@ -6,7 +6,7 @@ describe('Demo HomepageComponent', () => {
let component: HomepageComponent;
let fixture: ComponentFixture;
- beforeEach(async () => {
+ beforeEach(() => {
fixture = TestBed.createComponent(HomepageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html
index dd88b493..1b09df29 100644
--- a/src/app/list/list.component.html
+++ b/src/app/list/list.component.html
@@ -1,105 +1,97 @@
NaturalAbstractList
-
-
-
{{ routeData?.title }}
-
-
-
-
-
-
+
+
{{ routeData?.title }}
+
-
-
-
-
-
-
-
-
-
- id
- {{ element.id }}
-
-
-
- name
-
-
-
-
-
- description
- {{ element.description }}
-
-
-
- hidden
- visible but hidden in dropdown
-
-
-
- Not in picker
- should never be visible, even if solicited by url
-
-
-
-
Pas de résultats
+
+
+
+
+
+
+
+
+
+
+
+
+ id
+ {{ element.id }}
+
+
+ name
+
+
+
+
+ description
+ {{ element.description }}
+
+
+ hidden
+ visible but hidden in dropdown
+
+
+ Not in picker
+ should never be visible, even if solicited by url
+
+
+
+ @if (dataSource.data?.length === 0) {
+
+ }
+ @if (!dataSource.data) {
+
+
+ }
+
-
-
-
+
+
columnsForTable : {{ columnsForTable | json }}
+
selectedColumns : {{ selectedColumns | json }}
+
+variables : {{ variablesManager.variables.value | json }}
+
row selection : {{ selection.selected | json }}
-
-
-
-
-
-
columnsForTable : {{ columnsForTable | json }}
-
selectedColumns : {{ selectedColumns | json }}
-
variables : {{ variablesManager.variables.value | json }}
-
row selection : {{ selection.selected | json }}
-
{
// Nullify the redirection, it crashes in testing environment and it's not the point to be tested here
@@ -76,7 +76,7 @@ describe('Demo ListComponent', () => {
beforeEach(fakeAsync(() => {
fixture = TestBed.createComponent(ListComponent);
component = fixture.componentInstance;
- ngZone = fixture.ngZone as NgZone;
+ ngZone = fixture.ngZone!;
router = TestBed.inject(Router);
persistenceService = TestBed.inject(NaturalPersistenceService);
diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index bf4b5a20..f8299191 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -102,7 +102,7 @@ export class ListComponent extends NaturalAbstractList implements O
pageSize: 5,
};
- protected override defaultSorting: Array = [{field: 'name', order: SortingOrder.DESC}];
+ protected override defaultSorting: Sorting[] = [{field: 'name', order: SortingOrder.DESC}];
public constructor(service: ItemService) {
super(service);
diff --git a/src/app/navigable-list/navigable-list.component.html b/src/app/navigable-list/navigable-list.component.html
index a7d5a634..e1bf76af 100644
--- a/src/app/navigable-list/navigable-list.component.html
+++ b/src/app/navigable-list/navigable-list.component.html
@@ -1,103 +1,102 @@
NaturalAbstractNavigableList
-
-
-
-
-
-
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+ @if (element.hasNavigation) {
+
+
+
+ id
+ {{ element.item.id }}
+
+
+ name
+ {{ element.item.name }}
+
+
+ description
+ {{ element.item.description }}
+
+
+
+ @if (dataSource.data?.length === 0) {
+
+ }
+ @if (!dataSource.data) {
+
+
+ }
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- id
- {{ element.item.id }}
-
-
-
- name
- {{ element.item.name }}
-
-
-
- description
- {{ element.item.description }}
-
-
-
-
+
+
columnsForTable : {{ columnsForTable | json }}
+
selectedColumns : {{ selectedColumns | json }}
+
+variables : {{ variablesManager.variables.value | json }}
+
row selection : {{ selection.selected | json }}
-
-
-
-
columnsForTable : {{ columnsForTable | json }}
-
selectedColumns : {{ selectedColumns | json }}
-
variables : {{ variablesManager.variables.value | json }}
-
row selection : {{ selection.selected | json }}
+}
diff --git a/src/app/navigable-list/navigable-list.component.ts b/src/app/navigable-list/navigable-list.component.ts
index 6802592e..1aae65f3 100644
--- a/src/app/navigable-list/navigable-list.component.ts
+++ b/src/app/navigable-list/navigable-list.component.ts
@@ -64,7 +64,7 @@ export class NavigableListComponent extends NaturalAbstractNavigableList
= [{field: 'name', order: SortingOrder.DESC}];
+ protected override defaultSorting: Sorting[] = [{field: 'name', order: SortingOrder.DESC}];
public constructor(service: ItemService) {
super(service);
diff --git a/src/app/other/other.component.html b/src/app/other/other.component.html
index ccbd42a3..7dbf26b6 100644
--- a/src/app/other/other.component.html
+++ b/src/app/other/other.component.html
@@ -1,26 +1,28 @@
natural-table-button
-
HTTP Prefix
@@ -31,12 +33,13 @@
HTTP Prefix
-touched: {{ httpPrefixControl.touched | json }}
-dirty: {{ httpPrefixControl.dirty | json }}
-status: {{ httpPrefixControl.status | json }}
-errors: {{ httpPrefixControl.errors | json }}
-value: {{ httpPrefixControl.value | json }}
-
+ touched: {{ httpPrefixControl.touched | json }}
+ dirty: {{ httpPrefixControl.dirty | json }}
+ status: {{ httpPrefixControl.status | json }}
+ errors: {{ httpPrefixControl.errors | json }}
+ value: {{ httpPrefixControl.value | json }}
+
@@ -60,16 +64,16 @@
HTTP Prefix
Icons
Native font mat-icon
- Font naturalIcon
- SVG naturalIcon
-
Icons
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
-
@@ -88,17 +92,17 @@
Icons
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
-
- Option mat-icon
- Option mat-icon
@@ -106,15 +110,15 @@ Icons
Test mat-icon
Test naturalIcon
@@ -143,4 +147,4 @@
Error handler
custom ripple
NaturalPanelsService
Panel 1 & 2
invalid url
-
+
diff --git a/src/app/relations/relations.component.html b/src/app/relations/relations.component.html
index 42721952..53f4d290 100644
--- a/src/app/relations/relations.component.html
+++ b/src/app/relations/relations.component.html
@@ -3,49 +3,44 @@
natural-relations
>Use ItemService.watchAll() that always returns 5 elements. Seems to be buggy but it's normal.
-
-
-
Hierarchic selector
-
-
-
-
-
-
-
-
No result service
-
-
-
-
-
-
ErrorService
-
-
+@if (isUpdatePage()) {
+
+
+
Hierarchic selector
+
+
+
+
+
-
+}
diff --git a/src/app/relations/relations.component.ts b/src/app/relations/relations.component.ts
index 0c2e2653..4da6347c 100644
--- a/src/app/relations/relations.component.ts
+++ b/src/app/relations/relations.component.ts
@@ -6,14 +6,13 @@ import {NoResultService} from '../../../projects/natural/src/lib/testing/no-resu
import {NaturalRelationsComponent} from '../../../projects/natural/src/lib/modules/relations/relations.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FlexModule} from '@ngbracket/ngx-layout/flex';
-import {CommonModule} from '@angular/common';
@Component({
selector: 'app-relations',
templateUrl: './relations.component.html',
styleUrls: ['./relations.component.scss'],
standalone: true,
- imports: [FlexModule, FormsModule, ReactiveFormsModule, NaturalRelationsComponent, CommonModule],
+ imports: [FlexModule, FormsModule, ReactiveFormsModule, NaturalRelationsComponent],
})
export class RelationsComponent extends NaturalAbstractDetail
implements OnInit {
public hierarchicConfig: NaturalHierarchicConfiguration[] = [
diff --git a/src/app/select-enum/select-enum.component.html b/src/app/select-enum/select-enum.component.html
index 2e3cd5df..7f68600a 100644
--- a/src/app/select-enum/select-enum.component.html
+++ b/src/app/select-enum/select-enum.component.html
@@ -19,7 +19,7 @@
+ />
value: {{ withoutModelOutput | json }}
@@ -27,13 +27,9 @@
+ />
-
+ />
value: {{ myValue | json }}
@@ -51,11 +47,7 @@ FormControl
-
+
touched: {{ formControl.touched | json }}
dirty: {{ formControl.dirty | json }}
@@ -70,7 +62,7 @@ FormControl
enumName="FooEnum"
[formControl]="formControlReplace"
placeholder="FormControl (replace)"
- >
+ />
touched: {{ formControlReplace.touched | json }}
dirty: {{ formControlReplace.dirty | json }}
@@ -89,7 +81,7 @@ FormGroup
enumName="FooEnum"
formControlName="amazingField"
placeholder="FormGroup (update)"
- >
+ />
touched: {{ formGroup.touched | json }}
@@ -104,7 +96,7 @@ FormGroup
enumName="FooEnum"
formControlName="amazingField"
placeholder="FormGroup (replace)"
- >
+ />
@@ -122,14 +114,14 @@ Others
placeholder="Disabled option with formControl"
[formControl]="formControl"
[optionDisabled]="optionDisabled"
- >
+ />
touched: {{ formControlMultiple.touched | json }}
diff --git a/src/app/select-hierarchic/select-hierarchic.component.html b/src/app/select-hierarchic/select-hierarchic.component.html
index ee5b4f49..ceace707 100644
--- a/src/app/select-hierarchic/select-hierarchic.component.html
+++ b/src/app/select-hierarchic/select-hierarchic.component.html
@@ -19,7 +19,7 @@
+ />
value: {{ withoutModelOutput | json }}
+ />
+ />
value: {{ myValue | json }}
@@ -55,7 +55,7 @@ FormControl
[config]="hierarchicConfig"
[formControl]="formControl"
placeholder="FormControl (update)"
- >
+ />
required
optional
@@ -72,7 +72,7 @@ FormControl
[config]="hierarchicConfig"
[formControl]="formControlReplace"
placeholder="FormControl (replace)"
- >
+ />
touched: {{ formControlReplace.touched | json }}
dirty: {{ formControlReplace.dirty | json }}
@@ -91,7 +91,7 @@ FormGroup
[config]="hierarchicConfig"
formControlName="amazingField"
placeholder="FormGroup (update)"
- >
+ />
required FormGroup
[config]="hierarchicConfig"
formControlName="amazingField"
placeholder="FormGroup (replace)"
- >
+ />
@@ -132,23 +132,15 @@ Others
Basic input field to test alt+tab and focus on next field
-
diff --git a/src/app/select/select.component.html b/src/app/select/select.component.html
index d9f74367..ea61f542 100644
--- a/src/app/select/select.component.html
+++ b/src/app/select/select.component.html
@@ -20,22 +20,14 @@
+ />
value: {{ withoutModelOutput | json }}
+ />
value: {{ myValue | json }}
@@ -57,7 +49,7 @@ FormControl
[service]="service"
[formControl]="formControl"
placeholder="FormControl (update)"
- >
+ />
required
optional
@@ -74,7 +66,7 @@ FormControl
[service]="service"
[formControl]="formControlReplace"
placeholder="FormControl (replace)"
- >
+ />
touched: {{ formControlReplace.touched | json }}
dirty: {{ formControlReplace.dirty | json }}
@@ -89,11 +81,7 @@ FormGroup
-
@@ -135,23 +119,19 @@ Others
Basic input field to test alt+tab and focus on next field
-
- Hello {{ item.name }} !
@@ -162,7 +142,7 @@ Others
[(ngModel)]="freeText"
[optionRequired]="false"
placeholder="Free text allowed"
- >
+ />
freeText: {{ freeText }}
diff --git a/src/app/select/select.component.ts b/src/app/select/select.component.ts
index 1aae4fc5..13467ff2 100644
--- a/src/app/select/select.component.ts
+++ b/src/app/select/select.component.ts
@@ -31,7 +31,10 @@ import {FlexModule} from '@ngbracket/ngx-layout/flex';
],
})
export class SelectComponent extends AbstractSelect {
- public constructor(service: ItemService, public override readonly errorService: ErrorService) {
+ public constructor(
+ service: ItemService,
+ public override readonly errorService: ErrorService,
+ ) {
super(service, errorService);
}
}
diff --git a/src/app/shared/services/theme.service.ts b/src/app/shared/services/theme.service.ts
index 9677de81..fc8b0951 100644
--- a/src/app/shared/services/theme.service.ts
+++ b/src/app/shared/services/theme.service.ts
@@ -5,17 +5,17 @@ import {BehaviorSubject} from 'rxjs';
providedIn: 'root',
})
export class ThemeService {
- public readonly theme: BehaviorSubject = new BehaviorSubject('defaultDark');
+ public readonly theme = new BehaviorSubject('defaultDark');
private darkActivated = false;
public constructor() {
- if (this.theme.value.indexOf('Dark') > -1) {
+ if (this.theme.value.includes('Dark')) {
this.darkActivated = true;
}
}
public set(theme: string): void {
- if (this.darkActivated && theme.indexOf('Dark') === -1) {
+ if (this.darkActivated && !theme.includes('Dark')) {
this.theme.next('defaultDark');
} else {
this.theme.next('default');
diff --git a/src/index.html b/src/index.html
index 1b886cdb..b37f410d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,4 +1,4 @@
-
+
-