@dontdrinkandroot/ngx-material-extensions 0.6.0 → 0.7.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/fesm2022/dontdrinkandroot-ngx-material-extensions.mjs +107 -73
- package/fesm2022/dontdrinkandroot-ngx-material-extensions.mjs.map +1 -1
- package/package.json +8 -10
- package/src/filter/filter.component.d.ts +2 -2
- package/src/gridlist/grid-tile-lazy-image-container.directive.d.ts +2 -2
- package/src/gridlist/grid-tile-lazy-img.directive.d.ts +2 -2
- package/esm2022/dontdrinkandroot-ngx-material-extensions.mjs +0 -5
- package/esm2022/public-api.mjs +0 -14
- package/esm2022/src/button/fab-fixed.directive.mjs +0 -25
- package/esm2022/src/ddr-material-extensions.module.mjs +0 -127
- package/esm2022/src/filter/filter.component.mjs +0 -56
- package/esm2022/src/gridlist/grid-tile-lazy-image-container.directive.mjs +0 -55
- package/esm2022/src/gridlist/grid-tile-lazy-img.directive.mjs +0 -115
- package/esm2022/src/sidenav/sidenav-container.component.mjs +0 -43
- package/esm2022/src/sidenav/sidenav-toggle.component.mjs +0 -34
- package/esm2022/src/sidenav/sidenav.service.mjs +0 -78
- package/esm2022/src/theme/theme-config.mjs +0 -3
- package/esm2022/src/theme/theme-scroll.service.mjs +0 -49
- package/esm2022/src/toolbar/toolbar-fixed-top.directive.mjs +0 -33
|
@@ -28,17 +28,24 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
28
28
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
29
29
|
|
|
30
30
|
class SidenavService {
|
|
31
|
+
breakpointObserver;
|
|
32
|
+
router;
|
|
33
|
+
document;
|
|
34
|
+
sidenav;
|
|
35
|
+
stayOpenOnLargeScreen = true;
|
|
36
|
+
largeBreakpoints = [
|
|
37
|
+
Breakpoints.Medium,
|
|
38
|
+
Breakpoints.Large,
|
|
39
|
+
Breakpoints.XLarge
|
|
40
|
+
];
|
|
41
|
+
screenLarge$;
|
|
42
|
+
mode$;
|
|
43
|
+
opened$;
|
|
44
|
+
sidenavContentScrolled$ = new BehaviorSubject(false);
|
|
31
45
|
constructor(breakpointObserver, router, document) {
|
|
32
46
|
this.breakpointObserver = breakpointObserver;
|
|
33
47
|
this.router = router;
|
|
34
48
|
this.document = document;
|
|
35
|
-
this.stayOpenOnLargeScreen = true;
|
|
36
|
-
this.largeBreakpoints = [
|
|
37
|
-
Breakpoints.Medium,
|
|
38
|
-
Breakpoints.Large,
|
|
39
|
-
Breakpoints.XLarge
|
|
40
|
-
];
|
|
41
|
-
this.sidenavContentScrolled$ = new BehaviorSubject(false);
|
|
42
49
|
this.screenLarge$ = this.breakpointObserver.observe(this.largeBreakpoints).pipe(map(result => result.matches));
|
|
43
50
|
this.mode$ = this.screenLarge$.pipe(map(large => large && this.stayOpenOnLargeScreen ? 'side' : 'over'));
|
|
44
51
|
this.opened$ = this.screenLarge$.pipe(map(large => large && this.stayOpenOnLargeScreen));
|
|
@@ -83,10 +90,10 @@ class SidenavService {
|
|
|
83
90
|
watchContentScrolled() {
|
|
84
91
|
return this.sidenavContentScrolled$.asObservable();
|
|
85
92
|
}
|
|
86
|
-
static
|
|
87
|
-
static
|
|
93
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, deps: [{ token: i1.BreakpointObserver }, { token: i2.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
94
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, providedIn: 'root' });
|
|
88
95
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, decorators: [{
|
|
90
97
|
type: Injectable,
|
|
91
98
|
args: [{
|
|
92
99
|
providedIn: 'root'
|
|
@@ -97,6 +104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
97
104
|
}] }] });
|
|
98
105
|
|
|
99
106
|
class SidenavToggleComponent {
|
|
107
|
+
sidenavService;
|
|
108
|
+
visible;
|
|
100
109
|
constructor(sidenavService) {
|
|
101
110
|
this.sidenavService = sidenavService;
|
|
102
111
|
this.visible = toSignal(this.sidenavService.watchToggleVisible(), { initialValue: false });
|
|
@@ -104,13 +113,13 @@ class SidenavToggleComponent {
|
|
|
104
113
|
toggleSidenav() {
|
|
105
114
|
this.sidenavService.toggle();
|
|
106
115
|
}
|
|
107
|
-
static
|
|
108
|
-
static
|
|
116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavToggleComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SidenavToggleComponent, isStandalone: false, selector: "ddr-mat-sidenav-toggle", host: { properties: { "style.display": "visible() ? \"block\" : \"none\"" } }, ngImport: i0, template: `
|
|
109
118
|
<button mat-icon-button (click)="toggleSidenav()">
|
|
110
119
|
<mat-icon>menu</mat-icon>
|
|
111
|
-
</button>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
|
|
120
|
+
</button>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
|
|
112
121
|
}
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavToggleComponent, decorators: [{
|
|
114
123
|
type: Component,
|
|
115
124
|
args: [{
|
|
116
125
|
selector: 'ddr-mat-sidenav-toggle',
|
|
@@ -120,21 +129,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
120
129
|
</button>`,
|
|
121
130
|
host: {
|
|
122
131
|
'[style.display]': 'visible() ? "block" : "none"'
|
|
123
|
-
}
|
|
132
|
+
},
|
|
133
|
+
standalone: false
|
|
124
134
|
}]
|
|
125
135
|
}], ctorParameters: () => [{ type: SidenavService }] });
|
|
126
136
|
|
|
127
137
|
class GridTileLazyImgDirective {
|
|
138
|
+
element;
|
|
139
|
+
cd;
|
|
140
|
+
src;
|
|
141
|
+
hostSrc = 'assets/placeholder.gif';
|
|
142
|
+
hostStyleObjectFit = 'contain';
|
|
143
|
+
hostStyleWidthPx;
|
|
144
|
+
hostStyleHeightPx;
|
|
145
|
+
hostStyleOpacity = 0;
|
|
146
|
+
offset = 1000;
|
|
147
|
+
objectFit = 'cover';
|
|
148
|
+
displayed = false;
|
|
149
|
+
maxLoadedDimension = null;
|
|
128
150
|
constructor(element, cd) {
|
|
129
151
|
this.element = element;
|
|
130
152
|
this.cd = cd;
|
|
131
|
-
this.hostSrc = 'assets/placeholder.gif';
|
|
132
|
-
this.hostStyleObjectFit = 'contain';
|
|
133
|
-
this.hostStyleOpacity = 0;
|
|
134
|
-
this.offset = 1000;
|
|
135
|
-
this.objectFit = 'cover';
|
|
136
|
-
this.displayed = false;
|
|
137
|
-
this.maxLoadedDimension = null;
|
|
138
153
|
}
|
|
139
154
|
recheck() {
|
|
140
155
|
this.displayed = false;
|
|
@@ -172,7 +187,7 @@ class GridTileLazyImgDirective {
|
|
|
172
187
|
/**
|
|
173
188
|
* @override
|
|
174
189
|
*/
|
|
175
|
-
ngOnChanges(
|
|
190
|
+
ngOnChanges() {
|
|
176
191
|
this.displayed = false;
|
|
177
192
|
this.maxLoadedDimension = null;
|
|
178
193
|
this.hostStyleOpacity = 0;
|
|
@@ -206,12 +221,15 @@ class GridTileLazyImgDirective {
|
|
|
206
221
|
// console.log('isHidden');
|
|
207
222
|
return window.getComputedStyle(nativeElement).display === 'none';
|
|
208
223
|
}
|
|
209
|
-
static
|
|
210
|
-
static
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImgDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
225
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: GridTileLazyImgDirective, isStandalone: false, selector: "[ddrGridTileLazyImg]", inputs: { src: ["ddrGridTileLazyImg", "src"], offset: "offset", objectFit: "objectFit" }, host: { properties: { "src": "this.hostSrc", "style.object-fit": "this.hostStyleObjectFit", "style.width.px": "this.hostStyleWidthPx", "style.height.px": "this.hostStyleHeightPx", "style.opacity": "this.hostStyleOpacity" } }, usesOnChanges: true, ngImport: i0 });
|
|
211
226
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImgDirective, decorators: [{
|
|
213
228
|
type: Directive,
|
|
214
|
-
args: [{
|
|
229
|
+
args: [{
|
|
230
|
+
selector: '[ddrGridTileLazyImg]',
|
|
231
|
+
standalone: false
|
|
232
|
+
}]
|
|
215
233
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
|
|
216
234
|
type: Input,
|
|
217
235
|
args: ['ddrGridTileLazyImg']
|
|
@@ -237,24 +255,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
237
255
|
}] } });
|
|
238
256
|
|
|
239
257
|
class GridTileLazyImageContainerDirective {
|
|
240
|
-
|
|
258
|
+
lazyImages;
|
|
259
|
+
changeSubscription;
|
|
260
|
+
windowResized() {
|
|
241
261
|
if (null != this.lazyImages) {
|
|
242
|
-
this.lazyImages.forEach((lazyImage
|
|
262
|
+
this.lazyImages.forEach((lazyImage) => lazyImage.recheck());
|
|
243
263
|
}
|
|
244
264
|
}
|
|
245
|
-
windowScroll(
|
|
265
|
+
windowScroll() {
|
|
246
266
|
if (null != this.lazyImages) {
|
|
247
|
-
this.lazyImages.forEach((lazyImage
|
|
267
|
+
this.lazyImages.forEach((lazyImage) => lazyImage.check());
|
|
248
268
|
}
|
|
249
269
|
}
|
|
250
270
|
/**
|
|
251
271
|
* @override
|
|
252
272
|
*/
|
|
253
273
|
ngAfterContentInit() {
|
|
254
|
-
this.lazyImages.forEach((lazyImage
|
|
274
|
+
this.lazyImages.forEach((lazyImage) => lazyImage.check());
|
|
255
275
|
this.changeSubscription = this.lazyImages.changes.subscribe(() => {
|
|
256
276
|
/* Wait one tick until layout is ready */
|
|
257
|
-
setTimeout(() => this.lazyImages.forEach((lazyImage
|
|
277
|
+
setTimeout(() => this.lazyImages.forEach((lazyImage) => lazyImage.recheck()), 1);
|
|
258
278
|
});
|
|
259
279
|
}
|
|
260
280
|
/**
|
|
@@ -263,8 +283,8 @@ class GridTileLazyImageContainerDirective {
|
|
|
263
283
|
ngOnDestroy() {
|
|
264
284
|
this.changeSubscription.unsubscribe();
|
|
265
285
|
}
|
|
266
|
-
static
|
|
267
|
-
static
|
|
286
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImageContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
287
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: GridTileLazyImageContainerDirective, isStandalone: false, selector: "[ddrGridTileLazyImgContainer]", host: { listeners: { "window:resize": "windowResized($event)", "window:scroll": "windowScroll($event)" } }, queries: [{ propertyName: "lazyImages", predicate: GridTileLazyImgDirective, descendants: true }], ngImport: i0 });
|
|
268
288
|
}
|
|
269
289
|
__decorate([
|
|
270
290
|
Debounce()
|
|
@@ -272,9 +292,12 @@ __decorate([
|
|
|
272
292
|
__decorate([
|
|
273
293
|
Limit()
|
|
274
294
|
], GridTileLazyImageContainerDirective.prototype, "windowScroll", null);
|
|
275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImageContainerDirective, decorators: [{
|
|
276
296
|
type: Directive,
|
|
277
|
-
args: [{
|
|
297
|
+
args: [{
|
|
298
|
+
selector: '[ddrGridTileLazyImgContainer]',
|
|
299
|
+
standalone: false
|
|
300
|
+
}]
|
|
278
301
|
}], propDecorators: { lazyImages: [{
|
|
279
302
|
type: ContentChildren,
|
|
280
303
|
args: [GridTileLazyImgDirective, { descendants: true }]
|
|
@@ -287,9 +310,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
287
310
|
}] } });
|
|
288
311
|
|
|
289
312
|
class SidenavContainerComponent {
|
|
313
|
+
sidenavService;
|
|
314
|
+
sidenav;
|
|
315
|
+
stayOpenOnLargeScreen = true;
|
|
316
|
+
mode$;
|
|
317
|
+
opened$;
|
|
318
|
+
scrollSubscription;
|
|
290
319
|
constructor(sidenavService) {
|
|
291
320
|
this.sidenavService = sidenavService;
|
|
292
|
-
this.stayOpenOnLargeScreen = true;
|
|
293
321
|
this.mode$ = this.sidenavService.getModeObservable();
|
|
294
322
|
this.opened$ = this.sidenavService.getOpenedObservable();
|
|
295
323
|
}
|
|
@@ -311,12 +339,12 @@ class SidenavContainerComponent {
|
|
|
311
339
|
ngOnDestroy() {
|
|
312
340
|
this.scrollSubscription.unsubscribe();
|
|
313
341
|
}
|
|
314
|
-
static
|
|
315
|
-
static
|
|
342
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavContainerComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SidenavContainerComponent, isStandalone: false, selector: "ddr-mat-sidenav-container", inputs: { stayOpenOnLargeScreen: "stayOpenOnLargeScreen" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n <mat-sidenav\n #sidenav\n [mode]=\"(mode$|async) ?? 'over'\"\n [opened]=\"(opened$|async)\"\n [fixedInViewport]=\"true\"\n >\n <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n </mat-sidenav>\n <mat-sidenav-content #sidenavContent>\n <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n </mat-sidenav-content>\n</mat-sidenav-container>\n", dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] });
|
|
316
344
|
}
|
|
317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavContainerComponent, decorators: [{
|
|
318
346
|
type: Component,
|
|
319
|
-
args: [{ selector: 'ddr-mat-sidenav-container', template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n <mat-sidenav\n #sidenav\n [mode]=\"(mode$|async) ?? 'over'\"\n [opened]=\"(opened$|async)\"\n [fixedInViewport]=\"true\"\n >\n <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n </mat-sidenav>\n <mat-sidenav-content #sidenavContent>\n <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n </mat-sidenav-content>\n</mat-sidenav-container>\n" }]
|
|
347
|
+
args: [{ selector: 'ddr-mat-sidenav-container', standalone: false, template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n <mat-sidenav\n #sidenav\n [mode]=\"(mode$|async) ?? 'over'\"\n [opened]=\"(opened$|async)\"\n [fixedInViewport]=\"true\"\n >\n <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n </mat-sidenav>\n <mat-sidenav-content #sidenavContent>\n <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n </mat-sidenav-content>\n</mat-sidenav-container>\n" }]
|
|
320
348
|
}], ctorParameters: () => [{ type: SidenavService }], propDecorators: { sidenav: [{
|
|
321
349
|
type: ViewChild,
|
|
322
350
|
args: ['sidenav', { static: true }]
|
|
@@ -325,18 +353,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
325
353
|
}] } });
|
|
326
354
|
|
|
327
355
|
class FilterComponent {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
356
|
+
formControl = new FormControl();
|
|
357
|
+
filterChanged = new EventEmitter();
|
|
358
|
+
bouncePeriod = 500;
|
|
359
|
+
inputElement;
|
|
360
|
+
valueChangesSubscription;
|
|
333
361
|
/**
|
|
334
362
|
* @override
|
|
335
363
|
*/
|
|
336
364
|
ngOnInit() {
|
|
337
365
|
this.valueChangesSubscription = this.formControl.valueChanges
|
|
338
366
|
.pipe(debounce(() => interval(this.bouncePeriod)))
|
|
339
|
-
.subscribe((value => this.
|
|
367
|
+
.subscribe((value => this.filterChanged.emit(value)));
|
|
340
368
|
}
|
|
341
369
|
/**
|
|
342
370
|
* @override
|
|
@@ -352,15 +380,15 @@ class FilterComponent {
|
|
|
352
380
|
}
|
|
353
381
|
clear() {
|
|
354
382
|
this.formControl.setValue(null);
|
|
355
|
-
this.
|
|
383
|
+
this.filterChanged.emit(undefined);
|
|
356
384
|
}
|
|
357
|
-
static
|
|
358
|
-
static
|
|
385
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FilterComponent, isStandalone: false, selector: "ddr-filter", inputs: { bouncePeriod: "bouncePeriod" }, outputs: { filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n <button mat-icon-button matSuffix (click)=\"clear()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n</mat-card>\n", dependencies: [{ kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
359
387
|
}
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, decorators: [{
|
|
361
389
|
type: Component,
|
|
362
|
-
args: [{ selector: 'ddr-filter', template: "<mat-card appearance=\"outlined\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n <button mat-icon-button matSuffix (click)=\"clear()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n</mat-card>\n" }]
|
|
363
|
-
}], propDecorators: {
|
|
390
|
+
args: [{ selector: 'ddr-filter', standalone: false, template: "<mat-card appearance=\"outlined\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n <button mat-icon-button matSuffix (click)=\"clear()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n</mat-card>\n" }]
|
|
391
|
+
}], propDecorators: { filterChanged: [{
|
|
364
392
|
type: Output
|
|
365
393
|
}], bouncePeriod: [{
|
|
366
394
|
type: Input
|
|
@@ -372,6 +400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
372
400
|
const DDR_MATERIAL_EXTENSIONS_THEME = new InjectionToken('DDR_MATERIAL_EXTENSIONS_THEME');
|
|
373
401
|
|
|
374
402
|
class ThemeScrollService {
|
|
403
|
+
document;
|
|
404
|
+
themeConfig;
|
|
375
405
|
constructor(document, themeConfig) {
|
|
376
406
|
this.document = document;
|
|
377
407
|
this.themeConfig = themeConfig;
|
|
@@ -381,7 +411,7 @@ class ThemeScrollService {
|
|
|
381
411
|
const darkMetaElement = this.findOrCreateThemeColorMetaElement('(prefers-color-scheme: dark)', this.themeConfig.themeColorDark);
|
|
382
412
|
fromEvent(this.document, 'scroll')
|
|
383
413
|
.pipe(map(() => this.document.documentElement.scrollTop > 0), distinctUntilChanged()).subscribe((scrolled) => {
|
|
384
|
-
|
|
414
|
+
this.document.body.classList.toggle('ddr-mat-scrolled', scrolled);
|
|
385
415
|
lightMetaElement.content = scrolled ? this.themeConfig.themeColorLightScrolled : this.themeConfig.themeColorLight;
|
|
386
416
|
darkMetaElement.content = scrolled ? this.themeConfig.themeColorDarkScrolled : this.themeConfig.themeColorDark;
|
|
387
417
|
});
|
|
@@ -401,10 +431,10 @@ class ThemeScrollService {
|
|
|
401
431
|
this.document.head.appendChild(metaElement);
|
|
402
432
|
return metaElement;
|
|
403
433
|
}
|
|
404
|
-
static
|
|
405
|
-
static
|
|
434
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService, deps: [{ token: DOCUMENT }, { token: DDR_MATERIAL_EXTENSIONS_THEME }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
435
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService });
|
|
406
436
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService, decorators: [{
|
|
408
438
|
type: Injectable
|
|
409
439
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
410
440
|
type: Inject,
|
|
@@ -415,9 +445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
415
445
|
}] }] });
|
|
416
446
|
|
|
417
447
|
class ToolbarFixedTopDirective {
|
|
448
|
+
el;
|
|
449
|
+
ddrMatToolbarFixedTop = '';
|
|
418
450
|
constructor(el) {
|
|
419
451
|
this.el = el;
|
|
420
|
-
this.ddrMatToolbarFixedTop = '';
|
|
421
452
|
}
|
|
422
453
|
/**
|
|
423
454
|
* @override
|
|
@@ -433,19 +464,21 @@ class ToolbarFixedTopDirective {
|
|
|
433
464
|
});
|
|
434
465
|
}
|
|
435
466
|
}
|
|
436
|
-
static
|
|
437
|
-
static
|
|
467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarFixedTopDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
468
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ToolbarFixedTopDirective, isStandalone: false, selector: "[ddrMatToolbarFixedTop]", inputs: { ddrMatToolbarFixedTop: "ddrMatToolbarFixedTop" }, ngImport: i0 });
|
|
438
469
|
}
|
|
439
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarFixedTopDirective, decorators: [{
|
|
440
471
|
type: Directive,
|
|
441
472
|
args: [{
|
|
442
|
-
selector: '[ddrMatToolbarFixedTop]'
|
|
473
|
+
selector: '[ddrMatToolbarFixedTop]',
|
|
474
|
+
standalone: false
|
|
443
475
|
}]
|
|
444
476
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ddrMatToolbarFixedTop: [{
|
|
445
477
|
type: Input
|
|
446
478
|
}] } });
|
|
447
479
|
|
|
448
480
|
class FabFixedDirective {
|
|
481
|
+
el;
|
|
449
482
|
constructor(el) {
|
|
450
483
|
this.el = el;
|
|
451
484
|
}
|
|
@@ -458,19 +491,20 @@ class FabFixedDirective {
|
|
|
458
491
|
this.el.nativeElement.parentElement.insertBefore(container, this.el.nativeElement);
|
|
459
492
|
container.appendChild(this.el.nativeElement);
|
|
460
493
|
}
|
|
461
|
-
static
|
|
462
|
-
static
|
|
494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FabFixedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
495
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: FabFixedDirective, isStandalone: false, selector: "[ddrMatFabFixed]", ngImport: i0 });
|
|
463
496
|
}
|
|
464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FabFixedDirective, decorators: [{
|
|
465
498
|
type: Directive,
|
|
466
499
|
args: [{
|
|
467
|
-
selector: '[ddrMatFabFixed]'
|
|
500
|
+
selector: '[ddrMatFabFixed]',
|
|
501
|
+
standalone: false
|
|
468
502
|
}]
|
|
469
503
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
470
504
|
|
|
471
505
|
class DdrMaterialExtensionsModule {
|
|
472
|
-
static
|
|
473
|
-
static
|
|
506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
507
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, declarations: [FabFixedDirective,
|
|
474
508
|
FilterComponent,
|
|
475
509
|
SidenavToggleComponent,
|
|
476
510
|
GridTileLazyImageContainerDirective,
|
|
@@ -490,8 +524,8 @@ class DdrMaterialExtensionsModule {
|
|
|
490
524
|
GridTileLazyImageContainerDirective,
|
|
491
525
|
GridTileLazyImgDirective,
|
|
492
526
|
SidenavContainerComponent,
|
|
493
|
-
ToolbarFixedTopDirective] });
|
|
494
|
-
static
|
|
527
|
+
ToolbarFixedTopDirective] });
|
|
528
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, providers: [
|
|
495
529
|
ThemeScrollService,
|
|
496
530
|
{
|
|
497
531
|
provide: ENVIRONMENT_INITIALIZER,
|
|
@@ -518,9 +552,9 @@ class DdrMaterialExtensionsModule {
|
|
|
518
552
|
MatButtonModule,
|
|
519
553
|
MatFormFieldModule,
|
|
520
554
|
MatToolbarModule,
|
|
521
|
-
ReactiveFormsModule] });
|
|
555
|
+
ReactiveFormsModule] });
|
|
522
556
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, decorators: [{
|
|
524
558
|
type: NgModule,
|
|
525
559
|
args: [{
|
|
526
560
|
declarations: [
|