@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js

@@ -4,141 +4,141 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['top-bar'] = {}), global.ng.core, global.ng.common, global.ng.material.core, global.ng.material.menu, global.ng.material.icon, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].menu, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib'].search, global['pepperi-addons']['ngx-lib'].list));
 }(this, (function (exports, core, common, core$1, menu, icon$1, ngxLib, menu$1, icon, search, list) { 'use strict';
 
-    var PepTopBarComponent = /** @class */ (function () {
-        function PepTopBarComponent(customizationService, layoutService, cdRef) {
-            this.customizationService = customizationService;
-            this.layoutService = layoutService;
-            this.cdRef = cdRef;
-            this.inline = false;
-            this.title = null;
-            this.footerStateChange = new core.EventEmitter();
-            this.hasFooterContent = null;
-            this.isHidden = true;
-            this.searchIsOpenAndSmallDevice = false;
-            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
-        }
-        PepTopBarComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var _a, _b, _c, _d, _e, _f;
-            if (!this.inline) {
-                this.hasFooterContent =
-                    ((_c = (_b = (_a = this.footerStartContent) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ||
-                        ((_f = (_e = (_d = this.footerEndContent) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.length) > 0;
-            }
-            this.layoutService.onResize$.subscribe(function (size) {
-                _this.screenSize = size;
-                _this.setSearchIsOpenAndSmallDevice();
-                if (!_this.inline) {
-                    _this.setFooterState();
-                }
-            });
-            this.isHidden = false;
-            this.cdRef.detectChanges();
-        };
-        PepTopBarComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            if (this.searchComp) {
-                this.searchComp.stateChange
-                    .subscribe(function (searchStateChangeEvent) {
-                    _this.searchState = searchStateChangeEvent.state;
-                    _this.setSearchIsOpenAndSmallDevice();
-                })
-                    .unsubscribe();
-            }
-        };
-        PepTopBarComponent.prototype.ngOnDestroy = function () {
-            if (this.customizationService) {
-                this.customizationService.hideFooter();
-            }
-        };
-        PepTopBarComponent.prototype.setSearchIsOpenAndSmallDevice = function () {
-            // check if search is open and the device size is small or extra small
-            this.searchIsOpenAndSmallDevice =
-                this.screenSize > ngxLib.PepScreenSizeType.SM &&
-                    this.searchState === 'open';
-        };
-        PepTopBarComponent.prototype.setFooterState = function () {
-            var newFooterState = this.hasFooterContent && this.screenSize >= ngxLib.PepScreenSizeType.MD
-                ? 'visible'
-                : 'hidden';
-            if (this.footerState !== newFooterState) {
-                this.footerState = newFooterState;
-                this.cdRef.detectChanges();
-                this.footerStateChange.emit({ state: this.footerState });
-                if (this.footerState === 'visible') {
-                    this.customizationService.showFooter();
-                }
-                else {
-                    this.customizationService.hideFooter();
-                }
-            }
-        };
-        return PepTopBarComponent;
-    }());
-    PepTopBarComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-top-bar',
-                    template: "<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>",
-                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-top-bar-container .footer{background-color:#fff;background-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]
-                },] }
-    ];
-    PepTopBarComponent.ctorParameters = function () { return [
-        { type: ngxLib.PepCustomizationService },
-        { type: ngxLib.PepLayoutService },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    PepTopBarComponent.propDecorators = {
-        inline: [{ type: core.Input }],
-        title: [{ type: core.Input }],
-        footerStateChange: [{ type: core.Output }],
-        footerStartContent: [{ type: core.ViewChild, args: ['footerStartContent',] }],
-        footerEndContent: [{ type: core.ViewChild, args: ['footerEndContent',] }],
-        searchComp: [{ type: core.ContentChild, args: [search.PepSearchComponent,] }],
-        listActionsComp: [{ type: core.ContentChild, args: [list.PepListActionsComponent,] }],
-        listChooserComp: [{ type: core.ContentChild, args: [list.PepListChooserComponent,] }],
-        listTotalComp: [{ type: core.ContentChild, args: [list.PepListTotalComponent,] }],
-        listSortingComp: [{ type: core.ContentChild, args: [list.PepListSortingComponent,] }],
-        listViewsComp: [{ type: core.ContentChild, args: [list.PepListViewsComponent,] }]
+    var PepTopBarComponent = /** @class */ (function () {
+        function PepTopBarComponent(customizationService, layoutService, cdRef) {
+            this.customizationService = customizationService;
+            this.layoutService = layoutService;
+            this.cdRef = cdRef;
+            this.inline = false;
+            this.title = null;
+            this.footerStateChange = new core.EventEmitter();
+            this.hasFooterContent = null;
+            this.isHidden = true;
+            this.searchIsOpenAndSmallDevice = false;
+            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
+        }
+        PepTopBarComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f;
+            if (!this.inline) {
+                this.hasFooterContent =
+                    ((_c = (_b = (_a = this.footerStartContent) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) > 0 ||
+                        ((_f = (_e = (_d = this.footerEndContent) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.length) > 0;
+            }
+            this.layoutService.onResize$.subscribe(function (size) {
+                _this.screenSize = size;
+                _this.setSearchIsOpenAndSmallDevice();
+                if (!_this.inline) {
+                    _this.setFooterState();
+                }
+            });
+            this.isHidden = false;
+            this.cdRef.detectChanges();
+        };
+        PepTopBarComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            if (this.searchComp) {
+                this.searchComp.stateChange
+                    .subscribe(function (searchStateChangeEvent) {
+                    _this.searchState = searchStateChangeEvent.state;
+                    _this.setSearchIsOpenAndSmallDevice();
+                })
+                    .unsubscribe();
+            }
+        };
+        PepTopBarComponent.prototype.ngOnDestroy = function () {
+            if (this.customizationService) {
+                this.customizationService.hideFooter();
+            }
+        };
+        PepTopBarComponent.prototype.setSearchIsOpenAndSmallDevice = function () {
+            // check if search is open and the device size is small or extra small
+            this.searchIsOpenAndSmallDevice =
+                this.screenSize > ngxLib.PepScreenSizeType.SM &&
+                    this.searchState === 'open';
+        };
+        PepTopBarComponent.prototype.setFooterState = function () {
+            var newFooterState = this.hasFooterContent && this.screenSize >= ngxLib.PepScreenSizeType.MD
+                ? 'visible'
+                : 'hidden';
+            if (this.footerState !== newFooterState) {
+                this.footerState = newFooterState;
+                this.cdRef.detectChanges();
+                this.footerStateChange.emit({ state: this.footerState });
+                if (this.footerState === 'visible') {
+                    this.customizationService.showFooter();
+                }
+                else {
+                    this.customizationService.hideFooter();
+                }
+            }
+        };
+        return PepTopBarComponent;
+    }());
+    PepTopBarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-top-bar',
+                    template: "<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>",
+                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-top-bar-container .footer{background-color:#fff;background-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]
+                },] }
+    ];
+    PepTopBarComponent.ctorParameters = function () { return [
+        { type: ngxLib.PepCustomizationService },
+        { type: ngxLib.PepLayoutService },
+        { type: core.ChangeDetectorRef }
+    ]; };
+    PepTopBarComponent.propDecorators = {
+        inline: [{ type: core.Input }],
+        title: [{ type: core.Input }],
+        footerStateChange: [{ type: core.Output }],
+        footerStartContent: [{ type: core.ViewChild, args: ['footerStartContent',] }],
+        footerEndContent: [{ type: core.ViewChild, args: ['footerEndContent',] }],
+        searchComp: [{ type: core.ContentChild, args: [search.PepSearchComponent,] }],
+        listActionsComp: [{ type: core.ContentChild, args: [list.PepListActionsComponent,] }],
+        listChooserComp: [{ type: core.ContentChild, args: [list.PepListChooserComponent,] }],
+        listTotalComp: [{ type: core.ContentChild, args: [list.PepListTotalComponent,] }],
+        listSortingComp: [{ type: core.ContentChild, args: [list.PepListSortingComponent,] }],
+        listViewsComp: [{ type: core.ContentChild, args: [list.PepListViewsComponent,] }]
     };
 
-    var PepTopBarModule = /** @class */ (function () {
-        function PepTopBarModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconSystemMenu,
-                icon.pepIconSystemEdit,
-            ]);
-        }
-        return PepTopBarModule;
-    }());
-    PepTopBarModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        // Material modules,
-                        core$1.MatCommonModule,
-                        menu.MatMenuModule,
-                        icon$1.MatIconModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        menu$1.PepMenuModule,
-                        icon.PepIconModule,
-                        search.PepSearchModule,
-                    ],
-                    exports: [PepTopBarComponent],
-                    declarations: [PepTopBarComponent],
-                },] }
-    ];
-    PepTopBarModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepTopBarModule = /** @class */ (function () {
+        function PepTopBarModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemMenu,
+                icon.pepIconSystemEdit,
+            ]);
+        }
+        return PepTopBarModule;
+    }());
+    PepTopBarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        // Material modules,
+                        core$1.MatCommonModule,
+                        menu.MatMenuModule,
+                        icon$1.MatIconModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        menu$1.PepMenuModule,
+                        icon.PepIconModule,
+                        search.PepSearchModule,
+                    ],
+                    exports: [PepTopBarComponent],
+                    declarations: [PepTopBarComponent],
+                },] }
+    ];
+    PepTopBarModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    /*
-     * Public API Surface of ngx-lib/top-bar
+    /*
+     * Public API Surface of ngx-lib/top-bar
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepTopBarComponent = PepTopBarComponent;