@hug/ngx-layout 22.0.0-alpha.1 → 22.0.0-alpha.10
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 +120 -0
- package/fesm2022/hug-ngx-layout-m2.mjs +6 -6
- package/fesm2022/hug-ngx-layout.mjs +343 -82
- package/fesm2022/hug-ngx-layout.mjs.map +1 -1
- package/package.json +3 -3
- package/translations/de-CH.json +6 -1
- package/translations/en-US.json +6 -1
- package/translations/fr-CH.json +6 -1
- package/types/hug-ngx-layout.d.ts +155 -47
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,123 @@
|
|
|
1
|
+
## 22.0.0-alpha.10 (2026-04-22)
|
|
2
|
+
|
|
3
|
+
### 🐛 Fixes
|
|
4
|
+
|
|
5
|
+
- **layout:** harmonize the selectors for directives and components #DESIGNSYS-115 ([ce50402](https://github.com/DSI-HUG/ngx-components/commit/ce50402))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Esther Layat
|
|
10
|
+
|
|
11
|
+
## 22.0.0-alpha.9 (2026-04-22)
|
|
12
|
+
|
|
13
|
+
### 🐛 Fixes
|
|
14
|
+
|
|
15
|
+
- **actions-group:** add missing export for action.directive #DESIGNSYS-213 ([0aaf713](https://github.com/DSI-HUG/ngx-components/commit/0aaf713))
|
|
16
|
+
|
|
17
|
+
### ❤️ Thank You
|
|
18
|
+
|
|
19
|
+
- Esther Layat
|
|
20
|
+
|
|
21
|
+
## 22.0.0-alpha.8 (2026-04-22)
|
|
22
|
+
|
|
23
|
+
### 🐛 Fixes
|
|
24
|
+
|
|
25
|
+
- **actions-group:** add NgxActionDirective and update content projection #DESIGNSYS-213 ([b137908](https://github.com/DSI-HUG/ngx-components/commit/b137908))
|
|
26
|
+
- **search-bar-container:** remove focus from the input at startup #DESIGNSYS-115 ([8be134b](https://github.com/DSI-HUG/ngx-components/commit/8be134b))
|
|
27
|
+
|
|
28
|
+
### ❤️ Thank You
|
|
29
|
+
|
|
30
|
+
- Esther Layat
|
|
31
|
+
|
|
32
|
+
## 22.0.0-alpha.7 (2026-04-14)
|
|
33
|
+
|
|
34
|
+
This was a version bump only for @hug/ngx-layout to align it with other projects, there were no code changes.
|
|
35
|
+
|
|
36
|
+
## 22.0.0-alpha.6 (2026-04-02)
|
|
37
|
+
|
|
38
|
+
### 🐛 Fixes
|
|
39
|
+
|
|
40
|
+
- **package:** update versions to 22.0.0-alpha.2 for multiple components ([4f38846](https://github.com/DSI-HUG/ngx-components/commit/4f38846))
|
|
41
|
+
|
|
42
|
+
### 🌱 Dependencies
|
|
43
|
+
|
|
44
|
+
- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.3`
|
|
45
|
+
- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.3`
|
|
46
|
+
|
|
47
|
+
### ❤️ Thank You
|
|
48
|
+
|
|
49
|
+
- Esther Layat
|
|
50
|
+
|
|
51
|
+
## 22.0.0-alpha.5 (2026-04-01)
|
|
52
|
+
|
|
53
|
+
### 🚀 Features
|
|
54
|
+
|
|
55
|
+
- **column:** add ngx-column component #DESIGNSYS-214 ([b04757f](https://github.com/DSI-HUG/ngx-components/commit/b04757f))
|
|
56
|
+
- **panel-bar:** update title handling and content projection #DESIGNSYS-104 ([39a25bb](https://github.com/DSI-HUG/ngx-components/commit/39a25bb))
|
|
57
|
+
- **main-bar:** add ngxContentLeft and ngxContentRight #DESIGNSYS-102 ([ffa96c6](https://github.com/DSI-HUG/ngx-components/commit/ffa96c6))
|
|
58
|
+
- **column-bar:** add support for ngxContentLeft and ngxContentRight projection #DESIGNSYS-179 ([9c314fc](https://github.com/DSI-HUG/ngx-components/commit/9c314fc))
|
|
59
|
+
|
|
60
|
+
### 🐛 Fixes
|
|
61
|
+
|
|
62
|
+
- **search-bar:** correct the variable names #DESIGNSYS-103 ([14d7e32](https://github.com/DSI-HUG/ngx-components/commit/14d7e32))
|
|
63
|
+
- **filters-group:** correct the variable names #DESIGNSYS-177 ([322270a](https://github.com/DSI-HUG/ngx-components/commit/322270a))
|
|
64
|
+
- **layout:** adjust the padding #DESIGNSYS-178 ([eaf75f6](https://github.com/DSI-HUG/ngx-components/commit/eaf75f6))
|
|
65
|
+
- **layout:** wrap ng-content in extra-content div and adjust padding #DESIGNSYS-178 ([7064b0f](https://github.com/DSI-HUG/ngx-components/commit/7064b0f))
|
|
66
|
+
- **panel-bar:** update first-child padding #DESIGNSYS-104 ([ce02016](https://github.com/DSI-HUG/ngx-components/commit/ce02016))
|
|
67
|
+
- **main-bar:** update padding #DESIGNSYS-102 ([ab0c38d](https://github.com/DSI-HUG/ngx-components/commit/ab0c38d))
|
|
68
|
+
- **app-bar:** update padding variable #DESIGNSYS-101 ([5a771a3](https://github.com/DSI-HUG/ngx-components/commit/5a771a3))
|
|
69
|
+
- **app-bar:** add padding to the sides and simplify the padding #DESIGNSYS-101 ([3029772](https://github.com/DSI-HUG/ngx-components/commit/3029772))
|
|
70
|
+
- **column-bar, panel-bar:** update ngxContentLeft and ngxContentRight #DESIGNSYS-179 ([52cf25d](https://github.com/DSI-HUG/ngx-components/commit/52cf25d))
|
|
71
|
+
- **column-bar:** wrap title content in conditional block for better rendering #DESIGNSYS-179 ([2eb7e57](https://github.com/DSI-HUG/ngx-components/commit/2eb7e57))
|
|
72
|
+
- **search-bar-container:** replace hardcoded max-width with CSS variable #DESIGNSYS-103 ([1b53406](https://github.com/DSI-HUG/ngx-components/commit/1b53406))
|
|
73
|
+
- **column-bar:** add min-height variable #DESIGNSYS-179 ([086aae8](https://github.com/DSI-HUG/ngx-components/commit/086aae8))
|
|
74
|
+
- **filters-group:** adjust mat-chip-set styling for better appearance #DESIGNSYS-177 ([ff51834](https://github.com/DSI-HUG/ngx-components/commit/ff51834))
|
|
75
|
+
- **column-bar:** simplify flex behavior for ngx-column-bar elements #DESIGNSYS-179 ([c4ff3c2](https://github.com/DSI-HUG/ngx-components/commit/c4ff3c2))
|
|
76
|
+
|
|
77
|
+
### 🌱 Dependencies
|
|
78
|
+
|
|
79
|
+
- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.2`
|
|
80
|
+
- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.2`
|
|
81
|
+
|
|
82
|
+
### ❤️ Thank You
|
|
83
|
+
|
|
84
|
+
- Esther Layat
|
|
85
|
+
|
|
86
|
+
## 22.0.0-alpha.4 (2026-03-24)
|
|
87
|
+
|
|
88
|
+
### 🐛 Fixes
|
|
89
|
+
|
|
90
|
+
- **layout:** add exports for column-bar and panel-bar #DESIGNSYS-104 ([0fa772b](https://github.com/DSI-HUG/ngx-components/commit/0fa772b))
|
|
91
|
+
|
|
92
|
+
### ❤️ Thank You
|
|
93
|
+
|
|
94
|
+
- Esther Layat
|
|
95
|
+
|
|
96
|
+
## 22.0.0-alpha.3 (2026-03-20)
|
|
97
|
+
|
|
98
|
+
### 🚀 Features
|
|
99
|
+
|
|
100
|
+
- **column-bar:** add ngx-column-bar component #DESIGNSYS-179 ([7d32d1a](https://github.com/DSI-HUG/ngx-components/commit/7d32d1a))
|
|
101
|
+
- **panel-bar:** add ngx-panel-bar component #DESIGNSYS-104 ([5d4b476](https://github.com/DSI-HUG/ngx-components/commit/5d4b476))
|
|
102
|
+
|
|
103
|
+
### 🐛 Fixes
|
|
104
|
+
|
|
105
|
+
- **translations:** correction of the German translation for "active" #DESIGNSYS-177 ([82dd0cb](https://github.com/DSI-HUG/ngx-components/commit/82dd0cb))
|
|
106
|
+
|
|
107
|
+
### ❤️ Thank You
|
|
108
|
+
|
|
109
|
+
- Esther Layat
|
|
110
|
+
|
|
111
|
+
## 22.0.0-alpha.2 (2026-03-18)
|
|
112
|
+
|
|
113
|
+
### 🚀 Features
|
|
114
|
+
|
|
115
|
+
- **filters-group:** add filters-group component #DESIGNSYS-177 ([dea1a5f](https://github.com/DSI-HUG/ngx-components/commit/dea1a5f))
|
|
116
|
+
|
|
117
|
+
### ❤️ Thank You
|
|
118
|
+
|
|
119
|
+
- Esther Layat
|
|
120
|
+
|
|
1
121
|
## 22.0.0-alpha.1 (2026-03-13)
|
|
2
122
|
|
|
3
123
|
### 🚀 Features
|
|
@@ -17,10 +17,10 @@ class NgxLayoutIntl extends NgxAbstractIntl {
|
|
|
17
17
|
closeLabel = '';
|
|
18
18
|
backLabel = '';
|
|
19
19
|
sideFilterLabel = '';
|
|
20
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
21
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl });
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutIntl, decorators: [{
|
|
24
24
|
type: Injectable
|
|
25
25
|
}] });
|
|
26
26
|
|
|
@@ -110,10 +110,10 @@ class NgxLayoutComponent {
|
|
|
110
110
|
openSideFilter() {
|
|
111
111
|
void this.sideFilter?.open();
|
|
112
112
|
}
|
|
113
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", 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]=\"intl?.backLabel ?? 'Back'\">\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]=\"intl?.sideFilterLabel ?? 'Show/Hide filters'\">\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]=\"intl?.closeLabel ?? 'Close'\">\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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", 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]=\"intl?.backLabel ?? 'Back'\">\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]=\"intl?.sideFilterLabel ?? 'Show/Hide filters'\">\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]=\"intl?.closeLabel ?? 'Close'\">\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: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgxLayoutComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
118
|
args: [{ selector: 'ngx-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
119
119
|
NgTemplateOutlet,
|