@hug/ngx-layout 3.0.4 → 3.1.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 -3
- package/README.md +59 -0
- package/fesm2022/hug-ngx-layout.mjs +26 -11
- package/fesm2022/hug-ngx-layout.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/layout.component.d.ts +3 -3
- package/package.json +6 -3
- package/providers/index.d.ts +7 -0
- package/providers/ngx-layout-intl.d.ts +12 -0
- package/public/translations/de-CH.json +5 -0
- package/public/translations/en-US.json +5 -0
- package/public/translations/fr-CH.json +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
|
-
## 3.0
|
|
1
|
+
## 3.1.0 (2025-10-14)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **ngx-layout:** internationalize ngx-layout for ng19 (#NGXCPTS-24) ([297ab69](https://github.com/DSI-HUG/ngx-components/commit/297ab69))
|
|
2
6
|
|
|
3
7
|
### 🌱 Dependencies
|
|
4
8
|
|
|
5
|
-
- **@hug/ngx-sidenav**: upgraded to `v3.0.
|
|
6
|
-
- **@hug/ngx-core**: upgraded to `v3.0
|
|
9
|
+
- **@hug/ngx-sidenav**: upgraded to `v3.0.4`
|
|
10
|
+
- **@hug/ngx-core**: upgraded to `v3.1.0`
|
|
11
|
+
|
|
12
|
+
### ❤️ Thank You
|
|
13
|
+
|
|
14
|
+
- Mathieu VALENTIN
|
|
7
15
|
|
|
8
16
|
## 3.0.3 (2025-06-04)
|
|
9
17
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,65 @@
|
|
|
1
1
|
@hug/layout
|
|
2
2
|
=======
|
|
3
3
|
|
|
4
|
+
#### > Breaking changes
|
|
5
|
+
|
|
6
|
+
`closeButtonLabel` and `backButtonLabel` inputs are removed.
|
|
7
|
+
You can override the translation provided by creating a custom provider for `NgxLayoutIntl` as show below or in demo-app.
|
|
8
|
+
|
|
9
|
+
#### > Configuration for internationalization
|
|
10
|
+
|
|
11
|
+
This library supports internationalization.
|
|
12
|
+
|
|
13
|
+
First of all you have to import the asset translation files like:
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
{
|
|
17
|
+
...
|
|
18
|
+
"assets": [
|
|
19
|
+
...
|
|
20
|
+
{
|
|
21
|
+
"input": "node_modules/@hug/ngx-layout/public/translations",
|
|
22
|
+
"glob": "**/*",
|
|
23
|
+
"output": "public/translations/ngx-layout"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
You can choose another output path, but you will need to override the default value in the `provideNgxLayout('my/custom/output/path')`.
|
|
30
|
+
|
|
31
|
+
Then you have to provide `provideNgxLayout()` ; you call provide it globally in your main `ApplicationConfig` like:
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import { NgxLayoutIntl, provideNgxLayout } from '@hug/ngx-layout';
|
|
35
|
+
|
|
36
|
+
export const appConfig: ApplicationConfig = {
|
|
37
|
+
providers: [
|
|
38
|
+
NgxLayoutIntl,
|
|
39
|
+
provideNgxLayout()
|
|
40
|
+
]
|
|
41
|
+
};
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Note that you can also override specific translation entries by providing a custom class implementation like:
|
|
45
|
+
|
|
46
|
+
```typescript
|
|
47
|
+
@Injectable()
|
|
48
|
+
export class CustomNgxLayoutIntl extends NgxLayoutIntl {
|
|
49
|
+
public override closeLabel = '***My custom closeLabel***';
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export const appConfig: ApplicationConfig = {
|
|
53
|
+
providers: [
|
|
54
|
+
{
|
|
55
|
+
provide: NgxLayoutIntl,
|
|
56
|
+
useClass: CustomNgxLayoutIntl
|
|
57
|
+
},
|
|
58
|
+
provideNgxLayout()
|
|
59
|
+
]
|
|
60
|
+
};
|
|
61
|
+
```
|
|
62
|
+
|
|
4
63
|
The sources for this package are in the main [DSI-HUG/ngx-components](https://github.com/dsi-hug/ngx-components) repo. Please file issues and pull requests against that repo.
|
|
5
64
|
|
|
6
65
|
License: GPL-3.0-only
|
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, inject, ElementRef, Input, ViewChild, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
4
|
+
import { Injectable, EventEmitter, inject, ElementRef, Input, ViewChild, ContentChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
5
5
|
import { MatIconButton } from '@angular/material/button';
|
|
6
6
|
import { MatIcon } from '@angular/material/icon';
|
|
7
7
|
import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';
|
|
8
8
|
import { MatToolbar } from '@angular/material/toolbar';
|
|
9
9
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
10
|
-
import { NgxMediaService } from '@hug/ngx-core';
|
|
10
|
+
import { NgxAbstractIntl, provideNgxIntl, NgxMediaService } from '@hug/ngx-core';
|
|
11
11
|
import { NgxSidenavService } from '@hug/ngx-sidenav';
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* Data for internationalization
|
|
15
|
+
*/
|
|
16
|
+
class NgxLayoutIntl extends NgxAbstractIntl {
|
|
17
|
+
closeLabel = '';
|
|
18
|
+
backLabel = '';
|
|
19
|
+
sideFilterLabel = '';
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
21
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutIntl });
|
|
22
|
+
}
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutIntl, decorators: [{
|
|
24
|
+
type: Injectable
|
|
25
|
+
}] });
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* The application initializer provider.
|
|
29
|
+
* @param filesPath the path to translations asset files (default: `public/translations/ngx-layout`).
|
|
30
|
+
*/
|
|
31
|
+
const provideNgxLayout = (filesPath = 'public/translations/ngx-layout') => provideNgxIntl(filesPath, NgxLayoutIntl);
|
|
32
|
+
|
|
13
33
|
class NgxLayoutComponent {
|
|
14
34
|
toolbarColor = 'primary';
|
|
15
35
|
editorToolbarId = 'editor-toolbar';
|
|
16
|
-
closeButtonLabel = 'Fermer';
|
|
17
|
-
backButtonLabel = 'Retour';
|
|
18
36
|
layoutToolbarExternal;
|
|
19
37
|
layoutPrimaryActionExternal;
|
|
20
38
|
layoutActionsExternal;
|
|
@@ -30,6 +48,7 @@ class NgxLayoutComponent {
|
|
|
30
48
|
layoutInfoBoxesContent;
|
|
31
49
|
layoutRightContent;
|
|
32
50
|
sideFilter;
|
|
51
|
+
intl = inject(NgxLayoutIntl);
|
|
33
52
|
mediaService = inject(NgxMediaService);
|
|
34
53
|
sidenavService = inject(NgxSidenavService);
|
|
35
54
|
elementRef = inject(ElementRef);
|
|
@@ -90,7 +109,7 @@ class NgxLayoutComponent {
|
|
|
90
109
|
void this.sideFilter?.open();
|
|
91
110
|
}
|
|
92
111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: NgxLayoutComponent, isStandalone: true, selector: "ngx-layout", inputs: { toolbarColor: "toolbarColor", editorToolbarId: "editorToolbarId", closeButtonLabel: "closeButtonLabel", backButtonLabel: "backButtonLabel", layoutToolbarExternal: "layoutToolbarExternal", layoutPrimaryActionExternal: "layoutPrimaryActionExternal", layoutActionsExternal: "layoutActionsExternal", layoutInfoBoxesExternal: "layoutInfoBoxesExternal", layoutRightExternal: "layoutRightExternal", withSidenav: "withSidenav", keepFilterButtonDisplayed: "keepFilterButtonDisplayed", withCloseButton: "withCloseButton", withBackButton: "withBackButton" }, outputs: { closeButtonClicked: "closeButtonClicked", backButtonClicked: "backButtonClicked", sideFilterClosed: "sideFilterClosed", sideFilterOpened: "sideFilterOpened" }, queries: [{ propertyName: "layoutToolbarContent", first: true, predicate: ["layoutToolbar"], descendants: true }, { propertyName: "layoutPrimaryActionContent", first: true, predicate: ["layoutPrimaryAction"], descendants: true }, { propertyName: "layoutActionsContent", first: true, predicate: ["layoutActions"], descendants: true }, { propertyName: "layoutInfoBoxesContent", first: true, predicate: ["layoutInfoBoxes"], descendants: true }, { propertyName: "layoutRightContent", first: true, predicate: ["layoutRight"], descendants: true }], viewQueries: [{ propertyName: "sideFilter", first: true, predicate: ["sideFilter"], descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"backButtonLabel\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n <div id=\"toolbar-content-container\">\n @if (layoutToolbar) {\n <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n }\n </div>\n @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n <button\n type=\"button\"\n id=\"filter-button\"\n mat-icon-button\n (click)=\"sideFilter.toggle()\"\n matTooltip=\"Afficher/Masquer les filtres\">\n <mat-icon>tune</mat-icon>\n </button>\n }\n @if (withCloseButton) {\n <button\n type=\"button\"\n id=\"close-button\"\n mat-icon-button\n (click)=\"this.closeButtonClicked.emit($event)\"\n [matTooltip]=\"closeButtonLabel\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-toolbar>\n }\n\n @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n @if (layoutRight) {\n <mat-drawer-container autosize=\"true\">\n <mat-drawer-content>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </mat-drawer-content>\n <mat-drawer\n id=\"side-filter\"\n #sideFilter\n (closed)=\"sideFilterClosed.emit()\"\n (openedChange)=\"sideFilterOpened.emit()\"\n class=\"right\"\n position=\"end\"\n [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n [opened]=\"(mediaService.isHandset$ | async) === false\">\n <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n </mat-drawer>\n </mat-drawer-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</ng-template>\n", styles: ["ngx-layout{display:flex;flex-direction:column;position:absolute;inset:0}ngx-layout.no-left[no-right=true] .main-content{padding:0}ngx-layout mat-sidenav-container{position:absolute;inset:0}ngx-layout mat-drawer-content,ngx-layout mat-sidenav-content{display:flex!important;flex-direction:column}ngx-layout mat-sidenav{width:200px}ngx-layout mat-drawer#side-filter{width:220px}ngx-layout mat-drawer#side-filter.right{padding:.3rem}ngx-layout mat-drawer#side-filter.right [filters-title]{font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:700;padding:.6rem;margin-bottom:.3rem}ngx-layout mat-drawer#side-filter.right [filters-subtitle]{font-size:1rem;display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;font-weight:600;padding:.4rem .6rem;margin-bottom:.3rem;margin-top:.3rem}ngx-layout mat-drawer#side-filter.right [icons-container]{display:flex;align-items:center}ngx-layout mat-drawer#side-filter.right [filters-icon]{cursor:pointer;transition:color .3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] mat-chip-listbox{margin:0;max-height:20vh;overflow-y:auto}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip{position:relative;padding:.5rem;margin:.1rem;font-size:.75rem;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]){cursor:pointer}ngx-layout mat-drawer#side-filter.right [filters-chip-list] .mat-mdc-chip:not([disabled]):hover:before{font-family:Material Icons;content:\"close\";display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-weight:700;font-size:1.2rem;cursor:pointer;transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group]{display:flex}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle{transition:.3s ease-in-out}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle mat-icon{margin-right:1rem}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-label-content{text-align:start}ngx-layout mat-drawer#side-filter.right [filters-toggle-group] .mat-button-toggle .mat-button-toggle-focus-overlay{height:100%}ngx-layout mat-drawer#side-filter.right mat-form-field{width:100%}ngx-layout mat-drawer#side-filter.right .mat-mdc-form-field-infix{width:inherit}ngx-layout mat-drawer#side-filter.right.mat-drawer-side{box-shadow:-3px 0 5px -1px #0003;z-index:10}ngx-layout mat-drawer-container{flex:1}ngx-layout .mat-toolbar:not(.actions){display:flex;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 });
|
|
112
|
+
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 });
|
|
94
113
|
}
|
|
95
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxLayoutComponent, decorators: [{
|
|
96
115
|
type: Component,
|
|
@@ -104,15 +123,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
104
123
|
MatDrawerContent,
|
|
105
124
|
MatToolbar,
|
|
106
125
|
MatTooltip
|
|
107
|
-
], template: "<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"
|
|
126
|
+
], 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"] }]
|
|
108
127
|
}], propDecorators: { toolbarColor: [{
|
|
109
128
|
type: Input
|
|
110
129
|
}], editorToolbarId: [{
|
|
111
130
|
type: Input
|
|
112
|
-
}], closeButtonLabel: [{
|
|
113
|
-
type: Input
|
|
114
|
-
}], backButtonLabel: [{
|
|
115
|
-
type: Input
|
|
116
131
|
}], layoutToolbarExternal: [{
|
|
117
132
|
type: Input
|
|
118
133
|
}], layoutPrimaryActionExternal: [{
|
|
@@ -163,5 +178,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
|
|
|
163
178
|
* Generated bundle index. Do not edit.
|
|
164
179
|
*/
|
|
165
180
|
|
|
166
|
-
export { NgxLayoutComponent };
|
|
181
|
+
export { NgxLayoutComponent, NgxLayoutIntl, provideNgxLayout };
|
|
167
182
|
//# sourceMappingURL=hug-ngx-layout.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hug-ngx-layout.mjs","sources":["../../../projects/layout/src/layout.component.ts","../../../projects/layout/src/layout.component.html","../../../projects/layout/src/hug-ngx-layout.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { AsyncPipe, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatToolbar } from '@angular/material/toolbar';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { NgxMediaService } from '@hug/ngx-core';\nimport { NgxSidenavService } from '@hug/ngx-sidenav';\n\n@Component({\n selector: 'ngx-layout',\n templateUrl: './layout.component.html',\n styleUrls: ['./layout.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgTemplateOutlet,\n AsyncPipe,\n MatIconButton,\n MatIcon,\n MatDrawer,\n MatDrawerContainer,\n MatDrawerContent,\n MatToolbar,\n MatTooltip\n ]\n})\nexport class NgxLayoutComponent {\n @Input() public toolbarColor = 'primary';\n @Input() public editorToolbarId = 'editor-toolbar';\n\n @Input() public closeButtonLabel = 'Fermer';\n @Input() public backButtonLabel = 'Retour';\n\n @Input() public layoutToolbarExternal?: TemplateRef<unknown>;\n @Input() public layoutPrimaryActionExternal?: TemplateRef<unknown>;\n @Input() public layoutActionsExternal?: TemplateRef<unknown>;\n @Input() public layoutInfoBoxesExternal?: TemplateRef<unknown>;\n @Input() public layoutRightExternal?: TemplateRef<unknown>;\n\n @Output() public readonly closeButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly backButtonClicked = new EventEmitter<MouseEvent>();\n @Output() public readonly sideFilterClosed = new EventEmitter<void>();\n @Output() public readonly sideFilterOpened = new EventEmitter<void>();\n\n @ContentChild('layoutToolbar') protected layoutToolbarContent?: TemplateRef<unknown>;\n @ContentChild('layoutPrimaryAction') protected layoutPrimaryActionContent?: TemplateRef<unknown>;\n @ContentChild('layoutActions') protected layoutActionsContent?: TemplateRef<unknown>;\n @ContentChild('layoutInfoBoxes') protected layoutInfoBoxesContent?: TemplateRef<unknown>;\n @ContentChild('layoutRight') protected layoutRightContent?: TemplateRef<unknown>;\n\n @ViewChild('sideFilter') protected sideFilter?: MatDrawer;\n\n protected mediaService = inject(NgxMediaService);\n protected sidenavService = inject(NgxSidenavService);\n protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n public get layoutToolbar(): TemplateRef<unknown> | undefined {\n return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n }\n\n public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n }\n\n public get layoutActions(): TemplateRef<unknown> | undefined {\n return this.layoutActionsExternal ?? this.layoutActionsContent;\n }\n\n public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n }\n\n public get layoutRight(): TemplateRef<unknown> | undefined {\n const value = this.layoutRightExternal ?? this.layoutRightContent;\n if (!value) {\n this.elementRef.nativeElement.setAttribute('no-right', 'true');\n } else {\n this.elementRef.nativeElement.removeAttribute('no-right');\n }\n return value;\n }\n\n private _withSidenav = false;\n\n @Input()\n public set withSidenav(value: BooleanInput) {\n this._withSidenav = coerceBooleanProperty(value);\n }\n\n public get withSidenav(): BooleanInput {\n return this._withSidenav;\n }\n\n private _keepFilterButtonDisplayed = true;\n\n @Input()\n public set keepFilterButtonDisplayed(value: BooleanInput) {\n this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n }\n\n public get keepFilterButtonDisplayed(): BooleanInput {\n return this._keepFilterButtonDisplayed;\n }\n\n private _withCloseButton = false;\n\n @Input()\n public set withCloseButton(value: BooleanInput) {\n this._withCloseButton = coerceBooleanProperty(value);\n }\n\n public get withCloseButton(): BooleanInput {\n return this._withCloseButton;\n }\n\n private _withBackButton = false;\n\n @Input()\n public set withBackButton(value: BooleanInput) {\n this._withBackButton = coerceBooleanProperty(value);\n }\n\n public get withBackButton(): BooleanInput {\n return this._withBackButton;\n }\n\n public closeSideFilter(): void {\n void this.sideFilter?.close();\n }\n\n public openSideFilter(): void {\n void this.sideFilter?.open();\n }\n}\n","<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"backButtonLabel\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n }\n <div id=\"toolbar-content-container\">\n @if (layoutToolbar) {\n <ng-template [ngTemplateOutlet]=\"layoutToolbar\"></ng-template>\n }\n </div>\n @if (sideFilter && (keepFilterButtonDisplayed || (mediaService.isHandset$ | async)) && layoutRight) {\n <button\n type=\"button\"\n id=\"filter-button\"\n mat-icon-button\n (click)=\"sideFilter.toggle()\"\n matTooltip=\"Afficher/Masquer les filtres\">\n <mat-icon>tune</mat-icon>\n </button>\n }\n @if (withCloseButton) {\n <button\n type=\"button\"\n id=\"close-button\"\n mat-icon-button\n (click)=\"this.closeButtonClicked.emit($event)\"\n [matTooltip]=\"closeButtonLabel\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-toolbar>\n }\n\n @if ((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n @if (layoutRight) {\n <mat-drawer-container autosize=\"true\">\n <mat-drawer-content>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </mat-drawer-content>\n <mat-drawer\n id=\"side-filter\"\n #sideFilter\n (closed)=\"sideFilterClosed.emit()\"\n (openedChange)=\"sideFilterOpened.emit()\"\n class=\"right\"\n position=\"end\"\n [attr.role]=\"(mediaService.isHandset$ | async) ? 'dialog' : 'navigation'\"\n [mode]=\"(mediaService.isHandset$ | async) ? 'over' : 'side'\"\n [opened]=\"(mediaService.isHandset$ | async) === false\">\n <ng-template [ngTemplateOutlet]=\"layoutRight\"></ng-template>\n </mat-drawer>\n </mat-drawer-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
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 { EnvironmentProviders } from '@angular/core';\nimport { provideNgxIntl } from '@hug/ngx-core';\n\nimport { NgxLayoutIntl } from './ngx-layout-intl';\n\nexport * from './ngx-layout-intl';\n\n/**\n * The application initializer provider.\n * @param filesPath the path to translations asset files (default: `public/translations/ngx-layout`).\n */\nexport const provideNgxLayout = (filesPath = 'public/translations/ngx-layout'): EnvironmentProviders => provideNgxIntl(filesPath, NgxLayoutIntl);\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 intl = inject(NgxLayoutIntl);\n\n protected mediaService = inject(NgxMediaService);\n protected sidenavService = inject(NgxSidenavService);\n protected elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n public get layoutToolbar(): TemplateRef<unknown> | undefined {\n return this.layoutToolbarExternal ?? this.layoutToolbarContent;\n }\n\n public get layoutPrimaryAction(): TemplateRef<unknown> | undefined {\n return this.layoutPrimaryActionExternal ?? this.layoutPrimaryActionContent;\n }\n\n public get layoutActions(): TemplateRef<unknown> | undefined {\n return this.layoutActionsExternal ?? this.layoutActionsContent;\n }\n\n public get layoutInfoBoxes(): TemplateRef<unknown> | undefined {\n return this.layoutInfoBoxesExternal ?? this.layoutInfoBoxesContent;\n }\n\n public get layoutRight(): TemplateRef<unknown> | undefined {\n const value = this.layoutRightExternal ?? this.layoutRightContent;\n if (!value) {\n this.elementRef.nativeElement.setAttribute('no-right', 'true');\n } else {\n this.elementRef.nativeElement.removeAttribute('no-right');\n }\n return value;\n }\n\n private _withSidenav = false;\n\n @Input()\n public set withSidenav(value: BooleanInput) {\n this._withSidenav = coerceBooleanProperty(value);\n }\n\n public get withSidenav(): BooleanInput {\n return this._withSidenav;\n }\n\n private _keepFilterButtonDisplayed = true;\n\n @Input()\n public set keepFilterButtonDisplayed(value: BooleanInput) {\n this._keepFilterButtonDisplayed = coerceBooleanProperty(value);\n }\n\n public get keepFilterButtonDisplayed(): BooleanInput {\n return this._keepFilterButtonDisplayed;\n }\n\n private _withCloseButton = false;\n\n @Input()\n public set withCloseButton(value: BooleanInput) {\n this._withCloseButton = coerceBooleanProperty(value);\n }\n\n public get withCloseButton(): BooleanInput {\n return this._withCloseButton;\n }\n\n private _withBackButton = false;\n\n @Input()\n public set withBackButton(value: BooleanInput) {\n this._withBackButton = coerceBooleanProperty(value);\n }\n\n public get withBackButton(): BooleanInput {\n return this._withBackButton;\n }\n\n public closeSideFilter(): void {\n void this.sideFilter?.close();\n }\n\n public openSideFilter(): void {\n void this.sideFilter?.open();\n }\n}\n","<ng-container *ngTemplateOutlet=\"filter\"></ng-container>\n\n<ng-template #content>\n <div class=\"main-content\">\n @if (\n layoutPrimaryAction && !((layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false)\n ) {\n <span class=\"primary-action-container\" [class.bottom]=\"mediaService.isHandset$ | async\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n <ng-content></ng-content>\n </div>\n @if ((mediaService.isHandset$ | async) && actionsToolbar) {\n <ng-container *ngTemplateOutlet=\"actionsToolbar\"></ng-container>\n }\n</ng-template>\n\n<ng-template #actionsToolbar>\n <mat-toolbar\n id=\"actions-toolbar\"\n class=\"actions\"\n [color]=\"toolbarColor\"\n [class.bottom]=\"mediaService.isHandset$ | async\">\n @if (layoutPrimaryAction && (layoutActions || layoutInfoBoxes) && (mediaService.isHandset$ | async) === false) {\n <span class=\"primary-action-container\">\n <ng-template [ngTemplateOutlet]=\"layoutPrimaryAction\"></ng-template>\n </span>\n }\n @if (layoutActions) {\n <ng-template [ngTemplateOutlet]=\"layoutActions\"></ng-template>\n }\n @if (layoutInfoBoxes && (mediaService.isHandset$ | async) === false) {\n <div class=\"info-boxes-container\">\n <ng-template [ngTemplateOutlet]=\"layoutInfoBoxes\"></ng-template>\n </div>\n }\n </mat-toolbar>\n</ng-template>\n\n<ng-template #filter>\n @if (layoutToolbar || layoutRight) {\n <mat-toolbar id=\"toolbar\" [color]=\"toolbarColor\">\n @if (withSidenav && (mediaService.isHandset$ | async) && (sidenavService.openChanged$ | async) === false) {\n <button type=\"button\" id=\"sidenav-button\" mat-icon-button (click)=\"sidenavService.toggle()\">\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (withBackButton) {\n <button\n type=\"button\"\n id=\"back-button\"\n mat-icon-button\n (click)=\"this.backButtonClicked.emit($event)\"\n [matTooltip]=\"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":"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"}
|
package/index.d.ts
CHANGED
package/layout.component.d.ts
CHANGED
|
@@ -3,12 +3,11 @@ import { ElementRef, EventEmitter, TemplateRef } from '@angular/core';
|
|
|
3
3
|
import { MatDrawer } from '@angular/material/sidenav';
|
|
4
4
|
import { NgxMediaService } from '@hug/ngx-core';
|
|
5
5
|
import { NgxSidenavService } from '@hug/ngx-sidenav';
|
|
6
|
+
import { NgxLayoutIntl } from './providers';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
export declare class NgxLayoutComponent {
|
|
8
9
|
toolbarColor: string;
|
|
9
10
|
editorToolbarId: string;
|
|
10
|
-
closeButtonLabel: string;
|
|
11
|
-
backButtonLabel: string;
|
|
12
11
|
layoutToolbarExternal?: TemplateRef<unknown>;
|
|
13
12
|
layoutPrimaryActionExternal?: TemplateRef<unknown>;
|
|
14
13
|
layoutActionsExternal?: TemplateRef<unknown>;
|
|
@@ -24,6 +23,7 @@ export declare class NgxLayoutComponent {
|
|
|
24
23
|
protected layoutInfoBoxesContent?: TemplateRef<unknown>;
|
|
25
24
|
protected layoutRightContent?: TemplateRef<unknown>;
|
|
26
25
|
protected sideFilter?: MatDrawer;
|
|
26
|
+
protected intl: NgxLayoutIntl;
|
|
27
27
|
protected mediaService: NgxMediaService;
|
|
28
28
|
protected sidenavService: NgxSidenavService;
|
|
29
29
|
protected elementRef: ElementRef<HTMLElement>;
|
|
@@ -47,5 +47,5 @@ export declare class NgxLayoutComponent {
|
|
|
47
47
|
closeSideFilter(): void;
|
|
48
48
|
openSideFilter(): void;
|
|
49
49
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxLayoutComponent, never>;
|
|
50
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgxLayoutComponent, "ngx-layout", never, { "toolbarColor": { "alias": "toolbarColor"; "required": false; }; "editorToolbarId": { "alias": "editorToolbarId"; "required": false; }; "
|
|
50
|
+
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
51
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hug/ngx-layout",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.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",
|
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
"types": "./index.d.ts",
|
|
27
27
|
"default": "./fesm2022/hug-ngx-layout.mjs"
|
|
28
28
|
},
|
|
29
|
+
"./public/translations/*": {
|
|
30
|
+
"default": "./**/*.json"
|
|
31
|
+
},
|
|
29
32
|
"./package.json": {
|
|
30
33
|
"default": "./package.json"
|
|
31
34
|
}
|
|
@@ -35,8 +38,8 @@
|
|
|
35
38
|
"@angular/core": ">=19 <20",
|
|
36
39
|
"@angular/cdk": ">=19 <20",
|
|
37
40
|
"@angular/material": ">=19 <20",
|
|
38
|
-
"@hug/ngx-core": "^3.0
|
|
39
|
-
"@hug/ngx-sidenav": "^3.0.
|
|
41
|
+
"@hug/ngx-core": "^3.1.0",
|
|
42
|
+
"@hug/ngx-sidenav": "^3.0.4"
|
|
40
43
|
},
|
|
41
44
|
"dependencies": {
|
|
42
45
|
"tslib": "^2.7.0"
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { EnvironmentProviders } from '@angular/core';
|
|
2
|
+
export * from './ngx-layout-intl';
|
|
3
|
+
/**
|
|
4
|
+
* The application initializer provider.
|
|
5
|
+
* @param filesPath the path to translations asset files (default: `public/translations/ngx-layout`).
|
|
6
|
+
*/
|
|
7
|
+
export declare const provideNgxLayout: (filesPath?: string) => EnvironmentProviders;
|
|
@@ -0,0 +1,12 @@
|
|
|
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
|
+
}
|