@hug/ngx-layout 4.0.0 → 21.0.0
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 +11 -5
- package/README.md +2 -6
- package/fesm2022/hug-ngx-layout.mjs +8 -8
- package/fesm2022/hug-ngx-layout.mjs.map +1 -1
- package/package.json +11 -10
- package/{layout.component.d.ts → types/hug-ngx-layout.d.ts} +27 -6
- package/index.d.ts +0 -2
- package/providers/index.d.ts +0 -11
- package/providers/ngx-layout-intl.d.ts +0 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 21.0.0 (2026-01-07)
|
|
2
|
+
|
|
3
|
+
### ⚠️ Breaking Changes
|
|
4
|
+
|
|
5
|
+
- ⚠️ align lib versions with angular ([6454157](https://github.com/DSI-HUG/ngx-components/commit/6454157))
|
|
2
6
|
|
|
3
7
|
### 🚀 Features
|
|
4
8
|
|
|
5
|
-
- ⚠️
|
|
9
|
+
- ⚠️ align lib versions with angular ([6454157](https://github.com/DSI-HUG/ngx-components/commit/6454157))
|
|
10
|
+
- **i18n:** make i18n providers optional + add retry logic on fetch file (#FC-113) ([4b9577f](https://github.com/DSI-HUG/ngx-components/commit/4b9577f))
|
|
6
11
|
|
|
7
12
|
### 🌱 Dependencies
|
|
8
13
|
|
|
9
|
-
- **@hug/ngx-sidenav**: upgraded to `
|
|
10
|
-
- **@hug/ngx-core**: upgraded to `
|
|
14
|
+
- **@hug/ngx-sidenav**: upgraded to `v21.0.0`
|
|
15
|
+
- **@hug/ngx-core**: upgraded to `v21.0.0`
|
|
11
16
|
|
|
12
17
|
### ❤️ Thank You
|
|
13
18
|
|
|
14
|
-
- damien-guillermet
|
|
19
|
+
- damien-guillermet @damien-guillermet
|
|
20
|
+
- Guillaume Marcel
|
|
15
21
|
|
|
16
22
|
## 3.1.1 (2025-10-15)
|
|
17
23
|
|
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ First of all you have to import the asset translation files like:
|
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
You can choose another output path, but you will need to override the default value in the `provideNgxLayout('my/custom/output/path')`.
|
|
29
|
+
You can choose another output path, but you will need to override the default value in the `provideNgxLayout({ translationsPath: 'my/custom/output/path' })`.
|
|
30
30
|
|
|
31
31
|
Then you have to provide `provideNgxLayout()` ; you call provide it globally in your main `ApplicationConfig` like:
|
|
32
32
|
|
|
@@ -50,11 +50,7 @@ export class CustomNgxLayoutIntl extends NgxLayoutIntl {
|
|
|
50
50
|
|
|
51
51
|
export const appConfig: ApplicationConfig = {
|
|
52
52
|
providers: [
|
|
53
|
-
{
|
|
54
|
-
provide: NgxLayoutIntl,
|
|
55
|
-
useClass: CustomNgxLayoutIntl
|
|
56
|
-
},
|
|
57
|
-
provideNgxLayout()
|
|
53
|
+
provideNgxLayout({ customIntl: CustomNgxLayoutIntl })
|
|
58
54
|
]
|
|
59
55
|
};
|
|
60
56
|
```
|
|
@@ -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
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxLayoutIntl });
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxLayoutIntl, decorators: [{
|
|
24
24
|
type: Injectable
|
|
25
25
|
}] });
|
|
26
26
|
|
|
@@ -50,7 +50,7 @@ class NgxLayoutComponent {
|
|
|
50
50
|
layoutInfoBoxesContent;
|
|
51
51
|
layoutRightContent;
|
|
52
52
|
sideFilter;
|
|
53
|
-
intl = inject(NgxLayoutIntl);
|
|
53
|
+
intl = inject(NgxLayoutIntl, { optional: true });
|
|
54
54
|
mediaService = inject(NgxMediaService);
|
|
55
55
|
sidenavService = inject(NgxSidenavService);
|
|
56
56
|
elementRef = inject(ElementRef);
|
|
@@ -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: "
|
|
114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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\">\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\">\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\">\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 });
|
|
113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: "
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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,
|
|
@@ -125,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
125
125
|
MatDrawerContent,
|
|
126
126
|
MatToolbar,
|
|
127
127
|
MatTooltip
|
|
128
|
-
], 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
|
|
128
|
+
], 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"] }]
|
|
129
129
|
}], propDecorators: { toolbarColor: [{
|
|
130
130
|
type: Input
|
|
131
131
|
}], editorToolbarId: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/providers/ngx-layout-intl.ts","../../../projects/layout/src/providers/index.ts","../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { NgxAbstractIntl } from '@hug/ngx-core';\n\n/**\n * Data for internationalization\n */\n@Injectable()\nexport class NgxLayoutIntl extends NgxAbstractIntl<NgxLayoutIntl> {\n\n public closeLabel = '';\n public backLabel = '';\n public sideFilterLabel = '';\n}\n","import type { EnvironmentProviders } from '@angular/core';\nimport { type NgxOptionsIntl, provideNgxIntl } from '@hug/ngx-core';\n\nimport { NgxLayoutIntl } from './ngx-layout-intl';\n\nexport * from './ngx-layout-intl';\n\n/**\n * Provide the component to the application level.\n * @param options - The component's providing options.\n * @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).\n * @param options.customIntl - A custom internationalization class to inject.\n */\nexport const provideNgxLayout = (options?: NgxOptionsIntl<NgxLayoutIntl>): EnvironmentProviders =>\n provideNgxIntl(\n NgxLayoutIntl,\n options?.translationsPath ?? 'translations/ngx-layout',\n options?.customIntl ?? NgxLayoutIntl\n );\n","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\nimport { NgxLayoutIntl } from './providers';\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 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 readonly intl = inject(NgxLayoutIntl);\n protected readonly mediaService = inject(NgxMediaService);\n protected readonly sidenavService = inject(NgxSidenavService);\n protected readonly 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]=\"intl.backLabel\">\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\">\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\">\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":";;;;;;;;;;;;AAGA;;AAEG;AAEG,MAAO,aAAc,SAAQ,eAA8B,CAAA;IAEtD,UAAU,GAAG,EAAE;IACf,SAAS,GAAG,EAAE;IACd,eAAe,GAAG,EAAE;uGAJlB,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAb,aAAa,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB;;;ACCD;;;;;AAKG;AACU,MAAA,gBAAgB,GAAG,CAAC,OAAuC,KACpE,cAAc,CACV,aAAa,EACb,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EACtD,OAAO,EAAE,UAAU,IAAI,aAAa;;MCc/B,kBAAkB,CAAA;IACX,YAAY,GAAG,SAAS;IACxB,eAAe,GAAG,gBAAgB;AAElC,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;AAE1B,IAAA,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC;AAC5B,IAAA,YAAY,GAAG,MAAM,CAAC,eAAe,CAAC;AACtC,IAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC1C,IAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAE3E,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;;uGAvGvB,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,81CC/B/B,onJA+GA,EAAA,MAAA,EAAA,CAAA,wtIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3FQ,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,onJAAA,EAAA,MAAA,EAAA,CAAA,wtIAAA,CAAA,EAAA;8BAGe,YAAY,EAAA,CAAA;sBAA3B;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;gBAoCZ,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/providers/ngx-layout-intl.ts","../../../projects/layout/src/providers/index.ts","../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { NgxAbstractIntl } from '@hug/ngx-core';\n\n/**\n * Data for internationalization\n */\n@Injectable()\nexport class NgxLayoutIntl extends NgxAbstractIntl<NgxLayoutIntl> {\n\n public closeLabel = '';\n public backLabel = '';\n public sideFilterLabel = '';\n}\n","import type { EnvironmentProviders } from '@angular/core';\nimport { type NgxOptionsIntl, provideNgxIntl } from '@hug/ngx-core';\n\nimport { NgxLayoutIntl } from './ngx-layout-intl';\n\nexport * from './ngx-layout-intl';\n\n/**\n * Provide the component to the application level.\n * @param options - The component's providing options.\n * @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).\n * @param options.customIntl - A custom internationalization class to inject.\n */\nexport const provideNgxLayout = (options?: NgxOptionsIntl<NgxLayoutIntl>): EnvironmentProviders =>\n provideNgxIntl(\n NgxLayoutIntl,\n options?.translationsPath ?? 'translations/ngx-layout',\n options?.customIntl ?? NgxLayoutIntl\n );\n","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\nimport { NgxLayoutIntl } from './providers';\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 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 readonly intl = inject(NgxLayoutIntl, { optional: true });\n protected readonly mediaService = inject(NgxMediaService);\n protected readonly sidenavService = inject(NgxSidenavService);\n protected readonly 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]=\"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","/**\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
|
+
"version": "21.0.0",
|
|
4
4
|
"description": "HUG Angular - layout component",
|
|
5
5
|
"homepage": "https://github.com/dsi-hug/ngx-components",
|
|
6
6
|
"license": "GPL-3.0-only",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"exports": {
|
|
24
24
|
".": {
|
|
25
25
|
"sass": "./_layout-theme.scss",
|
|
26
|
-
"types": "./
|
|
26
|
+
"types": "./types/hug-ngx-layout.d.ts",
|
|
27
27
|
"default": "./fesm2022/hug-ngx-layout.mjs"
|
|
28
28
|
},
|
|
29
29
|
"./translations/*": {
|
|
@@ -34,19 +34,20 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@angular/
|
|
38
|
-
"@angular/
|
|
39
|
-
"@angular/
|
|
40
|
-
"@angular/material": ">=
|
|
41
|
-
"@hug/ngx-core": "^
|
|
42
|
-
"@hug/ngx-sidenav": "^
|
|
37
|
+
"@angular/cdk": ">=21 <22",
|
|
38
|
+
"@angular/common": ">=21 <22",
|
|
39
|
+
"@angular/core": ">=21 <22",
|
|
40
|
+
"@angular/material": ">=21 <22",
|
|
41
|
+
"@hug/ngx-core": "^21.0.0",
|
|
42
|
+
"@hug/ngx-sidenav": "^21.0.0",
|
|
43
|
+
"zone.js": "^0.16.0"
|
|
43
44
|
},
|
|
44
45
|
"dependencies": {
|
|
45
|
-
"tslib": "^2.
|
|
46
|
+
"tslib": "^2.8.1"
|
|
46
47
|
},
|
|
47
48
|
"publishConfig": {
|
|
48
49
|
"access": "public"
|
|
49
50
|
},
|
|
50
51
|
"module": "fesm2022/hug-ngx-layout.mjs",
|
|
51
|
-
"typings": "
|
|
52
|
+
"typings": "types/hug-ngx-layout.d.ts"
|
|
52
53
|
}
|
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
2
|
-
import
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { EnvironmentProviders, TemplateRef, EventEmitter, ElementRef } from '@angular/core';
|
|
3
4
|
import { MatDrawer } from '@angular/material/sidenav';
|
|
4
|
-
import { NgxMediaService } from '@hug/ngx-core';
|
|
5
|
+
import { NgxAbstractIntl, NgxOptionsIntl, NgxMediaService } from '@hug/ngx-core';
|
|
5
6
|
import { NgxSidenavService } from '@hug/ngx-sidenav';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Data for internationalization
|
|
10
|
+
*/
|
|
11
|
+
declare class NgxLayoutIntl extends NgxAbstractIntl<NgxLayoutIntl> {
|
|
12
|
+
closeLabel: string;
|
|
13
|
+
backLabel: string;
|
|
14
|
+
sideFilterLabel: string;
|
|
15
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgxLayoutIntl, never>;
|
|
16
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<NgxLayoutIntl>;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Provide the component to the application level.
|
|
21
|
+
* @param options - The component's providing options.
|
|
22
|
+
* @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).
|
|
23
|
+
* @param options.customIntl - A custom internationalization class to inject.
|
|
24
|
+
*/
|
|
25
|
+
declare const provideNgxLayout: (options?: NgxOptionsIntl<NgxLayoutIntl>) => EnvironmentProviders;
|
|
26
|
+
|
|
27
|
+
declare class NgxLayoutComponent {
|
|
9
28
|
toolbarColor: string;
|
|
10
29
|
editorToolbarId: string;
|
|
11
30
|
layoutToolbarExternal?: TemplateRef<unknown>;
|
|
@@ -23,7 +42,7 @@ export declare class NgxLayoutComponent {
|
|
|
23
42
|
protected layoutInfoBoxesContent?: TemplateRef<unknown>;
|
|
24
43
|
protected layoutRightContent?: TemplateRef<unknown>;
|
|
25
44
|
protected sideFilter?: MatDrawer;
|
|
26
|
-
protected readonly intl: NgxLayoutIntl;
|
|
45
|
+
protected readonly intl: NgxLayoutIntl | null;
|
|
27
46
|
protected readonly mediaService: NgxMediaService;
|
|
28
47
|
protected readonly sidenavService: NgxSidenavService;
|
|
29
48
|
protected readonly elementRef: ElementRef<HTMLElement>;
|
|
@@ -49,3 +68,5 @@ export declare class NgxLayoutComponent {
|
|
|
49
68
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxLayoutComponent, never>;
|
|
50
69
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgxLayoutComponent, "ngx-layout", never, { "toolbarColor": { "alias": "toolbarColor"; "required": false; }; "editorToolbarId": { "alias": "editorToolbarId"; "required": false; }; "layoutToolbarExternal": { "alias": "layoutToolbarExternal"; "required": false; }; "layoutPrimaryActionExternal": { "alias": "layoutPrimaryActionExternal"; "required": false; }; "layoutActionsExternal": { "alias": "layoutActionsExternal"; "required": false; }; "layoutInfoBoxesExternal": { "alias": "layoutInfoBoxesExternal"; "required": false; }; "layoutRightExternal": { "alias": "layoutRightExternal"; "required": false; }; "withSidenav": { "alias": "withSidenav"; "required": false; }; "keepFilterButtonDisplayed": { "alias": "keepFilterButtonDisplayed"; "required": false; }; "withCloseButton": { "alias": "withCloseButton"; "required": false; }; "withBackButton": { "alias": "withBackButton"; "required": false; }; }, { "closeButtonClicked": "closeButtonClicked"; "backButtonClicked": "backButtonClicked"; "sideFilterClosed": "sideFilterClosed"; "sideFilterOpened": "sideFilterOpened"; }, ["layoutToolbarContent", "layoutPrimaryActionContent", "layoutActionsContent", "layoutInfoBoxesContent", "layoutRightContent"], ["*"], true, never>;
|
|
51
70
|
}
|
|
71
|
+
|
|
72
|
+
export { NgxLayoutComponent, NgxLayoutIntl, provideNgxLayout };
|
package/index.d.ts
DELETED
package/providers/index.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { EnvironmentProviders } from '@angular/core';
|
|
2
|
-
import { type NgxOptionsIntl } from '@hug/ngx-core';
|
|
3
|
-
import { NgxLayoutIntl } from './ngx-layout-intl';
|
|
4
|
-
export * from './ngx-layout-intl';
|
|
5
|
-
/**
|
|
6
|
-
* Provide the component to the application level.
|
|
7
|
-
* @param options - The component's providing options.
|
|
8
|
-
* @param options.translationsPath - The path to the translations files (default: `translations/ngx-layout`).
|
|
9
|
-
* @param options.customIntl - A custom internationalization class to inject.
|
|
10
|
-
*/
|
|
11
|
-
export declare const provideNgxLayout: (options?: NgxOptionsIntl<NgxLayoutIntl>) => EnvironmentProviders;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { NgxAbstractIntl } from '@hug/ngx-core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/**
|
|
4
|
-
* Data for internationalization
|
|
5
|
-
*/
|
|
6
|
-
export declare class NgxLayoutIntl extends NgxAbstractIntl<NgxLayoutIntl> {
|
|
7
|
-
closeLabel: string;
|
|
8
|
-
backLabel: string;
|
|
9
|
-
sideFilterLabel: string;
|
|
10
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<NgxLayoutIntl, never>;
|
|
11
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<NgxLayoutIntl>;
|
|
12
|
-
}
|