From 512982694f5604acfdd01e3af6e7269a665fe179 Mon Sep 17 00:00:00 2001 From: Marcarrian Date: Mon, 10 Jun 2024 13:14:09 +0200 Subject: [PATCH] refactor(components): migrate to Angular's built-in control flow --- apps/components/src/app/app.component.html | 13 ++--- apps/components/src/app/app.component.ts | 3 +- .../sci-accordion-page.component.html | 5 +- .../sci-accordion-page.component.ts | 2 - .../sci-filter-field-page.component.html | 4 +- .../sci-filter-field-page.component.ts | 2 - .../sci-key-value-field-page.component.html | 4 +- .../sci-key-value-field-page.component.ts | 3 +- .../sci-list-page.component.html | 23 +++++---- .../sci-list-page/sci-list-page.component.ts | 4 +- .../sci-sashbox-page.component.html | 50 ++++++++++--------- .../sci-sashbox-page.component.ts | 3 -- .../sci-tabbar-page.component.html | 36 ++++++++----- .../sci-tabbar-page.component.ts | 3 -- .../sci-throbber-page.component.html | 4 +- .../sci-throbber-page.component.ts | 2 - .../sci-viewport-page.component.html | 10 ++-- .../sci-viewport-page.component.ts | 3 +- docs/site/tools/sashbox.md | 2 +- package.json | 2 +- .../accordion/src/accordion-item.directive.ts | 6 +-- .../accordion/src/accordion.component.html | 37 +++++++------- .../accordion/src/accordion.component.ts | 10 ++-- .../checkbox/src/checkbox.component.html | 4 +- .../checkbox/src/checkbox.component.ts | 2 - .../src/key-value-field.component.html | 35 +++++++------ .../src/key-value-field.component.ts | 3 -- .../key-value/src/key-value.component.html | 4 +- .../key-value/src/key-value.component.ts | 3 +- .../list/src/list-item.directive.ts | 8 +-- .../src/list-item/list-item.component.html | 22 +++++--- .../list/src/list-item/list-item.component.ts | 4 +- .../list/src/list.component.html | 24 +++++---- .../list/src/list.component.ts | 19 +++---- .../src/qualifier-chip-list.component.html | 18 ++++--- .../src/qualifier-chip-list.component.ts | 4 +- .../tabbar/src/tab.directive.ts | 8 +-- .../tabbar/src/tabbar.component.html | 17 ++++--- .../tabbar/src/tabbar.component.ts | 11 ++-- .../sashbox/src/sashbox.component.html | 23 ++++----- .../sashbox/src/sashbox.component.ts | 4 +- .../throbber/src/throbber.component.html | 24 ++++++--- .../throbber/src/throbber.component.ts | 4 -- .../viewport/src/viewport.component.html | 8 +-- .../viewport/src/viewport.component.spec.ts | 7 ++- .../viewport/src/viewport.component.ts | 3 +- 46 files changed, 260 insertions(+), 230 deletions(-) diff --git a/apps/components/src/app/app.component.html b/apps/components/src/app/app.component.html index 029fd8c2..d97e5901 100644 --- a/apps/components/src/app/app.component.html +++ b/apps/components/src/app/app.component.html @@ -1,11 +1,12 @@
diff --git a/apps/components/src/app/app.component.ts b/apps/components/src/app/app.component.ts index ca5691ce..a14503cd 100644 --- a/apps/components/src/app/app.component.ts +++ b/apps/components/src/app/app.component.ts @@ -13,7 +13,7 @@ import {map} from 'rxjs/operators'; import {Observable} from 'rxjs'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {sortArray} from '@scion/toolkit/operators'; -import {AsyncPipe, NgFor} from '@angular/common'; +import {AsyncPipe} from '@angular/common'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; import {SciToggleButtonComponent} from '@scion/components.internal/toggle-button'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; @@ -26,7 +26,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; styleUrls: ['./app.component.scss'], standalone: true, imports: [ - NgFor, AsyncPipe, RouterLink, RouterOutlet, diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html index 9fc0b6a3..8afdfa1e 100644 --- a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html +++ b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.html @@ -2,17 +2,16 @@

sci-accordion (ɵ)

- + @for (item of items; track item) {
{{item.title}}
 - {{item.description}} - + } diff --git a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts index 27af6adf..cd495b9b 100644 --- a/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts +++ b/apps/components/src/app/sci-accordion-page/sci-accordion-page.component.ts @@ -9,7 +9,6 @@ */ import {Component} from '@angular/core'; import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; -import {NgFor} from '@angular/common'; import {SciFormFieldComponent} from '@scion/components.internal/form-field'; import {SciCheckboxComponent} from '@scion/components.internal/checkbox'; import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/components.internal/accordion'; @@ -21,7 +20,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta styleUrls: ['./sci-accordion-page.component.scss'], standalone: true, imports: [ - NgFor, ReactiveFormsModule, SciFormFieldComponent, SciCheckboxComponent, diff --git a/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html b/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html index 973bbe36..35d6cdd4 100644 --- a/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html +++ b/apps/components/src/app/sci-filter-field-page/sci-filter-field-page.component.html @@ -2,7 +2,9 @@

sci-filter-field (ɵ)

- {{filterText}} + @if (filterText) { + {{filterText}} + }
- -
- - - - - - - - - - - -
- + @for (sash of sashes; track sash; let i = $index) { + +
+ + + + + + + + + +
+ + }
@@ -92,6 +94,8 @@

sci-sashbox

-
- -
+@if (glasspaneVisible) { +
+ +
+} diff --git a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts index 5f12706a..b36acc66 100644 --- a/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts +++ b/apps/components/src/app/sci-sashbox-page/sci-sashbox-page.component.ts @@ -10,7 +10,6 @@ import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core'; import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox'; -import {NgFor, NgIf} from '@angular/common'; import {SciFormFieldComponent} from '@scion/components.internal/form-field'; import {SciCheckboxComponent} from '@scion/components.internal/checkbox'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @@ -22,8 +21,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta styleUrls: ['./sci-sashbox-page.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, FormsModule, ReactiveFormsModule, SciSashboxComponent, diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html index 0958c9ef..3e848c09 100644 --- a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html +++ b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.html @@ -3,24 +3,32 @@

sci-tabbar (ɵ)

- - 
{{loremIpsumShort}}
- + @if (form.controls.shortContentTabVisible.value) { + + 
{{loremIpsumShort}}
+ + } - - 
{{loremIpsum}}
- + @if (form.controls.longContentTabVisible.value) { + + 
{{loremIpsum}}
+ + } - - - + @if (form.controls.textareaTabVisible.value) { + + + + } - - {{tab}} - + @for (tab of form.controls.dynamicTabs.value | appSplit:','; track tab) { + + {{tab}} + + } @@ -57,7 +65,9 @@

sci-tabbar (ɵ)

- + @for (tab of form.controls.dynamicTabs.value | appSplit:','; track tab) { + + } diff --git a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts index c7498364..951ae558 100644 --- a/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts +++ b/apps/components/src/app/sci-tabbar-page/sci-tabbar-page.component.ts @@ -14,7 +14,6 @@ import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {SplitPipe} from '../common/split.pipe'; import {SciCheckboxComponent} from '@scion/components.internal/checkbox'; import {SciFormFieldComponent} from '@scion/components.internal/form-field'; -import {NgFor, NgIf} from '@angular/common'; import loremIpsum from './lorem-ipsum.json'; @Component({ @@ -23,8 +22,6 @@ import loremIpsum from './lorem-ipsum.json'; styleUrls: ['./sci-tabbar-page.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, ReactiveFormsModule, SciCheckboxComponent, SciTabbarComponent, diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html index 297fdf68..1bf5d075 100644 --- a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html +++ b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.html @@ -14,7 +14,9 @@

sci-throbber

diff --git a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts index a36b8e45..5ce315e5 100644 --- a/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts +++ b/apps/components/src/app/sci-throbber-page/sci-throbber-page.component.ts @@ -12,7 +12,6 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {SciThrobberComponent} from '@scion/components/throbber'; import {SciFormFieldComponent} from '@scion/components.internal/form-field'; -import {NgFor} from '@angular/common'; import {SciCheckboxComponent} from '@scion/components.internal/checkbox'; import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar'; @@ -22,7 +21,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta styleUrls: ['./sci-throbber-page.component.scss'], standalone: true, imports: [ - NgFor, ReactiveFormsModule, SciFormFieldComponent, SciThrobberComponent, diff --git a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html index 0794bd83..077d20f9 100644 --- a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html +++ b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.html @@ -4,9 +4,9 @@

sci-viewport

-
- {{content}} -
+ @for (content of form.controls.content.value | appSplit:'\n+'; track content) { +
{{content}}
+ } @@ -24,7 +24,9 @@

sci-viewport

diff --git a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts index fc384446..011d0bc7 100644 --- a/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts +++ b/apps/components/src/app/sci-viewport-page/sci-viewport-page.component.ts @@ -15,7 +15,7 @@ import {startWith, takeUntil} from 'rxjs/operators'; import {Subject} from 'rxjs'; import loremIpsum from './lorem-ipsum.json'; import {Arrays} from '@scion/toolkit/util'; -import {DOCUMENT, NgFor} from '@angular/common'; +import {DOCUMENT} from '@angular/common'; import {SciFormFieldComponent} from '@scion/components.internal/form-field'; import {SplitPipe} from '../common/split.pipe'; import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar'; @@ -26,7 +26,6 @@ import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/ta styleUrls: ['./sci-viewport-page.component.scss'], standalone: true, imports: [ - NgFor, ReactiveFormsModule, SplitPipe, SciFormFieldComponent, diff --git a/docs/site/tools/sashbox.md b/docs/site/tools/sashbox.md index 498e6436..a1bcd50f 100644 --- a/docs/site/tools/sashbox.md +++ b/docs/site/tools/sashbox.md @@ -111,7 +111,7 @@ Sash content modeled in the `` is added to a CSS grid container wit
Sash Template - A sash is added to the sashbox in the form of a `` decorated with the `sciSash` directive. You can control its size by setting a `size` and/or `minSize`. To hide a sash, for example if using the sash as side panel, add a `*ngIf` to the sash ``. + A sash is added to the sashbox in the form of a `` decorated with the `sciSash` directive. You can control its size by setting a `size` and/or `minSize`. To hide a sash, for example if using the sash as side panel, place the sash in an `@if` block. #### Configuration: diff --git a/package.json b/package.json index 899de087..732b731d 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "before-push": "run-s build lint test:headless e2e:headless", "build": "run-s **:*:build", "start": "run-s components-app:serve", - "lint": "run-p **:*:lint", + "lint": "run-s **:*:lint", "test": "run-p **:*:test", "test:headless": "cross-env HEADLESS=true run-p **:*:test", "e2e": "run-s \"**:*:e2e:run -- {@}\" --", diff --git a/projects/scion/components.internal/accordion/src/accordion-item.directive.ts b/projects/scion/components.internal/accordion/src/accordion-item.directive.ts index 037e94ba..f2f01835 100644 --- a/projects/scion/components.internal/accordion/src/accordion-item.directive.ts +++ b/projects/scion/components.internal/accordion/src/accordion-item.directive.ts @@ -18,9 +18,9 @@ import {Directive, Input, TemplateRef} from '@angular/core'; * Example usage: * * - * + * @for (item of items$ | async; track item.id) { * - * + * * ... * * @@ -28,7 +28,7 @@ import {Directive, Input, TemplateRef} from '@angular/core'; * * ... * - * + * } * */ @Directive({selector: 'ng-template[sciAccordionItem]', standalone: true}) diff --git a/projects/scion/components.internal/accordion/src/accordion.component.html b/projects/scion/components.internal/accordion/src/accordion.component.html index b057fa88..473db62e 100644 --- a/projects/scion/components.internal/accordion/src/accordion.component.html +++ b/projects/scion/components.internal/accordion/src/accordion.component.html @@ -1,21 +1,24 @@
-
- -
- + + + @if (cdkAccordionItem.expanded) { +
+ +
+ }
-
+ }
diff --git a/projects/scion/components.internal/accordion/src/accordion.component.ts b/projects/scion/components.internal/accordion/src/accordion.component.ts index 46427acb..9d02cd13 100644 --- a/projects/scion/components.internal/accordion/src/accordion.component.ts +++ b/projects/scion/components.internal/accordion/src/accordion.component.ts @@ -15,7 +15,7 @@ import {CdkAccordion, CdkAccordionItem, CdkAccordionModule} from '@angular/cdk/a import {fromDimension$} from '@scion/toolkit/observable'; import {debounceTime, takeUntil} from 'rxjs/operators'; import {combineLatest, Subject} from 'rxjs'; -import {NgClass, NgFor, NgIf, NgTemplateOutlet} from '@angular/common'; +import {NgClass, NgTemplateOutlet} from '@angular/common'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; /** @@ -30,9 +30,9 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon * Example of a simple accordion: * * - * + * @for (item of items$ | async; track item.id) { * - * + * * ... * * @@ -40,7 +40,7 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon * * ... * - * + * } * */ @Component({ @@ -49,8 +49,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon styleUrls: ['./accordion.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, NgClass, NgTemplateOutlet, CdkAccordionModule, diff --git a/projects/scion/components.internal/checkbox/src/checkbox.component.html b/projects/scion/components.internal/checkbox/src/checkbox.component.html index 988099c3..6fddcb78 100644 --- a/projects/scion/components.internal/checkbox/src/checkbox.component.html +++ b/projects/scion/components.internal/checkbox/src/checkbox.component.html @@ -1,4 +1,6 @@ diff --git a/projects/scion/components.internal/checkbox/src/checkbox.component.ts b/projects/scion/components.internal/checkbox/src/checkbox.component.ts index 32865bc7..778a630e 100644 --- a/projects/scion/components.internal/checkbox/src/checkbox.component.ts +++ b/projects/scion/components.internal/checkbox/src/checkbox.component.ts @@ -12,7 +12,6 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms'; import {noop} from 'rxjs'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {NgIf} from '@angular/common'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {UUID} from '@scion/toolkit/uuid'; @@ -24,7 +23,6 @@ import {UUID} from '@scion/toolkit/uuid'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgIf, ReactiveFormsModule, SciMaterialIconDirective, ], diff --git a/projects/scion/components.internal/key-value-field/src/key-value-field.component.html b/projects/scion/components.internal/key-value-field/src/key-value-field.component.html index f6f8367c..27f96a35 100644 --- a/projects/scion/components.internal/key-value-field/src/key-value-field.component.html +++ b/projects/scion/components.internal/key-value-field/src/key-value-field.component.html @@ -1,23 +1,30 @@
-

{{title}}

+ @if (title) { +

{{title}}

+ } - + @if (addable) { + + } - + @if (removable) { + + }
- +@for (keyValueGroup of keyValueFormArray.controls; track keyValueGroup; let i = $index) { - + @if (keyValueGroup.controls.key.disabled) { + + + } @else { + + + } - - - - - - - - - + @if (removable) { + + } +} diff --git a/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts b/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts index c221f8a7..3d002356 100644 --- a/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts +++ b/projects/scion/components.internal/key-value-field/src/key-value-field.component.ts @@ -12,7 +12,6 @@ import {Component, ElementRef, HostBinding, Input} from '@angular/core'; import {FormArray, FormControl, FormGroup, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms'; import {Dictionary, Maps} from '@scion/toolkit/util'; import {UUID} from '@scion/toolkit/uuid'; -import {NgFor, NgIf} from '@angular/common'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; /** @@ -24,8 +23,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon styleUrls: ['./key-value-field.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, ReactiveFormsModule, SciMaterialIconDirective, ], diff --git a/projects/scion/components.internal/key-value/src/key-value.component.html b/projects/scion/components.internal/key-value/src/key-value.component.html index dbe7eaf1..165e4a16 100644 --- a/projects/scion/components.internal/key-value/src/key-value.component.html +++ b/projects/scion/components.internal/key-value/src/key-value.component.html @@ -1,4 +1,4 @@ - +@for (property of flattenedProperties | keyvalue:keyCompareFn; track property) { {{property.key}}: {{property.value}} - +} diff --git a/projects/scion/components.internal/key-value/src/key-value.component.ts b/projects/scion/components.internal/key-value/src/key-value.component.ts index e5445490..132c8ed9 100644 --- a/projects/scion/components.internal/key-value/src/key-value.component.ts +++ b/projects/scion/components.internal/key-value/src/key-value.component.ts @@ -9,7 +9,7 @@ */ import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; -import {KeyValue, KeyValuePipe, NgFor} from '@angular/common'; +import {KeyValue, KeyValuePipe} from '@angular/common'; import {Dictionaries, Dictionary} from '@scion/toolkit/util'; /** @@ -22,7 +22,6 @@ import {Dictionaries, Dictionary} from '@scion/toolkit/util'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgFor, KeyValuePipe, ], }) diff --git a/projects/scion/components.internal/list/src/list-item.directive.ts b/projects/scion/components.internal/list/src/list-item.directive.ts index 8a30c214..7aa1204d 100644 --- a/projects/scion/components.internal/list/src/list-item.directive.ts +++ b/projects/scion/components.internal/list/src/list-item.directive.ts @@ -18,9 +18,11 @@ import {Directive, Input, TemplateRef} from '@angular/core'; * Example usage: * * - * - * - * + * @for (item of items$ | async; track item.id) { + * + * + * + * } * */ @Directive({selector: 'ng-template[sciListItem]', standalone: true}) diff --git a/projects/scion/components.internal/list/src/list-item/list-item.component.html b/projects/scion/components.internal/list/src/list-item/list-item.component.html index 1192b68e..a625e172 100644 --- a/projects/scion/components.internal/list/src/list-item/list-item.component.html +++ b/projects/scion/components.internal/list/src/list-item/list-item.component.html @@ -1,7 +1,9 @@ - - {{active ? 'radio_button_checked' : 'radio_button_unchecked'}} - +@if (optionStyle) { + + {{active ? 'radio_button_checked' : 'radio_button_unchecked'}} + +}
@@ -9,8 +11,12 @@
-
    -
  • - -
    • -
+@if (listItem.actionTemplates.length) { +
    + @for (actionTemplate of listItem.actionTemplates; track actionTemplate) { +
  • + +
    • + } +
+} diff --git a/projects/scion/components.internal/list/src/list-item/list-item.component.ts b/projects/scion/components.internal/list/src/list-item/list-item.component.ts index 3d5c55e7..1531a159 100644 --- a/projects/scion/components.internal/list/src/list-item/list-item.component.ts +++ b/projects/scion/components.internal/list/src/list-item/list-item.component.ts @@ -12,7 +12,7 @@ import {Component, ElementRef, HostBinding, Input} from '@angular/core'; import {FocusableOption, FocusOrigin} from '@angular/cdk/a11y'; import {SciListItemDirective} from '../list-item.directive'; import {SciListStyle} from '../metadata'; -import {NgFor, NgIf, NgTemplateOutlet} from '@angular/common'; +import {NgTemplateOutlet} from '@angular/common'; import {SciMaterialIconDirective} from '@scion/components.internal/material-icon'; @Component({ @@ -21,8 +21,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon styleUrls: ['./list-item.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, NgTemplateOutlet, SciMaterialIconDirective, ], diff --git a/projects/scion/components.internal/list/src/list.component.html b/projects/scion/components.internal/list/src/list.component.html index 249c16dc..d0ee6060 100644 --- a/projects/scion/components.internal/list/src/list.component.html +++ b/projects/scion/components.internal/list/src/list.component.html @@ -1,19 +1,23 @@ - - +@if (filterPosition === 'top') { + +} - - + @for (listItem of listItems; track trackByFn($index, listItem)) { + + + } - +@if (filterPosition === 'bottom') { + +} - diff --git a/projects/scion/components.internal/list/src/list.component.ts b/projects/scion/components.internal/list/src/list.component.ts index 82abb20d..2cc2e125 100644 --- a/projects/scion/components.internal/list/src/list.component.ts +++ b/projects/scion/components.internal/list/src/list.component.ts @@ -16,7 +16,7 @@ import {SciFilterFieldComponent} from '@scion/components.internal/filter-field'; import {Subject} from 'rxjs'; import {filter, map, takeUntil} from 'rxjs/operators'; import {SciListStyle} from './metadata'; -import {NgClass, NgFor, NgIf} from '@angular/common'; +import {NgClass, NgTemplateOutlet} from '@angular/common'; import {SciViewportComponent} from '@scion/components/viewport'; /** @@ -29,9 +29,11 @@ import {SciViewportComponent} from '@scion/components/viewport'; * Example of a simple list: * * - * - * ... - * + * @for (item of items$ | async; track item.id) { + * + * ... + * + * } * * * @@ -39,7 +41,7 @@ import {SciViewportComponent} from '@scion/components/viewport'; * Example of a list with actions: * * - * + * @for (item of items$ | async; track item.id) { * * * ... @@ -47,9 +49,9 @@ import {SciViewportComponent} from '@scion/components/viewport'; * * * - * + * * - * + * } * * * ## Styling @@ -71,12 +73,11 @@ import {SciViewportComponent} from '@scion/components/viewport'; styleUrls: ['./list.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, SciViewportComponent, SciListItemComponent, SciFilterFieldComponent, NgClass, + NgTemplateOutlet, ], }) export class SciListComponent implements AfterViewInit, OnDestroy { diff --git a/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.html b/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.html index d7f81bae..239ed770 100644 --- a/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.html +++ b/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.html @@ -1,9 +1,13 @@
    -
  • - {{type}} -
    • -
  • - {{entry.key}} - {{entry.value}} -
    • + @if (type) { +
  • + {{type}} +
    • + } + @for (entry of (qualifier ?? {}) | keyvalue:qualifierKeyCompareFn; track entry) { +
  • + {{entry.key}} + {{entry.value}} +
    • + }
diff --git a/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.ts b/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.ts index 4134a1f5..903389e7 100644 --- a/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.ts +++ b/projects/scion/components.internal/qualifier-chip-list/src/qualifier-chip-list.component.ts @@ -9,7 +9,7 @@ */ import {ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges} from '@angular/core'; -import {KeyValue, KeyValuePipe, NgFor, NgIf} from '@angular/common'; +import {KeyValue, KeyValuePipe} from '@angular/common'; /** * Displays the type and qualifier of a capability as chips. @@ -35,8 +35,6 @@ import {KeyValue, KeyValuePipe, NgFor, NgIf} from '@angular/common'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgIf, - NgFor, KeyValuePipe, ], }) diff --git a/projects/scion/components.internal/tabbar/src/tab.directive.ts b/projects/scion/components.internal/tabbar/src/tab.directive.ts index 5d7bf11b..9b986051 100644 --- a/projects/scion/components.internal/tabbar/src/tab.directive.ts +++ b/projects/scion/components.internal/tabbar/src/tab.directive.ts @@ -20,9 +20,11 @@ import {Directive, Input, OnDestroy, TemplateRef, ViewContainerRef, ViewRef} fro * Example usage: * * - * - * ... - * + * @for (item of items$ | async; track item.id) { + * + * ... + * + * } * */ @Directive({selector: 'ng-template[sciTab]', standalone: true}) diff --git a/projects/scion/components.internal/tabbar/src/tabbar.component.html b/projects/scion/components.internal/tabbar/src/tabbar.component.html index f0cfc241..7d0aadfd 100644 --- a/projects/scion/components.internal/tabbar/src/tabbar.component.html +++ b/projects/scion/components.internal/tabbar/src/tabbar.component.html @@ -1,12 +1,13 @@ - + @for (tab of tabs$ | async; track tab) { + + } diff --git a/projects/scion/components.internal/tabbar/src/tabbar.component.ts b/projects/scion/components.internal/tabbar/src/tabbar.component.ts index 6ee93df8..fefd5cce 100644 --- a/projects/scion/components.internal/tabbar/src/tabbar.component.ts +++ b/projects/scion/components.internal/tabbar/src/tabbar.component.ts @@ -13,7 +13,7 @@ import {SciTabDirective} from './tab.directive'; import {map, startWith} from 'rxjs/operators'; import {Observable} from 'rxjs'; import {tapFirst} from '@scion/toolkit/operators'; -import {AsyncPipe, NgClass, NgFor} from '@angular/common'; +import {AsyncPipe, NgClass} from '@angular/common'; import {SciViewportComponent} from '@scion/components/viewport'; /** @@ -25,9 +25,11 @@ import {SciViewportComponent} from '@scion/components/viewport'; * * ``` * - * - * ... - * + * @for (item of items$ | async; track item.id) { + * + * ... + * + * } * * ``` */ @@ -38,7 +40,6 @@ import {SciViewportComponent} from '@scion/components/viewport'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgFor, AsyncPipe, NgClass, SciViewportComponent, diff --git a/projects/scion/components/sashbox/src/sashbox.component.html b/projects/scion/components/sashbox/src/sashbox.component.html index 97000d77..59a1ec82 100644 --- a/projects/scion/components/sashbox/src/sashbox.component.html +++ b/projects/scion/components/sashbox/src/sashbox.component.html @@ -1,4 +1,4 @@ - +@for (sash of sashes$ | async; track sash; let i = $index; let first = $first; let last = $last) {
- +
- - - - + @if (!last) { + + } +} diff --git a/projects/scion/components/sashbox/src/sashbox.component.ts b/projects/scion/components/sashbox/src/sashbox.component.ts index d70cd47c..d8143424 100644 --- a/projects/scion/components/sashbox/src/sashbox.component.ts +++ b/projects/scion/components/sashbox/src/sashbox.component.ts @@ -14,7 +14,7 @@ import {BehaviorSubject, Observable, Subject} from 'rxjs'; import {SciSplitterComponent, SplitterMoveEvent} from '@scion/components/splitter'; import {SciSashDirective} from './sash.directive'; import {SciSashBoxAccessor} from './sashbox-accessor'; -import {AsyncPipe, NgFor, NgIf, NgTemplateOutlet} from '@angular/common'; +import {AsyncPipe, NgTemplateOutlet} from '@angular/common'; import {SciSashInitializerDirective} from './sash-initializer.directive'; import {SciElementRefDirective} from './element-ref.directive'; @@ -77,8 +77,6 @@ import {SciElementRefDirective} from './element-ref.directive'; styleUrls: ['./sashbox.component.scss'], standalone: true, imports: [ - NgIf, - NgFor, AsyncPipe, NgTemplateOutlet, SciSashInitializerDirective, diff --git a/projects/scion/components/throbber/src/throbber.component.html b/projects/scion/components/throbber/src/throbber.component.html index b3cb1936..0af44c2d 100644 --- a/projects/scion/components/throbber/src/throbber.component.html +++ b/projects/scion/components/throbber/src/throbber.component.html @@ -1,7 +1,17 @@ - - - - - - - \ No newline at end of file +@switch (type) { + @case ('ellipsis') { + + } + @case ('ripple') { + + } + @case ('roller') { + + } + @case ('spinner') { + + } + @default { + + } +} diff --git a/projects/scion/components/throbber/src/throbber.component.ts b/projects/scion/components/throbber/src/throbber.component.ts index 8c508f8f..46aa572e 100644 --- a/projects/scion/components/throbber/src/throbber.component.ts +++ b/projects/scion/components/throbber/src/throbber.component.ts @@ -9,7 +9,6 @@ */ import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; -import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; import {SciEllipsisThrobberComponent} from './ellipsis-throbber/ellipsis-throbber.component'; import {SciRippleThrobberComponent} from './ripple-throbber/ripple-throbber.component'; import {SciRollerThrobberComponent} from './roller-throbber/roller-throbber.component'; @@ -48,9 +47,6 @@ import {SciSpinnerThrobberComponent} from './spinner-throbber/spinner-throbber.c changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ - NgSwitch, - NgSwitchCase, - NgSwitchDefault, SciEllipsisThrobberComponent, SciRippleThrobberComponent, SciRollerThrobberComponent, diff --git a/projects/scion/components/viewport/src/viewport.component.html b/projects/scion/components/viewport/src/viewport.component.html index 7046fe55..ef4ca304 100644 --- a/projects/scion/components/viewport/src/viewport.component.html +++ b/projects/scion/components/viewport/src/viewport.component.html @@ -11,7 +11,7 @@
- - - - +@if (scrollbarStyle === 'on-top' && (nativeScrollbarTrackSizeProvider.trackSize$ | async) !== null) { + + +} diff --git a/projects/scion/components/viewport/src/viewport.component.spec.ts b/projects/scion/components/viewport/src/viewport.component.spec.ts index 174cfc97..7e17c0a2 100644 --- a/projects/scion/components/viewport/src/viewport.component.spec.ts +++ b/projects/scion/components/viewport/src/viewport.component.spec.ts @@ -17,7 +17,6 @@ import {Dimension, fromDimension$} from '@scion/toolkit/observable'; import {ObserveCaptor} from '@scion/toolkit/testing'; import {asyncScheduler} from 'rxjs'; import {SciScrollbarComponent} from './scrollbar/scrollbar.component'; -import {NgFor} from '@angular/common'; describe('Viewport', () => { @@ -1276,7 +1275,6 @@ describe('Viewport', () => { expect(isScrollbarVisible(fixture, 'horizontal')).withContext('scrollbar (C)').toBeFalse(); }); - it('should detect overflow if overlapping 0.5 pixels or more', async () => { const fixture = TestBed.createComponent(ElementDecimalSizeTestComponent); fixture.autoDetectChanges(true); @@ -1427,7 +1425,9 @@ describe('Viewport', () => { template: `
- + @for (element of elements; track element) { + + }
@@ -1459,7 +1459,6 @@ describe('Viewport', () => { `], standalone: true, imports: [ - NgFor, SciViewportComponent, ], }) diff --git a/projects/scion/components/viewport/src/viewport.component.ts b/projects/scion/components/viewport/src/viewport.component.ts index 39e5ed81..19fa992e 100644 --- a/projects/scion/components/viewport/src/viewport.component.ts +++ b/projects/scion/components/viewport/src/viewport.component.ts @@ -14,7 +14,7 @@ import {coerceElement} from '@angular/cdk/coercion'; import {SciScrollableDirective} from './scrollable.directive'; import {SciScrollbarComponent} from './scrollbar/scrollbar.component'; import {ScrollingModule} from '@angular/cdk/scrolling'; -import {AsyncPipe, NgIf} from '@angular/common'; +import {AsyncPipe} from '@angular/common'; /** * Represents a viewport with slotted content (``) used as scrollable content. By default, content is added to a CSS grid layout. @@ -90,7 +90,6 @@ import {AsyncPipe, NgIf} from '@angular/common'; encapsulation: ViewEncapsulation.ShadowDom, standalone: true, imports: [ - NgIf, AsyncPipe, ScrollingModule, SciScrollableDirective,