@testgorilla/tgo-ui 2.24.17 → 2.24.19

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.
@@ -42,11 +42,11 @@ export class PageHeaderComponent {
42
42
  this.back.emit();
43
43
  }
44
44
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
45
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UiTranslatePipe, name: "uiTranslate" }] }); }
45
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:calc(20px + 100vw - 100%);padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:calc(40px + 100vw - 100%);padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:calc(64px + 100vw - 100%);padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UiTranslatePipe, name: "uiTranslate" }] }); }
46
46
  }
47
47
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
48
48
  type: Component,
49
- args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
49
+ args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:calc(20px + 100vw - 100%);padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:calc(40px + 100vw - 100%);padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:calc(64px + 100vw - 100%);padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
50
50
  }], ctorParameters: () => [{ type: undefined, decorators: [{
51
51
  type: Optional
52
52
  }, {
@@ -12419,11 +12419,11 @@ class PageHeaderComponent {
12419
12419
  this.back.emit();
12420
12420
  }
12421
12421
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
12422
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
12422
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:calc(20px + 100vw - 100%);padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:calc(40px + 100vw - 100%);padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:calc(64px + 100vw - 100%);padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
12423
12423
  }
12424
12424
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
12425
12425
  type: Component,
12426
- args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:20px;padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:40px;padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:64px;padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
12426
+ args: [{ selector: 'ui-page-header', template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"(('COMMON.BACK') | uiTranslate | async)!\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.page-header-container{border-bottom:1px solid #E0E0E0;background-color:#fff;padding-left:calc(20px + 100vw - 100%);padding-right:20px}@media (min-width: 960px){.page-header-container{padding-left:calc(40px + 100vw - 100%);padding-right:40px}}@media (min-width: 1280px){.page-header-container{padding-left:calc(64px + 100vw - 100%);padding-right:64px}}.page-header-container .page-header-content{display:flex;flex-direction:row;align-items:center;padding-top:16px;padding-bottom:16px;max-width:1312px;min-height:48px;margin:0 auto}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding-top:8px;padding-bottom:8px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\n"] }]
12427
12427
  }], ctorParameters: () => [{ type: undefined, decorators: [{
12428
12428
  type: Optional
12429
12429
  }, {