@wolkabout/commons 0.0.65 → 0.0.67

package/fesm2022/wolkabout-commons.mjs

@@ -5573,7 +5573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [{ type: i1$5.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class StandardListViewComponent {
-    scrollViewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "scrollViewport" }] : []));
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
     position = input('outer', ...(ngDevMode ? [{ debugName: "position" }] : []));
@@ -5602,31 +5601,7 @@ class StandardListViewComponent {
     }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
     itemSelected = output();
     itemTemplate = contentChild('standardListItemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
-    initialSelectionItemIndex = signal(null, ...(ngDevMode ? [{ debugName: "initialSelectionItemIndex" }] : []));
-    scrolledToBottom = signal(false, ...(ngDevMode ? [{ debugName: "scrolledToBottom" }] : []));
-    scrollSubscription = null;
     constructor(destroyRef) {
-        effect(() => {
-            const viewport = this.scrollViewport();
-            const index = this.initialSelectionItemIndex();
-            if (viewport && index) {
-                setTimeout(() => {
-                    viewport.scrollToIndex(index);
-                    this.initialSelectionItemIndex.set(null);
-                }, 0);
-            }
-        });
-        effect(() => {
-            const viewport = this.scrollViewport();
-            if (viewport && !this.scrollSubscription) {
-                this.scrollSubscription = viewport.elementScrolled().pipe(takeUntilDestroyed(destroyRef), map(() => {
-                    const { scrollTop, scrollHeight, clientHeight } = viewport.elementRef.nativeElement;
-                    return scrollTop + clientHeight >= scrollHeight - 1;
-                }), distinctUntilChanged()).subscribe((scrolled) => {
-                    this.scrolledToBottom.set(scrolled);
-                });
-            }
-        });
         afterNextRender(() => {
             const dataSource = this.dataSource();
             const dataControl = this.dataControl();
@@ -5643,10 +5618,7 @@ class StandardListViewComponent {
                 }
                 const initialSelection = dataSource.initialSelection();
                 if (initialSelection) {
-                    const index = items.findIndex(item => item.id === initialSelection);
-                    const initialItem = index > -1 ? items[index] : items[0];
-                    this.selectItem(initialItem);
-                    this.initialSelectionItemIndex.set(index > -1 ? index : 0);
+                    this.selectItem(items.find(item => item.id === initialSelection) ?? items[0]);
                 }
                 else {
                     this.selectItem(items[0]);
@@ -5726,12 +5698,12 @@ class StandardListViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <cdk-virtual-scroll-viewport [itemSize]=\"48\" class=\"viewport\" [overflowClass]=\"'standard-list-overflow-padding'\">\r\n                <ng-container *cdkVirtualFor=\"let item of items; let i = index\">\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                </ng-container>\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage && this.scrolledToBottom()) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n        <div class=\"flex flex-col grow justify-center items-center\">\r\n          <mat-spinner diameter=\"30\"></mat-spinner>\r\n        </div>\r\n      }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{max-width:100%}:host ::ng-deep .standard-list-overflow-padding .cdk-virtual-scroll-content-wrapper{padding-right:1rem}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.viewport{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, IconComponent, OverflowClassDirective, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <cdk-virtual-scroll-viewport [itemSize]=\"48\" class=\"viewport\" [overflowClass]=\"'standard-list-overflow-padding'\">\r\n                <ng-container *cdkVirtualFor=\"let item of items; let i = index\">\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                </ng-container>\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage && this.scrolledToBottom()) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n        <div class=\"flex flex-col grow justify-center items-center\">\r\n          <mat-spinner diameter=\"30\"></mat-spinner>\r\n        </div>\r\n      }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{max-width:100%}:host ::ng-deep .standard-list-overflow-padding .cdk-virtual-scroll-content-wrapper{padding-right:1rem}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.viewport{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { scrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this)}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [class]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\"\r\n                              [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.ContentChild, args: ['standardListItemTemplate', { isSignal: true }] }] } });
 
 class StandardListDataControl {
     _changeSelection$ = new BehaviorSubject(null);