@c8y/ngx-components 1011.0.33 → 1011.0.34

package/bundles/c8y-ngx-components.umd.js

@@ -4050,6 +4050,13 @@
      * <div *c8yOutlet="template"></div>
      * <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
      * <div *c8yOutlet="nodes"></div>
+     *
+     *
+     * note: If template is instance of HTMLElement (for example, node compiled by angularJS) then there can be
+     * only single instance rendered, as only one instance of HTMLElement can exist in DOM.
+     * If there is need for displaying same element multiple times, please make sure to inject into
+     * this element createCopy function, which should return another instance of given element.
+     *
      */
     var OutletDirective = /** @class */ (function () {
         function OutletDirective(viewContainer, resolver, renderer, el) {
@@ -4083,7 +4090,17 @@
                 else if (template instanceof Element) {
                     var parent = this.renderer.parentNode(this.el.nativeElement);
                     this.destroy();
-                    this._element = template;
+                    /**
+                     * Because compiled element can be used only once, we need to create copy of it
+                     * in order to display it in multiple locations.
+                     * For example standard "More" menu, and its RWD version.
+                     */
+                    if (template.createCopy) {
+                        this._element = template.createCopy();
+                    }
+                    else {
+                        this._element = template;
+                    }
                     this.renderer.insertBefore(parent, this._element, this.el.nativeElement);
                     // case Component -> <div *c8yOutlet="DeviceStatusComponent; properties: { node }"></div>
                 }
@@ -4565,24 +4582,45 @@
             /**
              * The current items to display in the ActionBar.
              */
-            this.items = [];
-        }
-        Object.defineProperty(ActionBarComponent.prototype, "hidden", {
+            this.items$ = rxjs.of([]);
+            /**
+             * Provides observable for right action items.
+             */
+            this.right$ = rxjs.of([]);
+            /**
+             * Provides observable for left action items.
+             */
+            this.left$ = rxjs.of([]);
+            /**
+             * Provides observable for more action items.
+             */
+            this.more$ = rxjs.of([]);
             /**
              * Returns true if no items are present and hides the action bar.
              */
-            get: function () {
-                return !(this.items && this.items.length);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Returns the items sorted by priority and grouped by the placement passed.
-         * @param {placement} Which placement should be returned sorted.
-         */
-        ActionBarComponent.prototype.getSortedItems = function (placement) {
-            return lodashEs.sortBy(lodashEs.filter(this.items, { placement: placement }), this.byPriority);
+            this.hidden$ = rxjs.of(true);
+            /**
+             * Binds hidden property to this component's native element
+             */
+            this.hidden = true;
+            this.destroy$ = new rxjs.Subject();
+        }
+        ActionBarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.right$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'right' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.left$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'left' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.more$ = this.items$.pipe(operators.map(function (items) { return lodashEs.filter(items, { placement: 'more' }); }), operators.map(function (items) { return lodashEs.sortBy(items, _this.byPriority); }));
+            this.hidden$ = this.items$.pipe(operators.map(function (items) {
+                return !(items && items.length);
+            }));
+            this.hidden$
+                .pipe(operators.takeUntil(this.destroy$)).subscribe(function (hidden) {
+                _this.hidden = hidden;
+            });
+        };
+        ActionBarComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
         };
         ActionBarComponent.prototype.byPriority = function (item) {
             return -item.priority;
@@ -4592,7 +4630,7 @@
     ActionBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'c8y-action-bar',
-                    template: "<div class=\"navbar-header\">\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{'Action bar' | translate}}</span>\n  </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\" >\n  <ul class=\"nav navbar-nav navbar-left\">\n    <ng-container *ngFor=\"let item of getSortedItems('left')\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right\">\n    <ng-container *ngFor=\"let item of getSortedItems('right')\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n    <li class=\"no-remove more-wrapper\" *ngIf=\"getSortedItems('more').length > 0\">\n      <div class=\"dropdown\" dropdown>\n        <button\n          title=\"{{ 'More' | translate }}\u2026\"\n          class=\"dropdown-toggle c8y-dropdown d-flex\"\n          dropdownToggle\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          <span class=\"text-truncate\" translate>More\u2026</span>\n          <i [c8yIcon]=\"'caret-down'\"></i>\n        </button>\n        <ul class=\"dropdown-menu dropdown-menu-right\" *dropdownMenu>\n          <ng-container *ngFor=\"let item of getSortedItems('more')\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n        <ul class=\"dropdown-menu visible-xs\"> \n          <ng-container *ngFor=\"let item of getSortedItems('more')\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"navbar-header\">\n  <p class=\"text-label-small p-l-16 p-t-8 p-b-8 visible-xs\">\n    <span class=\"text-primary\">{{ 'Action bar' | translate }}</span>\n  </p>\n</div>\n\n<div id=\"page-toolbar\" class=\"navbar-collapse\">\n  <ul class=\"nav navbar-nav navbar-left\">\n    <ng-container *ngFor=\"let item of left$ | async\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n  </ul>\n  <ul class=\"nav navbar-nav navbar-right\">\n    <ng-container *ngFor=\"let item of right$ | async\">\n      <ng-container *c8yOutlet=\"item.template\"></ng-container>\n    </ng-container>\n    <li class=\"no-remove more-wrapper\" *ngIf=\"(more$ | async).length > 0\">\n      <div class=\"dropdown\" dropdown>\n        <button\n          title=\"{{ 'More' | translate }}\u2026\"\n          class=\"dropdown-toggle c8y-dropdown d-flex\"\n          dropdownToggle\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          <span class=\"text-truncate\" translate>More\u2026</span>\n          <i [c8yIcon]=\"'caret-down'\"></i>\n        </button>\n        <ul class=\"dropdown-menu dropdown-menu-right hidden-xs\" *dropdownMenu>\n          <ng-container *ngFor=\"let item of more$ | async\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n        <ul class=\"dropdown-menu visible-xs\">\n          <ng-container *ngFor=\"let item of more$ | async\">\n            <ng-container *c8yOutlet=\"item.template\"></ng-container>\n          </ng-container>\n        </ul>\n      </div>\n    </li>\n  </ul>\n</div>\n",
                     host: { class: 'c8y-ui-action-bar' }
                 },] }
     ];
@@ -4601,7 +4639,7 @@
         hasTabs: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.has-tabs',] }],
         isTabsHorizontal: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.horizontal-tabs',] }],
         uiActionBar: [{ type: i0.HostBinding, args: ['class.c8y-ui-action-bar',] }],
-        items: [{ type: i0.Input }],
+        items$: [{ type: i0.Input }],
         hidden: [{ type: i0.HostBinding }]
     };
 
@@ -6171,7 +6209,7 @@
     BootstrapComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'c8y-bootstrap',
-                    template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n  <c8y-header-bar #header></c8y-header-bar>\n  <c8y-navigator-outlet\n    [nodes]=\"navigator.items$ | async\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  >\n    <header class=\"title navigator-slot-top\">\n      <div class=\"tenant-brand\"></div>\n      <c8y-app-icon\n        [name]=\"(ui.state$ | async).app.name\"\n        [contextPath]=\"(ui.state$ | async).app.contextPath\"\n      ></c8y-app-icon>\n      <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n    </header>\n    <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n      <p translate>powered by Cumulocity</p>\n    </div>\n  </c8y-navigator-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  >\n  </c8y-tabs-outlet>\n  <c8y-action-bar\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n    [items]=\"actionBar.items$ | async\"\n  >\n  </c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent.hidden\n    }\"\n  >\n    <div class=\"container-fluid\">\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </div>\n  </div>\n</div>\n<c8y-cookie-banner></c8y-cookie-banner>\n"
+                    template: "<c8y-login *ngIf=\"!(ui.currentUser | async)\"></c8y-login>\n\n<div *ngIf=\"ui.currentUser | async\" [class.head-open]=\"headerService.headerOpen\">\n  <c8y-header-bar #header></c8y-header-bar>\n  <c8y-navigator-outlet\n    [nodes]=\"navigator.items$ | async\"\n    [open]=\"headerService.navigatorOpen$ | async\"\n  >\n    <header class=\"title navigator-slot-top\">\n      <div class=\"tenant-brand\"></div>\n      <c8y-app-icon\n        [name]=\"(ui.state$ | async).app.name\"\n        [contextPath]=\"(ui.state$ | async).app.contextPath\"\n      ></c8y-app-icon>\n      <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>\n    </header>\n    <div class=\"powered-by navigator-slot-bottom\" *ngIf=\"showPoweredBy\">\n      <p translate>powered by Cumulocity</p>\n    </div>\n  </c8y-navigator-outlet>\n\n  <div class=\"alerts\">\n    <c8y-alert-outlet></c8y-alert-outlet>\n  </div>\n  <c8y-tabs-outlet\n    #tabsComponent\n    [tabs]=\"tabs.items$ | async\"\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [orientation]=\"tabs.orientation$ | async\"\n  >\n  </c8y-tabs-outlet>\n  <c8y-action-bar\n    #actionBarComponent\n    [navigatorOpen]=\"headerService.navigatorOpen$ | async\"\n    [hasTabs]=\"tabsComponent.hasTabs\"\n    [isTabsHorizontal]=\"tabsComponent.isHorizontal\"\n    [items$]=\"actionBar.items$\"\n  >\n  </c8y-action-bar>\n\n  <div\n    class=\"mcontainer\"\n    [ngClass]=\"{\n      open: headerService.navigatorOpen$ | async,\n      'no-apps-margin': noAppsMargin$ | async,\n      'horizontal-tabs': tabsComponent.isHorizontal,\n      'vertical-tabs': !tabsComponent.isHorizontal,\n      'has-tabs': tabsComponent.hasTabs,\n      'has-action-bar': !actionBarComponent.hidden\n    }\"\n  >\n    <div class=\"container-fluid\">\n      <router-outlet></router-outlet>\n      <ng-content select=\"#c8y-legacy-view\"></ng-content>\n      <!-- legacy ng-view, will not be migrated atm -->\n    </div>\n  </div>\n</div>\n<c8y-cookie-banner></c8y-cookie-banner>\n"
                 },] }
     ];
     BootstrapComponent.ctorParameters = function () { return [