@hug/ngx-layout 3.0.2 → 3.0.4
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
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## 3.0.4 (2025-09-25)
|
|
2
|
+
|
|
3
|
+
### 🌱 Dependencies
|
|
4
|
+
|
|
5
|
+
- **@hug/ngx-sidenav**: upgraded to `v3.0.2`
|
|
6
|
+
- **@hug/ngx-core**: upgraded to `v3.0.2`
|
|
7
|
+
|
|
8
|
+
## 3.0.3 (2025-06-04)
|
|
9
|
+
|
|
10
|
+
### 🐛 Fixes
|
|
11
|
+
|
|
12
|
+
- **ngx-layout:** title shrinks when content is scrollable and no lateral filters (NGXCPTS-20) ([d62a8ea](https://github.com/DSI-HUG/ngx-components/commit/d62a8ea))
|
|
13
|
+
|
|
14
|
+
### ❤️ Thank You
|
|
15
|
+
|
|
16
|
+
- pdth
|
|
17
|
+
|
|
1
18
|
## 3.0.2 (2025-05-12)
|
|
2
19
|
|
|
3
20
|
### 🐛 Fixes
|
|
@@ -90,7 +90,7 @@ class NgxLayoutComponent {
|
|
|
90
90
|
void this.sideFilter?.open();
|
|
91
91
|
}
|
|
92
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 });
|
|
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;flex-shrink:0;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
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
104
104
|
MatDrawerContent,
|
|
105
105
|
MatToolbar,
|
|
106
106
|
MatTooltip
|
|
107
|
-
], 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"] }]
|
|
107
|
+
], 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;flex-shrink:0;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"] }]
|
|
108
108
|
}], propDecorators: { toolbarColor: [{
|
|
109
109
|
type: Input
|
|
110
110
|
}], editorToolbarId: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav';\n\n@Component({\n selector: 'ngx-layout',\n templateUrl: './layout.component.html',\n styleUrls: ['./layout.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n AsyncPipe,\n MatIconButton,\n MatIcon,\n MatDrawer,\n MatDrawerContainer,\n MatDrawerContent,\n MatToolbar,\n MatTooltip\n ]\n})\nexport class NgxLayoutComponent {\n @Input() public toolbarColor = 'primary';\n @Input() public editorToolbarId = 'editor-toolbar';\n\n @Input() public closeButtonLabel = 'Fermer';\n @Input() public backButtonLabel = 'Retour';\n\n @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n protected mediaService = inject(NgxMediaService);\n protected sidenavService = inject(NgxSidenavService);\n protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n public get layoutToolbar(): TemplateRef<unknown> | undefined {\n return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n }\n\n public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n }\n\n public get layoutActions(): TemplateRef<unknown> | undefined {\n return this.layoutActionsExternal ?? this.layoutActionsContent;\n }\n\n public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n }\n\n public get layoutRight(): TemplateRef<unknown> | undefined {\n const value = this.layoutRightExternal ?? this.layoutRightContent;\n if (!value) {\n this.elementRef.nativeElement.setAttribute('no-right', 'true');\n } else {\n this.elementRef.nativeElement.removeAttribute('no-right');\n }\n return value;\n }\n\n private _withSidenav = false;\n\n @Input()\n public set withSidenav(value: BooleanInput) {\n this._withSidenav = coerceBooleanProperty(value);\n }\n\n public get withSidenav(): BooleanInput {\n return this._withSidenav;\n }\n\n private _keepFilterButtonDisplayed = true;\n\n @Input()\n public set keepFilterButtonDisplayed(value: BooleanInput) {\n this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n }\n\n public get keepFilterButtonDisplayed(): BooleanInput {\n return this._keepFilterButtonDisplayed;\n }\n\n private _withCloseButton = false;\n\n @Input()\n public set withCloseButton(value: BooleanInput) {\n this._withCloseButton = coerceBooleanProperty(value);\n }\n\n public get withCloseButton(): BooleanInput {\n return this._withCloseButton;\n }\n\n private _withBackButton = false;\n\n @Input()\n public set withBackButton(value: BooleanInput) {\n this._withBackButton = coerceBooleanProperty(value);\n }\n\n public get withBackButton(): BooleanInput {\n return this._withBackButton;\n }\n\n public closeSideFilter(): void {\n void this.sideFilter?.close();\n }\n\n public openSideFilter(): void {\n void this.sideFilter?.open();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;MA6Ba,kBAAkB,CAAA;IACX,YAAY,GAAG,SAAS;IACxB,eAAe,GAAG,gBAAgB;IAElC,gBAAgB,GAAG,QAAQ;IAC3B,eAAe,GAAG,QAAQ;AAE1B,IAAA,qBAAqB;AACrB,IAAA,2BAA2B;AAC3B,IAAA,qBAAqB;AACrB,IAAA,uBAAuB;AACvB,IAAA,mBAAmB;AAET,IAAA,kBAAkB,GAAG,IAAI,YAAY,EAAc;AACnD,IAAA,iBAAiB,GAAG,IAAI,YAAY,EAAc;AAClD,IAAA,gBAAgB,GAAG,IAAI,YAAY,EAAQ;AAC3C,IAAA,gBAAgB,GAAG,IAAI,YAAY,EAAQ;AAE5B,IAAA,oBAAoB;AACd,IAAA,0BAA0B;AAChC,IAAA,oBAAoB;AAClB,IAAA,sBAAsB;AAC1B,IAAA,kBAAkB;AAEtB,IAAA,UAAU;AAEnC,IAAA,YAAY,GAAG,MAAM,CAAC,eAAe,CAAC;AACtC,IAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC1C,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAElE,IAAA,IAAW,aAAa,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,oBAAoB;;AAGlE,IAAA,IAAW,mBAAmB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,2BAA2B,IAAI,IAAI,CAAC,0BAA0B;;AAG9E,IAAA,IAAW,aAAa,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,oBAAoB;;AAGlE,IAAA,IAAW,eAAe,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,sBAAsB;;AAGtE,IAAA,IAAW,WAAW,GAAA;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB;QACjE,IAAI,CAAC,KAAK,EAAE;YACR,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;;aAC3D;YACH,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC;;AAE7D,QAAA,OAAO,KAAK;;IAGR,YAAY,GAAG,KAAK;IAE5B,IACW,WAAW,CAAC,KAAmB,EAAA;AACtC,QAAA,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAGpD,IAAA,IAAW,WAAW,GAAA;QAClB,OAAO,IAAI,CAAC,YAAY;;IAGpB,0BAA0B,GAAG,IAAI;IAEzC,IACW,yBAAyB,CAAC,KAAmB,EAAA;AACpD,QAAA,IAAI,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAGlE,IAAA,IAAW,yBAAyB,GAAA;QAChC,OAAO,IAAI,CAAC,0BAA0B;;IAGlC,gBAAgB,GAAG,KAAK;IAEhC,IACW,eAAe,CAAC,KAAmB,EAAA;AAC1C,QAAA,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAGxD,IAAA,IAAW,eAAe,GAAA;QACtB,OAAO,IAAI,CAAC,gBAAgB;;IAGxB,eAAe,GAAG,KAAK;IAE/B,IACW,cAAc,CAAC,KAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC;;AAGvD,IAAA,IAAW,cAAc,GAAA;QACrB,OAAO,IAAI,CAAC,eAAe;;IAGxB,eAAe,GAAA;AAClB,QAAA,KAAK,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE;;IAG1B,cAAc,GAAA;AACjB,QAAA,KAAK,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;uGAzGvB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,w6CC7B/B,4nJA+GA,EAAA,MAAA,EAAA,CAAA,0sIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7FQ,gBAAgB,EAChB,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,SAAS,8CACT,aAAa,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,OAAO,EACP,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,SAAS,qPACT,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,gBAAgB,EAChB,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,UAAU,qGACV,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAGL,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAlB9B,SAAS;+BACI,YAAY,EAAA,aAAA,EAGP,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACL,gBAAgB;wBAChB,SAAS;wBACT,aAAa;wBACb,OAAO;wBACP,SAAS;wBACT,kBAAkB;wBAClB,gBAAgB;wBAChB,UAAU;wBACV;AACH,qBAAA,EAAA,QAAA,EAAA,4nJAAA,EAAA,MAAA,EAAA,CAAA,0sIAAA,CAAA,EAAA;8BAGe,YAAY,EAAA,CAAA;sBAA3B;gBACe,eAAe,EAAA,CAAA;sBAA9B;gBAEe,gBAAgB,EAAA,CAAA;sBAA/B;gBACe,eAAe,EAAA,CAAA;sBAA9B;gBAEe,qBAAqB,EAAA,CAAA;sBAApC;gBACe,2BAA2B,EAAA,CAAA;sBAA1C;gBACe,qBAAqB,EAAA,CAAA;sBAApC;gBACe,uBAAuB,EAAA,CAAA;sBAAtC;gBACe,mBAAmB,EAAA,CAAA;sBAAlC;gBAEyB,kBAAkB,EAAA,CAAA;sBAA3C;gBACyB,iBAAiB,EAAA,CAAA;sBAA1C;gBACyB,gBAAgB,EAAA,CAAA;sBAAzC;gBACyB,gBAAgB,EAAA,CAAA;sBAAzC;gBAEwC,oBAAoB,EAAA,CAAA;sBAA5D,YAAY;uBAAC,eAAe;gBACkB,0BAA0B,EAAA,CAAA;sBAAxE,YAAY;uBAAC,qBAAqB;gBACM,oBAAoB,EAAA,CAAA;sBAA5D,YAAY;uBAAC,eAAe;gBACc,sBAAsB,EAAA,CAAA;sBAAhE,YAAY;uBAAC,iBAAiB;gBACQ,kBAAkB,EAAA,CAAA;sBAAxD,YAAY;uBAAC,aAAa;gBAEQ,UAAU,EAAA,CAAA;sBAA5C,SAAS;uBAAC,YAAY;gBAmCZ,WAAW,EAAA,CAAA;sBADrB;gBAYU,yBAAyB,EAAA,CAAA;sBADnC;gBAYU,eAAe,EAAA,CAAA;sBADzB;gBAYU,cAAc,EAAA,CAAA;sBADxB;;;AExHL;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav';\n\n@Component({\n selector: 'ngx-layout',\n templateUrl: './layout.component.html',\n styleUrls: ['./layout.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n AsyncPipe,\n MatIconButton,\n MatIcon,\n MatDrawer,\n MatDrawerContainer,\n MatDrawerContent,\n MatToolbar,\n MatTooltip\n ]\n})\nexport class NgxLayoutComponent {\n @Input() public toolbarColor = 'primary';\n @Input() public editorToolbarId = 'editor-toolbar';\n\n @Input() public closeButtonLabel = 'Fermer';\n @Input() public backButtonLabel = 'Retour';\n\n @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n protected mediaService = inject(NgxMediaService);\n protected sidenavService = inject(NgxSidenavService);\n protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n public get layoutToolbar(): TemplateRef<unknown> | undefined {\n return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n }\n\n public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n }\n\n public get layoutActions(): TemplateRef<unknown> | undefined {\n return this.layoutActionsExternal ?? this.layoutActionsContent;\n }\n\n public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n }\n\n public get layoutRight(): TemplateRef<unknown> | undefined {\n const value = this.layoutRightExternal ?? this.layoutRightContent;\n if (!value) {\n this.elementRef.nativeElement.setAttribute('no-right', 'true');\n } else {\n this.elementRef.nativeElement.removeAttribute('no-right');\n }\n return value;\n }\n\n private _withSidenav = false;\n\n @Input()\n public set withSidenav(value: BooleanInput) {\n this._withSidenav = coerceBooleanProperty(value);\n }\n\n public get withSidenav(): BooleanInput {\n return this._withSidenav;\n }\n\n private _keepFilterButtonDisplayed = true;\n\n @Input()\n public set keepFilterButtonDisplayed(value: BooleanInput) {\n this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n }\n\n public get keepFilterButtonDisplayed(): BooleanInput {\n return this._keepFilterButtonDisplayed;\n }\n\n private _withCloseButton = false;\n\n @Input()\n public set withCloseButton(value: BooleanInput) {\n this._withCloseButton = coerceBooleanProperty(value);\n }\n\n public get withCloseButton(): BooleanInput {\n return this._withCloseButton;\n }\n\n private _withBackButton = false;\n\n @Input()\n public set withBackButton(value: BooleanInput) {\n this._withBackButton = coerceBooleanProperty(value);\n }\n\n public get withBackButton(): BooleanInput {\n return this._withBackButton;\n }\n\n public closeSideFilter(): void {\n void this.sideFilter?.close();\n }\n\n public openSideFilter(): void {\n void this.sideFilter?.open();\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/ngx-layout",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"description": "HUG Angular - layout component",
|
|
5
5
|
"homepage": "https://github.com/dsi-hug/ngx-components",
|
|
6
6
|
"license": "GPL-3.0-only",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@angular/core": ">=19 <20",
|
|
36
36
|
"@angular/cdk": ">=19 <20",
|
|
37
37
|
"@angular/material": ">=19 <20",
|
|
38
|
-
"@hug/ngx-core": "^3.0.
|
|
39
|
-
"@hug/ngx-sidenav": "^3.0.
|
|
38
|
+
"@hug/ngx-core": "^3.0.2",
|
|
39
|
+
"@hug/ngx-sidenav": "^3.0.2"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"tslib": "^2.7.0"
|