@pepperi-addons/ngx-lib 0.3.6 → 0.3.9-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/bundles/pepperi-addons-ngx-lib-page-layout.umd.js +1 -1
  2. package/bundles/pepperi-addons-ngx-lib-page-layout.umd.js.map +1 -1
  3. package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js +1 -1
  4. package/esm2015/page-layout/page-layout.component.js +2 -2
  5. package/esm2015/top-bar/top-bar.component.js +1 -1
  6. package/fesm2015/pepperi-addons-ngx-lib-page-layout.js +1 -1
  7. package/fesm2015/pepperi-addons-ngx-lib-page-layout.js.map +1 -1
  8. package/fesm2015/pepperi-addons-ngx-lib-top-bar.js +1 -1
  9. package/package.json +1 -1
  10. package/src/assets/i18n/es.ngx-lib.json +1 -1
  11. package/src/assets/i18n/fr.ngx-lib.json +2 -2
  12. package/src/core/style/components/checkbox.scss +38 -0
  13. package/top-bar/pepperi-addons-ngx-lib-top-bar.metadata.json +1 -1
package/bundles/pepperi-addons-ngx-lib-page-layout.umd.js CHANGED
@@ -11,7 +11,7 @@
11
11
  this.cdRef = cdRef;
12
12
  this.hostElement = hostElement;
13
13
  this.renderer = renderer;
14
- this.addPadding = true;
14
+ this.addPadding = false;
15
15
  this.showShadow = false;
16
16
  this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');
17
17
  }
package/bundles/pepperi-addons-ngx-lib-page-layout.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-page-layout.umd.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../projects/ngx-lib/page-layout/page-layout.module.ts","../../../projects/ngx-lib/page-layout/public-api.ts","../../../projects/ngx-lib/page-layout/pepperi-addons-ngx-lib-page-layout.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectorRef,\n ContentChild,\n ElementRef,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport {\n AfterViewInit,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutService,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-page-layout',\n templateUrl: './page-layout.component.html',\n styleUrls: ['./page-layout.component.scss', './page-layout.component.theme.scss'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n @Input() addPadding = true;\n @Input() showShadow = false;\n\n screenSize: PepScreenSizeType;\n\n constructor(\n public customizationService: PepCustomizationService,\n public layoutService: PepLayoutService,\n private cdRef: ChangeDetectorRef,\n private hostElement: ElementRef,\n private renderer: Renderer2,\n ) {\n this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\n }\n\n ngAfterViewInit(): void {\n this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n this.screenSize = size;\n });\n\n }\n\n ngAfterContentInit() {\n //\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepPageLayoutComponent } from './page-layout.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n // ngx-lib modules\n PepNgxLibModule,\n ],\n exports: [PepPageLayoutComponent],\n declarations: [PepPageLayoutComponent],\n})\nexport class PepPageLayoutModule { }\n","/*\n * Public API Surface of ngx-lib/page-layout\n */\nexport * from './page-layout.module';\nexport * from './page-layout.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Component","PepCustomizationService","PepLayoutService","ChangeDetectorRef","ElementRef","Renderer2","Input","NgModule","CommonModule","MatCommonModule","PepNgxLibModule"],"mappings":";;;;;;;QAgCI,gCACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;YAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;YAC7C,kBAAa,GAAb,aAAa,CAAkB;YAC9B,UAAK,GAAL,KAAK,CAAmB;YACxB,gBAAW,GAAX,WAAW,CAAY;YACvB,aAAQ,GAAR,QAAQ,CAAW;YAVtB,eAAU,GAAG,IAAI,CAAC;YAClB,eAAU,GAAG,KAAK,CAAC;YAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;SAC7E;QAED,gDAAe,GAAf;YAAA,iBAKC;YAJG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,UAAC,IAAuB;gBAC3D,KAAI,CAAC,UAAU,GAAG,IAAI,CAAC;aAC1B,CAAC,CAAC;SAEN;QAED,mDAAkB,GAAlB;;SAEC;;;;gBA9BJA,cAAS,SAAC;oBACP,QAAQ,EAAE,iBAAiB;oBAC3B,mnBAA2C;;iBAE9C;;;gBATGC,8BAAuB;gBACvBC,uBAAgB;gBAfhBC,sBAAiB;gBAEjBC,eAAU;gBACVC,cAAS;;;6BAsBRC,UAAK;6BACLA,UAAK;;;;QCRV;;;;;gBAXCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;;wBAEfC,sBAAe;qBAClB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;iBACzC;;;ICnBD;;;;ICAA;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-page-layout.umd.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../projects/ngx-lib/page-layout/page-layout.module.ts","../../../projects/ngx-lib/page-layout/public-api.ts","../../../projects/ngx-lib/page-layout/pepperi-addons-ngx-lib-page-layout.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectorRef,\n ContentChild,\n ElementRef,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport {\n AfterViewInit,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutService,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-page-layout',\n templateUrl: './page-layout.component.html',\n styleUrls: ['./page-layout.component.scss', './page-layout.component.theme.scss'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n @Input() addPadding = false;\n @Input() showShadow = false;\n\n screenSize: PepScreenSizeType;\n\n constructor(\n public customizationService: PepCustomizationService,\n public layoutService: PepLayoutService,\n private cdRef: ChangeDetectorRef,\n private hostElement: ElementRef,\n private renderer: Renderer2,\n ) {\n this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\n }\n\n ngAfterViewInit(): void {\n this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n this.screenSize = size;\n });\n\n }\n\n ngAfterContentInit() {\n //\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepPageLayoutComponent } from './page-layout.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n // ngx-lib modules\n PepNgxLibModule,\n ],\n exports: [PepPageLayoutComponent],\n declarations: [PepPageLayoutComponent],\n})\nexport class PepPageLayoutModule { }\n","/*\n * Public API Surface of ngx-lib/page-layout\n */\nexport * from './page-layout.module';\nexport * from './page-layout.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Component","PepCustomizationService","PepLayoutService","ChangeDetectorRef","ElementRef","Renderer2","Input","NgModule","CommonModule","MatCommonModule","PepNgxLibModule"],"mappings":";;;;;;;QAgCI,gCACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;YAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;YAC7C,kBAAa,GAAb,aAAa,CAAkB;YAC9B,UAAK,GAAL,KAAK,CAAmB;YACxB,gBAAW,GAAX,WAAW,CAAY;YACvB,aAAQ,GAAR,QAAQ,CAAW;YAVtB,eAAU,GAAG,KAAK,CAAC;YACnB,eAAU,GAAG,KAAK,CAAC;YAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;SAC7E;QAED,gDAAe,GAAf;YAAA,iBAKC;YAJG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,UAAC,IAAuB;gBAC3D,KAAI,CAAC,UAAU,GAAG,IAAI,CAAC;aAC1B,CAAC,CAAC;SAEN;QAED,mDAAkB,GAAlB;;SAEC;;;;gBA9BJA,cAAS,SAAC;oBACP,QAAQ,EAAE,iBAAiB;oBAC3B,mnBAA2C;;iBAE9C;;;gBATGC,8BAAuB;gBACvBC,uBAAgB;gBAfhBC,sBAAiB;gBAEjBC,eAAU;gBACVC,cAAS;;;6BAsBRC,UAAK;6BACLA,UAAK;;;;QCRV;;;;;gBAXCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;;wBAEfC,sBAAe;qBAClB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;iBACzC;;;ICnBD;;;;ICAA;;;;;;;;;;;;;"}
package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js CHANGED
@@ -79,7 +79,7 @@
79
79
  { type: core.Component, args: [{
80
80
  selector: 'pep-top-bar',
81
81
  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>",
82
- 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;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.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%))}"]
82
+ 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;align-items:baseline}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:baseline}.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%))}"]
83
83
  },] }
84
84
  ];
85
85
  PepTopBarComponent.ctorParameters = function () { return [
package/esm2015/page-layout/page-layout.component.js CHANGED
@@ -8,7 +8,7 @@ export class PepPageLayoutComponent {
8
8
  this.cdRef = cdRef;
9
9
  this.hostElement = hostElement;
10
10
  this.renderer = renderer;
11
- this.addPadding = true;
11
+ this.addPadding = false;
12
12
  this.showShadow = false;
13
13
  this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');
14
14
  }
@@ -39,4 +39,4 @@ PepPageLayoutComponent.propDecorators = {
39
39
  addPadding: [{ type: Input }],
40
40
  showShadow: [{ type: Input }]
41
41
  };
42
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1sYXlvdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9wYWdlLWxheW91dC9wYWdlLWxheW91dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVILGlCQUFpQixFQUVqQixVQUFVLEVBQ1YsU0FBUyxHQUVaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFFSCxTQUFTLEVBRVQsS0FBSyxHQUVSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsZ0JBQWdCLEdBRW5CLE1BQU0seUJBQXlCLENBQUM7QUFPakMsTUFBTSxPQUFPLHNCQUFzQjtJQU0vQixZQUNXLG9CQUE2QyxFQUM3QyxhQUErQixFQUM5QixLQUF3QixFQUN4QixXQUF1QixFQUN2QixRQUFtQjtRQUpwQix5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXlCO1FBQzdDLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQUM5QixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUN4QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBVnRCLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFDbEIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQVd4QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0lBQzlFLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBdUIsRUFBRSxFQUFFO1lBQy9ELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBRVAsQ0FBQztJQUVELGtCQUFrQjtRQUNkLEVBQUU7SUFDTixDQUFDOzs7WUE5QkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxpQkFBaUI7Z0JBQzNCLG1uQkFBMkM7O2FBRTlDOzs7WUFURyx1QkFBdUI7WUFDdkIsZ0JBQWdCO1lBZmhCLGlCQUFpQjtZQUVqQixVQUFVO1lBQ1YsU0FBUzs7O3lCQXNCUixLQUFLO3lCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyQ29udGVudEluaXQsXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29udGVudENoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgUmVuZGVyZXIyLFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBQZXBDdXN0b21pemF0aW9uU2VydmljZSxcbiAgICBQZXBMYXlvdXRTZXJ2aWNlLFxuICAgIFBlcFNjcmVlblNpemVUeXBlLFxufSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncGVwLXBhZ2UtbGF5b3V0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1sYXlvdXQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3BhZ2UtbGF5b3V0LmNvbXBvbmVudC5zY3NzJywgJy4vcGFnZS1sYXlvdXQuY29tcG9uZW50LnRoZW1lLnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwUGFnZUxheW91dENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBJbnB1dCgpIGFkZFBhZGRpbmcgPSB0cnVlO1xuICAgIEBJbnB1dCgpIHNob3dTaGFkb3cgPSBmYWxzZTtcblxuICAgIHNjcmVlblNpemU6IFBlcFNjcmVlblNpemVUeXBlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHB1YmxpYyBjdXN0b21pemF0aW9uU2VydmljZTogUGVwQ3VzdG9taXphdGlvblNlcnZpY2UsXG4gICAgICAgIHB1YmxpYyBsYXlvdXRTZXJ2aWNlOiBQZXBMYXlvdXRTZXJ2aWNlLFxuICAgICAgICBwcml2YXRlIGNkUmVmOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICAgICAgcHJpdmF0ZSBob3N0RWxlbWVudDogRWxlbWVudFJlZixcbiAgICAgICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgICkge1xuICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuaG9zdEVsZW1lbnQubmF0aXZlRWxlbWVudCwgJ3BlcC1wYWdlLWxheW91dCcpO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5sYXlvdXRTZXJ2aWNlLm9uUmVzaXplJC5zdWJzY3JpYmUoKHNpemU6IFBlcFNjcmVlblNpemVUeXBlKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNjcmVlblNpemUgPSBzaXplO1xuICAgICAgICB9KTtcblxuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbn1cbiJdfQ==
42
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1sYXlvdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9wYWdlLWxheW91dC9wYWdlLWxheW91dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVILGlCQUFpQixFQUVqQixVQUFVLEVBQ1YsU0FBUyxHQUVaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFFSCxTQUFTLEVBRVQsS0FBSyxHQUVSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsZ0JBQWdCLEdBRW5CLE1BQU0seUJBQXlCLENBQUM7QUFPakMsTUFBTSxPQUFPLHNCQUFzQjtJQU0vQixZQUNXLG9CQUE2QyxFQUM3QyxhQUErQixFQUM5QixLQUF3QixFQUN4QixXQUF1QixFQUN2QixRQUFtQjtRQUpwQix5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXlCO1FBQzdDLGtCQUFhLEdBQWIsYUFBYSxDQUFrQjtRQUM5QixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQUN4QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBVnRCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQVd4QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0lBQzlFLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBdUIsRUFBRSxFQUFFO1lBQy9ELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBRVAsQ0FBQztJQUVELGtCQUFrQjtRQUNkLEVBQUU7SUFDTixDQUFDOzs7WUE5QkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxpQkFBaUI7Z0JBQzNCLG1uQkFBMkM7O2FBRTlDOzs7WUFURyx1QkFBdUI7WUFDdkIsZ0JBQWdCO1lBZmhCLGlCQUFpQjtZQUVqQixVQUFVO1lBQ1YsU0FBUzs7O3lCQXNCUixLQUFLO3lCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyQ29udGVudEluaXQsXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29udGVudENoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgUmVuZGVyZXIyLFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ29tcG9uZW50LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBQZXBDdXN0b21pemF0aW9uU2VydmljZSxcbiAgICBQZXBMYXlvdXRTZXJ2aWNlLFxuICAgIFBlcFNjcmVlblNpemVUeXBlLFxufSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncGVwLXBhZ2UtbGF5b3V0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1sYXlvdXQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3BhZ2UtbGF5b3V0LmNvbXBvbmVudC5zY3NzJywgJy4vcGFnZS1sYXlvdXQuY29tcG9uZW50LnRoZW1lLnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwUGFnZUxheW91dENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBJbnB1dCgpIGFkZFBhZGRpbmcgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBzaG93U2hhZG93ID0gZmFsc2U7XG5cbiAgICBzY3JlZW5TaXplOiBQZXBTY3JlZW5TaXplVHlwZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgY3VzdG9taXphdGlvblNlcnZpY2U6IFBlcEN1c3RvbWl6YXRpb25TZXJ2aWNlLFxuICAgICAgICBwdWJsaWMgbGF5b3V0U2VydmljZTogUGVwTGF5b3V0U2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgIHByaXZhdGUgaG9zdEVsZW1lbnQ6IEVsZW1lbnRSZWYsXG4gICAgICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICApIHtcbiAgICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQsICdwZXAtcGFnZS1sYXlvdXQnKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMubGF5b3V0U2VydmljZS5vblJlc2l6ZSQuc3Vic2NyaWJlKChzaXplOiBQZXBTY3JlZW5TaXplVHlwZSkgPT4ge1xuICAgICAgICAgICAgdGhpcy5zY3JlZW5TaXplID0gc2l6ZTtcbiAgICAgICAgfSk7XG5cbiAgICB9XG5cbiAgICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgICAgIC8vXG4gICAgfVxuXG59XG4iXX0=
package/esm2015/top-bar/top-bar.component.js CHANGED
@@ -75,7 +75,7 @@ PepTopBarComponent.decorators = [
75
75
  { type: Component, args: [{
76
76
  selector: 'pep-top-bar',
77
77
  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>",
78
- 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;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.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%))}"]
78
+ 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;align-items:baseline}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:baseline}.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%))}"]
79
79
  },] }
80
80
  ];
81
81
  PepTopBarComponent.ctorParameters = () => [
package/fesm2015/pepperi-addons-ngx-lib-page-layout.js CHANGED
@@ -10,7 +10,7 @@ class PepPageLayoutComponent {
10
10
  this.cdRef = cdRef;
11
11
  this.hostElement = hostElement;
12
12
  this.renderer = renderer;
13
- this.addPadding = true;
13
+ this.addPadding = false;
14
14
  this.showShadow = false;
15
15
  this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');
16
16
  }
package/fesm2015/pepperi-addons-ngx-lib-page-layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-page-layout.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../projects/ngx-lib/page-layout/page-layout.module.ts","../../../projects/ngx-lib/page-layout/public-api.ts","../../../projects/ngx-lib/page-layout/pepperi-addons-ngx-lib-page-layout.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectorRef,\n ContentChild,\n ElementRef,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport {\n AfterViewInit,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutService,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-page-layout',\n templateUrl: './page-layout.component.html',\n styleUrls: ['./page-layout.component.scss', './page-layout.component.theme.scss'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n @Input() addPadding = true;\n @Input() showShadow = false;\n\n screenSize: PepScreenSizeType;\n\n constructor(\n public customizationService: PepCustomizationService,\n public layoutService: PepLayoutService,\n private cdRef: ChangeDetectorRef,\n private hostElement: ElementRef,\n private renderer: Renderer2,\n ) {\n this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\n }\n\n ngAfterViewInit(): void {\n this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n this.screenSize = size;\n });\n\n }\n\n ngAfterContentInit() {\n //\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepPageLayoutComponent } from './page-layout.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n // ngx-lib modules\n PepNgxLibModule,\n ],\n exports: [PepPageLayoutComponent],\n declarations: [PepPageLayoutComponent],\n})\nexport class PepPageLayoutModule { }\n","/*\n * Public API Surface of ngx-lib/page-layout\n */\nexport * from './page-layout.module';\nexport * from './page-layout.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MA0Ba,sBAAsB;IAM/B,YACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;QAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAAkB;QAC9B,UAAK,GAAL,KAAK,CAAmB;QACxB,gBAAW,GAAX,WAAW,CAAY;QACvB,aAAQ,GAAR,QAAQ,CAAW;QAVtB,eAAU,GAAG,IAAI,CAAC;QAClB,eAAU,GAAG,KAAK,CAAC;QAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;KAC7E;IAED,eAAe;QACX,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB;YAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KAEN;IAED,kBAAkB;;KAEjB;;;YA9BJ,SAAS,SAAC;gBACP,QAAQ,EAAE,iBAAiB;gBAC3B,mnBAA2C;;aAE9C;;;YATG,uBAAuB;YACvB,gBAAgB;YAfhB,iBAAiB;YAEjB,UAAU;YACV,SAAS;;;yBAsBR,KAAK;yBACL,KAAK;;;MCRG,mBAAmB;;;YAX/B,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;;oBAEf,eAAe;iBAClB;gBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;gBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;aACzC;;;ACnBD;;;;ACAA;;;;;;"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-page-layout.js","sources":["../../../projects/ngx-lib/page-layout/page-layout.component.ts","../../../projects/ngx-lib/page-layout/page-layout.module.ts","../../../projects/ngx-lib/page-layout/public-api.ts","../../../projects/ngx-lib/page-layout/pepperi-addons-ngx-lib-page-layout.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectorRef,\n ContentChild,\n ElementRef,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport {\n AfterViewInit,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutService,\n PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-page-layout',\n templateUrl: './page-layout.component.html',\n styleUrls: ['./page-layout.component.scss', './page-layout.component.theme.scss'],\n})\nexport class PepPageLayoutComponent implements AfterViewInit, AfterContentInit {\n @Input() addPadding = false;\n @Input() showShadow = false;\n\n screenSize: PepScreenSizeType;\n\n constructor(\n public customizationService: PepCustomizationService,\n public layoutService: PepLayoutService,\n private cdRef: ChangeDetectorRef,\n private hostElement: ElementRef,\n private renderer: Renderer2,\n ) {\n this.renderer.addClass(this.hostElement.nativeElement, 'pep-page-layout');\n }\n\n ngAfterViewInit(): void {\n this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n this.screenSize = size;\n });\n\n }\n\n ngAfterContentInit() {\n //\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepPageLayoutComponent } from './page-layout.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n // ngx-lib modules\n PepNgxLibModule,\n ],\n exports: [PepPageLayoutComponent],\n declarations: [PepPageLayoutComponent],\n})\nexport class PepPageLayoutModule { }\n","/*\n * Public API Surface of ngx-lib/page-layout\n */\nexport * from './page-layout.module';\nexport * from './page-layout.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MA0Ba,sBAAsB;IAM/B,YACW,oBAA6C,EAC7C,aAA+B,EAC9B,KAAwB,EACxB,WAAuB,EACvB,QAAmB;QAJpB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAAkB;QAC9B,UAAK,GAAL,KAAK,CAAmB;QACxB,gBAAW,GAAX,WAAW,CAAY;QACvB,aAAQ,GAAR,QAAQ,CAAW;QAVtB,eAAU,GAAG,KAAK,CAAC;QACnB,eAAU,GAAG,KAAK,CAAC;QAWxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;KAC7E;IAED,eAAe;QACX,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAuB;YAC3D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;KAEN;IAED,kBAAkB;;KAEjB;;;YA9BJ,SAAS,SAAC;gBACP,QAAQ,EAAE,iBAAiB;gBAC3B,mnBAA2C;;aAE9C;;;YATG,uBAAuB;YACvB,gBAAgB;YAfhB,iBAAiB;YAEjB,UAAU;YACV,SAAS;;;yBAsBR,KAAK;yBACL,KAAK;;;MCRG,mBAAmB;;;YAX/B,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;;oBAEZ,eAAe;;oBAEf,eAAe;iBAClB;gBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;gBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;aACzC;;;ACnBD;;;;ACAA;;;;;;"}
package/fesm2015/pepperi-addons-ngx-lib-top-bar.js CHANGED
@@ -81,7 +81,7 @@ PepTopBarComponent.decorators = [
81
81
  { type: Component, args: [{
82
82
  selector: 'pep-top-bar',
83
83
  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>",
84
- 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;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.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%))}"]
84
+ 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;align-items:baseline}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:baseline}.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%))}"]
85
85
  },] }
86
86
  ];
87
87
  PepTopBarComponent.ctorParameters = () => [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pepperi-addons/ngx-lib",
3
- "version": "0.3.6",
3
+ "version": "0.3.9-beta.1",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">= 12.0.0",
6
6
  "@angular/cdk": ">= 12.0.0",
package/src/assets/i18n/es.ngx-lib.json CHANGED
@@ -39,7 +39,7 @@
39
39
  },
40
40
  "ACTIONS": {
41
41
  "CONTINUE": "Continue",
42
- "DELETE": "Delete",
42
+ "DELETE": "Borrar",
43
43
  "CANCEL": "Cancelar",
44
44
  "CLEAR": "Borrar",
45
45
  "CLEAR_ALL": "Borrar todo",
package/src/assets/i18n/fr.ngx-lib.json CHANGED
@@ -66,7 +66,7 @@
66
66
  "ERROR_INVALID_FIELDS": "Veuillez valider les champs suivants :",
67
67
  "ERROR_INVENTORY_LIMIT": "Quantité max.",
68
68
  "ERROR_IS_NOT_VALID": "{{field}} n’est pas valide",
69
- "ERROR_IS_REQUIRED": "{{field}} n’est pas requis",
69
+ "ERROR_IS_REQUIRED": "{{field}} requise",
70
70
  "ERROR_MANDATORY_FIELDS": "Champ requis :",
71
71
  "ERROR_MAX_QUANTITY_LIMIT": "Quantité max.",
72
72
  "ERROR_MIN_QUANTITY_LIMIT": "Quantité min.",
@@ -74,6 +74,6 @@
74
74
  "INFO_LOADING_FILE": "Chargement en cours",
75
75
  "INFO_MISSING_FILE": "Fichier manquant",
76
76
  "INFO_MISSING_IMAGE": "Image manquante",
77
- "INFO_MISSING_SIGNATURE": "Signature manquante"
77
+ "INFO_MISSING_SIGNATURE": "Signature requise"
78
78
  }
79
79
  }
package/src/core/style/components/checkbox.scss CHANGED
@@ -30,6 +30,44 @@
30
30
  height: $checkbox-height;
31
31
  }
32
32
 
33
+ .checkbox-as-title {
34
+ margin-bottom: 0.5rem !important;
35
+ min-height: unset !important;
36
+
37
+ .pep-checkbox-container {
38
+ background: unset !important;
39
+ padding-left: unset !important;
40
+ padding-right: unset !important;
41
+
42
+ .mat-checkbox-inner-container {
43
+ margin-left: 0 !important;
44
+ margin-right: 0 !important;
45
+ }
46
+
47
+ .mat-checkbox-layout {
48
+ @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
49
+ font-weight: variables.$font-weight-bold !important;
50
+
51
+ .mat-checkbox-label span {
52
+ margin: 0 0.5rem;
53
+ }
54
+ }
55
+ }
56
+
57
+ // &.sub-title {
58
+ // .pep-checkbox-container {
59
+ // .mat-checkbox-layout {
60
+ // @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
61
+ // font-weight: variables.$font-weight-bold !important;
62
+
63
+ // .mat-checkbox-label span {
64
+ // margin: 0 0.5rem;
65
+ // }
66
+ // }
67
+ // }
68
+ // }
69
+ }
70
+
33
71
  // -----------------------------------------------------
34
72
  // Override material style
35
73
  // -----------------------------------------------------
package/top-bar/pepperi-addons-ngx-lib-top-bar.metadata.json CHANGED
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"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;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.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%))}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}
1
+ {"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"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;align-items:baseline}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:baseline}.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%))}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}