@hug/ngx-layout 3.0.1 → 3.0.2
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.
- package/CHANGELOG.md +10 -0
- package/fesm2022/hug-ngx-layout.mjs +4 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, inject, ElementRef,
|
|
4
|
+
import { EventEmitter, inject, ElementRef, Input, ViewChild, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
5
5
|
import { MatIconButton } from '@angular/material/button';
|
|
6
6
|
import { MatIcon } from '@angular/material/icon';
|
|
7
7
|
import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
|
|
@@ -89,10 +89,10 @@ class NgxLayoutComponent {
|
|
|
89
89
|
openSideFilter() {
|
|
90
90
|
void this.sideFilter?.open();
|
|
91
91
|
}
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, queries: [{ propertyName: "layoutToolbarContent", first: true, predicate: ["layoutToolbar"], descendants: true }, { propertyName: "layoutPrimaryActionContent", first: true, predicate: ["layoutPrimaryAction"], descendants: true }, { propertyName: "layoutActionsContent", first: true, predicate: ["layoutActions"], descendants: true }, { propertyName: "layoutInfoBoxesContent", first: true, predicate: ["layoutInfoBoxes"], descendants: true }, { propertyName: "layoutRightContent", first: true, predicate: ["layoutRight"], descendants: true }], viewQueries: [{ propertyName: "sideFilter", first: true, predicate: ["sideFilter"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"backButtonLabel\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n <div id=\"toolbar-content-container\">\n @if (layoutToolbar) {\n <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n }\n </div>\n @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n <button\n type=\"button\"\n id=\"filter-button\"\n mat-icon-button\n (click)=\"sideFilter.toggle()\"\n matTooltip=\"Afficher/Masquer les filtres\">\n <mat-icon>tune</mat-icon>\n </button>\n }\n @if (withCloseButton) {\n <button\n type=\"button\"\n id=\"close-button\"\n mat-icon-button\n (click)=\"this.closeButtonClicked.emit($event)\"\n [matTooltip]=\"closeButtonLabel\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-toolbar>\n }\n\n @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n @if (layoutRight) {\n <mat-drawer-container autosize=\"true\">\n <mat-drawer-content>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </mat-drawer-content>\n <mat-drawer\n id=\"side-filter\"\n #sideFilter\n (closed)=\"sideFilterClosed.emit()\"\n (openedChange)=\"sideFilterOpened.emit()\"\n class=\"right\"\n position=\"end\"\n [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n [opened]=\"(mediaService.isHandset$ | async) === false\">\n <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n </mat-drawer>\n </mat-drawer-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer#side-filter{width:220px}ngx-layout mat-drawer#side-filter.right{padding:.3rem}ngx-layout mat-drawer#side-filter.right [filters-title]{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:700;padding:.6rem;margin-bottom:.3rem}ngx-layout mat-drawer#side-filter.right [filters-subtitle]{font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:600;padding:.4rem .6rem;margin-bottom:.3rem;margin-top:.3rem}ngx-layout mat-drawer#side-filter.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer#side-filter.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] mat-chip-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer#side-filter.right mat-form-field{width:100%}ngx-layout mat-drawer#side-filter.right .mat-mdc-form-field-infix{width:inherit}ngx-layout mat-drawer#side-filter.right.mat-drawer-side{box-shadow:-3px 0 5px -1px #0003;z-index:10}ngx-layout mat-drawer-container{flex:1}ngx-layout .mat-toolbar:not(.actions){display:flex;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;z-index:10}ngx-layout .mat-toolbar:not(.actions) #toolbar-content-container{display:flex;flex-grow:1;overflow:hidden}ngx-layout .mat-toolbar:not(.actions) [toolbar-title]{overflow:hidden;text-overflow:ellipsis}ngx-layout .mat-toolbar:not(.actions)>div{display:flex;align-items:center}ngx-layout .mat-toolbar .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
92
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, queries: [{ propertyName: "layoutToolbarContent", first: true, predicate: ["layoutToolbar"], descendants: true }, { propertyName: "layoutPrimaryActionContent", first: true, predicate: ["layoutPrimaryAction"], descendants: true }, { propertyName: "layoutActionsContent", first: true, predicate: ["layoutActions"], descendants: true }, { propertyName: "layoutInfoBoxesContent", first: true, predicate: ["layoutInfoBoxes"], descendants: true }, { propertyName: "layoutRightContent", first: true, predicate: ["layoutRight"], descendants: true }], viewQueries: [{ propertyName: "sideFilter", first: true, predicate: ["sideFilter"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"backButtonLabel\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n <div id=\"toolbar-content-container\">\n @if (layoutToolbar) {\n <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n }\n </div>\n @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n <button\n type=\"button\"\n id=\"filter-button\"\n mat-icon-button\n (click)=\"sideFilter.toggle()\"\n matTooltip=\"Afficher/Masquer les filtres\">\n <mat-icon>tune</mat-icon>\n </button>\n }\n @if (withCloseButton) {\n <button\n type=\"button\"\n id=\"close-button\"\n mat-icon-button\n (click)=\"this.closeButtonClicked.emit($event)\"\n [matTooltip]=\"closeButtonLabel\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-toolbar>\n }\n\n @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n @if (layoutRight) {\n <mat-drawer-container autosize=\"true\">\n <mat-drawer-content>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </mat-drawer-content>\n <mat-drawer\n id=\"side-filter\"\n #sideFilter\n (closed)=\"sideFilterClosed.emit()\"\n (openedChange)=\"sideFilterOpened.emit()\"\n class=\"right\"\n position=\"end\"\n [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n [opened]=\"(mediaService.isHandset$ | async) === false\">\n <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n </mat-drawer>\n </mat-drawer-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer#side-filter{width:220px}ngx-layout mat-drawer#side-filter.right{padding:.3rem}ngx-layout mat-drawer#side-filter.right [filters-title]{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:700;padding:.6rem;margin-bottom:.3rem}ngx-layout mat-drawer#side-filter.right [filters-subtitle]{font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:600;padding:.4rem .6rem;margin-bottom:.3rem;margin-top:.3rem}ngx-layout mat-drawer#side-filter.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer#side-filter.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] mat-chip-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer#side-filter.right mat-form-field{width:100%}ngx-layout mat-drawer#side-filter.right .mat-mdc-form-field-infix{width:inherit}ngx-layout mat-drawer#side-filter.right.mat-drawer-side{box-shadow:-3px 0 5px -1px #0003;z-index:10}ngx-layout mat-drawer-container{flex:1}ngx-layout .mat-toolbar:not(.actions){display:flex;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;z-index:10}ngx-layout .mat-toolbar:not(.actions) #toolbar-content-container{display:flex;flex-grow:1;overflow:hidden}ngx-layout .mat-toolbar:not(.actions) [toolbar-title]{overflow:hidden;text-overflow:ellipsis}ngx-layout .mat-toolbar:not(.actions)>div{display:flex;align-items:center}ngx-layout .mat-toolbar .mat-mdc-icon-button{height:40px;line-height:40px;width:40px;display:flex;justify-content:center;align-items:center;padding:0}ngx-layout .mat-toolbar#actions-toolbar{flex:0 0 auto;height:40px;font-size:inherit;padding-right:0}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container{display:flex;flex:1 1 auto;justify-content:flex-end}ngx-layout .mat-toolbar#actions-toolbar .info-boxes-container .info-box{display:flex;flex-grow:0;line-height:40px;padding-left:2rem;padding-right:2rem;box-shadow:-3px 0 5px -1px #0003}ngx-layout .mat-toolbar#actions-toolbar.bottom#actions-toolbar{display:flex;width:100%;justify-content:space-around}ngx-layout .mat-toolbar#actions-toolbar .primary-action-container{z-index:20}ngx-layout .main-content{position:relative;display:flex;flex:1 1 auto;overflow:hidden}ngx-layout .main-content .primary-action-container{position:absolute;z-index:20;opacity:.8;transition:.3s ease-in-out}ngx-layout .main-content .primary-action-container:hover{opacity:1}ngx-layout .main-content .primary-action-container.bottom{right:1rem;bottom:1rem}ngx-layout .main-content .primary-action-container:not(.bottom){top:1rem;left:1rem}ngx-layout ::-webkit-scrollbar{width:12px;height:12px}ngx-layout ::-webkit-scrollbar-thumb{transition:.3s ease-in-out;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
97
|
args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
98
98
|
NgTemplateOutlet,
|