@hug/ngx-layout 22.0.0-alpha.1 → 22.0.0-alpha.11
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 +130 -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,133 @@
|
|
|
1
|
+
## 22.0.0-alpha.11 (2026-04-24)
|
|
2
|
+
|
|
3
|
+
### 🐛 Fixes
|
|
4
|
+
|
|
5
|
+
- **panel-bar:** rename hasBackButton to withBackButton for consistency #DESIGNSYS-115 ([92365ba](https://github.com/DSI-HUG/ngx-components/commit/92365ba))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Esther Layat
|
|
10
|
+
|
|
11
|
+
## 22.0.0-alpha.10 (2026-04-22)
|
|
12
|
+
|
|
13
|
+
### 🐛 Fixes
|
|
14
|
+
|
|
15
|
+
- **layout:** harmonize the selectors for directives and components #DESIGNSYS-115 ([ce50402](https://github.com/DSI-HUG/ngx-components/commit/ce50402))
|
|
16
|
+
|
|
17
|
+
### ❤️ Thank You
|
|
18
|
+
|
|
19
|
+
- Esther Layat
|
|
20
|
+
|
|
21
|
+
## 22.0.0-alpha.9 (2026-04-22)
|
|
22
|
+
|
|
23
|
+
### 🐛 Fixes
|
|
24
|
+
|
|
25
|
+
- **actions-group:** add missing export for action.directive #DESIGNSYS-213 ([0aaf713](https://github.com/DSI-HUG/ngx-components/commit/0aaf713))
|
|
26
|
+
|
|
27
|
+
### ❤️ Thank You
|
|
28
|
+
|
|
29
|
+
- Esther Layat
|
|
30
|
+
|
|
31
|
+
## 22.0.0-alpha.8 (2026-04-22)
|
|
32
|
+
|
|
33
|
+
### 🐛 Fixes
|
|
34
|
+
|
|
35
|
+
- **actions-group:** add NgxActionDirective and update content projection #DESIGNSYS-213 ([b137908](https://github.com/DSI-HUG/ngx-components/commit/b137908))
|
|
36
|
+
- **search-bar-container:** remove focus from the input at startup #DESIGNSYS-115 ([8be134b](https://github.com/DSI-HUG/ngx-components/commit/8be134b))
|
|
37
|
+
|
|
38
|
+
### ❤️ Thank You
|
|
39
|
+
|
|
40
|
+
- Esther Layat
|
|
41
|
+
|
|
42
|
+
## 22.0.0-alpha.7 (2026-04-14)
|
|
43
|
+
|
|
44
|
+
This was a version bump only for @hug/ngx-layout to align it with other projects, there were no code changes.
|
|
45
|
+
|
|
46
|
+
## 22.0.0-alpha.6 (2026-04-02)
|
|
47
|
+
|
|
48
|
+
### 🐛 Fixes
|
|
49
|
+
|
|
50
|
+
- **package:** update versions to 22.0.0-alpha.2 for multiple components ([4f38846](https://github.com/DSI-HUG/ngx-components/commit/4f38846))
|
|
51
|
+
|
|
52
|
+
### 🌱 Dependencies
|
|
53
|
+
|
|
54
|
+
- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.3`
|
|
55
|
+
- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.3`
|
|
56
|
+
|
|
57
|
+
### ❤️ Thank You
|
|
58
|
+
|
|
59
|
+
- Esther Layat
|
|
60
|
+
|
|
61
|
+
## 22.0.0-alpha.5 (2026-04-01)
|
|
62
|
+
|
|
63
|
+
### 🚀 Features
|
|
64
|
+
|
|
65
|
+
- **column:** add ngx-column component #DESIGNSYS-214 ([b04757f](https://github.com/DSI-HUG/ngx-components/commit/b04757f))
|
|
66
|
+
- **panel-bar:** update title handling and content projection #DESIGNSYS-104 ([39a25bb](https://github.com/DSI-HUG/ngx-components/commit/39a25bb))
|
|
67
|
+
- **main-bar:** add ngxContentLeft and ngxContentRight #DESIGNSYS-102 ([ffa96c6](https://github.com/DSI-HUG/ngx-components/commit/ffa96c6))
|
|
68
|
+
- **column-bar:** add support for ngxContentLeft and ngxContentRight projection #DESIGNSYS-179 ([9c314fc](https://github.com/DSI-HUG/ngx-components/commit/9c314fc))
|
|
69
|
+
|
|
70
|
+
### 🐛 Fixes
|
|
71
|
+
|
|
72
|
+
- **search-bar:** correct the variable names #DESIGNSYS-103 ([14d7e32](https://github.com/DSI-HUG/ngx-components/commit/14d7e32))
|
|
73
|
+
- **filters-group:** correct the variable names #DESIGNSYS-177 ([322270a](https://github.com/DSI-HUG/ngx-components/commit/322270a))
|
|
74
|
+
- **layout:** adjust the padding #DESIGNSYS-178 ([eaf75f6](https://github.com/DSI-HUG/ngx-components/commit/eaf75f6))
|
|
75
|
+
- **layout:** wrap ng-content in extra-content div and adjust padding #DESIGNSYS-178 ([7064b0f](https://github.com/DSI-HUG/ngx-components/commit/7064b0f))
|
|
76
|
+
- **panel-bar:** update first-child padding #DESIGNSYS-104 ([ce02016](https://github.com/DSI-HUG/ngx-components/commit/ce02016))
|
|
77
|
+
- **main-bar:** update padding #DESIGNSYS-102 ([ab0c38d](https://github.com/DSI-HUG/ngx-components/commit/ab0c38d))
|
|
78
|
+
- **app-bar:** update padding variable #DESIGNSYS-101 ([5a771a3](https://github.com/DSI-HUG/ngx-components/commit/5a771a3))
|
|
79
|
+
- **app-bar:** add padding to the sides and simplify the padding #DESIGNSYS-101 ([3029772](https://github.com/DSI-HUG/ngx-components/commit/3029772))
|
|
80
|
+
- **column-bar, panel-bar:** update ngxContentLeft and ngxContentRight #DESIGNSYS-179 ([52cf25d](https://github.com/DSI-HUG/ngx-components/commit/52cf25d))
|
|
81
|
+
- **column-bar:** wrap title content in conditional block for better rendering #DESIGNSYS-179 ([2eb7e57](https://github.com/DSI-HUG/ngx-components/commit/2eb7e57))
|
|
82
|
+
- **search-bar-container:** replace hardcoded max-width with CSS variable #DESIGNSYS-103 ([1b53406](https://github.com/DSI-HUG/ngx-components/commit/1b53406))
|
|
83
|
+
- **column-bar:** add min-height variable #DESIGNSYS-179 ([086aae8](https://github.com/DSI-HUG/ngx-components/commit/086aae8))
|
|
84
|
+
- **filters-group:** adjust mat-chip-set styling for better appearance #DESIGNSYS-177 ([ff51834](https://github.com/DSI-HUG/ngx-components/commit/ff51834))
|
|
85
|
+
- **column-bar:** simplify flex behavior for ngx-column-bar elements #DESIGNSYS-179 ([c4ff3c2](https://github.com/DSI-HUG/ngx-components/commit/c4ff3c2))
|
|
86
|
+
|
|
87
|
+
### 🌱 Dependencies
|
|
88
|
+
|
|
89
|
+
- **@hug/ngx-sidenav**: upgraded to `v22.0.0-alpha.2`
|
|
90
|
+
- **@hug/ngx-core**: upgraded to `v22.0.0-alpha.2`
|
|
91
|
+
|
|
92
|
+
### ❤️ Thank You
|
|
93
|
+
|
|
94
|
+
- Esther Layat
|
|
95
|
+
|
|
96
|
+
## 22.0.0-alpha.4 (2026-03-24)
|
|
97
|
+
|
|
98
|
+
### 🐛 Fixes
|
|
99
|
+
|
|
100
|
+
- **layout:** add exports for column-bar and panel-bar #DESIGNSYS-104 ([0fa772b](https://github.com/DSI-HUG/ngx-components/commit/0fa772b))
|
|
101
|
+
|
|
102
|
+
### ❤️ Thank You
|
|
103
|
+
|
|
104
|
+
- Esther Layat
|
|
105
|
+
|
|
106
|
+
## 22.0.0-alpha.3 (2026-03-20)
|
|
107
|
+
|
|
108
|
+
### 🚀 Features
|
|
109
|
+
|
|
110
|
+
- **column-bar:** add ngx-column-bar component #DESIGNSYS-179 ([7d32d1a](https://github.com/DSI-HUG/ngx-components/commit/7d32d1a))
|
|
111
|
+
- **panel-bar:** add ngx-panel-bar component #DESIGNSYS-104 ([5d4b476](https://github.com/DSI-HUG/ngx-components/commit/5d4b476))
|
|
112
|
+
|
|
113
|
+
### 🐛 Fixes
|
|
114
|
+
|
|
115
|
+
- **translations:** correction of the German translation for "active" #DESIGNSYS-177 ([82dd0cb](https://github.com/DSI-HUG/ngx-components/commit/82dd0cb))
|
|
116
|
+
|
|
117
|
+
### ❤️ Thank You
|
|
118
|
+
|
|
119
|
+
- Esther Layat
|
|
120
|
+
|
|
121
|
+
## 22.0.0-alpha.2 (2026-03-18)
|
|
122
|
+
|
|
123
|
+
### 🚀 Features
|
|
124
|
+
|
|
125
|
+
- **filters-group:** add filters-group component #DESIGNSYS-177 ([dea1a5f](https://github.com/DSI-HUG/ngx-components/commit/dea1a5f))
|
|
126
|
+
|
|
127
|
+
### ❤️ Thank You
|
|
128
|
+
|
|
129
|
+
- Esther Layat
|
|
130
|
+
|
|
1
131
|
## 22.0.0-alpha.1 (2026-03-13)
|
|
2
132
|
|
|
3
133
|
### 🚀 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,
|