@abp/ng.theme.shared 7.0.2 → 7.1.0-rc.2

package/fesm2020/abp-ng.theme.shared.mjs

@@ -8,7 +8,7 @@ import { ResolveEnd } from '@angular/router';
 import * as i2 from '@abp/ng.core';
 import { getRoutePath, SubscriptionService, PROJECTION_STRATEGY, uuid, AbstractNgModelComponent, LocalizationService, getLocaleDirection, HttpErrorReporterService, RouterEvents, AuthService, RoutesService, InternalStore, DomInsertionService, CONTENT_STRATEGY, CoreModule, noop, ConfigStateService } from '@abp/ng.core';
 import { startWith, map, debounceTime, filter, takeUntil, distinctUntilChanged, take, catchError, switchMap } from 'rxjs/operators';
-import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, BehaviorSubject, throwError, Observable, of } from 'rxjs';
+import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, of, from, Observable, EMPTY, BehaviorSubject, throwError } from 'rxjs';
 import * as i3 from '@ng-bootstrap/ng-bootstrap';
 import { NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i2$1 from '@angular/forms';
@@ -873,9 +873,12 @@ class ToastContainerComponent {
     constructor() {
         this.toasts = [];
         this.right = '30px';
+        this.defaultRight = '30px';
+        this.defaultMobileRight = '0';
         this.bottom = '30px';
     }
     ngOnInit() {
+        this.setDefaultRight();
         this.toasts$.subscribe(toasts => {
             this.toasts = this.toastKey
                 ? toasts.filter(t => {
@@ -884,6 +887,15 @@ class ToastContainerComponent {
                 : toasts;
         });
     }
+    onWindowResize() {
+        this.setDefaultRight();
+    }
+    setDefaultRight() {
+        const screenWidth = window.innerWidth;
+        if (screenWidth < 768 && this.right == this.defaultRight) {
+            this.right = this.defaultMobileRight;
+        }
+    }
     trackByFunc(index, toast) {
         if (!toast)
             return null;
@@ -891,10 +903,10 @@ class ToastContainerComponent {
     }
 }
 ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToastContainerComponent, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  <abp-toast\r\n    [toast]=\"toast\"\r\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\r\n    (remove)=\"remove($event)\"\r\n  ></abp-toast>\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] });
+ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToastContainerComponent, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  <abp-toast\r\n    [toast]=\"toast\"\r\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\r\n    (remove)=\"remove($event)\"\r\n  ></abp-toast>\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-toast-container', animations: [toastInOut], template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  <abp-toast\r\n    [toast]=\"toast\"\r\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\r\n    (remove)=\"remove($event)\"\r\n  ></abp-toast>\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}\n"] }]
+            args: [{ selector: 'abp-toast-container', animations: [toastInOut], template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  <abp-toast\r\n    [toast]=\"toast\"\r\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\r\n    (remove)=\"remove($event)\"\r\n  ></abp-toast>\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"] }]
         }], propDecorators: { top: [{
                 type: Input
             }], right: [{
@@ -905,6 +917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], toastKey: [{
                 type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class PasswordComponent extends AbstractNgModelComponent {
@@ -1264,6 +1279,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+class AbpVisibleDirective {
+    constructor(viewContainerRef, templateRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.condition$ = of(false);
+    }
+    set abpVisible(value) {
+        this.condition$ = checkType(value);
+        this.subscribeToCondition();
+    }
+    ngOnInit() {
+        this.updateVisibility();
+    }
+    ngOnDestroy() {
+        this.conditionSubscription?.unsubscribe();
+    }
+    subscribeToCondition() {
+        this.conditionSubscription = this.condition$.subscribe(value => {
+            this.isVisible = value;
+            this.updateVisibility();
+        });
+    }
+    updateVisibility() {
+        this.viewContainerRef.clear();
+        // it should be false not falsy
+        if (this.isVisible === false) {
+            return;
+        }
+        this.viewContainerRef.createEmbeddedView(this.templateRef);
+    }
+}
+AbpVisibleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbpVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+AbpVisibleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: { abpVisible: "abpVisible" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbpVisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpVisible]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { abpVisible: [{
+                type: Input,
+                args: ['abpVisible']
+            }] } });
+function checkType(value) {
+    if (value instanceof Promise) {
+        return from(value);
+    }
+    else if (value instanceof Observable) {
+        return value;
+    }
+    else if (typeof value === 'boolean') {
+        return of(value);
+    }
+    else if (value === undefined || value === null) {
+        return of(true);
+    }
+    else {
+        return EMPTY;
+    }
+}
+
 class DocumentDirHandlerService {
     constructor(injector) {
         this.injector = injector;
@@ -1582,7 +1657,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class NavItem {
     constructor(props) {
-        props = { ...props, visible: props.visible || (() => true) };
         Object.assign(this, props);
     }
 }
@@ -2080,6 +2154,7 @@ const declarationsWithExports = [
     NgxDatatableListDirective,
     LoadingDirective,
     ModalCloseDirective,
+    AbpVisibleDirective,
 ];
 class BaseThemeSharedModule {
 }
@@ -2097,7 +2172,8 @@ BaseThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         NgxDatatableDefaultDirective,
         NgxDatatableListDirective,
         LoadingDirective,
-        ModalCloseDirective, HttpErrorWrapperComponent], imports: [CoreModule,
+        ModalCloseDirective,
+        AbpVisibleDirective, HttpErrorWrapperComponent], imports: [CoreModule,
         NgxDatatableModule,
         NgxValidateCoreModule,
         NgbPaginationModule,
@@ -2114,7 +2190,8 @@ BaseThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         NgxDatatableDefaultDirective,
         NgxDatatableListDirective,
         LoadingDirective,
-        ModalCloseDirective] });
+        ModalCloseDirective,
+        AbpVisibleDirective] });
 BaseThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseThemeSharedModule, providers: [DatePipe], imports: [CoreModule,
         NgxDatatableModule,
         NgxValidateCoreModule,
@@ -2272,5 +2349,5 @@ function validatePassword(shouldContain) {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, Confirmation, ConfirmationComponent, ConfirmationService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_VALIDATION_BLUEPRINTS, DateParserFormatter, DocumentDirHandlerService, EllipsisDirective, EllipsisModule, ErrorHandler, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, SUPPRESS_UNSAVED_CHANGES_WARNING, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, ThemeSharedModule, ToastComponent, ToastContainerComponent, ToasterService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getPasswordValidators, httpErrorConfigFactory, slideFromBottom, toastInOut, validatePassword };
+export { AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, Confirmation, ConfirmationComponent, ConfirmationService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_VALIDATION_BLUEPRINTS, DateParserFormatter, DocumentDirHandlerService, EllipsisDirective, EllipsisModule, ErrorHandler, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, SUPPRESS_UNSAVED_CHANGES_WARNING, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, ThemeSharedModule, ToastComponent, ToastContainerComponent, ToasterService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getPasswordValidators, httpErrorConfigFactory, slideFromBottom, toastInOut, validatePassword };
 //# sourceMappingURL=abp-ng.theme.shared.mjs.map