Merge pull request #1565 from abpframework/feature/navigation-multilevel-dropdown

Feature/navigation multilevel dropdown

npm/ng-packs/dist/core/abp-ng.core.d.ts

@@ -7,12 +7,13 @@ export { ProfileChangePassword as ɵf, ProfileGet as ɵd, ProfileUpdate as ɵe }
 export { SessionSetLanguage as ɵi } from './lib/actions/session.actions';
 export { DynamicLayoutComponent as ɵo } from './lib/components/dynamic-layout.component';
 export { RouterOutletComponent as ɵn } from './lib/components/router-outlet.component';
+export { EllipsisDirective as ɵt } from './lib/directives/ellipsis.directive';
 export { PermissionDirective as ɵq } from './lib/directives/permission.directive';
 export { VisibilityDirective as ɵr } from './lib/directives/visibility.directive';
-export { ApiInterceptor as ɵw } from './lib/interceptors/api.interceptor';
-export { ABP as ɵv, Profile as ɵg } from './lib/models';
+export { ApiInterceptor as ɵx } from './lib/interceptors/api.interceptor';
+export { ABP as ɵw, Profile as ɵg } from './lib/models';
 export { LocalizationPipe as ɵs } from './lib/pipes/localization.pipe';
-export { ConfigPlugin as ɵu, NGXS_CONFIG_PLUGIN_OPTIONS as ɵt } from './lib/plugins/config.plugin';
+export { ConfigPlugin as ɵv, NGXS_CONFIG_PLUGIN_OPTIONS as ɵu } from './lib/plugins/config.plugin';
 export { ApplicationConfigurationService as ɵk } from './lib/services/application-configuration.service';
 export { ProfileService as ɵb } from './lib/services/profile.service';
 export { RestService as ɵc } from './lib/services/rest.service';
@@ -20,4 +21,4 @@ export { ConfigState as ɵp } from './lib/states';
 export { ConfigState as ɵj } from './lib/states/config.state';
 export { ProfileState as ɵa } from './lib/states/profile.state';
 export { SessionState as ɵh } from './lib/states/session.state';
-export { getInitialData as ɵx } from './lib/utils/initial-utils';
+export { getInitialData as ɵy } from './lib/utils/initial-utils';

npm/ng-packs/dist/core/bundles/abp-ng.core.umd.js

@@ -790,6 +790,8 @@
             for (var _i = 1; _i < arguments.length; _i++) {
                 interpolateParams[_i - 1] = arguments[_i];
             }
+            if (!key)
+                key = '';
             /** @type {?} */
             var keys = (/** @type {?} */ (key.split('::')));
             /** @type {?} */
@@ -1151,6 +1153,65 @@
         return RouterOutletComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var EllipsisDirective = /** @class */ (function () {
+        function EllipsisDirective(cdRef, elRef) {
+            this.cdRef = cdRef;
+            this.elRef = elRef;
+            this.enabled = true;
+        }
+        Object.defineProperty(EllipsisDirective.prototype, "maxWidth", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.witdh || '180px';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @return {?}
+         */
+        EllipsisDirective.prototype.ngAfterContentInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var title = _this.title;
+                _this.title = title || ((/** @type {?} */ (_this.elRef.nativeElement))).innerText;
+                if (_this.title !== title) {
+                    _this.cdRef.detectChanges();
+                }
+            }), 0);
+        };
+        EllipsisDirective.decorators = [
+            { type: core.Directive, args: [{
+                        selector: '[abpEllipsis]',
+                    },] }
+        ];
+        /** @nocollapse */
+        EllipsisDirective.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef },
+            { type: core.ElementRef }
+        ]; };
+        EllipsisDirective.propDecorators = {
+            witdh: [{ type: core.Input, args: ['abpEllipsis',] }],
+            title: [{ type: core.HostBinding, args: ['title',] }, { type: core.Input }],
+            enabled: [{ type: core.HostBinding, args: ['class.abp-ellipsis',] }],
+            maxWidth: [{ type: core.HostBinding, args: ['style.max-width',] }]
+        };
+        return EllipsisDirective;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1933,6 +1994,7 @@
                             PermissionDirective,
                             VisibilityDirective,
                             LocalizationPipe,
+                            EllipsisDirective,
                         ],
                         exports: [
                             common.CommonModule,
@@ -1944,6 +2006,7 @@
                             DynamicLayoutComponent,
                             PermissionDirective,
                             VisibilityDirective,
+                            EllipsisDirective,
                             LocalizationPipe,
                         ],
                         providers: [LocalizationPipe],
@@ -1964,6 +2027,7 @@
     exports.CoreModule = CoreModule;
     exports.DynamicLayoutComponent = DynamicLayoutComponent;
     exports.ENVIRONMENT = ENVIRONMENT;
+    exports.EllipsisDirective = EllipsisDirective;
     exports.LazyLoadService = LazyLoadService;
     exports.LoaderStart = LoaderStart;
     exports.LoaderStop = LoaderStop;
@@ -2009,10 +2073,11 @@
     exports.ɵq = PermissionDirective;
     exports.ɵr = VisibilityDirective;
     exports.ɵs = LocalizationPipe;
-    exports.ɵt = NGXS_CONFIG_PLUGIN_OPTIONS;
-    exports.ɵu = ConfigPlugin;
-    exports.ɵw = ApiInterceptor;
-    exports.ɵx = getInitialData;
+    exports.ɵt = EllipsisDirective;
+    exports.ɵu = NGXS_CONFIG_PLUGIN_OPTIONS;
+    exports.ɵv = ConfigPlugin;
+    exports.ɵx = ApiInterceptor;
+    exports.ɵy = getInitialData;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

npm/ng-packs/dist/core/esm2015/abp-ng.core.js

@@ -5,17 +5,18 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage, DynamicLayoutComponent, RouterOutletComponent, PermissionDirective, VisibilityDirective, AuthGuard, PermissionGuard, ApiInterceptor, Rest, NGXS_CONFIG_PLUGIN_OPTIONS, ConfigPlugin, ApplicationConfigurationService, ConfigService, LazyLoadService, LocalizationService, ProfileService, RestService, ProfileState, ConfigState, SessionState, environmentFactory, configFactory, ENVIRONMENT, CONFIG, uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, CoreModule } from './public-api';
+export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage, DynamicLayoutComponent, RouterOutletComponent, EllipsisDirective, PermissionDirective, VisibilityDirective, AuthGuard, PermissionGuard, ApiInterceptor, Rest, NGXS_CONFIG_PLUGIN_OPTIONS, ConfigPlugin, ApplicationConfigurationService, ConfigService, LazyLoadService, LocalizationService, ProfileService, RestService, ProfileState, ConfigState, SessionState, environmentFactory, configFactory, ENVIRONMENT, CONFIG, uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, CoreModule } from './public-api';
 export { ConfigGetAppConfiguration as ɵm, PatchRouteByName as ɵl } from './lib/actions/config.actions';
 export { ProfileChangePassword as ɵf, ProfileGet as ɵd, ProfileUpdate as ɵe } from './lib/actions/profile.actions';
 export { SessionSetLanguage as ɵi } from './lib/actions/session.actions';
 export { DynamicLayoutComponent as ɵo } from './lib/components/dynamic-layout.component';
 export { RouterOutletComponent as ɵn } from './lib/components/router-outlet.component';
+export { EllipsisDirective as ɵt } from './lib/directives/ellipsis.directive';
 export { PermissionDirective as ɵq } from './lib/directives/permission.directive';
 export { VisibilityDirective as ɵr } from './lib/directives/visibility.directive';
-export { ApiInterceptor as ɵw } from './lib/interceptors/api.interceptor';
+export { ApiInterceptor as ɵx } from './lib/interceptors/api.interceptor';
 export { LocalizationPipe as ɵs } from './lib/pipes/localization.pipe';
-export { ConfigPlugin as ɵu, NGXS_CONFIG_PLUGIN_OPTIONS as ɵt } from './lib/plugins/config.plugin';
+export { ConfigPlugin as ɵv, NGXS_CONFIG_PLUGIN_OPTIONS as ɵu } from './lib/plugins/config.plugin';
 export { ApplicationConfigurationService as ɵk } from './lib/services/application-configuration.service';
 export { ProfileService as ɵb } from './lib/services/profile.service';
 export { RestService as ɵc } from './lib/services/rest.service';
@@ -23,5 +24,5 @@ export { ConfigState as ɵp } from './lib/states';
 export { ConfigState as ɵj } from './lib/states/config.state';
 export { ProfileState as ɵa } from './lib/states/profile.state';
 export { SessionState as ɵh } from './lib/states/session.state';
-export { getInitialData as ɵx } from './lib/utils/initial-utils';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJwLW5nLmNvcmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJhYnAtbmcuY29yZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBSUEsbXBCQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMseUJBQXlCLElBQUksRUFBRSxFQUFDLGdCQUFnQixJQUFJLEVBQUUsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3BHLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsVUFBVSxJQUFJLEVBQUUsRUFBQyxhQUFhLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDL0csT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ3ZFLE9BQU8sRUFBQyxzQkFBc0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUN2RixPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sMENBQTBDLENBQUM7QUFDckYsT0FBTyxFQUFDLG1CQUFtQixJQUFJLEVBQUUsRUFBQyxNQUFNLHVDQUF1QyxDQUFDO0FBQ2hGLE9BQU8sRUFBQyxtQkFBbUIsSUFBSSxFQUFFLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBRXhFLE9BQU8sRUFBQyxnQkFBZ0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUNyRSxPQUFPLEVBQUMsWUFBWSxJQUFJLEVBQUUsRUFBQywwQkFBMEIsSUFBSSxFQUFFLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUNoRyxPQUFPLEVBQUMsK0JBQStCLElBQUksRUFBRSxFQUFDLE1BQU0sa0RBQWtELENBQUM7QUFDdkcsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQzlELE9BQU8sRUFBQyxXQUFXLElBQUksRUFBRSxFQUFDLE1BQU0sY0FBYyxDQUFDO0FBQy9DLE9BQU8sRUFBQyxXQUFXLElBQUksRUFBRSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsWUFBWSxJQUFJLEVBQUUsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBQyxjQUFjLElBQUksRUFBRSxFQUFDLE1BQU0sMkJBQTJCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG5cbmV4cG9ydCB7Q29uZmlnR2V0QXBwQ29uZmlndXJhdGlvbiBhcyDJtW0sUGF0Y2hSb3V0ZUJ5TmFtZSBhcyDJtWx9IGZyb20gJy4vbGliL2FjdGlvbnMvY29uZmlnLmFjdGlvbnMnO1xuZXhwb3J0IHtQcm9maWxlQ2hhbmdlUGFzc3dvcmQgYXMgybVmLFByb2ZpbGVHZXQgYXMgybVkLFByb2ZpbGVVcGRhdGUgYXMgybVlfSBmcm9tICcuL2xpYi9hY3Rpb25zL3Byb2ZpbGUuYWN0aW9ucyc7XG5leHBvcnQge1Nlc3Npb25TZXRMYW5ndWFnZSBhcyDJtWl9IGZyb20gJy4vbGliL2FjdGlvbnMvc2Vzc2lvbi5hY3Rpb25zJztcbmV4cG9ydCB7RHluYW1pY0xheW91dENvbXBvbmVudCBhcyDJtW99IGZyb20gJy4vbGliL2NvbXBvbmVudHMvZHluYW1pYy1sYXlvdXQuY29tcG9uZW50JztcbmV4cG9ydCB7Um91dGVyT3V0bGV0Q29tcG9uZW50IGFzIMm1bn0gZnJvbSAnLi9saWIvY29tcG9uZW50cy9yb3V0ZXItb3V0bGV0LmNvbXBvbmVudCc7XG5leHBvcnQge1Blcm1pc3Npb25EaXJlY3RpdmUgYXMgybVxfSBmcm9tICcuL2xpYi9kaXJlY3RpdmVzL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCB7VmlzaWJpbGl0eURpcmVjdGl2ZSBhcyDJtXJ9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuZXhwb3J0IHtBcGlJbnRlcmNlcHRvciBhcyDJtXd9IGZyb20gJy4vbGliL2ludGVyY2VwdG9ycy9hcGkuaW50ZXJjZXB0b3InO1xuZXhwb3J0IHtBQlAgYXMgybV2LFByb2ZpbGUgYXMgybVnfSBmcm9tICcuL2xpYi9tb2RlbHMnO1xuZXhwb3J0IHtMb2NhbGl6YXRpb25QaXBlIGFzIMm1c30gZnJvbSAnLi9saWIvcGlwZXMvbG9jYWxpemF0aW9uLnBpcGUnO1xuZXhwb3J0IHtDb25maWdQbHVnaW4gYXMgybV1LE5HWFNfQ09ORklHX1BMVUdJTl9PUFRJT05TIGFzIMm1dH0gZnJvbSAnLi9saWIvcGx1Z2lucy9jb25maWcucGx1Z2luJztcbmV4cG9ydCB7QXBwbGljYXRpb25Db25maWd1cmF0aW9uU2VydmljZSBhcyDJtWt9IGZyb20gJy4vbGliL3NlcnZpY2VzL2FwcGxpY2F0aW9uLWNvbmZpZ3VyYXRpb24uc2VydmljZSc7XG5leHBvcnQge1Byb2ZpbGVTZXJ2aWNlIGFzIMm1Yn0gZnJvbSAnLi9saWIvc2VydmljZXMvcHJvZmlsZS5zZXJ2aWNlJztcbmV4cG9ydCB7UmVzdFNlcnZpY2UgYXMgybVjfSBmcm9tICcuL2xpYi9zZXJ2aWNlcy9yZXN0LnNlcnZpY2UnO1xuZXhwb3J0IHtDb25maWdTdGF0ZSBhcyDJtXB9IGZyb20gJy4vbGliL3N0YXRlcyc7XG5leHBvcnQge0NvbmZpZ1N0YXRlIGFzIMm1an0gZnJvbSAnLi9saWIvc3RhdGVzL2NvbmZpZy5zdGF0ZSc7XG5leHBvcnQge1Byb2ZpbGVTdGF0ZSBhcyDJtWF9IGZyb20gJy4vbGliL3N0YXRlcy9wcm9maWxlLnN0YXRlJztcbmV4cG9ydCB7U2Vzc2lvblN0YXRlIGFzIMm1aH0gZnJvbSAnLi9saWIvc3RhdGVzL3Nlc3Npb24uc3RhdGUnO1xuZXhwb3J0IHtnZXRJbml0aWFsRGF0YSBhcyDJtXh9IGZyb20gJy4vbGliL3V0aWxzL2luaXRpYWwtdXRpbHMnOyJdfQ==
+export { getInitialData as ɵy } from './lib/utils/initial-utils';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJwLW5nLmNvcmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJhYnAtbmcuY29yZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBSUEsc3FCQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMseUJBQXlCLElBQUksRUFBRSxFQUFDLGdCQUFnQixJQUFJLEVBQUUsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3BHLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsVUFBVSxJQUFJLEVBQUUsRUFBQyxhQUFhLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDL0csT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ3ZFLE9BQU8sRUFBQyxzQkFBc0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUN2RixPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sMENBQTBDLENBQUM7QUFDckYsT0FBTyxFQUFDLGlCQUFpQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQzVFLE9BQU8sRUFBQyxtQkFBbUIsSUFBSSxFQUFFLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsbUJBQW1CLElBQUksRUFBRSxFQUFDLE1BQU0sdUNBQXVDLENBQUM7QUFDaEYsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUV4RSxPQUFPLEVBQUMsZ0JBQWdCLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDckUsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsMEJBQTBCLElBQUksRUFBRSxFQUFDLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFDLCtCQUErQixJQUFJLEVBQUUsRUFBQyxNQUFNLGtEQUFrRCxDQUFDO0FBQ3ZHLE9BQU8sRUFBQyxjQUFjLElBQUksRUFBRSxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDcEUsT0FBTyxFQUFDLFdBQVcsSUFBSSxFQUFFLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLGNBQWMsQ0FBQztBQUMvQyxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBQyxZQUFZLElBQUksRUFBRSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuXG5leHBvcnQge0NvbmZpZ0dldEFwcENvbmZpZ3VyYXRpb24gYXMgybVtLFBhdGNoUm91dGVCeU5hbWUgYXMgybVsfSBmcm9tICcuL2xpYi9hY3Rpb25zL2NvbmZpZy5hY3Rpb25zJztcbmV4cG9ydCB7UHJvZmlsZUNoYW5nZVBhc3N3b3JkIGFzIMm1ZixQcm9maWxlR2V0IGFzIMm1ZCxQcm9maWxlVXBkYXRlIGFzIMm1ZX0gZnJvbSAnLi9saWIvYWN0aW9ucy9wcm9maWxlLmFjdGlvbnMnO1xuZXhwb3J0IHtTZXNzaW9uU2V0TGFuZ3VhZ2UgYXMgybVpfSBmcm9tICcuL2xpYi9hY3Rpb25zL3Nlc3Npb24uYWN0aW9ucyc7XG5leHBvcnQge0R5bmFtaWNMYXlvdXRDb21wb25lbnQgYXMgybVvfSBmcm9tICcuL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtbGF5b3V0LmNvbXBvbmVudCc7XG5leHBvcnQge1JvdXRlck91dGxldENvbXBvbmVudCBhcyDJtW59IGZyb20gJy4vbGliL2NvbXBvbmVudHMvcm91dGVyLW91dGxldC5jb21wb25lbnQnO1xuZXhwb3J0IHtFbGxpcHNpc0RpcmVjdGl2ZSBhcyDJtXR9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvZWxsaXBzaXMuZGlyZWN0aXZlJztcbmV4cG9ydCB7UGVybWlzc2lvbkRpcmVjdGl2ZSBhcyDJtXF9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvcGVybWlzc2lvbi5kaXJlY3RpdmUnO1xuZXhwb3J0IHtWaXNpYmlsaXR5RGlyZWN0aXZlIGFzIMm1cn0gZnJvbSAnLi9saWIvZGlyZWN0aXZlcy92aXNpYmlsaXR5LmRpcmVjdGl2ZSc7XG5leHBvcnQge0FwaUludGVyY2VwdG9yIGFzIMm1eH0gZnJvbSAnLi9saWIvaW50ZXJjZXB0b3JzL2FwaS5pbnRlcmNlcHRvcic7XG5leHBvcnQge0FCUCBhcyDJtXcsUHJvZmlsZSBhcyDJtWd9IGZyb20gJy4vbGliL21vZGVscyc7XG5leHBvcnQge0xvY2FsaXphdGlvblBpcGUgYXMgybVzfSBmcm9tICcuL2xpYi9waXBlcy9sb2NhbGl6YXRpb24ucGlwZSc7XG5leHBvcnQge0NvbmZpZ1BsdWdpbiBhcyDJtXYsTkdYU19DT05GSUdfUExVR0lOX09QVElPTlMgYXMgybV1fSBmcm9tICcuL2xpYi9wbHVnaW5zL2NvbmZpZy5wbHVnaW4nO1xuZXhwb3J0IHtBcHBsaWNhdGlvbkNvbmZpZ3VyYXRpb25TZXJ2aWNlIGFzIMm1a30gZnJvbSAnLi9saWIvc2VydmljZXMvYXBwbGljYXRpb24tY29uZmlndXJhdGlvbi5zZXJ2aWNlJztcbmV4cG9ydCB7UHJvZmlsZVNlcnZpY2UgYXMgybVifSBmcm9tICcuL2xpYi9zZXJ2aWNlcy9wcm9maWxlLnNlcnZpY2UnO1xuZXhwb3J0IHtSZXN0U2VydmljZSBhcyDJtWN9IGZyb20gJy4vbGliL3NlcnZpY2VzL3Jlc3Quc2VydmljZSc7XG5leHBvcnQge0NvbmZpZ1N0YXRlIGFzIMm1cH0gZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCB7Q29uZmlnU3RhdGUgYXMgybVqfSBmcm9tICcuL2xpYi9zdGF0ZXMvY29uZmlnLnN0YXRlJztcbmV4cG9ydCB7UHJvZmlsZVN0YXRlIGFzIMm1YX0gZnJvbSAnLi9saWIvc3RhdGVzL3Byb2ZpbGUuc3RhdGUnO1xuZXhwb3J0IHtTZXNzaW9uU3RhdGUgYXMgybVofSBmcm9tICcuL2xpYi9zdGF0ZXMvc2Vzc2lvbi5zdGF0ZSc7XG5leHBvcnQge2dldEluaXRpYWxEYXRhIGFzIMm1eX0gZnJvbSAnLi9saWIvdXRpbHMvaW5pdGlhbC11dGlscyc7Il19

npm/ng-packs/dist/core/esm2015/lib/directives/ellipsis.directive.js

@@ -0,0 +1,73 @@
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+export class EllipsisDirective {
+    /**
+     * @param {?} cdRef
+     * @param {?} elRef
+     */
+    constructor(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
+    }
+    /**
+     * @return {?}
+     */
+    get maxWidth() {
+        return this.witdh || '180px';
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterContentInit() {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            const title = this.title;
+            this.title = title || ((/** @type {?} */ (this.elRef.nativeElement))).innerText;
+            if (this.title !== title) {
+                this.cdRef.detectChanges();
+            }
+        }), 0);
+    }
+}
+EllipsisDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[abpEllipsis]',
+            },] }
+];
+/** @nocollapse */
+EllipsisDirective.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+EllipsisDirective.propDecorators = {
+    witdh: [{ type: Input, args: ['abpEllipsis',] }],
+    title: [{ type: HostBinding, args: ['title',] }, { type: Input }],
+    enabled: [{ type: HostBinding, args: ['class.abp-ellipsis',] }],
+    maxWidth: [{ type: HostBinding, args: ['style.max-width',] }]
+};
+if (false) {
+    /** @type {?} */
+    EllipsisDirective.prototype.witdh;
+    /** @type {?} */
+    EllipsisDirective.prototype.title;
+    /** @type {?} */
+    EllipsisDirective.prototype.enabled;
+    /**
+     * @type {?}
+     * @private
+     */
+    EllipsisDirective.prototype.cdRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    EllipsisDirective.prototype.elRef;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxsaXBzaXMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5jb3JlLyIsInNvdXJjZXMiOlsibGliL2RpcmVjdGl2ZXMvZWxsaXBzaXMuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQW9CLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUsvRyxNQUFNLE9BQU8saUJBQWlCOzs7OztJQWdCNUIsWUFBb0IsS0FBd0IsRUFBVSxLQUFpQjtRQUFuRCxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUFVLFVBQUssR0FBTCxLQUFLLENBQVk7UUFQdkUsWUFBTyxHQUFHLElBQUksQ0FBQztJQU8yRCxDQUFDOzs7O0lBTDNFLElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxPQUFPLENBQUM7SUFDL0IsQ0FBQzs7OztJQUlELGtCQUFrQjtRQUNoQixVQUFVOzs7UUFBQyxHQUFHLEVBQUU7O2tCQUNSLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSztZQUN4QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssSUFBSSxDQUFDLG1CQUFBLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFlLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFFMUUsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUssRUFBRTtnQkFDeEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEVBQUUsQ0FBQzthQUM1QjtRQUNILENBQUMsR0FBRSxDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7OztZQTlCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGVBQWU7YUFDMUI7Ozs7WUFKMEIsaUJBQWlCO1lBQWEsVUFBVTs7O29CQU1oRSxLQUFLLFNBQUMsYUFBYTtvQkFHbkIsV0FBVyxTQUFDLE9BQU8sY0FDbkIsS0FBSztzQkFHTCxXQUFXLFNBQUMsb0JBQW9CO3VCQUdoQyxXQUFXLFNBQUMsaUJBQWlCOzs7O0lBVjlCLGtDQUNjOztJQUVkLGtDQUVjOztJQUVkLG9DQUNlOzs7OztJQU9ILGtDQUFnQzs7Ozs7SUFBRSxrQ0FBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDaGFuZ2VEZXRlY3RvclJlZiwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FicEVsbGlwc2lzXScsXG59KVxuZXhwb3J0IGNsYXNzIEVsbGlwc2lzRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIEBJbnB1dCgnYWJwRWxsaXBzaXMnKVxuICB3aXRkaDogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygndGl0bGUnKVxuICBASW5wdXQoKVxuICB0aXRsZTogc3RyaW5nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYWJwLWVsbGlwc2lzJylcbiAgZW5hYmxlZCA9IHRydWU7XG5cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS5tYXgtd2lkdGgnKVxuICBnZXQgbWF4V2lkdGgoKSB7XG4gICAgcmV0dXJuIHRoaXMud2l0ZGggfHwgJzE4MHB4JztcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmLCBwcml2YXRlIGVsUmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGNvbnN0IHRpdGxlID0gdGhpcy50aXRsZTtcbiAgICAgIHRoaXMudGl0bGUgPSB0aXRsZSB8fCAodGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50KS5pbm5lclRleHQ7XG5cbiAgICAgIGlmICh0aGlzLnRpdGxlICE9PSB0aXRsZSkge1xuICAgICAgICB0aGlzLmNkUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH1cbiAgICB9LCAwKTtcbiAgfVxufVxuIl19

npm/ng-packs/dist/core/esm2015/lib/directives/index.js

@@ -2,6 +2,7 @@
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+export { EllipsisDirective } from './ellipsis.directive';
 export { PermissionDirective } from './permission.directive';
 export { VisibilityDirective } from './visibility.directive';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJsaWIvZGlyZWN0aXZlcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsb0NBQWMsd0JBQXdCLENBQUM7QUFDdkMsb0NBQWMsd0JBQXdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJsaWIvZGlyZWN0aXZlcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsa0NBQWMsc0JBQXNCLENBQUM7QUFDckMsb0NBQWMsd0JBQXdCLENBQUM7QUFDdkMsb0NBQWMsd0JBQXdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2VsbGlwc2lzLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuIl19

npm/ng-packs/dist/core/esm2015/public-api.js

@@ -9,7 +9,7 @@
 export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage } from './lib/actions';
 export { DynamicLayoutComponent, RouterOutletComponent } from './lib/components';
 // export * from './lib/constants';
-export { PermissionDirective, VisibilityDirective } from './lib/directives';
+export { EllipsisDirective, PermissionDirective, VisibilityDirective } from './lib/directives';
 export {} from './lib/enums';
 export { AuthGuard, PermissionGuard } from './lib/guards';
 export { ApiInterceptor } from './lib/interceptors';
@@ -20,4 +20,4 @@ export { ProfileState, ConfigState, SessionState } from './lib/states';
 export { environmentFactory, configFactory, ENVIRONMENT, CONFIG } from './lib/tokens';
 export { uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy } from './lib/utils';
 export { CoreModule } from './lib/core.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhYnAvbmcuY29yZS8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFLQSwyS0FBYyxlQUFlLENBQUM7QUFDOUIsOERBQWMsa0JBQWtCLENBQUM7O0FBRWpDLHlEQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGVBQWMsYUFBYSxDQUFDO0FBQzVCLDJDQUFjLGNBQWMsQ0FBQztBQUM3QiwrQkFBYyxvQkFBb0IsQ0FBQztBQUNuQyxxQkFBYyxjQUFjLENBQUM7QUFDN0IseURBQWMsZUFBZSxDQUFDO0FBQzlCLGtJQUFjLGdCQUFnQixDQUFDO0FBQy9CLHdEQUFjLGNBQWMsQ0FBQztBQUM3Qix1RUFBYyxjQUFjLENBQUM7QUFDN0Isa0dBQWMsYUFBYSxDQUFDO0FBRTVCLDJCQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb3JlXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvaGFuZGxlcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9ucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL2NvbnN0YW50cyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudW1zJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2d1YXJkcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbnRlcmNlcHRvcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kZWxzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BsdWdpbnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VydmljZXMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3Rva2Vucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvcmUubW9kdWxlJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhYnAvbmcuY29yZS8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFLQSwyS0FBYyxlQUFlLENBQUM7QUFDOUIsOERBQWMsa0JBQWtCLENBQUM7O0FBRWpDLDRFQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGVBQWMsYUFBYSxDQUFDO0FBQzVCLDJDQUFjLGNBQWMsQ0FBQztBQUM3QiwrQkFBYyxvQkFBb0IsQ0FBQztBQUNuQyxxQkFBYyxjQUFjLENBQUM7QUFDN0IseURBQWMsZUFBZSxDQUFDO0FBQzlCLGtJQUFjLGdCQUFnQixDQUFDO0FBQy9CLHdEQUFjLGNBQWMsQ0FBQztBQUM3Qix1RUFBYyxjQUFjLENBQUM7QUFDN0Isa0dBQWMsYUFBYSxDQUFDO0FBRTVCLDJCQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb3JlXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvaGFuZGxlcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9ucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL2NvbnN0YW50cyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudW1zJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2d1YXJkcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbnRlcmNlcHRvcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kZWxzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BsdWdpbnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VydmljZXMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3Rva2Vucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvcmUubW9kdWxlJztcbiJdfQ==

npm/ng-packs/dist/core/esm5/abp-ng.core.js

@@ -5,17 +5,18 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage, DynamicLayoutComponent, RouterOutletComponent, PermissionDirective, VisibilityDirective, AuthGuard, PermissionGuard, ApiInterceptor, Rest, NGXS_CONFIG_PLUGIN_OPTIONS, ConfigPlugin, ApplicationConfigurationService, ConfigService, LazyLoadService, LocalizationService, ProfileService, RestService, ProfileState, ConfigState, SessionState, environmentFactory, configFactory, ENVIRONMENT, CONFIG, uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, CoreModule } from './public-api';
+export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage, DynamicLayoutComponent, RouterOutletComponent, EllipsisDirective, PermissionDirective, VisibilityDirective, AuthGuard, PermissionGuard, ApiInterceptor, Rest, NGXS_CONFIG_PLUGIN_OPTIONS, ConfigPlugin, ApplicationConfigurationService, ConfigService, LazyLoadService, LocalizationService, ProfileService, RestService, ProfileState, ConfigState, SessionState, environmentFactory, configFactory, ENVIRONMENT, CONFIG, uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, CoreModule } from './public-api';
 export { ConfigGetAppConfiguration as ɵm, PatchRouteByName as ɵl } from './lib/actions/config.actions';
 export { ProfileChangePassword as ɵf, ProfileGet as ɵd, ProfileUpdate as ɵe } from './lib/actions/profile.actions';
 export { SessionSetLanguage as ɵi } from './lib/actions/session.actions';
 export { DynamicLayoutComponent as ɵo } from './lib/components/dynamic-layout.component';
 export { RouterOutletComponent as ɵn } from './lib/components/router-outlet.component';
+export { EllipsisDirective as ɵt } from './lib/directives/ellipsis.directive';
 export { PermissionDirective as ɵq } from './lib/directives/permission.directive';
 export { VisibilityDirective as ɵr } from './lib/directives/visibility.directive';
-export { ApiInterceptor as ɵw } from './lib/interceptors/api.interceptor';
+export { ApiInterceptor as ɵx } from './lib/interceptors/api.interceptor';
 export { LocalizationPipe as ɵs } from './lib/pipes/localization.pipe';
-export { ConfigPlugin as ɵu, NGXS_CONFIG_PLUGIN_OPTIONS as ɵt } from './lib/plugins/config.plugin';
+export { ConfigPlugin as ɵv, NGXS_CONFIG_PLUGIN_OPTIONS as ɵu } from './lib/plugins/config.plugin';
 export { ApplicationConfigurationService as ɵk } from './lib/services/application-configuration.service';
 export { ProfileService as ɵb } from './lib/services/profile.service';
 export { RestService as ɵc } from './lib/services/rest.service';
@@ -23,5 +24,5 @@ export { ConfigState as ɵp } from './lib/states';
 export { ConfigState as ɵj } from './lib/states/config.state';
 export { ProfileState as ɵa } from './lib/states/profile.state';
 export { SessionState as ɵh } from './lib/states/session.state';
-export { getInitialData as ɵx } from './lib/utils/initial-utils';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJwLW5nLmNvcmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJhYnAtbmcuY29yZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBSUEsbXBCQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMseUJBQXlCLElBQUksRUFBRSxFQUFDLGdCQUFnQixJQUFJLEVBQUUsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3BHLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsVUFBVSxJQUFJLEVBQUUsRUFBQyxhQUFhLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDL0csT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ3ZFLE9BQU8sRUFBQyxzQkFBc0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUN2RixPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sMENBQTBDLENBQUM7QUFDckYsT0FBTyxFQUFDLG1CQUFtQixJQUFJLEVBQUUsRUFBQyxNQUFNLHVDQUF1QyxDQUFDO0FBQ2hGLE9BQU8sRUFBQyxtQkFBbUIsSUFBSSxFQUFFLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBRXhFLE9BQU8sRUFBQyxnQkFBZ0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUNyRSxPQUFPLEVBQUMsWUFBWSxJQUFJLEVBQUUsRUFBQywwQkFBMEIsSUFBSSxFQUFFLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUNoRyxPQUFPLEVBQUMsK0JBQStCLElBQUksRUFBRSxFQUFDLE1BQU0sa0RBQWtELENBQUM7QUFDdkcsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQzlELE9BQU8sRUFBQyxXQUFXLElBQUksRUFBRSxFQUFDLE1BQU0sY0FBYyxDQUFDO0FBQy9DLE9BQU8sRUFBQyxXQUFXLElBQUksRUFBRSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsWUFBWSxJQUFJLEVBQUUsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBQyxjQUFjLElBQUksRUFBRSxFQUFDLE1BQU0sMkJBQTJCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG5cbmV4cG9ydCB7Q29uZmlnR2V0QXBwQ29uZmlndXJhdGlvbiBhcyDJtW0sUGF0Y2hSb3V0ZUJ5TmFtZSBhcyDJtWx9IGZyb20gJy4vbGliL2FjdGlvbnMvY29uZmlnLmFjdGlvbnMnO1xuZXhwb3J0IHtQcm9maWxlQ2hhbmdlUGFzc3dvcmQgYXMgybVmLFByb2ZpbGVHZXQgYXMgybVkLFByb2ZpbGVVcGRhdGUgYXMgybVlfSBmcm9tICcuL2xpYi9hY3Rpb25zL3Byb2ZpbGUuYWN0aW9ucyc7XG5leHBvcnQge1Nlc3Npb25TZXRMYW5ndWFnZSBhcyDJtWl9IGZyb20gJy4vbGliL2FjdGlvbnMvc2Vzc2lvbi5hY3Rpb25zJztcbmV4cG9ydCB7RHluYW1pY0xheW91dENvbXBvbmVudCBhcyDJtW99IGZyb20gJy4vbGliL2NvbXBvbmVudHMvZHluYW1pYy1sYXlvdXQuY29tcG9uZW50JztcbmV4cG9ydCB7Um91dGVyT3V0bGV0Q29tcG9uZW50IGFzIMm1bn0gZnJvbSAnLi9saWIvY29tcG9uZW50cy9yb3V0ZXItb3V0bGV0LmNvbXBvbmVudCc7XG5leHBvcnQge1Blcm1pc3Npb25EaXJlY3RpdmUgYXMgybVxfSBmcm9tICcuL2xpYi9kaXJlY3RpdmVzL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCB7VmlzaWJpbGl0eURpcmVjdGl2ZSBhcyDJtXJ9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuZXhwb3J0IHtBcGlJbnRlcmNlcHRvciBhcyDJtXd9IGZyb20gJy4vbGliL2ludGVyY2VwdG9ycy9hcGkuaW50ZXJjZXB0b3InO1xuZXhwb3J0IHtBQlAgYXMgybV2LFByb2ZpbGUgYXMgybVnfSBmcm9tICcuL2xpYi9tb2RlbHMnO1xuZXhwb3J0IHtMb2NhbGl6YXRpb25QaXBlIGFzIMm1c30gZnJvbSAnLi9saWIvcGlwZXMvbG9jYWxpemF0aW9uLnBpcGUnO1xuZXhwb3J0IHtDb25maWdQbHVnaW4gYXMgybV1LE5HWFNfQ09ORklHX1BMVUdJTl9PUFRJT05TIGFzIMm1dH0gZnJvbSAnLi9saWIvcGx1Z2lucy9jb25maWcucGx1Z2luJztcbmV4cG9ydCB7QXBwbGljYXRpb25Db25maWd1cmF0aW9uU2VydmljZSBhcyDJtWt9IGZyb20gJy4vbGliL3NlcnZpY2VzL2FwcGxpY2F0aW9uLWNvbmZpZ3VyYXRpb24uc2VydmljZSc7XG5leHBvcnQge1Byb2ZpbGVTZXJ2aWNlIGFzIMm1Yn0gZnJvbSAnLi9saWIvc2VydmljZXMvcHJvZmlsZS5zZXJ2aWNlJztcbmV4cG9ydCB7UmVzdFNlcnZpY2UgYXMgybVjfSBmcm9tICcuL2xpYi9zZXJ2aWNlcy9yZXN0LnNlcnZpY2UnO1xuZXhwb3J0IHtDb25maWdTdGF0ZSBhcyDJtXB9IGZyb20gJy4vbGliL3N0YXRlcyc7XG5leHBvcnQge0NvbmZpZ1N0YXRlIGFzIMm1an0gZnJvbSAnLi9saWIvc3RhdGVzL2NvbmZpZy5zdGF0ZSc7XG5leHBvcnQge1Byb2ZpbGVTdGF0ZSBhcyDJtWF9IGZyb20gJy4vbGliL3N0YXRlcy9wcm9maWxlLnN0YXRlJztcbmV4cG9ydCB7U2Vzc2lvblN0YXRlIGFzIMm1aH0gZnJvbSAnLi9saWIvc3RhdGVzL3Nlc3Npb24uc3RhdGUnO1xuZXhwb3J0IHtnZXRJbml0aWFsRGF0YSBhcyDJtXh9IGZyb20gJy4vbGliL3V0aWxzL2luaXRpYWwtdXRpbHMnOyJdfQ==
+export { getInitialData as ɵy } from './lib/utils/initial-utils';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJwLW5nLmNvcmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJhYnAtbmcuY29yZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBSUEsc3FCQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMseUJBQXlCLElBQUksRUFBRSxFQUFDLGdCQUFnQixJQUFJLEVBQUUsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3BHLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsVUFBVSxJQUFJLEVBQUUsRUFBQyxhQUFhLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDL0csT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ3ZFLE9BQU8sRUFBQyxzQkFBc0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUN2RixPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sMENBQTBDLENBQUM7QUFDckYsT0FBTyxFQUFDLGlCQUFpQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQzVFLE9BQU8sRUFBQyxtQkFBbUIsSUFBSSxFQUFFLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsbUJBQW1CLElBQUksRUFBRSxFQUFDLE1BQU0sdUNBQXVDLENBQUM7QUFDaEYsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUV4RSxPQUFPLEVBQUMsZ0JBQWdCLElBQUksRUFBRSxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDckUsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsMEJBQTBCLElBQUksRUFBRSxFQUFDLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFDLCtCQUErQixJQUFJLEVBQUUsRUFBQyxNQUFNLGtEQUFrRCxDQUFDO0FBQ3ZHLE9BQU8sRUFBQyxjQUFjLElBQUksRUFBRSxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDcEUsT0FBTyxFQUFDLFdBQVcsSUFBSSxFQUFFLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLGNBQWMsQ0FBQztBQUMvQyxPQUFPLEVBQUMsV0FBVyxJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBQyxZQUFZLElBQUksRUFBRSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFDLFlBQVksSUFBSSxFQUFFLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuXG5leHBvcnQge0NvbmZpZ0dldEFwcENvbmZpZ3VyYXRpb24gYXMgybVtLFBhdGNoUm91dGVCeU5hbWUgYXMgybVsfSBmcm9tICcuL2xpYi9hY3Rpb25zL2NvbmZpZy5hY3Rpb25zJztcbmV4cG9ydCB7UHJvZmlsZUNoYW5nZVBhc3N3b3JkIGFzIMm1ZixQcm9maWxlR2V0IGFzIMm1ZCxQcm9maWxlVXBkYXRlIGFzIMm1ZX0gZnJvbSAnLi9saWIvYWN0aW9ucy9wcm9maWxlLmFjdGlvbnMnO1xuZXhwb3J0IHtTZXNzaW9uU2V0TGFuZ3VhZ2UgYXMgybVpfSBmcm9tICcuL2xpYi9hY3Rpb25zL3Nlc3Npb24uYWN0aW9ucyc7XG5leHBvcnQge0R5bmFtaWNMYXlvdXRDb21wb25lbnQgYXMgybVvfSBmcm9tICcuL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtbGF5b3V0LmNvbXBvbmVudCc7XG5leHBvcnQge1JvdXRlck91dGxldENvbXBvbmVudCBhcyDJtW59IGZyb20gJy4vbGliL2NvbXBvbmVudHMvcm91dGVyLW91dGxldC5jb21wb25lbnQnO1xuZXhwb3J0IHtFbGxpcHNpc0RpcmVjdGl2ZSBhcyDJtXR9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvZWxsaXBzaXMuZGlyZWN0aXZlJztcbmV4cG9ydCB7UGVybWlzc2lvbkRpcmVjdGl2ZSBhcyDJtXF9IGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvcGVybWlzc2lvbi5kaXJlY3RpdmUnO1xuZXhwb3J0IHtWaXNpYmlsaXR5RGlyZWN0aXZlIGFzIMm1cn0gZnJvbSAnLi9saWIvZGlyZWN0aXZlcy92aXNpYmlsaXR5LmRpcmVjdGl2ZSc7XG5leHBvcnQge0FwaUludGVyY2VwdG9yIGFzIMm1eH0gZnJvbSAnLi9saWIvaW50ZXJjZXB0b3JzL2FwaS5pbnRlcmNlcHRvcic7XG5leHBvcnQge0FCUCBhcyDJtXcsUHJvZmlsZSBhcyDJtWd9IGZyb20gJy4vbGliL21vZGVscyc7XG5leHBvcnQge0xvY2FsaXphdGlvblBpcGUgYXMgybVzfSBmcm9tICcuL2xpYi9waXBlcy9sb2NhbGl6YXRpb24ucGlwZSc7XG5leHBvcnQge0NvbmZpZ1BsdWdpbiBhcyDJtXYsTkdYU19DT05GSUdfUExVR0lOX09QVElPTlMgYXMgybV1fSBmcm9tICcuL2xpYi9wbHVnaW5zL2NvbmZpZy5wbHVnaW4nO1xuZXhwb3J0IHtBcHBsaWNhdGlvbkNvbmZpZ3VyYXRpb25TZXJ2aWNlIGFzIMm1a30gZnJvbSAnLi9saWIvc2VydmljZXMvYXBwbGljYXRpb24tY29uZmlndXJhdGlvbi5zZXJ2aWNlJztcbmV4cG9ydCB7UHJvZmlsZVNlcnZpY2UgYXMgybVifSBmcm9tICcuL2xpYi9zZXJ2aWNlcy9wcm9maWxlLnNlcnZpY2UnO1xuZXhwb3J0IHtSZXN0U2VydmljZSBhcyDJtWN9IGZyb20gJy4vbGliL3NlcnZpY2VzL3Jlc3Quc2VydmljZSc7XG5leHBvcnQge0NvbmZpZ1N0YXRlIGFzIMm1cH0gZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCB7Q29uZmlnU3RhdGUgYXMgybVqfSBmcm9tICcuL2xpYi9zdGF0ZXMvY29uZmlnLnN0YXRlJztcbmV4cG9ydCB7UHJvZmlsZVN0YXRlIGFzIMm1YX0gZnJvbSAnLi9saWIvc3RhdGVzL3Byb2ZpbGUuc3RhdGUnO1xuZXhwb3J0IHtTZXNzaW9uU3RhdGUgYXMgybVofSBmcm9tICcuL2xpYi9zdGF0ZXMvc2Vzc2lvbi5zdGF0ZSc7XG5leHBvcnQge2dldEluaXRpYWxEYXRhIGFzIMm1eX0gZnJvbSAnLi9saWIvdXRpbHMvaW5pdGlhbC11dGlscyc7Il19

npm/ng-packs/dist/core/esm5/lib/directives/ellipsis.directive.js

@@ -0,0 +1,79 @@
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+var EllipsisDirective = /** @class */ (function () {
+    function EllipsisDirective(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
+    }
+    Object.defineProperty(EllipsisDirective.prototype, "maxWidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.witdh || '180px';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    EllipsisDirective.prototype.ngAfterContentInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var title = _this.title;
+            _this.title = title || ((/** @type {?} */ (_this.elRef.nativeElement))).innerText;
+            if (_this.title !== title) {
+                _this.cdRef.detectChanges();
+            }
+        }), 0);
+    };
+    EllipsisDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '[abpEllipsis]',
+                },] }
+    ];
+    /** @nocollapse */
+    EllipsisDirective.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
+    EllipsisDirective.propDecorators = {
+        witdh: [{ type: Input, args: ['abpEllipsis',] }],
+        title: [{ type: HostBinding, args: ['title',] }, { type: Input }],
+        enabled: [{ type: HostBinding, args: ['class.abp-ellipsis',] }],
+        maxWidth: [{ type: HostBinding, args: ['style.max-width',] }]
+    };
+    return EllipsisDirective;
+}());
+export { EllipsisDirective };
+if (false) {
+    /** @type {?} */
+    EllipsisDirective.prototype.witdh;
+    /** @type {?} */
+    EllipsisDirective.prototype.title;
+    /** @type {?} */
+    EllipsisDirective.prototype.enabled;
+    /**
+     * @type {?}
+     * @private
+     */
+    EllipsisDirective.prototype.cdRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    EllipsisDirective.prototype.elRef;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxsaXBzaXMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5jb3JlLyIsInNvdXJjZXMiOlsibGliL2RpcmVjdGl2ZXMvZWxsaXBzaXMuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQW9CLGlCQUFpQixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUvRztJQW1CRSwyQkFBb0IsS0FBd0IsRUFBVSxLQUFpQjtRQUFuRCxVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUFVLFVBQUssR0FBTCxLQUFLLENBQVk7UUFQdkUsWUFBTyxHQUFHLElBQUksQ0FBQztJQU8yRCxDQUFDO0lBTDNFLHNCQUNJLHVDQUFROzs7O1FBRFo7WUFFRSxPQUFPLElBQUksQ0FBQyxLQUFLLElBQUksT0FBTyxDQUFDO1FBQy9CLENBQUM7OztPQUFBOzs7O0lBSUQsOENBQWtCOzs7SUFBbEI7UUFBQSxpQkFTQztRQVJDLFVBQVU7OztRQUFDOztnQkFDSCxLQUFLLEdBQUcsS0FBSSxDQUFDLEtBQUs7WUFDeEIsS0FBSSxDQUFDLEtBQUssR0FBRyxLQUFLLElBQUksQ0FBQyxtQkFBQSxLQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBZSxDQUFDLENBQUMsU0FBUyxDQUFDO1lBRTFFLElBQUksS0FBSSxDQUFDLEtBQUssS0FBSyxLQUFLLEVBQUU7Z0JBQ3hCLEtBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFFLENBQUM7YUFDNUI7UUFDSCxDQUFDLEdBQUUsQ0FBQyxDQUFDLENBQUM7SUFDUixDQUFDOztnQkE5QkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO2lCQUMxQjs7OztnQkFKMEIsaUJBQWlCO2dCQUFhLFVBQVU7Ozt3QkFNaEUsS0FBSyxTQUFDLGFBQWE7d0JBR25CLFdBQVcsU0FBQyxPQUFPLGNBQ25CLEtBQUs7MEJBR0wsV0FBVyxTQUFDLG9CQUFvQjsyQkFHaEMsV0FBVyxTQUFDLGlCQUFpQjs7SUFpQmhDLHdCQUFDO0NBQUEsQUEvQkQsSUErQkM7U0E1QlksaUJBQWlCOzs7SUFDNUIsa0NBQ2M7O0lBRWQsa0NBRWM7O0lBRWQsb0NBQ2U7Ozs7O0lBT0gsa0NBQWdDOzs7OztJQUFFLGtDQUF5QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENoYW5nZURldGVjdG9yUmVmLCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbYWJwRWxsaXBzaXNdJyxcbn0pXG5leHBvcnQgY2xhc3MgRWxsaXBzaXNEaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgQElucHV0KCdhYnBFbGxpcHNpcycpXG4gIHdpdGRoOiBzdHJpbmc7XG5cbiAgQEhvc3RCaW5kaW5nKCd0aXRsZScpXG4gIEBJbnB1dCgpXG4gIHRpdGxlOiBzdHJpbmc7XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hYnAtZWxsaXBzaXMnKVxuICBlbmFibGVkID0gdHJ1ZTtcblxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLm1heC13aWR0aCcpXG4gIGdldCBtYXhXaWR0aCgpIHtcbiAgICByZXR1cm4gdGhpcy53aXRkaCB8fCAnMTgwcHgnO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgZWxSZWY6IEVsZW1lbnRSZWYpIHt9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgY29uc3QgdGl0bGUgPSB0aGlzLnRpdGxlO1xuICAgICAgdGhpcy50aXRsZSA9IHRpdGxlIHx8ICh0aGlzLmVsUmVmLm5hdGl2ZUVsZW1lbnQgYXMgSFRNTEVsZW1lbnQpLmlubmVyVGV4dDtcblxuICAgICAgaWYgKHRoaXMudGl0bGUgIT09IHRpdGxlKSB7XG4gICAgICAgIHRoaXMuY2RSZWYuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfVxuICAgIH0sIDApO1xuICB9XG59XG4iXX0=

npm/ng-packs/dist/core/esm5/lib/directives/index.js

@@ -2,6 +2,7 @@
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+export { EllipsisDirective } from './ellipsis.directive';
 export { PermissionDirective } from './permission.directive';
 export { VisibilityDirective } from './visibility.directive';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJsaWIvZGlyZWN0aXZlcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsb0NBQWMsd0JBQXdCLENBQUM7QUFDdkMsb0NBQWMsd0JBQXdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWJwL25nLmNvcmUvIiwic291cmNlcyI6WyJsaWIvZGlyZWN0aXZlcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsa0NBQWMsc0JBQXNCLENBQUM7QUFDckMsb0NBQWMsd0JBQXdCLENBQUM7QUFDdkMsb0NBQWMsd0JBQXdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2VsbGlwc2lzLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL3Blcm1pc3Npb24uZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vdmlzaWJpbGl0eS5kaXJlY3RpdmUnO1xuIl19

npm/ng-packs/dist/core/esm5/public-api.js

@@ -9,7 +9,7 @@
 export { PatchRouteByName, ConfigGetAppConfiguration, LoaderStart, LoaderStop, ProfileGet, ProfileUpdate, ProfileChangePassword, RestOccurError, SessionSetLanguage } from './lib/actions';
 export { DynamicLayoutComponent, RouterOutletComponent } from './lib/components';
 // export * from './lib/constants';
-export { PermissionDirective, VisibilityDirective } from './lib/directives';
+export { EllipsisDirective, PermissionDirective, VisibilityDirective } from './lib/directives';
 export {} from './lib/enums';
 export { AuthGuard, PermissionGuard } from './lib/guards';
 export { ApiInterceptor } from './lib/interceptors';
@@ -20,4 +20,4 @@ export { ProfileState, ConfigState, SessionState } from './lib/states';
 export { environmentFactory, configFactory, ENVIRONMENT, CONFIG } from './lib/tokens';
 export { uuid, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy } from './lib/utils';
 export { CoreModule } from './lib/core.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhYnAvbmcuY29yZS8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFLQSwyS0FBYyxlQUFlLENBQUM7QUFDOUIsOERBQWMsa0JBQWtCLENBQUM7O0FBRWpDLHlEQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGVBQWMsYUFBYSxDQUFDO0FBQzVCLDJDQUFjLGNBQWMsQ0FBQztBQUM3QiwrQkFBYyxvQkFBb0IsQ0FBQztBQUNuQyxxQkFBYyxjQUFjLENBQUM7QUFDN0IseURBQWMsZUFBZSxDQUFDO0FBQzlCLGtJQUFjLGdCQUFnQixDQUFDO0FBQy9CLHdEQUFjLGNBQWMsQ0FBQztBQUM3Qix1RUFBYyxjQUFjLENBQUM7QUFDN0Isa0dBQWMsYUFBYSxDQUFDO0FBRTVCLDJCQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb3JlXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvaGFuZGxlcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9ucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL2NvbnN0YW50cyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudW1zJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2d1YXJkcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbnRlcmNlcHRvcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kZWxzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BsdWdpbnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VydmljZXMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3Rva2Vucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvcmUubW9kdWxlJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhYnAvbmcuY29yZS8iLCJzb3VyY2VzIjpbInB1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFLQSwyS0FBYyxlQUFlLENBQUM7QUFDOUIsOERBQWMsa0JBQWtCLENBQUM7O0FBRWpDLDRFQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGVBQWMsYUFBYSxDQUFDO0FBQzVCLDJDQUFjLGNBQWMsQ0FBQztBQUM3QiwrQkFBYyxvQkFBb0IsQ0FBQztBQUNuQyxxQkFBYyxjQUFjLENBQUM7QUFDN0IseURBQWMsZUFBZSxDQUFDO0FBQzlCLGtJQUFjLGdCQUFnQixDQUFDO0FBQy9CLHdEQUFjLGNBQWMsQ0FBQztBQUM3Qix1RUFBYyxjQUFjLENBQUM7QUFDN0Isa0dBQWMsYUFBYSxDQUFDO0FBRTVCLDJCQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb3JlXG4gKi9cblxuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvaGFuZGxlcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWN0aW9ucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzJztcbi8vIGV4cG9ydCAqIGZyb20gJy4vbGliL2NvbnN0YW50cyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2VudW1zJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2d1YXJkcyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbnRlcmNlcHRvcnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kZWxzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BsdWdpbnMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VydmljZXMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdGVzJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3Rva2Vucyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvcmUubW9kdWxlJztcbiJdfQ==

npm/ng-packs/dist/core/fesm2015/abp-ng.core.js

@@ -1,5 +1,5 @@
 import { __rest, __decorate, __metadata } from 'tslib';
-import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Directive, ElementRef, Optional, Renderer2, Input, InjectionToken, Inject, Pipe, APP_INITIALIZER, Injector, NgModule } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Directive, ChangeDetectorRef, ElementRef, Input, HostBinding, Optional, Renderer2, InjectionToken, Inject, Pipe, APP_INITIALIZER, Injector, NgModule } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { Store, Action, Selector, State, createSelector, Select, actionMatcher, InitState, UpdateState, setValue, NGXS_PLUGINS, NgxsModule } from '@ngxs/store';
 import { NEVER, throwError, of, Subject, Observable, ReplaySubject } from 'rxjs';
@@ -636,6 +636,8 @@ let ConfigState = ConfigState_1 = class ConfigState {
      * @return {?}
      */
     static getCopy(key, ...interpolateParams) {
+        if (!key)
+            key = '';
         /** @type {?} */
         const keys = (/** @type {?} */ (key.split('::')));
         /** @type {?} */
@@ -983,6 +985,60 @@ RouterOutletComponent.decorators = [
             }] }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class EllipsisDirective {
+    /**
+     * @param {?} cdRef
+     * @param {?} elRef
+     */
+    constructor(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
+    }
+    /**
+     * @return {?}
+     */
+    get maxWidth() {
+        return this.witdh || '180px';
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterContentInit() {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            const title = this.title;
+            this.title = title || ((/** @type {?} */ (this.elRef.nativeElement))).innerText;
+            if (this.title !== title) {
+                this.cdRef.detectChanges();
+            }
+        }), 0);
+    }
+}
+EllipsisDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[abpEllipsis]',
+            },] }
+];
+/** @nocollapse */
+EllipsisDirective.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+EllipsisDirective.propDecorators = {
+    witdh: [{ type: Input, args: ['abpEllipsis',] }],
+    title: [{ type: HostBinding, args: ['title',] }, { type: Input }],
+    enabled: [{ type: HostBinding, args: ['class.abp-ellipsis',] }],
+    maxWidth: [{ type: HostBinding, args: ['style.max-width',] }]
+};
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1686,6 +1742,7 @@ CoreModule.decorators = [
                     PermissionDirective,
                     VisibilityDirective,
                     LocalizationPipe,
+                    EllipsisDirective,
                 ],
                 exports: [
                     CommonModule,
@@ -1697,6 +1754,7 @@ CoreModule.decorators = [
                     DynamicLayoutComponent,
                     PermissionDirective,
                     VisibilityDirective,
+                    EllipsisDirective,
                     LocalizationPipe,
                 ],
                 providers: [LocalizationPipe],
@@ -1704,5 +1762,5 @@ CoreModule.decorators = [
             },] }
 ];
 
-export { ApiInterceptor, ApplicationConfigurationService, AuthGuard, CONFIG, ConfigGetAppConfiguration, ConfigPlugin, ConfigService, ConfigState, CoreModule, DynamicLayoutComponent, ENVIRONMENT, LazyLoadService, LoaderStart, LoaderStop, LocalizationService, NGXS_CONFIG_PLUGIN_OPTIONS, PatchRouteByName, PermissionDirective, PermissionGuard, ProfileChangePassword, ProfileGet, ProfileService, ProfileState, ProfileUpdate, Rest, RestOccurError, RestService, RouterOutletComponent, SessionSetLanguage, SessionState, VisibilityDirective, configFactory, environmentFactory, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, uuid, ProfileState as ɵa, ProfileService as ɵb, RestService as ɵc, ProfileGet as ɵd, ProfileUpdate as ɵe, ProfileChangePassword as ɵf, SessionState as ɵh, SessionSetLanguage as ɵi, ConfigState as ɵj, ApplicationConfigurationService as ɵk, PatchRouteByName as ɵl, ConfigGetAppConfiguration as ɵm, RouterOutletComponent as ɵn, DynamicLayoutComponent as ɵo, ConfigState as ɵp, PermissionDirective as ɵq, VisibilityDirective as ɵr, LocalizationPipe as ɵs, NGXS_CONFIG_PLUGIN_OPTIONS as ɵt, ConfigPlugin as ɵu, ApiInterceptor as ɵw, getInitialData as ɵx };
+export { ApiInterceptor, ApplicationConfigurationService, AuthGuard, CONFIG, ConfigGetAppConfiguration, ConfigPlugin, ConfigService, ConfigState, CoreModule, DynamicLayoutComponent, ENVIRONMENT, EllipsisDirective, LazyLoadService, LoaderStart, LoaderStop, LocalizationService, NGXS_CONFIG_PLUGIN_OPTIONS, PatchRouteByName, PermissionDirective, PermissionGuard, ProfileChangePassword, ProfileGet, ProfileService, ProfileState, ProfileUpdate, Rest, RestOccurError, RestService, RouterOutletComponent, SessionSetLanguage, SessionState, VisibilityDirective, configFactory, environmentFactory, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, uuid, ProfileState as ɵa, ProfileService as ɵb, RestService as ɵc, ProfileGet as ɵd, ProfileUpdate as ɵe, ProfileChangePassword as ɵf, SessionState as ɵh, SessionSetLanguage as ɵi, ConfigState as ɵj, ApplicationConfigurationService as ɵk, PatchRouteByName as ɵl, ConfigGetAppConfiguration as ɵm, RouterOutletComponent as ɵn, DynamicLayoutComponent as ɵo, ConfigState as ɵp, PermissionDirective as ɵq, VisibilityDirective as ɵr, LocalizationPipe as ɵs, EllipsisDirective as ɵt, NGXS_CONFIG_PLUGIN_OPTIONS as ɵu, ConfigPlugin as ɵv, ApiInterceptor as ɵx, getInitialData as ɵy };
 //# sourceMappingURL=abp-ng.core.js.map

npm/ng-packs/dist/core/fesm5/abp-ng.core.js

@@ -1,5 +1,5 @@
 import { __rest, __assign, __decorate, __metadata, __spread } from 'tslib';
-import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Directive, ElementRef, Optional, Renderer2, Input, InjectionToken, Inject, Pipe, NgModule, APP_INITIALIZER, Injector } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Directive, ChangeDetectorRef, ElementRef, Input, HostBinding, Optional, Renderer2, InjectionToken, Inject, Pipe, NgModule, APP_INITIALIZER, Injector } from '@angular/core';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import { Store, Action, Selector, State, createSelector, Select, actionMatcher, InitState, UpdateState, setValue, NgxsModule, NGXS_PLUGINS } from '@ngxs/store';
 import { NEVER, throwError, of, Subject, Observable, ReplaySubject } from 'rxjs';
@@ -724,6 +724,8 @@ var ConfigState = /** @class */ (function () {
         for (var _i = 1; _i < arguments.length; _i++) {
             interpolateParams[_i - 1] = arguments[_i];
         }
+        if (!key)
+            key = '';
         /** @type {?} */
         var keys = (/** @type {?} */ (key.split('::')));
         /** @type {?} */
@@ -1085,6 +1087,65 @@ var RouterOutletComponent = /** @class */ (function () {
     return RouterOutletComponent;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var EllipsisDirective = /** @class */ (function () {
+    function EllipsisDirective(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
+    }
+    Object.defineProperty(EllipsisDirective.prototype, "maxWidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.witdh || '180px';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    EllipsisDirective.prototype.ngAfterContentInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        setTimeout((/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var title = _this.title;
+            _this.title = title || ((/** @type {?} */ (_this.elRef.nativeElement))).innerText;
+            if (_this.title !== title) {
+                _this.cdRef.detectChanges();
+            }
+        }), 0);
+    };
+    EllipsisDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '[abpEllipsis]',
+                },] }
+    ];
+    /** @nocollapse */
+    EllipsisDirective.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
+    EllipsisDirective.propDecorators = {
+        witdh: [{ type: Input, args: ['abpEllipsis',] }],
+        title: [{ type: HostBinding, args: ['title',] }, { type: Input }],
+        enabled: [{ type: HostBinding, args: ['class.abp-ellipsis',] }],
+        maxWidth: [{ type: HostBinding, args: ['style.max-width',] }]
+    };
+    return EllipsisDirective;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1867,6 +1928,7 @@ var CoreModule = /** @class */ (function () {
                         PermissionDirective,
                         VisibilityDirective,
                         LocalizationPipe,
+                        EllipsisDirective,
                     ],
                     exports: [
                         CommonModule,
@@ -1878,6 +1940,7 @@ var CoreModule = /** @class */ (function () {
                         DynamicLayoutComponent,
                         PermissionDirective,
                         VisibilityDirective,
+                        EllipsisDirective,
                         LocalizationPipe,
                     ],
                     providers: [LocalizationPipe],
@@ -1887,5 +1950,5 @@ var CoreModule = /** @class */ (function () {
     return CoreModule;
 }());
 
-export { ApiInterceptor, ApplicationConfigurationService, AuthGuard, CONFIG, ConfigGetAppConfiguration, ConfigPlugin, ConfigService, ConfigState, CoreModule, DynamicLayoutComponent, ENVIRONMENT, LazyLoadService, LoaderStart, LoaderStop, LocalizationService, NGXS_CONFIG_PLUGIN_OPTIONS, PatchRouteByName, PermissionDirective, PermissionGuard, ProfileChangePassword, ProfileGet, ProfileService, ProfileState, ProfileUpdate, Rest, RestOccurError, RestService, RouterOutletComponent, SessionSetLanguage, SessionState, VisibilityDirective, configFactory, environmentFactory, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, uuid, ProfileState as ɵa, ProfileService as ɵb, RestService as ɵc, ProfileGet as ɵd, ProfileUpdate as ɵe, ProfileChangePassword as ɵf, SessionState as ɵh, SessionSetLanguage as ɵi, ConfigState as ɵj, ApplicationConfigurationService as ɵk, PatchRouteByName as ɵl, ConfigGetAppConfiguration as ɵm, RouterOutletComponent as ɵn, DynamicLayoutComponent as ɵo, ConfigState as ɵp, PermissionDirective as ɵq, VisibilityDirective as ɵr, LocalizationPipe as ɵs, NGXS_CONFIG_PLUGIN_OPTIONS as ɵt, ConfigPlugin as ɵu, ApiInterceptor as ɵw, getInitialData as ɵx };
+export { ApiInterceptor, ApplicationConfigurationService, AuthGuard, CONFIG, ConfigGetAppConfiguration, ConfigPlugin, ConfigService, ConfigState, CoreModule, DynamicLayoutComponent, ENVIRONMENT, EllipsisDirective, LazyLoadService, LoaderStart, LoaderStop, LocalizationService, NGXS_CONFIG_PLUGIN_OPTIONS, PatchRouteByName, PermissionDirective, PermissionGuard, ProfileChangePassword, ProfileGet, ProfileService, ProfileState, ProfileUpdate, Rest, RestOccurError, RestService, RouterOutletComponent, SessionSetLanguage, SessionState, VisibilityDirective, configFactory, environmentFactory, getInitialData, organizeRoutes, setChildRoute, sortRoutes, takeUntilDestroy, uuid, ProfileState as ɵa, ProfileService as ɵb, RestService as ɵc, ProfileGet as ɵd, ProfileUpdate as ɵe, ProfileChangePassword as ɵf, SessionState as ɵh, SessionSetLanguage as ɵi, ConfigState as ɵj, ApplicationConfigurationService as ɵk, PatchRouteByName as ɵl, ConfigGetAppConfiguration as ɵm, RouterOutletComponent as ɵn, DynamicLayoutComponent as ɵo, ConfigState as ɵp, PermissionDirective as ɵq, VisibilityDirective as ɵr, LocalizationPipe as ɵs, EllipsisDirective as ɵt, NGXS_CONFIG_PLUGIN_OPTIONS as ɵu, ConfigPlugin as ɵv, ApiInterceptor as ɵx, getInitialData as ɵy };
 //# sourceMappingURL=abp-ng.core.js.map

npm/ng-packs/dist/core/lib/directives/ellipsis.directive.d.ts

@@ -0,0 +1,11 @@
+import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+export declare class EllipsisDirective implements AfterContentInit {
+    private cdRef;
+    private elRef;
+    witdh: string;
+    title: string;
+    enabled: boolean;
+    readonly maxWidth: string;
+    constructor(cdRef: ChangeDetectorRef, elRef: ElementRef);
+    ngAfterContentInit(): void;
+}

npm/ng-packs/dist/core/lib/directives/index.d.ts

@@ -1,2 +1,3 @@
+export * from './ellipsis.directive';
 export * from './permission.directive';
 export * from './visibility.directive';

npm/ng-packs/dist/identity/esm2015/lib/identity.module.js

@@ -14,6 +14,7 @@ import { UsersComponent } from './components/users/users.component';
 import { PermissionManagementModule } from '@abp/ng.permission-management';
 import { TableModule } from 'primeng/table';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 export class IdentityModule {
 }
 IdentityModule.decorators = [
@@ -29,7 +30,8 @@ IdentityModule.decorators = [
                     NgbDropdownModule,
                     PermissionManagementModule,
                     NgxValidateCoreModule,
+                    PerfectScrollbarModule,
                 ],
             },] }
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRlbnRpdHkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5pZGVudGl0eS8iLCJzb3VyY2VzIjpbImxpYi9pZGVudGl0eS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBZ0IzRCxNQUFNLE9BQU8sY0FBYzs7O1lBZDFCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUsY0FBYyxDQUFDO2dCQUM5QyxPQUFPLEVBQUU7b0JBQ1AsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDO29CQUN0QyxVQUFVO29CQUNWLHFCQUFxQjtvQkFDckIsZUFBZTtvQkFDZixpQkFBaUI7b0JBQ2pCLFdBQVc7b0JBQ1gsaUJBQWlCO29CQUNqQiwwQkFBMEI7b0JBQzFCLHFCQUFxQjtpQkFDdEI7YUFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvcmVNb2R1bGUgfSBmcm9tICdAYWJwL25nLmNvcmUnO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5neHNNb2R1bGUgfSBmcm9tICdAbmd4cy9zdG9yZSc7XG5pbXBvcnQgeyBSb2xlc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9yb2xlcy9yb2xlcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWRlbnRpdHlSb3V0aW5nTW9kdWxlIH0gZnJvbSAnLi9pZGVudGl0eS1yb3V0aW5nLm1vZHVsZSc7XG5pbXBvcnQgeyBJZGVudGl0eVN0YXRlIH0gZnJvbSAnLi9zdGF0ZXMvaWRlbnRpdHkuc3RhdGUnO1xuaW1wb3J0IHsgTmdiVGFic2V0TW9kdWxlLCBOZ2JEcm9wZG93bk1vZHVsZSB9IGZyb20gJ0BuZy1ib290c3RyYXAvbmctYm9vdHN0cmFwJztcbmltcG9ydCB7IFRoZW1lU2hhcmVkTW9kdWxlIH0gZnJvbSAnQGFicC9uZy50aGVtZS5zaGFyZWQnO1xuaW1wb3J0IHsgVXNlcnNDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdXNlcnMvdXNlcnMuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcm1pc3Npb25NYW5hZ2VtZW50TW9kdWxlIH0gZnJvbSAnQGFicC9uZy5wZXJtaXNzaW9uLW1hbmFnZW1lbnQnO1xuaW1wb3J0IHsgVGFibGVNb2R1bGUgfSBmcm9tICdwcmltZW5nL3RhYmxlJztcbmltcG9ydCB7IE5neFZhbGlkYXRlQ29yZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdmFsaWRhdGUvY29yZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1JvbGVzQ29tcG9uZW50LCBVc2Vyc0NvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtcbiAgICBOZ3hzTW9kdWxlLmZvckZlYXR1cmUoW0lkZW50aXR5U3RhdGVdKSxcbiAgICBDb3JlTW9kdWxlLFxuICAgIElkZW50aXR5Um91dGluZ01vZHVsZSxcbiAgICBOZ2JUYWJzZXRNb2R1bGUsXG4gICAgVGhlbWVTaGFyZWRNb2R1bGUsXG4gICAgVGFibGVNb2R1bGUsXG4gICAgTmdiRHJvcGRvd25Nb2R1bGUsXG4gICAgUGVybWlzc2lvbk1hbmFnZW1lbnRNb2R1bGUsXG4gICAgTmd4VmFsaWRhdGVDb3JlTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBJZGVudGl0eU1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRlbnRpdHkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5pZGVudGl0eS8iLCJzb3VyY2VzIjpbImxpYi9pZGVudGl0eS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzNELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBaUIvRCxNQUFNLE9BQU8sY0FBYzs7O1lBZjFCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUsY0FBYyxDQUFDO2dCQUM5QyxPQUFPLEVBQUU7b0JBQ1AsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDO29CQUN0QyxVQUFVO29CQUNWLHFCQUFxQjtvQkFDckIsZUFBZTtvQkFDZixpQkFBaUI7b0JBQ2pCLFdBQVc7b0JBQ1gsaUJBQWlCO29CQUNqQiwwQkFBMEI7b0JBQzFCLHFCQUFxQjtvQkFDckIsc0JBQXNCO2lCQUN2QjthQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29yZU1vZHVsZSB9IGZyb20gJ0BhYnAvbmcuY29yZSc7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmd4c01vZHVsZSB9IGZyb20gJ0BuZ3hzL3N0b3JlJztcbmltcG9ydCB7IFJvbGVzQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3JvbGVzL3JvbGVzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJZGVudGl0eVJvdXRpbmdNb2R1bGUgfSBmcm9tICcuL2lkZW50aXR5LXJvdXRpbmcubW9kdWxlJztcbmltcG9ydCB7IElkZW50aXR5U3RhdGUgfSBmcm9tICcuL3N0YXRlcy9pZGVudGl0eS5zdGF0ZSc7XG5pbXBvcnQgeyBOZ2JUYWJzZXRNb2R1bGUsIE5nYkRyb3Bkb3duTW9kdWxlIH0gZnJvbSAnQG5nLWJvb3RzdHJhcC9uZy1ib290c3RyYXAnO1xuaW1wb3J0IHsgVGhlbWVTaGFyZWRNb2R1bGUgfSBmcm9tICdAYWJwL25nLnRoZW1lLnNoYXJlZCc7XG5pbXBvcnQgeyBVc2Vyc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy91c2Vycy91c2Vycy5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGVybWlzc2lvbk1hbmFnZW1lbnRNb2R1bGUgfSBmcm9tICdAYWJwL25nLnBlcm1pc3Npb24tbWFuYWdlbWVudCc7XG5pbXBvcnQgeyBUYWJsZU1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvdGFibGUnO1xuaW1wb3J0IHsgTmd4VmFsaWRhdGVDb3JlTW9kdWxlIH0gZnJvbSAnQG5neC12YWxpZGF0ZS9jb3JlJztcbmltcG9ydCB7IFBlcmZlY3RTY3JvbGxiYXJNb2R1bGUgfSBmcm9tICduZ3gtcGVyZmVjdC1zY3JvbGxiYXInO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtSb2xlc0NvbXBvbmVudCwgVXNlcnNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgTmd4c01vZHVsZS5mb3JGZWF0dXJlKFtJZGVudGl0eVN0YXRlXSksXG4gICAgQ29yZU1vZHVsZSxcbiAgICBJZGVudGl0eVJvdXRpbmdNb2R1bGUsXG4gICAgTmdiVGFic2V0TW9kdWxlLFxuICAgIFRoZW1lU2hhcmVkTW9kdWxlLFxuICAgIFRhYmxlTW9kdWxlLFxuICAgIE5nYkRyb3Bkb3duTW9kdWxlLFxuICAgIFBlcm1pc3Npb25NYW5hZ2VtZW50TW9kdWxlLFxuICAgIE5neFZhbGlkYXRlQ29yZU1vZHVsZSxcbiAgICBQZXJmZWN0U2Nyb2xsYmFyTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBJZGVudGl0eU1vZHVsZSB7fVxuIl19

npm/ng-packs/dist/identity/esm5/lib/identity.module.js

@@ -14,6 +14,7 @@ import { UsersComponent } from './components/users/users.component';
 import { PermissionManagementModule } from '@abp/ng.permission-management';
 import { TableModule } from 'primeng/table';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 var IdentityModule = /** @class */ (function () {
     function IdentityModule() {
     }
@@ -30,10 +31,11 @@ var IdentityModule = /** @class */ (function () {
                         NgbDropdownModule,
                         PermissionManagementModule,
                         NgxValidateCoreModule,
+                        PerfectScrollbarModule,
                     ],
                 },] }
     ];
     return IdentityModule;
 }());
 export { IdentityModule };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRlbnRpdHkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5pZGVudGl0eS8iLCJzb3VyY2VzIjpbImxpYi9pZGVudGl0eS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRTNEO0lBQUE7SUFjNkIsQ0FBQzs7Z0JBZDdCLFFBQVEsU0FBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUsY0FBYyxDQUFDO29CQUM5QyxPQUFPLEVBQUU7d0JBQ1AsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDO3dCQUN0QyxVQUFVO3dCQUNWLHFCQUFxQjt3QkFDckIsZUFBZTt3QkFDZixpQkFBaUI7d0JBQ2pCLFdBQVc7d0JBQ1gsaUJBQWlCO3dCQUNqQiwwQkFBMEI7d0JBQzFCLHFCQUFxQjtxQkFDdEI7aUJBQ0Y7O0lBQzRCLHFCQUFDO0NBQUEsQUFkOUIsSUFjOEI7U0FBakIsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvcmVNb2R1bGUgfSBmcm9tICdAYWJwL25nLmNvcmUnO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5neHNNb2R1bGUgfSBmcm9tICdAbmd4cy9zdG9yZSc7XG5pbXBvcnQgeyBSb2xlc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9yb2xlcy9yb2xlcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWRlbnRpdHlSb3V0aW5nTW9kdWxlIH0gZnJvbSAnLi9pZGVudGl0eS1yb3V0aW5nLm1vZHVsZSc7XG5pbXBvcnQgeyBJZGVudGl0eVN0YXRlIH0gZnJvbSAnLi9zdGF0ZXMvaWRlbnRpdHkuc3RhdGUnO1xuaW1wb3J0IHsgTmdiVGFic2V0TW9kdWxlLCBOZ2JEcm9wZG93bk1vZHVsZSB9IGZyb20gJ0BuZy1ib290c3RyYXAvbmctYm9vdHN0cmFwJztcbmltcG9ydCB7IFRoZW1lU2hhcmVkTW9kdWxlIH0gZnJvbSAnQGFicC9uZy50aGVtZS5zaGFyZWQnO1xuaW1wb3J0IHsgVXNlcnNDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvdXNlcnMvdXNlcnMuY29tcG9uZW50JztcbmltcG9ydCB7IFBlcm1pc3Npb25NYW5hZ2VtZW50TW9kdWxlIH0gZnJvbSAnQGFicC9uZy5wZXJtaXNzaW9uLW1hbmFnZW1lbnQnO1xuaW1wb3J0IHsgVGFibGVNb2R1bGUgfSBmcm9tICdwcmltZW5nL3RhYmxlJztcbmltcG9ydCB7IE5neFZhbGlkYXRlQ29yZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdmFsaWRhdGUvY29yZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1JvbGVzQ29tcG9uZW50LCBVc2Vyc0NvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtcbiAgICBOZ3hzTW9kdWxlLmZvckZlYXR1cmUoW0lkZW50aXR5U3RhdGVdKSxcbiAgICBDb3JlTW9kdWxlLFxuICAgIElkZW50aXR5Um91dGluZ01vZHVsZSxcbiAgICBOZ2JUYWJzZXRNb2R1bGUsXG4gICAgVGhlbWVTaGFyZWRNb2R1bGUsXG4gICAgVGFibGVNb2R1bGUsXG4gICAgTmdiRHJvcGRvd25Nb2R1bGUsXG4gICAgUGVybWlzc2lvbk1hbmFnZW1lbnRNb2R1bGUsXG4gICAgTmd4VmFsaWRhdGVDb3JlTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBJZGVudGl0eU1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRlbnRpdHkubW9kdWxlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy5pZGVudGl0eS8iLCJzb3VyY2VzIjpbImxpYi9pZGVudGl0eS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMzRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzNELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBRS9EO0lBQUE7SUFlNkIsQ0FBQzs7Z0JBZjdCLFFBQVEsU0FBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxjQUFjLEVBQUUsY0FBYyxDQUFDO29CQUM5QyxPQUFPLEVBQUU7d0JBQ1AsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDO3dCQUN0QyxVQUFVO3dCQUNWLHFCQUFxQjt3QkFDckIsZUFBZTt3QkFDZixpQkFBaUI7d0JBQ2pCLFdBQVc7d0JBQ1gsaUJBQWlCO3dCQUNqQiwwQkFBMEI7d0JBQzFCLHFCQUFxQjt3QkFDckIsc0JBQXNCO3FCQUN2QjtpQkFDRjs7SUFDNEIscUJBQUM7Q0FBQSxBQWY5QixJQWU4QjtTQUFqQixjQUFjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29yZU1vZHVsZSB9IGZyb20gJ0BhYnAvbmcuY29yZSc7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmd4c01vZHVsZSB9IGZyb20gJ0BuZ3hzL3N0b3JlJztcbmltcG9ydCB7IFJvbGVzQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3JvbGVzL3JvbGVzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJZGVudGl0eVJvdXRpbmdNb2R1bGUgfSBmcm9tICcuL2lkZW50aXR5LXJvdXRpbmcubW9kdWxlJztcbmltcG9ydCB7IElkZW50aXR5U3RhdGUgfSBmcm9tICcuL3N0YXRlcy9pZGVudGl0eS5zdGF0ZSc7XG5pbXBvcnQgeyBOZ2JUYWJzZXRNb2R1bGUsIE5nYkRyb3Bkb3duTW9kdWxlIH0gZnJvbSAnQG5nLWJvb3RzdHJhcC9uZy1ib290c3RyYXAnO1xuaW1wb3J0IHsgVGhlbWVTaGFyZWRNb2R1bGUgfSBmcm9tICdAYWJwL25nLnRoZW1lLnNoYXJlZCc7XG5pbXBvcnQgeyBVc2Vyc0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy91c2Vycy91c2Vycy5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGVybWlzc2lvbk1hbmFnZW1lbnRNb2R1bGUgfSBmcm9tICdAYWJwL25nLnBlcm1pc3Npb24tbWFuYWdlbWVudCc7XG5pbXBvcnQgeyBUYWJsZU1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvdGFibGUnO1xuaW1wb3J0IHsgTmd4VmFsaWRhdGVDb3JlTW9kdWxlIH0gZnJvbSAnQG5neC12YWxpZGF0ZS9jb3JlJztcbmltcG9ydCB7IFBlcmZlY3RTY3JvbGxiYXJNb2R1bGUgfSBmcm9tICduZ3gtcGVyZmVjdC1zY3JvbGxiYXInO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtSb2xlc0NvbXBvbmVudCwgVXNlcnNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgTmd4c01vZHVsZS5mb3JGZWF0dXJlKFtJZGVudGl0eVN0YXRlXSksXG4gICAgQ29yZU1vZHVsZSxcbiAgICBJZGVudGl0eVJvdXRpbmdNb2R1bGUsXG4gICAgTmdiVGFic2V0TW9kdWxlLFxuICAgIFRoZW1lU2hhcmVkTW9kdWxlLFxuICAgIFRhYmxlTW9kdWxlLFxuICAgIE5nYkRyb3Bkb3duTW9kdWxlLFxuICAgIFBlcm1pc3Npb25NYW5hZ2VtZW50TW9kdWxlLFxuICAgIE5neFZhbGlkYXRlQ29yZU1vZHVsZSxcbiAgICBQZXJmZWN0U2Nyb2xsYmFyTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBJZGVudGl0eU1vZHVsZSB7fVxuIl19

npm/ng-packs/dist/identity/lib/components/roles/roles.component.d.ts

@@ -1,22 +1,21 @@
 import { TemplateRef } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Identity } from '../../models/identity';
 import { ConfirmationService } from '@abp/ng.theme.shared';
 export declare class RolesComponent {
     private confirmationService;
-    private modalService;
     private fb;
     private store;
     roles$: Observable<Identity.RoleItem[]>;
     form: FormGroup;
     selected: Identity.RoleItem;
+    isModalVisible: boolean;
     visiblePermissions: boolean;
     providerKey: string;
     modalContent: TemplateRef<any>;
-    constructor(confirmationService: ConfirmationService, modalService: NgbModal, fb: FormBuilder, store: Store);
+    constructor(confirmationService: ConfirmationService, fb: FormBuilder, store: Store);
     createForm(): void;
     openModal(): void;
     onAdd(): void;

npm/ng-packs/dist/identity/lib/components/users/users.component.d.ts

@@ -1,14 +1,12 @@
-import { TemplateRef, TrackByFunction, OnInit } from '@angular/core';
+import { ABP } from '@abp/ng.core';
+import { ConfirmationService } from '@abp/ng.theme.shared';
+import { OnInit, TemplateRef, TrackByFunction } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
 import { Identity } from '../../models/identity';
-import { ConfirmationService } from '@abp/ng.theme.shared';
-import { ABP } from '@abp/ng.core';
 export declare class UsersComponent implements OnInit {
     private confirmationService;
-    private modalService;
     private fb;
     private store;
     data$: Observable<Identity.UserItem[]>;
@@ -21,11 +19,12 @@ export declare class UsersComponent implements OnInit {
     visiblePermissions: boolean;
     providerKey: string;
     pageQuery: ABP.PageQueryParams;
+    isModalVisible: boolean;
     loading: boolean;
     search$: Subject<string>;
     trackByFn: TrackByFunction<AbstractControl>;
     readonly roleGroups: FormGroup[];
-    constructor(confirmationService: ConfirmationService, modalService: NgbModal, fb: FormBuilder, store: Store);
+    constructor(confirmationService: ConfirmationService, fb: FormBuilder, store: Store);
     ngOnInit(): void;
     buildForm(): void;
     openModal(): void;

npm/ng-packs/dist/permission-management/bundles/abp-ng.permission-management.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abp/ng.core'), require('@abp/ng.theme.shared'), require('@angular/core'), require('@ngxs/store'), require('@ng-bootstrap/ng-bootstrap'), require('rxjs'), require('rxjs/operators'), require('ngx-perfect-scrollbar')) :
-    typeof define === 'function' && define.amd ? define('@abp/ng.permission-management', ['exports', '@abp/ng.core', '@abp/ng.theme.shared', '@angular/core', '@ngxs/store', '@ng-bootstrap/ng-bootstrap', 'rxjs', 'rxjs/operators', 'ngx-perfect-scrollbar'], factory) :
-    (global = global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng['permission-management'] = {}), global.ng_core, global.ng_theme_shared, global.ng.core, global.store, global.ngBootstrap, global.rxjs, global.rxjs.operators, global.ngxPerfectScrollbar));
-}(this, function (exports, ng_core, ng_theme_shared, core, store, ngBootstrap, rxjs, operators, ngxPerfectScrollbar) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abp/ng.core'), require('@abp/ng.theme.shared'), require('@angular/core'), require('@ngxs/store'), require('rxjs'), require('rxjs/operators'), require('ngx-perfect-scrollbar')) :
+    typeof define === 'function' && define.amd ? define('@abp/ng.permission-management', ['exports', '@abp/ng.core', '@abp/ng.theme.shared', '@angular/core', '@ngxs/store', 'rxjs', 'rxjs/operators', 'ngx-perfect-scrollbar'], factory) :
+    (global = global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng['permission-management'] = {}), global.ng_core, global.ng_theme_shared, global.ng.core, global.store, global.rxjs, global.rxjs.operators, global.ngxPerfectScrollbar));
+}(this, function (exports, ng_core, ng_theme_shared, core, store, rxjs, operators, ngxPerfectScrollbar) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -248,8 +248,7 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var PermissionManagementComponent = /** @class */ (function () {
-        function PermissionManagementComponent(modalService, store, renderer) {
-            this.modalService = modalService;
+        function PermissionManagementComponent(store, renderer) {
             this.store = store;
             this.renderer = renderer;
             this.visibleChange = new core.EventEmitter();
@@ -263,6 +262,29 @@
              */
             function (_, item) { return item.name; });
         }
+        Object.defineProperty(PermissionManagementComponent.prototype, "visible", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._visible;
+            },
+            set: /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                if (!this.selectedGroup)
+                    return;
+                this._visible = value;
+                this.visibleChange.emit(value);
+                if (!value) {
+                    this.selectedGroup = null;
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(PermissionManagementComponent.prototype, "selectedGroupPermissions$", {
             get: /**
              * @return {?}
@@ -518,10 +540,12 @@
                     .subscribe((/**
                  * @return {?}
                  */
-                function () { return _this.modalRef.close(); }));
+                function () {
+                    _this.visible = false;
+                }));
             }
             else {
-                this.modalRef.close();
+                this.visible = false;
             }
         };
         /**
@@ -545,8 +569,7 @@
             function (permissionRes) {
                 _this.selectedGroup = permissionRes.groups[0];
                 _this.permissions = getPermissions(permissionRes.groups);
-                _this.modalRef = _this.modalService.open(_this.modalContent, { size: 'lg' });
-                _this.visibleChange.emit(true);
+                _this.visible = true;
                 setTimeout((/**
                  * @return {?}
                  */
@@ -554,35 +577,8 @@
                     _this.setTabCheckboxState();
                     _this.setGrantCheckboxState();
                 }), 0);
-                rxjs.from(_this.modalRef.result)
-                    .pipe(operators.take(1))
-                    .subscribe((/**
-                 * @param {?} data
-                 * @return {?}
-                 */
-                function (data) {
-                    _this.setVisible(false);
-                }), (/**
-                 * @param {?} reason
-                 * @return {?}
-                 */
-                function (reason) {
-                    _this.setVisible(false);
-                }));
             }));
         };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        PermissionManagementComponent.prototype.setVisible = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            this.visible = value;
-            this.visibleChange.emit(value);
-        };
         /**
          * @param {?} __0
          * @return {?}
@@ -598,19 +594,18 @@
             if (visible.currentValue) {
                 this.openModal();
             }
-            else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-                this.modalRef.close();
+            else if (visible.currentValue === false && this.visible) {
+                this.visible = false;
             }
         };
         PermissionManagementComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'abp-permission-management',
-                        template: "<ng-template #modalContent let-modal>\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\" id=\"modal-basic-title\">\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\n        {{ data.entityName }}\n      </h4>\n      <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n"
+                        template: "<abp-modal [(visible)]=\"visible\" *ngIf=\"visible\" size=\"lg\">\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <ng-template #abpHeader>\n      <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>\n    </ng-template>\n    <ng-template #abpBody>\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group?.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </ng-template>\n  </ng-container>\n</abp-modal>\n"
                     }] }
         ];
         /** @nocollapse */
         PermissionManagementComponent.ctorParameters = function () { return [
-            { type: ngBootstrap.NgbModal },
             { type: store.Store },
             { type: core.Renderer2 }
         ]; };
@@ -618,8 +613,7 @@
             providerName: [{ type: core.Input }],
             providerKey: [{ type: core.Input }],
             visible: [{ type: core.Input }],
-            visibleChange: [{ type: core.Output }],
-            modalContent: [{ type: core.ViewChild, args: ['modalContent', { static: false },] }]
+            visibleChange: [{ type: core.Output }]
         };
         __decorate([
             store.Select(PermissionManagementState.getPermissionGroups),

npm/ng-packs/dist/permission-management/fesm2015/abp-ng.permission-management.js

@@ -1,10 +1,9 @@
 import { RestService, CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { Injectable, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Component, Renderer2, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Component, Renderer2, Input, Output, NgModule } from '@angular/core';
 import { Action, Selector, State, Store, Select, NgxsModule } from '@ngxs/store';
 import { __decorate, __metadata } from 'tslib';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { from, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { tap, map, take, pluck } from 'rxjs/operators';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
@@ -167,12 +166,10 @@ PermissionManagementState = __decorate([
  */
 class PermissionManagementComponent {
     /**
-     * @param {?} modalService
      * @param {?} store
      * @param {?} renderer
      */
-    constructor(modalService, store, renderer) {
-        this.modalService = modalService;
+    constructor(store, renderer) {
         this.store = store;
         this.renderer = renderer;
         this.visibleChange = new EventEmitter();
@@ -186,6 +183,25 @@ class PermissionManagementComponent {
          */
         (_, item) => item.name);
     }
+    /**
+     * @return {?}
+     */
+    get visible() {
+        return this._visible;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set visible(value) {
+        if (!this.selectedGroup)
+            return;
+        this._visible = value;
+        this.visibleChange.emit(value);
+        if (!value) {
+            this.selectedGroup = null;
+        }
+    }
     /**
      * @return {?}
      */
@@ -391,10 +407,12 @@ class PermissionManagementComponent {
                 .subscribe((/**
              * @return {?}
              */
-            () => this.modalRef.close()));
+            () => {
+                this.visible = false;
+            }));
         }
         else {
-            this.modalRef.close();
+            this.visible = false;
         }
     }
     /**
@@ -414,8 +432,7 @@ class PermissionManagementComponent {
         (permissionRes) => {
             this.selectedGroup = permissionRes.groups[0];
             this.permissions = getPermissions(permissionRes.groups);
-            this.modalRef = this.modalService.open(this.modalContent, { size: 'lg' });
-            this.visibleChange.emit(true);
+            this.visible = true;
             setTimeout((/**
              * @return {?}
              */
@@ -423,31 +440,8 @@ class PermissionManagementComponent {
                 this.setTabCheckboxState();
                 this.setGrantCheckboxState();
             }), 0);
-            from(this.modalRef.result)
-                .pipe(take(1))
-                .subscribe((/**
-             * @param {?} data
-             * @return {?}
-             */
-            data => {
-                this.setVisible(false);
-            }), (/**
-             * @param {?} reason
-             * @return {?}
-             */
-            reason => {
-                this.setVisible(false);
-            }));
         }));
     }
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    setVisible(value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
-    }
     /**
      * @param {?} __0
      * @return {?}
@@ -458,20 +452,19 @@ class PermissionManagementComponent {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     }
 }
 PermissionManagementComponent.decorators = [
     { type: Component, args: [{
                 selector: 'abp-permission-management',
-                template: "<ng-template #modalContent let-modal>\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\" id=\"modal-basic-title\">\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\n        {{ data.entityName }}\n      </h4>\n      <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n"
+                template: "<abp-modal [(visible)]=\"visible\" *ngIf=\"visible\" size=\"lg\">\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <ng-template #abpHeader>\n      <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>\n    </ng-template>\n    <ng-template #abpBody>\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group?.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </ng-template>\n  </ng-container>\n</abp-modal>\n"
             }] }
 ];
 /** @nocollapse */
 PermissionManagementComponent.ctorParameters = () => [
-    { type: NgbModal },
     { type: Store },
     { type: Renderer2 }
 ];
@@ -479,8 +472,7 @@ PermissionManagementComponent.propDecorators = {
     providerName: [{ type: Input }],
     providerKey: [{ type: Input }],
     visible: [{ type: Input }],
-    visibleChange: [{ type: Output }],
-    modalContent: [{ type: ViewChild, args: ['modalContent', { static: false },] }]
+    visibleChange: [{ type: Output }]
 };
 __decorate([
     Select(PermissionManagementState.getPermissionGroups),

npm/ng-packs/dist/permission-management/fesm5/abp-ng.permission-management.js

@@ -1,10 +1,9 @@
 import { RestService, CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Renderer2, Input, Output, ViewChild, EventEmitter, NgModule } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Renderer2, Input, Output, EventEmitter, NgModule } from '@angular/core';
 import { Action, Selector, State, Store, Select, NgxsModule } from '@ngxs/store';
 import { __decorate, __metadata, __assign, __spread } from 'tslib';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { from, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { tap, map, take, pluck } from 'rxjs/operators';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
@@ -192,8 +191,7 @@ var PermissionManagementState = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PermissionManagementComponent = /** @class */ (function () {
-    function PermissionManagementComponent(modalService, store, renderer) {
-        this.modalService = modalService;
+    function PermissionManagementComponent(store, renderer) {
         this.store = store;
         this.renderer = renderer;
         this.visibleChange = new EventEmitter();
@@ -207,6 +205,29 @@ var PermissionManagementComponent = /** @class */ (function () {
          */
         function (_, item) { return item.name; });
     }
+    Object.defineProperty(PermissionManagementComponent.prototype, "visible", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._visible;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            if (!this.selectedGroup)
+                return;
+            this._visible = value;
+            this.visibleChange.emit(value);
+            if (!value) {
+                this.selectedGroup = null;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PermissionManagementComponent.prototype, "selectedGroupPermissions$", {
         get: /**
          * @return {?}
@@ -462,10 +483,12 @@ var PermissionManagementComponent = /** @class */ (function () {
                 .subscribe((/**
              * @return {?}
              */
-            function () { return _this.modalRef.close(); }));
+            function () {
+                _this.visible = false;
+            }));
         }
         else {
-            this.modalRef.close();
+            this.visible = false;
         }
     };
     /**
@@ -489,8 +512,7 @@ var PermissionManagementComponent = /** @class */ (function () {
         function (permissionRes) {
             _this.selectedGroup = permissionRes.groups[0];
             _this.permissions = getPermissions(permissionRes.groups);
-            _this.modalRef = _this.modalService.open(_this.modalContent, { size: 'lg' });
-            _this.visibleChange.emit(true);
+            _this.visible = true;
             setTimeout((/**
              * @return {?}
              */
@@ -498,35 +520,8 @@ var PermissionManagementComponent = /** @class */ (function () {
                 _this.setTabCheckboxState();
                 _this.setGrantCheckboxState();
             }), 0);
-            from(_this.modalRef.result)
-                .pipe(take(1))
-                .subscribe((/**
-             * @param {?} data
-             * @return {?}
-             */
-            function (data) {
-                _this.setVisible(false);
-            }), (/**
-             * @param {?} reason
-             * @return {?}
-             */
-            function (reason) {
-                _this.setVisible(false);
-            }));
         }));
     };
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    PermissionManagementComponent.prototype.setVisible = /**
-     * @param {?} value
-     * @return {?}
-     */
-    function (value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
-    };
     /**
      * @param {?} __0
      * @return {?}
@@ -542,19 +537,18 @@ var PermissionManagementComponent = /** @class */ (function () {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     };
     PermissionManagementComponent.decorators = [
         { type: Component, args: [{
                     selector: 'abp-permission-management',
-                    template: "<ng-template #modalContent let-modal>\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <div class=\"modal-header\">\n      <h4 class=\"modal-title\" id=\"modal-basic-title\">\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\n        {{ data.entityName }}\n      </h4>\n      <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n"
+                    template: "<abp-modal [(visible)]=\"visible\" *ngIf=\"visible\" size=\"lg\">\n  <ng-container *ngIf=\"{ entityName: entityName$ | async } as data\">\n    <ng-template #abpHeader>\n      <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>\n    </ng-template>\n    <ng-template #abpBody>\n      <div class=\"custom-checkbox custom-control mb-2\">\n        <input\n          type=\"checkbox\"\n          id=\"select-all-in-all-tabs\"\n          name=\"select-all-in-all-tabs\"\n          class=\"custom-control-input\"\n          [(ngModel)]=\"selectAllTab\"\n          (click)=\"onClickSelectAll()\"\n        />\n        <label class=\"custom-control-label\" for=\"select-all-in-all-tabs\">{{\n          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\n        }}</label>\n      </div>\n\n      <hr class=\"mt-2 mb-2\" />\n      <div class=\"row\">\n        <div class=\"col-4\">\n          <ul class=\"nav nav-pills flex-column\">\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 70vh;\">\n              <li *ngFor=\"let group of groups$ | async; trackBy: trackByFn\" class=\"nav-item\">\n                <a class=\"nav-link\" [class.active]=\"selectedGroup.name === group.name\" (click)=\"onChangeGroup(group)\">{{\n                  group?.displayName\n                }}</a>\n              </li>\n            </perfect-scrollbar>\n          </ul>\n        </div>\n        <div class=\"col-8\">\n          <h4>{{ selectedGroup.displayName }}</h4>\n          <hr class=\"mt-2 mb-3\" />\n          <div class=\"pl-1 pt-1\">\n            <div class=\"custom-checkbox custom-control mb-2\">\n              <input\n                type=\"checkbox\"\n                id=\"select-all-in-this-tabs\"\n                name=\"select-all-in-this-tabs\"\n                class=\"custom-control-input\"\n                [(ngModel)]=\"selectThisTab\"\n                (click)=\"onClickSelectThisTab()\"\n              />\n              <label class=\"custom-control-label\" for=\"select-all-in-this-tabs\">{{\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\n              }}</label>\n            </div>\n            <hr class=\"mb-3\" />\n            <perfect-scrollbar class=\"ps-show-always\" style=\"max-height: 60vh;\">\n              <div\n                *ngFor=\"let permission of selectedGroupPermissions$ | async; let i = index; trackBy: trackByFn\"\n                [style.margin-left]=\"permission.margin + 'px'\"\n                class=\"custom-checkbox custom-control mb-2\"\n              >\n                <input\n                  #permissionCheckbox\n                  type=\"checkbox\"\n                  [checked]=\"getChecked(permission.name)\"\n                  [value]=\"getChecked(permission.name)\"\n                  [attr.id]=\"permission.name\"\n                  class=\"custom-control-input\"\n                />\n                <label\n                  class=\"custom-control-label\"\n                  [attr.for]=\"permission.name\"\n                  (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\n                  >{{ permission.displayName }}</label\n                >\n              </div>\n            </perfect-scrollbar>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </ng-template>\n  </ng-container>\n</abp-modal>\n"
                 }] }
     ];
     /** @nocollapse */
     PermissionManagementComponent.ctorParameters = function () { return [
-        { type: NgbModal },
         { type: Store },
         { type: Renderer2 }
     ]; };
@@ -562,8 +556,7 @@ var PermissionManagementComponent = /** @class */ (function () {
         providerName: [{ type: Input }],
         providerKey: [{ type: Input }],
         visible: [{ type: Input }],
-        visibleChange: [{ type: Output }],
-        modalContent: [{ type: ViewChild, args: ['modalContent', { static: false },] }]
+        visibleChange: [{ type: Output }]
     };
     __decorate([
         Select(PermissionManagementState.getPermissionGroups),

npm/ng-packs/dist/permission-management/lib/components/permission-management.component.d.ts

@@ -1,5 +1,4 @@
-import { EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges, TemplateRef, TrackByFunction } from '@angular/core';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges, TrackByFunction } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { PermissionManagement } from '../models/permission-management';
@@ -7,24 +6,22 @@ declare type PermissionWithMargin = PermissionManagement.Permission & {
     margin: number;
 };
 export declare class PermissionManagementComponent implements OnInit, OnChanges {
-    private modalService;
     private store;
     private renderer;
     providerName: string;
     providerKey: string;
+    protected _visible: any;
     visible: boolean;
     visibleChange: EventEmitter<boolean>;
-    modalContent: TemplateRef<any>;
     groups$: Observable<PermissionManagement.Group[]>;
     entityName$: Observable<string>;
-    modalRef: NgbModalRef;
     selectedGroup: PermissionManagement.Group;
     permissions: PermissionManagement.Permission[];
     selectThisTab: boolean;
     selectAllTab: boolean;
     trackByFn: TrackByFunction<PermissionManagement.Group>;
     readonly selectedGroupPermissions$: Observable<PermissionWithMargin[]>;
-    constructor(modalService: NgbModal, store: Store, renderer: Renderer2);
+    constructor(store: Store, renderer: Renderer2);
     ngOnInit(): void;
     getChecked(name: string): boolean;
     onClickCheckbox(clickedPermission: PermissionManagement.Permission, value: any): void;
@@ -35,7 +32,6 @@ export declare class PermissionManagementComponent implements OnInit, OnChanges
     onChangeGroup(group: PermissionManagement.Group): void;
     onSubmit(): void;
     openModal(): void;
-    setVisible(value: boolean): void;
     ngOnChanges({ visible }: SimpleChanges): void;
 }
 export {};

npm/ng-packs/dist/tenant-management/lib/components/tenants/tenants.component.d.ts

@@ -2,14 +2,17 @@ import { ABP } from '@abp/ng.core';
 import { ConfirmationService } from '@abp/ng.theme.shared';
 import { TemplateRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { TenantManagementService } from '../../services/tenant-management.service';
+declare type SelectedModalContent = {
+    type: string;
+    title: string;
+    template: TemplateRef<any>;
+};
 export declare class TenantsComponent {
     private confirmationService;
     private tenantService;
-    private modalService;
     private fb;
     private store;
     datas$: Observable<ABP.BasicItem[]>;
@@ -17,27 +20,25 @@ export declare class TenantsComponent {
     tenantForm: FormGroup;
     defaultConnectionStringForm: FormGroup;
     defaultConnectionString: string;
-    useSharedDatabase: boolean;
-    selectedModalContent: {
-        title: string;
-        template: TemplateRef<any>;
-        onSave: () => void;
-    };
-    readonly showInput: boolean;
+    isModalVisible: boolean;
+    selectedModalContent: SelectedModalContent;
+    _useSharedDatabase: boolean;
+    readonly useSharedDatabase: boolean;
     readonly connectionString: string;
-    modalWrapper: TemplateRef<any>;
-    mTemplateConnStr: TemplateRef<any>;
-    mTemplateFeatures: TemplateRef<any>;
-    mTemplateTenant: TemplateRef<any>;
-    constructor(confirmationService: ConfirmationService, tenantService: TenantManagementService, modalService: NgbModal, fb: FormBuilder, store: Store);
-    openModal(): void;
+    tenantModalTemplate: TemplateRef<any>;
+    connectionStringModalTemplate: TemplateRef<any>;
+    featuresModalTemplate: TemplateRef<any>;
+    constructor(confirmationService: ConfirmationService, tenantService: TenantManagementService, fb: FormBuilder, store: Store);
     private createTenantForm;
     private createDefaultConnectionStringForm;
-    onEditConnStr(id: string): void;
-    saveConnStr(): void;
+    openModal(title: string, template: TemplateRef<any>, type: string): void;
+    onEditConnectionString(id: string): void;
     onManageFeatures(id: string): void;
-    onAdd(): void;
-    onEdit(id: string): void;
+    onAddTenant(): void;
+    onEditTenant(id: string): void;
+    save(): void;
+    saveConnectionString(): void;
     saveTenant(): void;
     delete(id: string, name: string): void;
 }
+export {};

npm/ng-packs/dist/tenant-management/lib/services/tenant-management.service.d.ts

@@ -11,4 +11,5 @@ export declare class TenantManagementService {
     update(body: TenantManagement.UpdateRequest): Observable<ABP.BasicItem>;
     getDefaultConnectionString(id: string): Observable<string>;
     updateDefaultConnectionString(payload: TenantManagement.DefaultConnectionStringRequest): Observable<any>;
+    deleteDefaultConnectionString(id: string): Observable<string>;
 }

npm/ng-packs/dist/theme-basic/bundles/abp-ng.theme.basic.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abp/ng.core'), require('@angular/core'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/forms'), require('@ngx-validate/core'), require('@ngxs/store'), require('rxjs'), require('rxjs/operators'), require('@ngxs/router-plugin'), require('angular-oauth2-oidc'), require('snq'), require('just-compare'), require('@abp/ng.theme.shared'), require('primeng/toast')) :
-    typeof define === 'function' && define.amd ? define('@abp/ng.theme.basic', ['exports', '@abp/ng.core', '@angular/core', '@ng-bootstrap/ng-bootstrap', '@angular/forms', '@ngx-validate/core', '@ngxs/store', 'rxjs', 'rxjs/operators', '@ngxs/router-plugin', 'angular-oauth2-oidc', 'snq', 'just-compare', '@abp/ng.theme.shared', 'primeng/toast'], factory) :
-    (global = global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.basic = {}), global.ng_core, global.ng.core, global.ngBootstrap, global.ng.forms, global.core$1, global.store, global.rxjs, global.rxjs.operators, global.routerPlugin, global.angularOauth2Oidc, global.snq, global.compare, global.ng_theme_shared, global.toast));
-}(this, function (exports, ng_core, core, ngBootstrap, forms, core$1, store, rxjs, operators, routerPlugin, angularOauth2Oidc, snq, compare, ng_theme_shared, toast) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abp/ng.core'), require('@angular/core'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/forms'), require('@ngx-validate/core'), require('@ngxs/store'), require('@ngxs/router-plugin'), require('angular-oauth2-oidc'), require('rxjs'), require('rxjs/operators'), require('snq'), require('just-compare'), require('@abp/ng.theme.shared'), require('primeng/toast')) :
+    typeof define === 'function' && define.amd ? define('@abp/ng.theme.basic', ['exports', '@abp/ng.core', '@angular/core', '@ng-bootstrap/ng-bootstrap', '@angular/forms', '@ngx-validate/core', '@ngxs/store', '@ngxs/router-plugin', 'angular-oauth2-oidc', 'rxjs', 'rxjs/operators', 'snq', 'just-compare', '@abp/ng.theme.shared', 'primeng/toast'], factory) :
+    (global = global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.basic = {}), global.ng_core, global.ng.core, global.ngBootstrap, global.ng.forms, global.core$1, global.store, global.routerPlugin, global.angularOauth2Oidc, global.rxjs, global.rxjs.operators, global.snq, global.compare, global.ng_theme_shared, global.toast));
+}(this, function (exports, ng_core, core, ngBootstrap, forms, core$1, store, routerPlugin, angularOauth2Oidc, rxjs, operators, snq, compare, ng_theme_shared, toast) { 'use strict';
 
     snq = snq && snq.hasOwnProperty('default') ? snq['default'] : snq;
     compare = compare && compare.hasOwnProperty('default') ? compare['default'] : compare;
@@ -73,12 +73,29 @@
      */
     var minLength = forms.Validators.minLength, required = forms.Validators.required;
     var ChangePasswordComponent = /** @class */ (function () {
-        function ChangePasswordComponent(fb, modalService, store) {
+        function ChangePasswordComponent(fb, store) {
             this.fb = fb;
-            this.modalService = modalService;
             this.store = store;
             this.visibleChange = new core.EventEmitter();
         }
+        Object.defineProperty(ChangePasswordComponent.prototype, "visible", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._visible;
+            },
+            set: /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                this._visible = value;
+                this.visibleChange.emit(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -112,7 +129,9 @@
                 .subscribe((/**
              * @return {?}
              */
-            function () { return _this.modalRef.close(); }));
+            function () {
+                _this.visible = false;
+            }));
         };
         /**
          * @return {?}
@@ -121,36 +140,7 @@
          * @return {?}
          */
         function () {
-            var _this = this;
-            this.modalRef = this.modalService.open(this.modalContent);
-            this.visibleChange.emit(true);
-            rxjs.from(this.modalRef.result)
-                .pipe(operators.take(1))
-                .subscribe((/**
-             * @param {?} data
-             * @return {?}
-             */
-            function (data) {
-                _this.setVisible(false);
-            }), (/**
-             * @param {?} reason
-             * @return {?}
-             */
-            function (reason) {
-                _this.setVisible(false);
-            }));
-        };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        ChangePasswordComponent.prototype.setVisible = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            this.visible = value;
-            this.visibleChange.emit(value);
+            this.visible = true;
         };
         /**
          * @param {?} __0
@@ -167,20 +157,19 @@
             if (visible.currentValue) {
                 this.openModal();
             }
-            else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-                this.modalRef.close();
+            else if (visible.currentValue === false && this.visible) {
+                this.visible = false;
             }
         };
         ChangePasswordComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'abp-change-password',
-                        template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                        template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
                     }] }
         ];
         /** @nocollapse */
         ChangePasswordComponent.ctorParameters = function () { return [
             { type: forms.FormBuilder },
-            { type: ngBootstrap.NgbModal },
             { type: store.Store }
         ]; };
         ChangePasswordComponent.propDecorators = {
@@ -495,7 +484,7 @@
         LayoutApplicationComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'abp-layout-application',
-                        template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li class=\"nav-item dropdown\" ngbDropdown [abpPermission]=\"route.requiredPolicy\" [abpVisibility]=\"routeContainer\">\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle> {{ child.name }} </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
+                        template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name | abpLocalization }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li\n        class=\"nav-item dropdown\"\n        ngbDropdown\n        display=\"static\"\n        [abpPermission]=\"route.requiredPolicy\"\n        [abpVisibility]=\"routeContainer\"\n      >\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name | abpLocalization }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name | abpLocalization }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        display=\"static\"\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle>\n          {{ child.name | abpLocalization }}\n        </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -586,12 +575,29 @@
      */
     var maxLength = forms.Validators.maxLength, required$1 = forms.Validators.required, email = forms.Validators.email;
     var ProfileComponent = /** @class */ (function () {
-        function ProfileComponent(fb, modalService, store) {
+        function ProfileComponent(fb, store) {
             this.fb = fb;
-            this.modalService = modalService;
             this.store = store;
             this.visibleChange = new core.EventEmitter();
         }
+        Object.defineProperty(ProfileComponent.prototype, "visible", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._visible;
+            },
+            set: /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                this._visible = value;
+                this.visibleChange.emit(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -631,7 +637,9 @@
             this.store.dispatch(new ng_core.ProfileUpdate(this.form.value)).subscribe((/**
              * @return {?}
              */
-            function () { return _this.modalRef.close(); }));
+            function () {
+                _this.visible = false;
+            }));
         };
         /**
          * @return {?}
@@ -640,37 +648,8 @@
          * @return {?}
          */
         function () {
-            var _this = this;
             this.buildForm();
-            this.modalRef = this.modalService.open(this.modalContent);
-            this.visibleChange.emit(true);
-            rxjs.from(this.modalRef.result)
-                .pipe(operators.take(1))
-                .subscribe((/**
-             * @param {?} data
-             * @return {?}
-             */
-            function (data) {
-                _this.setVisible(false);
-            }), (/**
-             * @param {?} reason
-             * @return {?}
-             */
-            function (reason) {
-                _this.setVisible(false);
-            }));
-        };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        ProfileComponent.prototype.setVisible = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            this.visible = value;
-            this.visibleChange.emit(value);
+            this.visible = true;
         };
         /**
          * @param {?} __0
@@ -687,26 +666,24 @@
             if (visible.currentValue) {
                 this.openModal();
             }
-            else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-                this.modalRef.close();
+            else if (visible.currentValue === false && this.visible) {
+                this.visible = false;
             }
         };
         ProfileComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'abp-profile',
-                        template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:EmailAddress' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                        template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form *ngIf=\"form\" [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button #abpClose type=\"button\" class=\"btn btn-secondary\">\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
                     }] }
         ];
         /** @nocollapse */
         ProfileComponent.ctorParameters = function () { return [
             { type: forms.FormBuilder },
-            { type: ngBootstrap.NgbModal },
             { type: store.Store }
         ]; };
         ProfileComponent.propDecorators = {
             visible: [{ type: core.Input }],
-            visibleChange: [{ type: core.Output }],
-            modalContent: [{ type: core.ViewChild, args: ['modalContent', { static: false },] }]
+            visibleChange: [{ type: core.Output }]
         };
         __decorate([
             store.Select(ng_core.ProfileState.getProfile),

npm/ng-packs/dist/theme-basic/fesm2015/abp-ng.theme.basic.js

@@ -1,14 +1,14 @@
 import { ProfileChangePassword, SessionState, takeUntilDestroy, SessionSetLanguage, ConfigGetAppConfiguration, ConfigState, ProfileGet, ProfileUpdate, ProfileState, CoreModule } from '@abp/ng.core';
 import { EventEmitter, Component, Input, Output, ViewChild, TemplateRef, NgModule } from '@angular/core';
-import { NgbModal, NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormBuilder, Validators } from '@angular/forms';
 import { validatePassword, comparePasswords, NgxValidateCoreModule } from '@ngx-validate/core';
 import { Store, Action, Selector, State, Select, NgxsModule } from '@ngxs/store';
-import { from, Observable } from 'rxjs';
-import { take, map, filter, withLatestFrom } from 'rxjs/operators';
 import { __decorate, __metadata } from 'tslib';
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import { OAuthService } from 'angular-oauth2-oidc';
+import { Observable } from 'rxjs';
+import { map, filter, withLatestFrom, take } from 'rxjs/operators';
 import snq from 'snq';
 import compare from 'just-compare';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
@@ -22,15 +22,27 @@ const { minLength, required } = Validators;
 class ChangePasswordComponent {
     /**
      * @param {?} fb
-     * @param {?} modalService
      * @param {?} store
      */
-    constructor(fb, modalService, store) {
+    constructor(fb, store) {
         this.fb = fb;
-        this.modalService = modalService;
         this.store = store;
         this.visibleChange = new EventEmitter();
     }
+    /**
+     * @return {?}
+     */
+    get visible() {
+        return this._visible;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set visible(value) {
+        this._visible = value;
+        this.visibleChange.emit(value);
+    }
     /**
      * @return {?}
      */
@@ -57,37 +69,15 @@ class ChangePasswordComponent {
             .subscribe((/**
          * @return {?}
          */
-        () => this.modalRef.close()));
-    }
-    /**
-     * @return {?}
-     */
-    openModal() {
-        this.modalRef = this.modalService.open(this.modalContent);
-        this.visibleChange.emit(true);
-        from(this.modalRef.result)
-            .pipe(take(1))
-            .subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        data => {
-            this.setVisible(false);
-        }), (/**
-         * @param {?} reason
-         * @return {?}
-         */
-        reason => {
-            this.setVisible(false);
+        () => {
+            this.visible = false;
         }));
     }
     /**
-     * @param {?} value
      * @return {?}
      */
-    setVisible(value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
+    openModal() {
+        this.visible = true;
     }
     /**
      * @param {?} __0
@@ -99,21 +89,20 @@ class ChangePasswordComponent {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     }
 }
 ChangePasswordComponent.decorators = [
     { type: Component, args: [{
                 selector: 'abp-change-password',
-                template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
             }] }
 ];
 /** @nocollapse */
 ChangePasswordComponent.ctorParameters = () => [
     { type: FormBuilder },
-    { type: NgbModal },
     { type: Store }
 ];
 ChangePasswordComponent.propDecorators = {
@@ -375,7 +364,7 @@ LayoutApplicationComponent.type = "application" /* application */;
 LayoutApplicationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'abp-layout-application',
-                template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li class=\"nav-item dropdown\" ngbDropdown [abpPermission]=\"route.requiredPolicy\" [abpVisibility]=\"routeContainer\">\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle> {{ child.name }} </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
+                template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name | abpLocalization }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li\n        class=\"nav-item dropdown\"\n        ngbDropdown\n        display=\"static\"\n        [abpPermission]=\"route.requiredPolicy\"\n        [abpVisibility]=\"routeContainer\"\n      >\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name | abpLocalization }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name | abpLocalization }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        display=\"static\"\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle>\n          {{ child.name | abpLocalization }}\n        </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
             }] }
 ];
 /** @nocollapse */
@@ -465,15 +454,27 @@ const { maxLength, required: required$1, email } = Validators;
 class ProfileComponent {
     /**
      * @param {?} fb
-     * @param {?} modalService
      * @param {?} store
      */
-    constructor(fb, modalService, store) {
+    constructor(fb, store) {
         this.fb = fb;
-        this.modalService = modalService;
         this.store = store;
         this.visibleChange = new EventEmitter();
     }
+    /**
+     * @return {?}
+     */
+    get visible() {
+        return this._visible;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set visible(value) {
+        this._visible = value;
+        this.visibleChange.emit(value);
+    }
     /**
      * @return {?}
      */
@@ -504,38 +505,16 @@ class ProfileComponent {
         this.store.dispatch(new ProfileUpdate(this.form.value)).subscribe((/**
          * @return {?}
          */
-        () => this.modalRef.close()));
+        () => {
+            this.visible = false;
+        }));
     }
     /**
      * @return {?}
      */
     openModal() {
         this.buildForm();
-        this.modalRef = this.modalService.open(this.modalContent);
-        this.visibleChange.emit(true);
-        from(this.modalRef.result)
-            .pipe(take(1))
-            .subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        data => {
-            this.setVisible(false);
-        }), (/**
-         * @param {?} reason
-         * @return {?}
-         */
-        reason => {
-            this.setVisible(false);
-        }));
-    }
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    setVisible(value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
+        this.visible = true;
     }
     /**
      * @param {?} __0
@@ -547,27 +526,25 @@ class ProfileComponent {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     }
 }
 ProfileComponent.decorators = [
     { type: Component, args: [{
                 selector: 'abp-profile',
-                template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:EmailAddress' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form *ngIf=\"form\" [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button #abpClose type=\"button\" class=\"btn btn-secondary\">\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
             }] }
 ];
 /** @nocollapse */
 ProfileComponent.ctorParameters = () => [
     { type: FormBuilder },
-    { type: NgbModal },
     { type: Store }
 ];
 ProfileComponent.propDecorators = {
     visible: [{ type: Input }],
-    visibleChange: [{ type: Output }],
-    modalContent: [{ type: ViewChild, args: ['modalContent', { static: false },] }]
+    visibleChange: [{ type: Output }]
 };
 __decorate([
     Select(ProfileState.getProfile),

npm/ng-packs/dist/theme-basic/fesm5/abp-ng.theme.basic.js

@@ -1,14 +1,14 @@
 import { __spread, __assign, __decorate, __metadata, __read } from 'tslib';
 import { ProfileChangePassword, SessionState, takeUntilDestroy, SessionSetLanguage, ConfigGetAppConfiguration, ConfigState, ProfileGet, ProfileUpdate, ProfileState, CoreModule } from '@abp/ng.core';
 import { Component, Input, Output, ViewChild, EventEmitter, TemplateRef, NgModule } from '@angular/core';
-import { NgbModal, NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { Validators, FormBuilder } from '@angular/forms';
 import { validatePassword, comparePasswords, NgxValidateCoreModule } from '@ngx-validate/core';
 import { Store, Action, Selector, State, Select, NgxsModule } from '@ngxs/store';
-import { from, Observable } from 'rxjs';
-import { take, map, filter, withLatestFrom } from 'rxjs/operators';
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import { OAuthService } from 'angular-oauth2-oidc';
+import { Observable } from 'rxjs';
+import { map, filter, withLatestFrom, take } from 'rxjs/operators';
 import snq from 'snq';
 import compare from 'just-compare';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
@@ -20,12 +20,29 @@ import { ToastModule } from 'primeng/toast';
  */
 var minLength = Validators.minLength, required = Validators.required;
 var ChangePasswordComponent = /** @class */ (function () {
-    function ChangePasswordComponent(fb, modalService, store) {
+    function ChangePasswordComponent(fb, store) {
         this.fb = fb;
-        this.modalService = modalService;
         this.store = store;
         this.visibleChange = new EventEmitter();
     }
+    Object.defineProperty(ChangePasswordComponent.prototype, "visible", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._visible;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this._visible = value;
+            this.visibleChange.emit(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -59,7 +76,9 @@ var ChangePasswordComponent = /** @class */ (function () {
             .subscribe((/**
          * @return {?}
          */
-        function () { return _this.modalRef.close(); }));
+        function () {
+            _this.visible = false;
+        }));
     };
     /**
      * @return {?}
@@ -68,36 +87,7 @@ var ChangePasswordComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        var _this = this;
-        this.modalRef = this.modalService.open(this.modalContent);
-        this.visibleChange.emit(true);
-        from(this.modalRef.result)
-            .pipe(take(1))
-            .subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        function (data) {
-            _this.setVisible(false);
-        }), (/**
-         * @param {?} reason
-         * @return {?}
-         */
-        function (reason) {
-            _this.setVisible(false);
-        }));
-    };
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    ChangePasswordComponent.prototype.setVisible = /**
-     * @param {?} value
-     * @return {?}
-     */
-    function (value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
+        this.visible = true;
     };
     /**
      * @param {?} __0
@@ -114,20 +104,19 @@ var ChangePasswordComponent = /** @class */ (function () {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     };
     ChangePasswordComponent.decorators = [
         { type: Component, args: [{
                     selector: 'abp-change-password',
-                    template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                    template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"current-password\">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"current-password\" class=\"form-control\" formControlName=\"password\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"new-password\">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label\n        ><span> * </span><input type=\"password\" id=\"new-password\" class=\"form-control\" formControlName=\"newPassword\" />\n      </div>\n      <div class=\"form-group\" [class.is-invalid]=\"form.errors?.passwordMismatch\">\n        <label for=\"confirm-new-password\">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label\n        ><span> * </span\n        ><input type=\"password\" id=\"confirm-new-password\" class=\"form-control\" formControlName=\"repeatNewPassword\" />\n        <div *ngIf=\"form.errors?.passwordMismatch\" class=\"invalid-feedback\">\n          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}\n        </div>\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" #abpClose>\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
                 }] }
     ];
     /** @nocollapse */
     ChangePasswordComponent.ctorParameters = function () { return [
         { type: FormBuilder },
-        { type: NgbModal },
         { type: Store }
     ]; };
     ChangePasswordComponent.propDecorators = {
@@ -442,7 +431,7 @@ var LayoutApplicationComponent = /** @class */ (function () {
     LayoutApplicationComponent.decorators = [
         { type: Component, args: [{
                     selector: 'abp-layout-application',
-                    template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li class=\"nav-item dropdown\" ngbDropdown [abpPermission]=\"route.requiredPolicy\" [abpVisibility]=\"routeContainer\">\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle> {{ child.name }} </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
+                    template: "<abp-layout>\n  <ul class=\"navbar-nav mr-auto\">\n    <ng-container\n      *ngFor=\"let route of visibleRoutes$ | async; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"route?.children?.length ? dropdownLink : defaultLink\"\n      [ngTemplateOutletContext]=\"{ $implicit: route }\"\n    >\n    </ng-container>\n\n    <ng-template #defaultLink let-route>\n      <li class=\"nav-item\" [abpPermission]=\"route.requiredPolicy\">\n        <a class=\"nav-link\" [routerLink]=\"[route.url]\">{{ route.name | abpLocalization }}</a>\n      </li>\n    </ng-template>\n\n    <ng-template #dropdownLink let-route>\n      <li\n        class=\"nav-item dropdown\"\n        ngbDropdown\n        display=\"static\"\n        [abpPermission]=\"route.requiredPolicy\"\n        [abpVisibility]=\"routeContainer\"\n      >\n        <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n          {{ route.name | abpLocalization }}\n        </a>\n        <div #routeContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            #forTemplate\n            ngFor\n            [ngForOf]=\"route.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </li>\n    </ng-template>\n\n    <ng-template #childWrapper let-child>\n      <ng-template\n        [ngTemplateOutlet]=\"child?.children?.length ? dropdownChild : defaultChild\"\n        [ngTemplateOutletContext]=\"{ $implicit: child }\"\n      ></ng-template>\n    </ng-template>\n\n    <ng-template #defaultChild let-child>\n      <div class=\"dropdown-submenu\" [abpPermission]=\"child.requiredPolicy\">\n        <a class=\"dropdown-item py-2 px-2\" [routerLink]=\"[child.url]\">{{ child.name | abpLocalization }}</a>\n      </div>\n    </ng-template>\n\n    <ng-template #dropdownChild let-child>\n      <div\n        [abpVisibility]=\"childrenContainer\"\n        class=\"dropdown-submenu\"\n        ngbDropdown\n        display=\"static\"\n        placement=\"right-top\"\n        [abpPermission]=\"child.requiredPolicy\"\n      >\n        <a role=\"button\" class=\"btn d-block text-left py-2 px-2\" ngbDropdownToggle>\n          {{ child.name | abpLocalization }}\n        </a>\n        <div #childrenContainer ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n          <ng-template\n            ngFor\n            [ngForOf]=\"child.children\"\n            [ngForTrackBy]=\"trackByFn\"\n            [ngForTemplate]=\"childWrapper\"\n          ></ng-template>\n        </div>\n      </div>\n    </ng-template>\n  </ul>\n\n  <ul class=\"navbar-nav ml-auto\">\n    <ng-container\n      *ngFor=\"let element of rightPartElements; trackBy: trackElementByFn\"\n      [ngTemplateOutlet]=\"element\"\n    ></ng-container>\n  </ul>\n</abp-layout>\n\n<abp-change-password [(visible)]=\"isOpenChangePassword\"></abp-change-password>\n\n<abp-profile [(visible)]=\"isOpenProfile\"></abp-profile>\n\n<ng-template #language>\n  <li class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ defaultLanguage$ | async }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a\n        *ngFor=\"let lang of dropdownLanguages$ | async\"\n        class=\"dropdown-item\"\n        (click)=\"onChangeLang(lang.cultureName)\"\n        >{{ lang?.displayName }}</a\n      >\n    </div>\n  </li>\n</ng-template>\n\n<ng-template #currentUser>\n  <li *ngIf=\"(currentUser$ | async)?.isAuthenticated\" class=\"nav-item dropdown\" ngbDropdown>\n    <a ngbDropdownToggle class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\">\n      {{ (currentUser$ | async)?.userName }}\n    </a>\n    <div ngbDropdownMenu class=\"dropdown-menu dropdown-menu-right\">\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenChangePassword = true\">Change Password</a>\n      <a class=\"dropdown-item pointer\" (click)=\"isOpenProfile = true\">My Profile</a>\n      <a class=\"dropdown-item pointer\" (click)=\"logout()\">Logout</a>\n    </div>\n  </li>\n</ng-template>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -533,12 +522,29 @@ var LayoutComponent = /** @class */ (function () {
  */
 var maxLength = Validators.maxLength, required$1 = Validators.required, email = Validators.email;
 var ProfileComponent = /** @class */ (function () {
-    function ProfileComponent(fb, modalService, store) {
+    function ProfileComponent(fb, store) {
         this.fb = fb;
-        this.modalService = modalService;
         this.store = store;
         this.visibleChange = new EventEmitter();
     }
+    Object.defineProperty(ProfileComponent.prototype, "visible", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._visible;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this._visible = value;
+            this.visibleChange.emit(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -578,7 +584,9 @@ var ProfileComponent = /** @class */ (function () {
         this.store.dispatch(new ProfileUpdate(this.form.value)).subscribe((/**
          * @return {?}
          */
-        function () { return _this.modalRef.close(); }));
+        function () {
+            _this.visible = false;
+        }));
     };
     /**
      * @return {?}
@@ -587,37 +595,8 @@ var ProfileComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        var _this = this;
         this.buildForm();
-        this.modalRef = this.modalService.open(this.modalContent);
-        this.visibleChange.emit(true);
-        from(this.modalRef.result)
-            .pipe(take(1))
-            .subscribe((/**
-         * @param {?} data
-         * @return {?}
-         */
-        function (data) {
-            _this.setVisible(false);
-        }), (/**
-         * @param {?} reason
-         * @return {?}
-         */
-        function (reason) {
-            _this.setVisible(false);
-        }));
-    };
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    ProfileComponent.prototype.setVisible = /**
-     * @param {?} value
-     * @return {?}
-     */
-    function (value) {
-        this.visible = value;
-        this.visibleChange.emit(value);
+        this.visible = true;
     };
     /**
      * @param {?} __0
@@ -634,26 +613,24 @@ var ProfileComponent = /** @class */ (function () {
         if (visible.currentValue) {
             this.openModal();
         }
-        else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-            this.modalRef.close();
+        else if (visible.currentValue === false && this.visible) {
+            this.visible = false;
         }
     };
     ProfileComponent.decorators = [
         { type: Component, args: [{
                     selector: 'abp-profile',
-                    template: "<ng-template #modalContent let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" novalidate>\n    <div class=\"modal-body\">\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:EmailAddress' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\" (click)=\"modal.close()\">\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\">\n        <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n      </button>\n    </div>\n  </form>\n</ng-template>\n"
+                    template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\">\n  <ng-template #abpHeader>\n    <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>\n  </ng-template>\n  <ng-template #abpBody>\n    <form *ngIf=\"form\" [formGroup]=\"form\" novalidate>\n      <div class=\"form-group\">\n        <label for=\"username\">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"username\" class=\"form-control\" formControlName=\"userName\" />\n      </div>\n      <div class=\"row\">\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"name\">{{ 'AbpIdentity::DisplayName:Name' | abpLocalization }}</label\n            ><input type=\"text\" id=\"name\" class=\"form-control\" formControlName=\"name\" />\n          </div>\n        </div>\n        <div class=\"col col-md-6\">\n          <div class=\"form-group\">\n            <label for=\"surname\">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label\n            ><input type=\"text\" id=\"surname\" class=\"form-control\" formControlName=\"surname\" />\n          </div>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label for=\"email-address\">{{ 'AbpIdentity::DisplayName:Email' | abpLocalization }}</label\n        ><span> * </span><input type=\"text\" id=\"email-address\" class=\"form-control\" formControlName=\"email\" />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"phone-number\">{{ 'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization }}</label\n        ><input type=\"text\" id=\"phone-number\" class=\"form-control\" formControlName=\"phoneNumber\" />\n      </div>\n    </form>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button #abpClose type=\"button\" class=\"btn btn-secondary\">\n      {{ 'AbpIdentity::Cancel' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSubmit()\">\n      <i class=\"fa fa-check mr-1\"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>\n    </button>\n  </ng-template>\n</abp-modal>\n"
                 }] }
     ];
     /** @nocollapse */
     ProfileComponent.ctorParameters = function () { return [
         { type: FormBuilder },
-        { type: NgbModal },
         { type: Store }
     ]; };
     ProfileComponent.propDecorators = {
         visible: [{ type: Input }],
-        visibleChange: [{ type: Output }],
-        modalContent: [{ type: ViewChild, args: ['modalContent', { static: false },] }]
+        visibleChange: [{ type: Output }]
     };
     __decorate([
         Select(ProfileState.getProfile),

npm/ng-packs/dist/theme-basic/lib/components/change-password/change-password.component.d.ts

@@ -1,20 +1,17 @@
 import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngxs/store';
 export declare class ChangePasswordComponent implements OnInit, OnChanges {
     private fb;
-    private modalService;
     private store;
+    protected _visible: any;
     visible: boolean;
     visibleChange: EventEmitter<boolean>;
     modalContent: TemplateRef<any>;
     form: FormGroup;
-    modalRef: NgbModalRef;
-    constructor(fb: FormBuilder, modalService: NgbModal, store: Store);
+    constructor(fb: FormBuilder, store: Store);
     ngOnInit(): void;
     onSubmit(): void;
     openModal(): void;
-    setVisible(value: boolean): void;
     ngOnChanges({ visible }: SimpleChanges): void;
 }

npm/ng-packs/dist/theme-basic/lib/components/profile/profile.component.d.ts

@@ -1,23 +1,19 @@
-import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { Profile } from '@abp/ng.core';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { Profile } from '@abp/ng.core';
 export declare class ProfileComponent implements OnChanges {
     private fb;
-    private modalService;
     private store;
+    protected _visible: any;
     visible: boolean;
     visibleChange: EventEmitter<boolean>;
-    modalContent: TemplateRef<any>;
     profile$: Observable<Profile.Response>;
     form: FormGroup;
-    modalRef: NgbModalRef;
-    constructor(fb: FormBuilder, modalService: NgbModal, store: Store);
+    constructor(fb: FormBuilder, store: Store);
     buildForm(): void;
     onSubmit(): void;
     openModal(): void;
-    setVisible(value: boolean): void;
     ngOnChanges({ visible }: SimpleChanges): void;
 }

npm/ng-packs/dist/theme-shared/bundles/abp-ng.theme.shared.umd.js

@@ -491,6 +491,8 @@
             function (_) {
                 _this.close();
             }));
+            if (!this.abpClose)
+                return;
             rxjs.fromEvent(this.abpClose.nativeElement, 'click')
                 .pipe(operators.takeUntil(this.destroy$), operators.filter((/**
              * @return {?}
@@ -606,7 +608,7 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
+    var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.modal {\n background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
 
     /**
      * @fileoverview added by tsickle

npm/ng-packs/dist/theme-shared/esm2015/lib/contants/styles.js

@@ -28,6 +28,16 @@ export default `
   top: 18px;
 }
 
+.modal {
+ background-color: rgba(0, 0, 0, .6);
+}
+
+.abp-ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /* <animations */
 
@@ -62,4 +72,4 @@ export default `
 /* </animations */
 
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy50aGVtZS5zaGFyZWQvIiwic291cmNlcyI6WyJsaWIvY29udGFudHMvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxlQUFlOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQTJEZCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgYFxuLmlzLWludmFsaWQgLmZvcm0tY29udHJvbCB7XG4gIGJvcmRlci1jb2xvcjogI2RjMzU0NTtcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZCAhaW1wb3J0YW50O1xufVxuXG4uaXMtaW52YWxpZCAuaW52YWxpZC1mZWVkYmFjayxcbi5pcy1pbnZhbGlkICsgKiAuaW52YWxpZC1mZWVkYmFjayB7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuXG4uZGF0YS10YWJsZXMtZmlsdGVyIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG5cbi5wb2ludGVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4ubmF2YmFyIC5kcm9wZG93bi1zdWJtZW51IGE6OmFmdGVyIHtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMTZweDtcbiAgdG9wOiAxOHB4O1xufVxuXG5cbi8qIDxhbmltYXRpb25zICovXG5cbi5mYWRlLWluLXRvcCB7XG4gIGFuaW1hdGlvbjogZmFkZUluVG9wIDAuNHMgZWFzZS1pbi1vdXQ7XG59XG5cbi5mYWRlLW91dC10b3Age1xuICBhbmltYXRpb246IGZhZGVPdXRUb3AgMC40cyBlYXNlLWluLW91dDtcbn1cblxuXG5Aa2V5ZnJhbWVzIGZhZGVJblRvcCB7XG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg1cHgpO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBmYWRlT3V0VG9wIHtcbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG59XG5cbi8qIDwvYW5pbWF0aW9ucyAqL1xuXG5gO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy50aGVtZS5zaGFyZWQvIiwic291cmNlcyI6WyJsaWIvY29udGFudHMvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxlQUFlOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0FxRWQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IGBcbi5pcy1pbnZhbGlkIC5mb3JtLWNvbnRyb2wge1xuICBib3JkZXItY29sb3I6ICNkYzM1NDU7XG4gIGJvcmRlci1zdHlsZTogc29saWQgIWltcG9ydGFudDtcbn1cblxuLmlzLWludmFsaWQgLmludmFsaWQtZmVlZGJhY2ssXG4uaXMtaW52YWxpZCArICogLmludmFsaWQtZmVlZGJhY2sge1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLmRhdGEtdGFibGVzLWZpbHRlciB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuXG4ucG9pbnRlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLm5hdmJhciAuZHJvcGRvd24tc3VibWVudSBhOjphZnRlciB7XG4gIHRyYW5zZm9ybTogcm90YXRlKC05MGRlZyk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDE2cHg7XG4gIHRvcDogMThweDtcbn1cblxuLm1vZGFsIHtcbiBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIC42KTtcbn1cblxuLmFicC1lbGxpcHNpcyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG59XG5cbi8qIDxhbmltYXRpb25zICovXG5cbi5mYWRlLWluLXRvcCB7XG4gIGFuaW1hdGlvbjogZmFkZUluVG9wIDAuNHMgZWFzZS1pbi1vdXQ7XG59XG5cbi5mYWRlLW91dC10b3Age1xuICBhbmltYXRpb246IGZhZGVPdXRUb3AgMC40cyBlYXNlLWluLW91dDtcbn1cblxuXG5Aa2V5ZnJhbWVzIGZhZGVJblRvcCB7XG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg1cHgpO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBmYWRlT3V0VG9wIHtcbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG59XG5cbi8qIDwvYW5pbWF0aW9ucyAqL1xuXG5gO1xuIl19

npm/ng-packs/dist/theme-shared/esm5/lib/contants/styles.js

@@ -2,5 +2,5 @@
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-export default "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy50aGVtZS5zaGFyZWQvIiwic291cmNlcyI6WyJsaWIvY29udGFudHMvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxlQUFlLGswQkEyRGQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IGBcbi5pcy1pbnZhbGlkIC5mb3JtLWNvbnRyb2wge1xuICBib3JkZXItY29sb3I6ICNkYzM1NDU7XG4gIGJvcmRlci1zdHlsZTogc29saWQgIWltcG9ydGFudDtcbn1cblxuLmlzLWludmFsaWQgLmludmFsaWQtZmVlZGJhY2ssXG4uaXMtaW52YWxpZCArICogLmludmFsaWQtZmVlZGJhY2sge1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLmRhdGEtdGFibGVzLWZpbHRlciB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuXG4ucG9pbnRlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLm5hdmJhciAuZHJvcGRvd24tc3VibWVudSBhOjphZnRlciB7XG4gIHRyYW5zZm9ybTogcm90YXRlKC05MGRlZyk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDE2cHg7XG4gIHRvcDogMThweDtcbn1cblxuXG4vKiA8YW5pbWF0aW9ucyAqL1xuXG4uZmFkZS1pbi10b3Age1xuICBhbmltYXRpb246IGZhZGVJblRvcCAwLjRzIGVhc2UtaW4tb3V0O1xufVxuXG4uZmFkZS1vdXQtdG9wIHtcbiAgYW5pbWF0aW9uOiBmYWRlT3V0VG9wIDAuNHMgZWFzZS1pbi1vdXQ7XG59XG5cblxuQGtleWZyYW1lcyBmYWRlSW5Ub3Age1xuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTVweCk7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuXG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoNXB4KTtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgZmFkZU91dFRvcCB7XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTVweCk7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxufVxuXG4vKiA8L2FuaW1hdGlvbnMgKi9cblxuYDtcbiJdfQ==
+export default "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.modal {\n background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFicC9uZy50aGVtZS5zaGFyZWQvIiwic291cmNlcyI6WyJsaWIvY29udGFudHMvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxlQUFlLCsrQkFxRWQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IGBcbi5pcy1pbnZhbGlkIC5mb3JtLWNvbnRyb2wge1xuICBib3JkZXItY29sb3I6ICNkYzM1NDU7XG4gIGJvcmRlci1zdHlsZTogc29saWQgIWltcG9ydGFudDtcbn1cblxuLmlzLWludmFsaWQgLmludmFsaWQtZmVlZGJhY2ssXG4uaXMtaW52YWxpZCArICogLmludmFsaWQtZmVlZGJhY2sge1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLmRhdGEtdGFibGVzLWZpbHRlciB7XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuXG4ucG9pbnRlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLm5hdmJhciAuZHJvcGRvd24tc3VibWVudSBhOjphZnRlciB7XG4gIHRyYW5zZm9ybTogcm90YXRlKC05MGRlZyk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDE2cHg7XG4gIHRvcDogMThweDtcbn1cblxuLm1vZGFsIHtcbiBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIC42KTtcbn1cblxuLmFicC1lbGxpcHNpcyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG59XG5cbi8qIDxhbmltYXRpb25zICovXG5cbi5mYWRlLWluLXRvcCB7XG4gIGFuaW1hdGlvbjogZmFkZUluVG9wIDAuNHMgZWFzZS1pbi1vdXQ7XG59XG5cbi5mYWRlLW91dC10b3Age1xuICBhbmltYXRpb246IGZhZGVPdXRUb3AgMC40cyBlYXNlLWluLW91dDtcbn1cblxuXG5Aa2V5ZnJhbWVzIGZhZGVJblRvcCB7XG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSg1cHgpO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBmYWRlT3V0VG9wIHtcbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgtNXB4KTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG59XG5cbi8qIDwvYW5pbWF0aW9ucyAqL1xuXG5gO1xuIl19

npm/ng-packs/dist/theme-shared/fesm2015/abp-ng.theme.shared.js

@@ -421,6 +421,8 @@ class ModalComponent {
         _ => {
             this.close();
         }));
+        if (!this.abpClose)
+            return;
         fromEvent(this.abpClose.nativeElement, 'click')
             .pipe(takeUntil(this.destroy$), filter((/**
          * @return {?}
@@ -572,6 +574,16 @@ var styles = `
   top: 18px;
 }
 
+.modal {
+ background-color: rgba(0, 0, 0, .6);
+}
+
+.abp-ellipsis {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /* <animations */
 

npm/ng-packs/dist/theme-shared/fesm5/abp-ng.theme.shared.js

@@ -434,6 +434,8 @@ var ModalComponent = /** @class */ (function () {
         function (_) {
             _this.close();
         }));
+        if (!this.abpClose)
+            return;
         fromEvent(this.abpClose.nativeElement, 'click')
             .pipe(takeUntil(this.destroy$), filter((/**
          * @return {?}
@@ -549,7 +551,7 @@ var ToastComponent = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
+var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.modal {\n background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
 
 /**
  * @fileoverview added by tsickle

npm/ng-packs/dist/theme-shared/lib/contants/styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
+declare const _default: "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.modal {\n background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
 export default _default;

npm/ng-packs/package.json

@@ -48,7 +48,7 @@
     "protractor": "~5.4.0",
     "rxjs": "~6.4.0",
     "snq": "^1.0.3",
-    "symlink-manager": "^1.2.1",
+    "symlink-manager": "^1.2.2",
     "ts-node": "~7.0.0",
     "tsickle": "^0.35.0",
     "tslib": "^1.9.0",

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -18,6 +18,7 @@ import { ConfigState } from './states/config.state';
 import { ProfileState } from './states/profile.state';
 import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
+import { EllipsisDirective } from './directives/ellipsis.directive';
 
 @NgModule({
   imports: [
@@ -36,6 +37,7 @@ import { getInitialData } from './utils/initial-utils';
     PermissionDirective,
     VisibilityDirective,
     LocalizationPipe,
+    EllipsisDirective,
   ],
   exports: [
     CommonModule,
@@ -47,6 +49,7 @@ import { getInitialData } from './utils/initial-utils';
     DynamicLayoutComponent,
     PermissionDirective,
     VisibilityDirective,
+    EllipsisDirective,
     LocalizationPipe,
   ],
   providers: [LocalizationPipe],