@wolkabout/commons 0.0.19 → 0.0.22

package/fesm2022/wolkabout-commons.mjs

@@ -2756,6 +2756,8 @@ class RequiresPermissionDirective {
     permissions;
     set appRequiresPermission(permissions) {
         if (!permissions) {
+            this.viewContainer.clear();
+            this.viewContainer.createEmbeddedView(this.templateRef);
             return;
         }
         this.permissions.hasAnyPermission(Array.isArray(permissions) ? permissions : [permissions]).pipe(distinctUntilChanged()).subscribe((hasPermissions) => {
@@ -4279,46 +4281,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [{ type: SimpleDateTimePipe }], propDecorators: { timeSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSeries", required: true }] }], desiredTimeFrame: [{ type: i0.Input, args: [{ isSignal: true, alias: "desiredTimeFrame", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }] } });
 
 class CardLabeledValueComponent {
-    permission;
-    set permissions(permissions) {
-        this.permissions$.next(permissions ?? []);
-    }
-    set useAssetPermissions(useAssetPermissions) {
-        this.useAssetPermissions$.next(useAssetPermissions);
-    }
-    label = '';
-    editFunction;
-    icon = 'edit';
-    tooltip = '';
-    permissions$ = new BehaviorSubject([]);
-    useAssetPermissions$ = new BehaviorSubject(undefined);
-    hasPermission$ = this.permissions$.pipe(combineLatestWith(this.useAssetPermissions$), switchMap(([permissions, useAssetPermissions]) => useAssetPermissions
-        ? this.permission.hasAnyGlobalOrAssetPermission(permissions)
-        : this.permission.hasAnyPermission(permissions)));
-    hasPermission = toSignal(this.hasPermission$);
-    constructor(permission) {
-        this.permission = permission;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardLabeledValueComponent, deps: [{ token: PermissionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: "permissions", useAssetPermissions: "useAssetPermissions", label: "label", editFunction: "editFunction", icon: "icon", tooltip: "tooltip" }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction && hasPermission() ? editFunction() : null\"\r\n  [matTooltip]=\"tooltip | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-fit max-h-full overflow-hidden\">\r\n      <div class=\"font-semibold\">{{ label | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex h-fit max-h-full\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    permissionService = inject(PermissionsService);
+    permissions = input(...(ngDevMode ? [undefined, { debugName: "permissions" }] : []));
+    useAssetPermission = input(false, ...(ngDevMode ? [{ debugName: "useAssetPermission" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
+    editFunction = input(...(ngDevMode ? [undefined, { debugName: "editFunction" }] : []));
+    permissionFunction = computed(() => {
+        const requiredPermissions = this.permissions();
+        if (!requiredPermissions) {
+            return of(true);
+        }
+        return this.useAssetPermission()
+            ? this.permissionService.hasAnyGlobalOrAssetPermission(requiredPermissions)
+            : this.permissionService.hasAnyPermission(requiredPermissions);
+    }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
+    hasPermission = toSignal(this.permissionFunction());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermission: { classPropertyName: "useAssetPermission", publicName: "useAssetPermission", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-fit max-h-full overflow-hidden\">\r\n      <div class=\"font-semibold\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex h-fit max-h-full\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-labeled-value', imports: [shared], template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction && hasPermission() ? editFunction() : null\"\r\n  [matTooltip]=\"tooltip | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-fit max-h-full overflow-hidden\">\r\n      <div class=\"font-semibold\">{{ label | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex h-fit max-h-full\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n" }]
-        }], ctorParameters: () => [{ type: PermissionsService }], propDecorators: { permissions: [{
-                type: Input
-            }], useAssetPermissions: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: [{ required: true }]
-            }], editFunction: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'app-card-labeled-value', imports: [shared], template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n  class=\"h-full min-h-22\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-fit max-h-full overflow-hidden\">\r\n      <div class=\"font-semibold\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex h-fit max-h-full\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n" }]
+        }], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], useAssetPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAssetPermission", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], editFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFunction", required: false }] }] } });
 
 class ConfirmationDialogComponent {
     data;