diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html index 257221add9..e1682708c5 100644 --- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html +++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html @@ -1,181 +1,146 @@ @if (visible) { - - -

- {{ 'AbpFeatureManagement::Features' | abpLocalization }} - @if (providerTitle) { - - {{ providerTitle }} - } -

- + + +

+ {{ 'AbpFeatureManagement::Features' | abpLocalization }} + @if (providerTitle) { + - {{ providerTitle }} + } +

+ - -
- @if (groups.length) { -
-
    - @for (group of groups; track group.name) { -
  • - {{ group.displayName }} - -

    {{ selectedGroupDisplayName }}

    -
    + +
    + @if (groups.length) { +
    +
      + @for (group of groups; track group.name) { +
    • + {{ group.displayName }} + +

      {{ selectedGroupDisplayName }}

      +
      - @for (feature of features[group.name]; track feature.id || i; let i = $index) { - @let provider = feature.provider.name; - @let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) : - (provider !== providerName && provider !== defaultProviderName); + @for (feature of features[group.name]; track feature.id || i; let i = $index) { + @let provider = feature.provider.name; + @let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) : + (provider !== providerName && provider !== defaultProviderName); -
      - @switch (feature.valueType?.name) { - @case (valueTypes.ToggleStringValueType) { -
      - +
      + @switch (feature.valueType?.name) { + @case (valueTypes.ToggleStringValueType) { +
      + - - + {{ feature.displayName }} + @if (isFeatureDisabled) { + ({{ provider }}) + } + + -
      - } - @case (valueTypes.FreeTextStringValueType) { -
      - - + "> +
      + } + @case (valueTypes.FreeTextStringValueType) { +
      + + - -
      - } - @case (valueTypes.SelectionStringValueType) { - @if (feature.valueType.itemSource?.items?.length) { -
      - - - +
      + } + @case (valueTypes.SelectionStringValueType) { + @if (feature.valueType.itemSource?.items?.length) { +
      + + + -
      - } - } - @default { - {{ feature.displayName }} - } - } -
      - } - -
      • + "> +
    + } + } + @default { + {{ feature.displayName }} + } + } +
    } -
-
- - - @if (description) { - {{ description }} - } - + + + } + +
-
+ + @if (description) { + {{ description }} } + - @if (!groups.length) { -
- {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }} -
- } +
+
- - - - - - @if (groups.length) { - } - @if (groups.length) { - + @if (!groups.length) { +
+ {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }} +
} - - -} + + + + + + + @if (groups.length) { + + } + + @if (groups.length) { + + } + + +} \ No newline at end of file diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html index 32fe44e488..64fb73b35c 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html @@ -90,7 +90,7 @@
@for (permission of selectedGroupPermissions; track $index; let i = $index) { -
+
+ template: `
`, - imports: [NgClass, NgStyle], + imports: [NgClass], }) export class CardBodyComponent { @HostBinding('class') componentClass = 'card-body'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts index 38a798e146..333b7577e4 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts @@ -1,15 +1,15 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass } from '@angular/common'; @Component({ selector: 'abp-card-footer', template: ` -
+
`, styles: [], - imports: [NgClass, NgStyle], + imports: [NgClass], }) export class CardFooterComponent { @HostBinding('class') componentClass = 'card-footer'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts index 4857913d77..9598c38ff5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts @@ -1,15 +1,15 @@ import { Component, HostBinding, Input } from '@angular/core'; -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass } from '@angular/common'; @Component({ selector: 'abp-card-header', template: ` -
+
`, styles: [], - imports: [NgClass, NgStyle], + imports: [NgClass], }) export class CardHeaderComponent { @HostBinding('class') componentClass = 'card-header'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts index 42973fdcb0..1f941bcb7e 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts @@ -1,12 +1,12 @@ import { Component, Input } from '@angular/core'; -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass } from '@angular/common'; @Component({ selector: 'abp-card', - template: `
+ template: `
`, - imports: [NgClass, NgStyle], + imports: [NgClass], }) export class CardComponent { @Input() cardClass: string; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts index 8cadf828d1..7be8551c2b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core'; import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass } from '@angular/common'; import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; @Component({ @@ -13,7 +13,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; [id]="checkboxId" [readonly]="checkboxReadonly" [ngClass]="checkboxClass" - [ngStyle]="checkboxStyle" + [style]="checkboxStyle" (blur)="checkboxBlur.next()" (focus)="checkboxFocus.next()" /> @@ -31,7 +31,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; multi: true, }, ], - imports: [NgClass, NgStyle, FormsModule, LocalizationPipe], + imports: [NgClass, FormsModule, LocalizationPipe], }) export class FormCheckboxComponent extends AbstractNgModelComponent { @Input() label?: string; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts index 2d10ab5709..401cf22250 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core'; import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { NgClass, NgStyle } from '@angular/common'; +import { NgClass } from '@angular/common'; import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; @Component({ @@ -18,7 +18,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; [placeholder]="inputPlaceholder" [readonly]="inputReadonly" [ngClass]="inputClass" - [ngStyle]="inputStyle" + [style]="inputStyle" (blur)="formBlur.next()" (focus)="formFocus.next()" [(ngModel)]="value" @@ -32,7 +32,7 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core'; multi: true, }, ], - imports: [NgClass, NgStyle, LocalizationPipe, FormsModule], + imports: [NgClass, LocalizationPipe, FormsModule], }) export class FormInputComponent extends AbstractNgModelComponent { @Input() inputId!: string; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 244b055322..81e2d6597f 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -1,118 +1,116 @@ -import { NgClass, NgStyle } from '@angular/common'; -import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; -import { combineLatest, Subscription, timer } from 'rxjs'; -import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core'; - -@Component({ - selector: 'abp-loader-bar', - template: ` -
-
-
- `, - styleUrls: ['./loader-bar.component.scss'], - providers: [SubscriptionService], - imports: [NgClass, NgStyle], -}) -export class LoaderBarComponent implements OnDestroy, OnInit { - private cdRef = inject(ChangeDetectorRef); - private subscription = inject(SubscriptionService); - private httpWaitService = inject(HttpWaitService); - private routerWaitService = inject(RouterWaitService); - - protected _isLoading!: boolean; - - @Input() - set isLoading(value: boolean) { - this._isLoading = value; - this.cdRef.detectChanges(); - } - get isLoading(): boolean { - return this._isLoading; - } - - @Input() - containerClass = 'abp-loader-bar'; - - @Input() - color = '#77b6ff'; - - progressLevel = 0; - - interval = new Subscription(); - - timer = new Subscription(); - - intervalPeriod = 350; - - stopDelay = 800; - - private readonly clearProgress = () => { - this.progressLevel = 0; - this.cdRef.detectChanges(); - }; - - private readonly reportProgress = () => { - if (this.progressLevel < 75) { - this.progressLevel += 1 + Math.random() * 9; - } else if (this.progressLevel < 90) { - this.progressLevel += 0.4; - } else if (this.progressLevel < 100) { - this.progressLevel += 0.1; - } else { - this.interval.unsubscribe(); - } - this.cdRef.detectChanges(); - }; - - get boxShadow(): string { - return `0 0 10px rgba(${this.color}, 0.5)`; - } - - ngOnInit() { - this.subscribeLoading(); - } - - subscribeLoading() { - this.subscription.addOne( - combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), - ([httpLoading, routerLoading]) => { - if (httpLoading || routerLoading) this.startLoading(); - else this.stopLoading(); - }, - ); - } - - ngOnDestroy() { - this.interval.unsubscribe(); - } - - startLoading() { - if (this.isLoading || !this.interval.closed) return; - - this.isLoading = true; - this.progressLevel = 0; - this.cdRef.detectChanges(); - this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); - this.timer.unsubscribe(); - } - - stopLoading() { - this.interval.unsubscribe(); - - this.progressLevel = 100; - this.isLoading = false; - - if (!this.timer.closed) return; - - this.timer = timer(this.stopDelay).subscribe(this.clearProgress); - } -} +import { NgClass }ngular/common'; +import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core'; +import { combineLatest, Subscription, timer } from 'rxjs'; +import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core'; + +@Component({ + selector: 'abp-loader-bar', + template: ` + +
+
+ Urls: ['./loader-bar.component.scss'], + providers: [SubscriptionService], + imports: [NgClass], [NgClass]LoaderBarComponent implements OnDestroy, OnInit { + private cdRef = inject(ChangeDetectorRef); + private subscription = inject(SubscriptionService); + private httpWaitService = inject(HttpWaitService); + private routerWaitService = inject(RouterWaitService); + + protected _isLoading!: boolean; + + @Input() + set isLoading(value: boolean) { + this._isLoading = value; + this.cdRef.detectChanges(); + } + get isLoading(): boolean { + return this._isLoading; + } + + @Input() + containerClass = 'abp-loader-bar'; + + @Input() + color = '#77b6ff'; + + progressLevel = 0; + + interval = new Subscription(); + + timer = new Subscription(); + + intervalPeriod = 350; + + stopDelay = 800; + + private readonly clearProgress = () => { + this.progressLevel = 0; + this.cdRef.detectChanges(); + }; + + private readonly reportProgress = () => { + if (this.progressLevel < 75) { + this.progressLevel += 1 + Math.random() * 9; + } else if (this.progressLevel < 90) { + this.progressLevel += 0.4; + } else if (this.progressLevel < 100) { + this.progressLevel += 0.1; + } else { + this.interval.unsubscribe(); + } + this.cdRef.detectChanges(); + }; + + get boxShadow(): string { + return `0 0 10px rgba(${this.color}, 0.5)`; + } + + ngOnInit() { + this.subscribeLoading(); + } + + subscribeLoading() { + this.subscription.addOne( + combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), + ([httpLoading, routerLoading]) => { + if (httpLoading || routerLoading) this.startLoading(); + else this.stopLoading(); + }, + ); + } + + ngOnDestroy() { + this.interval.unsubscribe(); + } + + startLoading() { + if (this.isLoading || !this.interval.closed) return; + + this.isLoading = true; + this.progressLevel = 0; + this.cdRef.detectChanges(); + this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); + this.timer.unsubscribe(); + } + + stopLoading() { + this.interval.unsubscribe(); + + this.progressLevel = 100; + this.isLoading = false; + + if (!this.timer.closed) return; + + this.timer = timer(this.stopDelay).subscribe(this.clearProgress); + } +}