@arsedizioni/ars-utils 21.2.105 → 21.2.106
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.
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InjectionToken, inject, Injectable, ElementRef, Renderer2, PLATFORM_ID, Directive, input, computed, effect, isDevMode, TemplateRef, ViewContainerRef, ChangeDetectionStrategy, Component, output, signal, NgModule, forwardRef, ViewChildren, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import { SafeHtmlPipe, SystemUtils, ArsCoreModule, PasswordValidatorDirective, EqualsValidatorDirective } from '@arsedizioni/ars-utils/core';
|
|
4
|
+
import { isPlatformBrowser, PlatformLocation } from '@angular/common';
|
|
5
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
6
|
+
import { map, distinctUntilChanged, shareReplay, timer } from 'rxjs';
|
|
7
|
+
import { toSignal } from '@angular/core/rxjs-interop';
|
|
4
8
|
import { MatPaginatorIntl } from '@angular/material/paginator';
|
|
5
9
|
import { Overlay } from '@angular/cdk/overlay';
|
|
6
10
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
7
|
-
import { PlatformLocation } from '@angular/common';
|
|
8
11
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions, MatDialog } from '@angular/material/dialog';
|
|
9
12
|
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
|
|
10
|
-
import { timer } from 'rxjs';
|
|
11
13
|
import { tap, first } from 'rxjs/operators';
|
|
12
14
|
import * as i3 from '@angular/material/progress-spinner';
|
|
13
15
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
@@ -30,6 +32,1700 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
30
32
|
import * as i3$2 from '@angular/material/input';
|
|
31
33
|
import { MatInputModule } from '@angular/material/input';
|
|
32
34
|
|
|
35
|
+
/**
|
|
36
|
+
* @file breakpoints.ts
|
|
37
|
+
* Bootstrap 5 breakpoint definitions as CDK-compatible MediaQuery strings.
|
|
38
|
+
*
|
|
39
|
+
* CDK's BreakpointObserver already handles the actual matching — we only define aliases.
|
|
40
|
+
*
|
|
41
|
+
* Bootstrap 5 grid tiers:
|
|
42
|
+
* xs < 576px
|
|
43
|
+
* sm >= 576px
|
|
44
|
+
* md >= 768px
|
|
45
|
+
* lg >= 992px
|
|
46
|
+
* xl >= 1200px
|
|
47
|
+
* xxl >= 1400px
|
|
48
|
+
*
|
|
49
|
+
* Supported alias families:
|
|
50
|
+
*
|
|
51
|
+
* Canonical ranges xs | sm | md | lg | xl | xxl
|
|
52
|
+
* "and up" sm-up | md-up | lg-up | xl-up | xxl-up
|
|
53
|
+
* gt-xs | gt-sm | gt-md | gt-lg | gt-xl (ngx-layout compat)
|
|
54
|
+
* "and down" sm-down | md-down | lg-down | xl-down
|
|
55
|
+
* lt-sm | lt-md | lt-lg | lt-xl | lt-xxl (ngx-layout compat)
|
|
56
|
+
*
|
|
57
|
+
* The lt-* / gt-* aliases are exact mirrors of the -down / -up aliases.
|
|
58
|
+
* They share the same media query string so CDK deduplicates them internally.
|
|
59
|
+
*/
|
|
60
|
+
const BS5_BREAKPOINTS = {
|
|
61
|
+
// ── Canonical ranges ────────────────────────────────────────────────────────
|
|
62
|
+
'xs': '(max-width: 575.98px)',
|
|
63
|
+
'sm': '(min-width: 576px) and (max-width: 767.98px)',
|
|
64
|
+
'md': '(min-width: 768px) and (max-width: 991.98px)',
|
|
65
|
+
'lg': '(min-width: 992px) and (max-width: 1199.98px)',
|
|
66
|
+
'xl': '(min-width: 1200px) and (max-width: 1399.98px)',
|
|
67
|
+
'xxl': '(min-width: 1400px)',
|
|
68
|
+
// ── "and up" — Bootstrap style ───────────────────────────────────────────────
|
|
69
|
+
'sm-up': '(min-width: 576px)',
|
|
70
|
+
'md-up': '(min-width: 768px)',
|
|
71
|
+
'lg-up': '(min-width: 992px)',
|
|
72
|
+
'xl-up': '(min-width: 1200px)',
|
|
73
|
+
'xxl-up': '(min-width: 1400px)',
|
|
74
|
+
// ── "and up" — ngx-layout gt-* style ────────────────────────────────────────
|
|
75
|
+
'gt-xs': '(min-width: 576px)',
|
|
76
|
+
'gt-sm': '(min-width: 768px)',
|
|
77
|
+
'gt-md': '(min-width: 992px)',
|
|
78
|
+
'gt-lg': '(min-width: 1200px)',
|
|
79
|
+
'gt-xl': '(min-width: 1400px)',
|
|
80
|
+
// ── "and down" — Bootstrap style ─────────────────────────────────────────────
|
|
81
|
+
'sm-down': '(max-width: 767.98px)',
|
|
82
|
+
'md-down': '(max-width: 991.98px)',
|
|
83
|
+
'lg-down': '(max-width: 1199.98px)',
|
|
84
|
+
'xl-down': '(max-width: 1399.98px)',
|
|
85
|
+
// ── "and down" — ngx-layout lt-* style ──────────────────────────────────────
|
|
86
|
+
// lt-sm = everything below sm = xs only
|
|
87
|
+
'lt-sm': '(max-width: 575.98px)',
|
|
88
|
+
// lt-md = everything below md = xs + sm
|
|
89
|
+
'lt-md': '(max-width: 767.98px)',
|
|
90
|
+
// lt-lg = everything below lg = xs + sm + md
|
|
91
|
+
'lt-lg': '(max-width: 991.98px)',
|
|
92
|
+
// lt-xl = everything below xl = xs + sm + md + lg
|
|
93
|
+
'lt-xl': '(max-width: 1199.98px)',
|
|
94
|
+
// lt-xxl = everything below xxl = xs through xl
|
|
95
|
+
'lt-xxl': '(max-width: 1399.98px)',
|
|
96
|
+
};
|
|
97
|
+
/** InjectionToken — override to customise or extend breakpoints */
|
|
98
|
+
const LAYOUT_BREAKPOINTS = new InjectionToken('LAYOUT_BREAKPOINTS', { providedIn: 'root', factory: () => BS5_BREAKPOINTS });
|
|
99
|
+
/** Ordered canonical aliases, smallest → largest (used for mobile-first cascade) */
|
|
100
|
+
const CANONICAL_ALIASES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
101
|
+
/**
|
|
102
|
+
* All non-canonical alias families.
|
|
103
|
+
* Used by ResponsiveBaseDirective.resolveNonCanonical() to handle lt-* / gt-* / *-up / *-down
|
|
104
|
+
* inputs without polluting the mobile-first cascade logic.
|
|
105
|
+
*/
|
|
106
|
+
const ALIAS_FAMILIES = {
|
|
107
|
+
up: ['sm-up', 'md-up', 'lg-up', 'xl-up', 'xxl-up'],
|
|
108
|
+
down: ['sm-down', 'md-down', 'lg-down', 'xl-down'],
|
|
109
|
+
gt: ['gt-xs', 'gt-sm', 'gt-md', 'gt-lg', 'gt-xl'],
|
|
110
|
+
lt: ['lt-sm', 'lt-md', 'lt-lg', 'lt-xl', 'lt-xxl'],
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* @file media-observer.service.ts (v2 — optimized)
|
|
115
|
+
*
|
|
116
|
+
* ── Optimizations over v1 ─────────────────────────────────────────────────
|
|
117
|
+
*
|
|
118
|
+
* ✅ Single bo.observe() call for all 6 canonical breakpoints.
|
|
119
|
+
* CDK internally uses one MediaQueryList listener per query string.
|
|
120
|
+
* Calling observe() N times creates N listeners — here we create only one.
|
|
121
|
+
*
|
|
122
|
+
* ✅ currentBp$ is shared (shareReplay(1)): all subscribers (effects in
|
|
123
|
+
* directives) receive the same value without redundant re-computations.
|
|
124
|
+
*
|
|
125
|
+
* ✅ The currentBp Signal is derived from the Observable via toSignal():
|
|
126
|
+
* Angular manages the subscription internally and tears it down with root.
|
|
127
|
+
*
|
|
128
|
+
* ✅ isActive() delegates to bo.isMatched() — synchronous, O(1), no extra observer.
|
|
129
|
+
*
|
|
130
|
+
* ✅ isActive$() reuses the shared currentBp$ stream instead of opening
|
|
131
|
+
* a new bo.observe() for every requested alias.
|
|
132
|
+
*/
|
|
133
|
+
class MediaObserver {
|
|
134
|
+
constructor() {
|
|
135
|
+
this.bo = inject(BreakpointObserver);
|
|
136
|
+
this.bp = inject(LAYOUT_BREAKPOINTS);
|
|
137
|
+
/**
|
|
138
|
+
* A SINGLE CDK observation for all 6 canonical breakpoints.
|
|
139
|
+
* Each breakpoint change emits → we resolve the current alias → shared.
|
|
140
|
+
*
|
|
141
|
+
* shareReplay(1): all subscribers (N directives in the DOM) receive
|
|
142
|
+
* the same value without N separate recomputations.
|
|
143
|
+
*/
|
|
144
|
+
this.currentBp$ = this.bo
|
|
145
|
+
.observe(CANONICAL_ALIASES.map(a => this.bp[a]))
|
|
146
|
+
.pipe(map(() => this._resolve()), distinctUntilChanged(), // does not emit if the breakpoint hasn't actually changed
|
|
147
|
+
shareReplay(1) // multicast: N directives, 1 single execution
|
|
148
|
+
);
|
|
149
|
+
/**
|
|
150
|
+
* Signal derived from currentBp$.
|
|
151
|
+
* Directives read it via effect() — zero manual subscriptions.
|
|
152
|
+
* providedIn: 'root' ensures the Signal is a singleton.
|
|
153
|
+
*/
|
|
154
|
+
this.currentBp = toSignal(this.currentBp$, {
|
|
155
|
+
initialValue: this._resolve(),
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Returns true if the given alias (or raw media query) is currently active.
|
|
160
|
+
* Delegates to bo.isMatched() — synchronous, O(1), no extra observer created.
|
|
161
|
+
*
|
|
162
|
+
* @example
|
|
163
|
+
* media.isActive('md') // true on 768–991px screens
|
|
164
|
+
* media.isActive('lg-up') // true on 992px+
|
|
165
|
+
*/
|
|
166
|
+
isActive(alias) {
|
|
167
|
+
const query = this.bp[alias] ?? alias; // fallback: treat as raw media query
|
|
168
|
+
return this.bo.isMatched(query);
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Observable true/false for a specific alias.
|
|
172
|
+
* Reuses currentBp$ instead of opening a new bo.observe():
|
|
173
|
+
* no additional MediaQueryList listener is created.
|
|
174
|
+
*/
|
|
175
|
+
isActive$(alias) {
|
|
176
|
+
return this.currentBp$.pipe(map(() => this.isActive(alias)), distinctUntilChanged());
|
|
177
|
+
}
|
|
178
|
+
/** Resolves the active canonical alias (from xxl down to xs, mobile-first) */
|
|
179
|
+
_resolve() {
|
|
180
|
+
for (let i = CANONICAL_ALIASES.length - 1; i >= 0; i--) {
|
|
181
|
+
if (this.bo.isMatched(this.bp[CANONICAL_ALIASES[i]])) {
|
|
182
|
+
return CANONICAL_ALIASES[i];
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
return 'xs';
|
|
186
|
+
}
|
|
187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
188
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaObserver, providedIn: 'root' }); }
|
|
189
|
+
}
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaObserver, decorators: [{
|
|
191
|
+
type: Injectable,
|
|
192
|
+
args: [{ providedIn: 'root' }]
|
|
193
|
+
}] });
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* @file responsive-base.directive.ts (v5 — Angular 21 signals)
|
|
197
|
+
*
|
|
198
|
+
* ── What changed in v5 ────────────────────────────────────────────────────
|
|
199
|
+
*
|
|
200
|
+
* Full Angular 21 signals refactor:
|
|
201
|
+
*
|
|
202
|
+
* • resolve(), resolveNonCanonical(), resolveAll() are now PURE EXPORTED
|
|
203
|
+
* FUNCTIONS that accept currentBp and isActive as parameters.
|
|
204
|
+
* Directives call them from computed() or effect() with no "this" binding.
|
|
205
|
+
*
|
|
206
|
+
* • ResponsiveBaseDirective is now a thin utility base:
|
|
207
|
+
* – Only injects ElementRef, Renderer2, MediaObserver, PLATFORM_ID.
|
|
208
|
+
* – Exposes safeSetStyle() helper.
|
|
209
|
+
* – No lifecycle hooks, no Injector, no EffectRef, no abstract apply().
|
|
210
|
+
*
|
|
211
|
+
* • Each concrete directive uses:
|
|
212
|
+
* – input() for every @Input (signals, no more setters + _v/_nc maps)
|
|
213
|
+
* – computed() to build BpValues / NcValues maps and derive resolved CSS
|
|
214
|
+
* – effect() in the constructor to write to the DOM
|
|
215
|
+
*
|
|
216
|
+
* Benefits vs v4:
|
|
217
|
+
* ✅ Zero manual lifecycle/subscription management (no OnInit/OnChanges/EffectRef)
|
|
218
|
+
* ✅ Angular's reactive graph provides built-in dirty-checking and memoization
|
|
219
|
+
* ✅ DOM writes happen only when the resolved CSS value actually changes
|
|
220
|
+
* ✅ No more Injector injection just to create effects
|
|
221
|
+
*
|
|
222
|
+
* ── Resolution strategy (unchanged) ──────────────────────────────────────
|
|
223
|
+
*
|
|
224
|
+
* Canonical aliases (xs … xxl) → mobile-first cascade via resolve()
|
|
225
|
+
* Non-canonical (lt-*, gt-*, *-up, *-down) → point-in-time isActive() checks
|
|
226
|
+
* Final order: resolveNonCanonical() wins over resolve()
|
|
227
|
+
*/
|
|
228
|
+
// ── O(1) alias → index lookup (module-level constant, shared across instances) ──
|
|
229
|
+
const ALIAS_INDEX = new Map(CANONICAL_ALIASES.map((a, i) => [a, i]));
|
|
230
|
+
/**
|
|
231
|
+
* All non-canonical alias keys in priority order (most specific first).
|
|
232
|
+
* lt-sm is "below sm" (= xs only), lt-md is "below md" (= xs+sm), etc.
|
|
233
|
+
* Narrower range = higher priority = checked first.
|
|
234
|
+
*/
|
|
235
|
+
const NON_CANONICAL_PRIORITY = [
|
|
236
|
+
// lt-* from narrowest to widest
|
|
237
|
+
'lt-sm', 'lt-md', 'lt-lg', 'lt-xl', 'lt-xxl',
|
|
238
|
+
// gt-* from widest to narrowest
|
|
239
|
+
'gt-xs', 'gt-sm', 'gt-md', 'gt-lg', 'gt-xl',
|
|
240
|
+
// Bootstrap *-down from narrowest to widest
|
|
241
|
+
'sm-down', 'md-down', 'lg-down', 'xl-down',
|
|
242
|
+
// Bootstrap *-up from widest to narrowest
|
|
243
|
+
'sm-up', 'md-up', 'lg-up', 'xl-up', 'xxl-up',
|
|
244
|
+
];
|
|
245
|
+
// ── Pure resolution functions ─────────────────────────────────────────────────
|
|
246
|
+
// These are standalone functions (not class methods) so they can be called
|
|
247
|
+
// from computed() closures without capturing `this`.
|
|
248
|
+
/**
|
|
249
|
+
* Bootstrap 5 mobile-first cascade: walks from currentBp down to xs and
|
|
250
|
+
* returns the first defined value. O(k ≤ 6).
|
|
251
|
+
*/
|
|
252
|
+
function resolve(values, currentBp) {
|
|
253
|
+
const idx = ALIAS_INDEX.get(currentBp) ?? 0;
|
|
254
|
+
for (let i = idx; i >= 0; i--) {
|
|
255
|
+
const v = values[CANONICAL_ALIASES[i]];
|
|
256
|
+
if (v !== undefined)
|
|
257
|
+
return v;
|
|
258
|
+
}
|
|
259
|
+
return values['default'];
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* Non-canonical point-in-time check: iterates NON_CANONICAL_PRIORITY and
|
|
263
|
+
* returns the value for the first alias that isActive().
|
|
264
|
+
*/
|
|
265
|
+
function resolveNonCanonical(nc, isActive) {
|
|
266
|
+
for (const alias of NON_CANONICAL_PRIORITY) {
|
|
267
|
+
const v = nc[alias];
|
|
268
|
+
if (v !== undefined && isActive(alias))
|
|
269
|
+
return v;
|
|
270
|
+
}
|
|
271
|
+
return undefined;
|
|
272
|
+
}
|
|
273
|
+
/**
|
|
274
|
+
* Full resolution: non-canonical overrides win over the canonical cascade.
|
|
275
|
+
*
|
|
276
|
+
* Usage inside computed():
|
|
277
|
+
* const resolved = computed(() =>
|
|
278
|
+
* resolveAll(this._v(), this._nc(), this.media.currentBp(), a => this.media.isActive(a))
|
|
279
|
+
* );
|
|
280
|
+
*/
|
|
281
|
+
function resolveAll(canonical, nonCanonical, currentBp, isActive) {
|
|
282
|
+
return resolveNonCanonical(nonCanonical, isActive) ?? resolve(canonical, currentBp);
|
|
283
|
+
}
|
|
284
|
+
// ── Base directive ─────────────────────────────────────────────────────────────
|
|
285
|
+
class ResponsiveBaseDirective {
|
|
286
|
+
constructor() {
|
|
287
|
+
this.el = inject((ElementRef));
|
|
288
|
+
this.r2 = inject(Renderer2);
|
|
289
|
+
this.media = inject(MediaObserver);
|
|
290
|
+
/** true in browser, false in SSR */
|
|
291
|
+
this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
292
|
+
}
|
|
293
|
+
/** SSR-safe style setter. Pass null/empty string to remove the property. */
|
|
294
|
+
safeSetStyle(prop, value) {
|
|
295
|
+
if (value === null || value === '') {
|
|
296
|
+
this.r2.removeStyle(this.el.nativeElement, prop);
|
|
297
|
+
}
|
|
298
|
+
else {
|
|
299
|
+
this.r2.setStyle(this.el.nativeElement, prop, value);
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResponsiveBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
303
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ResponsiveBaseDirective, isStandalone: true, ngImport: i0 }); }
|
|
304
|
+
}
|
|
305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResponsiveBaseDirective, decorators: [{
|
|
306
|
+
type: Directive
|
|
307
|
+
}] });
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* @file fx-layout.directive.ts (Angular 21 - signals)
|
|
311
|
+
*
|
|
312
|
+
* [fxLayout] -- sets flex-direction (and optionally flex-wrap) on the host.
|
|
313
|
+
* [fxLayoutWrap] -- dedicated alias for flex-wrap (original ngx-layout compat).
|
|
314
|
+
*
|
|
315
|
+
* Angular 21 changes:
|
|
316
|
+
* - All @Input setters replaced by input() signals
|
|
317
|
+
* - computed() builds reactive BP maps and derives CSS values
|
|
318
|
+
* - effect() in constructor writes to DOM -- no lifecycle hooks
|
|
319
|
+
*
|
|
320
|
+
* Breakpoint suffixes:
|
|
321
|
+
* Canonical : .xs .sm .md .lg .xl .xxl
|
|
322
|
+
* lt-* : .lt-sm .lt-md .lt-lg .lt-xl .lt-xxl
|
|
323
|
+
* gt-* : .gt-xs .gt-sm .gt-md .gt-lg .gt-xl
|
|
324
|
+
* *-up : .sm-up .md-up .lg-up .xl-up .xxl-up
|
|
325
|
+
* *-down : .sm-down .md-down .lg-down .xl-down
|
|
326
|
+
*/
|
|
327
|
+
const VALID_DIRECTIONS = new Set(['row', 'column', 'row-reverse', 'column-reverse']);
|
|
328
|
+
const VALID_WRAPS = new Set(['wrap', 'wrap-reverse', 'nowrap']);
|
|
329
|
+
function parseLayout(raw) {
|
|
330
|
+
const parts = raw.trim().split(/\s+/);
|
|
331
|
+
const dir = VALID_DIRECTIONS.has(parts[0]) ? parts[0] : 'row';
|
|
332
|
+
const wrap = VALID_WRAPS.has(parts[1]) ? parts[1] : 'nowrap';
|
|
333
|
+
return [dir, wrap];
|
|
334
|
+
}
|
|
335
|
+
class FxLayoutDirective extends ResponsiveBaseDirective {
|
|
336
|
+
constructor() {
|
|
337
|
+
super();
|
|
338
|
+
this.fxLayout = input('row', { ...(ngDevMode ? { debugName: "fxLayout" } : {}), alias: 'fxLayout' });
|
|
339
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxLayout.xs' });
|
|
340
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxLayout.sm' });
|
|
341
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxLayout.md' });
|
|
342
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxLayout.lg' });
|
|
343
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxLayout.xl' });
|
|
344
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxLayout.xxl' });
|
|
345
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxLayout.lt-sm' });
|
|
346
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxLayout.lt-md' });
|
|
347
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxLayout.lt-lg' });
|
|
348
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxLayout.lt-xl' });
|
|
349
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxLayout.lt-xxl' });
|
|
350
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxLayout.gt-xs' });
|
|
351
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxLayout.gt-sm' });
|
|
352
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxLayout.gt-md' });
|
|
353
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxLayout.gt-lg' });
|
|
354
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxLayout.gt-xl' });
|
|
355
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxLayout.sm-up' });
|
|
356
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxLayout.md-up' });
|
|
357
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxLayout.lg-up' });
|
|
358
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxLayout.xl-up' });
|
|
359
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxLayout.xxl-up' });
|
|
360
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxLayout.sm-down' });
|
|
361
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxLayout.md-down' });
|
|
362
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxLayout.lg-down' });
|
|
363
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxLayout.xl-down' });
|
|
364
|
+
this._parsed = computed(() => parseLayout(resolveAll({ default: this.fxLayout(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
365
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
366
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
367
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
368
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
369
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
370
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
371
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
372
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'row'), ...(ngDevMode ? [{ debugName: "_parsed" }] : []));
|
|
373
|
+
effect(() => {
|
|
374
|
+
const [dir, wrap] = this._parsed();
|
|
375
|
+
this.safeSetStyle('flex-direction', dir);
|
|
376
|
+
this.safeSetStyle('flex-wrap', wrap);
|
|
377
|
+
});
|
|
378
|
+
}
|
|
379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
380
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxLayoutDirective, isStandalone: true, selector: "\n [fxLayout],\n [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],\n [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],\n [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],\n [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],\n [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]\n ", inputs: { fxLayout: { classPropertyName: "fxLayout", publicName: "fxLayout", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayout.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayout.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayout.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayout.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayout.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayout.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayout.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayout.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayout.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayout.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayout.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayout.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayout.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayout.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayout.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayout.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayout.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayout.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayout.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayout.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayout.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayout.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayout.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayout.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayout.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"flex\"" } }, usesInheritance: true, ngImport: i0 }); }
|
|
381
|
+
}
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutDirective, decorators: [{
|
|
383
|
+
type: Directive,
|
|
384
|
+
args: [{
|
|
385
|
+
selector: `
|
|
386
|
+
[fxLayout],
|
|
387
|
+
[fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],
|
|
388
|
+
[fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],
|
|
389
|
+
[fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],
|
|
390
|
+
[fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],
|
|
391
|
+
[fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]
|
|
392
|
+
`,
|
|
393
|
+
standalone: true,
|
|
394
|
+
host: { '[style.display]': '"flex"' },
|
|
395
|
+
}]
|
|
396
|
+
}], ctorParameters: () => [], propDecorators: { fxLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-down", required: false }] }] } });
|
|
397
|
+
class FxLayoutWrapDirective extends ResponsiveBaseDirective {
|
|
398
|
+
constructor() {
|
|
399
|
+
super();
|
|
400
|
+
this.fxLayoutWrap = input('wrap', { ...(ngDevMode ? { debugName: "fxLayoutWrap" } : {}), alias: 'fxLayoutWrap' });
|
|
401
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxLayoutWrap.xs' });
|
|
402
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxLayoutWrap.sm' });
|
|
403
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxLayoutWrap.md' });
|
|
404
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxLayoutWrap.lg' });
|
|
405
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxLayoutWrap.xl' });
|
|
406
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxLayoutWrap.xxl' });
|
|
407
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxLayoutWrap.lt-sm' });
|
|
408
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxLayoutWrap.lt-md' });
|
|
409
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxLayoutWrap.lt-lg' });
|
|
410
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxLayoutWrap.lt-xl' });
|
|
411
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxLayoutWrap.lt-xxl' });
|
|
412
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxLayoutWrap.gt-xs' });
|
|
413
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxLayoutWrap.gt-sm' });
|
|
414
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxLayoutWrap.gt-md' });
|
|
415
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxLayoutWrap.gt-lg' });
|
|
416
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxLayoutWrap.gt-xl' });
|
|
417
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxLayoutWrap.sm-up' });
|
|
418
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxLayoutWrap.md-up' });
|
|
419
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxLayoutWrap.lg-up' });
|
|
420
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxLayoutWrap.xl-up' });
|
|
421
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxLayoutWrap.xxl-up' });
|
|
422
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxLayoutWrap.sm-down' });
|
|
423
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxLayoutWrap.md-down' });
|
|
424
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxLayoutWrap.lg-down' });
|
|
425
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxLayoutWrap.xl-down' });
|
|
426
|
+
this._wrap = computed(() => {
|
|
427
|
+
const w = resolveAll({ default: this.fxLayoutWrap(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
428
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
429
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
430
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
431
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
432
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
433
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
434
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
435
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'wrap';
|
|
436
|
+
return VALID_WRAPS.has(w) ? w : 'wrap';
|
|
437
|
+
}, ...(ngDevMode ? [{ debugName: "_wrap" }] : []));
|
|
438
|
+
effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
|
|
439
|
+
}
|
|
440
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
441
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxLayoutWrapDirective, isStandalone: true, selector: "\n [fxLayoutWrap],\n [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],\n [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],\n [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],\n [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],\n [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]\n ", inputs: { fxLayoutWrap: { classPropertyName: "fxLayoutWrap", publicName: "fxLayoutWrap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutWrap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutWrap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutWrap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutWrap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutWrap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutWrap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutWrap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutWrap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutWrap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutWrap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutWrap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutWrap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutWrap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutWrap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutWrap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutWrap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutWrap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutWrap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutWrap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutWrap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutWrap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutWrap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutWrap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutWrap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutWrap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
442
|
+
}
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutWrapDirective, decorators: [{
|
|
444
|
+
type: Directive,
|
|
445
|
+
args: [{
|
|
446
|
+
selector: `
|
|
447
|
+
[fxLayoutWrap],
|
|
448
|
+
[fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],
|
|
449
|
+
[fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],
|
|
450
|
+
[fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],
|
|
451
|
+
[fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],
|
|
452
|
+
[fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]
|
|
453
|
+
`,
|
|
454
|
+
standalone: true,
|
|
455
|
+
}]
|
|
456
|
+
}], ctorParameters: () => [], propDecorators: { fxLayoutWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-down", required: false }] }] } });
|
|
457
|
+
|
|
458
|
+
/**
|
|
459
|
+
* @file fx-flex.directive.ts (Angular 21 — signals)
|
|
460
|
+
*
|
|
461
|
+
* [fxFlex] — flex shorthand on a flex child element.
|
|
462
|
+
*
|
|
463
|
+
* Angular 21 changes:
|
|
464
|
+
* • All @Input setters replaced by input() signals
|
|
465
|
+
* • computed() builds the BpValues / NcValues maps reactively
|
|
466
|
+
* • effect() in constructor writes to the DOM — no lifecycle hooks needed
|
|
467
|
+
* • resolveAll() is the pure function from responsive-base.directive.ts
|
|
468
|
+
*
|
|
469
|
+
* Accepted values:
|
|
470
|
+
* (empty) → flex: 1 1 0%
|
|
471
|
+
* "auto" → flex: 1 1 auto
|
|
472
|
+
* "none" → flex: none
|
|
473
|
+
* "grow" → flex: 1 1 100%
|
|
474
|
+
* "nogrow" → flex: 0 1 auto
|
|
475
|
+
* "noshrink" → flex: 1 0 auto
|
|
476
|
+
* "50%" → flex: 1 1 50%
|
|
477
|
+
* "50" → flex: 1 1 50% (unitless normalized to %)
|
|
478
|
+
* "200px" → flex: 1 1 200px
|
|
479
|
+
* "0 0 200px" → flex: 0 0 200px (full shorthand passthrough)
|
|
480
|
+
*
|
|
481
|
+
* Breakpoint suffixes:
|
|
482
|
+
* Canonical : .xs .sm .md .lg .xl .xxl
|
|
483
|
+
* lt-* : .lt-sm .lt-md .lt-lg .lt-xl .lt-xxl
|
|
484
|
+
* gt-* : .gt-xs .gt-sm .gt-md .gt-lg .gt-xl
|
|
485
|
+
* *-up : .sm-up .md-up .lg-up .xl-up .xxl-up
|
|
486
|
+
* *-down : .sm-down .md-down .lg-down .xl-down
|
|
487
|
+
*/
|
|
488
|
+
function toFlexCss(raw) {
|
|
489
|
+
if (raw === undefined || raw === '')
|
|
490
|
+
return '1 1 0%';
|
|
491
|
+
if (raw === 'none')
|
|
492
|
+
return 'none';
|
|
493
|
+
if (raw === 'auto')
|
|
494
|
+
return '1 1 auto';
|
|
495
|
+
if (raw === 'grow')
|
|
496
|
+
return '1 1 100%';
|
|
497
|
+
if (raw === 'nogrow')
|
|
498
|
+
return '0 1 auto';
|
|
499
|
+
if (raw === 'noshrink')
|
|
500
|
+
return '1 0 auto';
|
|
501
|
+
const parts = raw.trim().split(/\s+/);
|
|
502
|
+
if (parts.length === 3)
|
|
503
|
+
return raw.trim();
|
|
504
|
+
let basis = parts[0];
|
|
505
|
+
if (/^\d+(\.\d+)?$/.test(basis))
|
|
506
|
+
basis = basis + '%';
|
|
507
|
+
return `1 1 ${basis}`;
|
|
508
|
+
}
|
|
509
|
+
class FxFlexDirective extends ResponsiveBaseDirective {
|
|
510
|
+
constructor() {
|
|
511
|
+
super();
|
|
512
|
+
// ── Canonical signal inputs ───────────────────────────────────────────────
|
|
513
|
+
this.fxFlex = input(undefined, { ...(ngDevMode ? { debugName: "fxFlex" } : {}), alias: 'fxFlex' });
|
|
514
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxFlex.xs' });
|
|
515
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxFlex.sm' });
|
|
516
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxFlex.md' });
|
|
517
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxFlex.lg' });
|
|
518
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxFlex.xl' });
|
|
519
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxFlex.xxl' });
|
|
520
|
+
// ── lt-* ─────────────────────────────────────────────────────────────────
|
|
521
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxFlex.lt-sm' });
|
|
522
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxFlex.lt-md' });
|
|
523
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxFlex.lt-lg' });
|
|
524
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxFlex.lt-xl' });
|
|
525
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxFlex.lt-xxl' });
|
|
526
|
+
// ── gt-* ─────────────────────────────────────────────────────────────────
|
|
527
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxFlex.gt-xs' });
|
|
528
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxFlex.gt-sm' });
|
|
529
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxFlex.gt-md' });
|
|
530
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxFlex.gt-lg' });
|
|
531
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxFlex.gt-xl' });
|
|
532
|
+
// ── *-up ─────────────────────────────────────────────────────────────────
|
|
533
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxFlex.sm-up' });
|
|
534
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxFlex.md-up' });
|
|
535
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxFlex.lg-up' });
|
|
536
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxFlex.xl-up' });
|
|
537
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxFlex.xxl-up' });
|
|
538
|
+
// ── *-down ───────────────────────────────────────────────────────────────
|
|
539
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxFlex.sm-down' });
|
|
540
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxFlex.md-down' });
|
|
541
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxFlex.lg-down' });
|
|
542
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxFlex.xl-down' });
|
|
543
|
+
// ── Derived CSS value ──────────────────────────────────────────────────────
|
|
544
|
+
// Inlined single computed: Angular tracks each input() individually,
|
|
545
|
+
// so _flexCss only recomputes when a signal it actually reads changes.
|
|
546
|
+
this._flexCss = computed(() => toFlexCss(resolveAll({ default: this.fxFlex(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
547
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
548
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
549
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
550
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
551
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
552
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
553
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
554
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_flexCss" }] : []));
|
|
555
|
+
effect(() => {
|
|
556
|
+
this.safeSetStyle('flex', this._flexCss());
|
|
557
|
+
this.safeSetStyle('box-sizing', 'border-box');
|
|
558
|
+
});
|
|
559
|
+
}
|
|
560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
561
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxFlexDirective, isStandalone: true, selector: "\n [fxFlex],\n [fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],\n [fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],\n [fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],\n [fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],\n [fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]\n ", inputs: { fxFlex: { classPropertyName: "fxFlex", publicName: "fxFlex", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlex.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlex.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlex.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlex.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlex.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlex.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlex.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlex.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlex.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlex.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlex.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlex.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlex.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlex.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlex.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlex.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlex.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlex.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlex.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlex.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlex.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlex.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlex.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlex.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlex.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
562
|
+
}
|
|
563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexDirective, decorators: [{
|
|
564
|
+
type: Directive,
|
|
565
|
+
args: [{
|
|
566
|
+
selector: `
|
|
567
|
+
[fxFlex],
|
|
568
|
+
[fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],
|
|
569
|
+
[fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],
|
|
570
|
+
[fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],
|
|
571
|
+
[fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],
|
|
572
|
+
[fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]
|
|
573
|
+
`,
|
|
574
|
+
standalone: true,
|
|
575
|
+
}]
|
|
576
|
+
}], ctorParameters: () => [], propDecorators: { fxFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-down", required: false }] }] } });
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* @file fx-layout-align.directive.ts (Angular 21 — signals)
|
|
580
|
+
*
|
|
581
|
+
* [fxLayoutAlign] — sets justify-content + align-items on a flex container.
|
|
582
|
+
*
|
|
583
|
+
* Format: "mainAxis crossAxis"
|
|
584
|
+
* mainAxis : start | center | end | space-between | space-around | space-evenly
|
|
585
|
+
* crossAxis : start | center | end | stretch | baseline (default: stretch)
|
|
586
|
+
*
|
|
587
|
+
* Angular 21 changes:
|
|
588
|
+
* • All @Input setters replaced by input() signals
|
|
589
|
+
* • computed() derives the resolved CSS pair
|
|
590
|
+
* • effect() in constructor writes to DOM
|
|
591
|
+
*
|
|
592
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
593
|
+
*/
|
|
594
|
+
const MAIN_MAP = {
|
|
595
|
+
'start': 'flex-start', 'end': 'flex-end', 'center': 'center',
|
|
596
|
+
'space-between': 'space-between', 'space-around': 'space-around', 'space-evenly': 'space-evenly',
|
|
597
|
+
};
|
|
598
|
+
const CROSS_MAP = {
|
|
599
|
+
'start': 'flex-start', 'end': 'flex-end', 'center': 'center',
|
|
600
|
+
'stretch': 'stretch', 'baseline': 'baseline',
|
|
601
|
+
};
|
|
602
|
+
function parseAlign(raw) {
|
|
603
|
+
const [main = 'start', cross = 'stretch'] = raw.trim().split(/\s+/);
|
|
604
|
+
if (isDevMode() && !MAIN_MAP[main])
|
|
605
|
+
console.warn(`[fxLayoutAlign] Unknown mainAxis: "${main}"`);
|
|
606
|
+
if (isDevMode() && !CROSS_MAP[cross])
|
|
607
|
+
console.warn(`[fxLayoutAlign] Unknown crossAxis: "${cross}"`);
|
|
608
|
+
return [MAIN_MAP[main] ?? 'flex-start', CROSS_MAP[cross] ?? 'stretch'];
|
|
609
|
+
}
|
|
610
|
+
class FxLayoutAlignDirective extends ResponsiveBaseDirective {
|
|
611
|
+
constructor() {
|
|
612
|
+
super();
|
|
613
|
+
this.fxLayoutAlign = input(undefined, { ...(ngDevMode ? { debugName: "fxLayoutAlign" } : {}), alias: 'fxLayoutAlign' });
|
|
614
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxLayoutAlign.xs' });
|
|
615
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxLayoutAlign.sm' });
|
|
616
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxLayoutAlign.md' });
|
|
617
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxLayoutAlign.lg' });
|
|
618
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxLayoutAlign.xl' });
|
|
619
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxLayoutAlign.xxl' });
|
|
620
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxLayoutAlign.lt-sm' });
|
|
621
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxLayoutAlign.lt-md' });
|
|
622
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxLayoutAlign.lt-lg' });
|
|
623
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxLayoutAlign.lt-xl' });
|
|
624
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxLayoutAlign.lt-xxl' });
|
|
625
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxLayoutAlign.gt-xs' });
|
|
626
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxLayoutAlign.gt-sm' });
|
|
627
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxLayoutAlign.gt-md' });
|
|
628
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxLayoutAlign.gt-lg' });
|
|
629
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxLayoutAlign.gt-xl' });
|
|
630
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxLayoutAlign.sm-up' });
|
|
631
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxLayoutAlign.md-up' });
|
|
632
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxLayoutAlign.lg-up' });
|
|
633
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxLayoutAlign.xl-up' });
|
|
634
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxLayoutAlign.xxl-up' });
|
|
635
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxLayoutAlign.sm-down' });
|
|
636
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxLayoutAlign.md-down' });
|
|
637
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxLayoutAlign.lg-down' });
|
|
638
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxLayoutAlign.xl-down' });
|
|
639
|
+
this._parsed = computed(() => parseAlign(resolveAll({ default: this.fxLayoutAlign(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
640
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
641
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
642
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
643
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
644
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
645
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
646
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
647
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'start stretch'), ...(ngDevMode ? [{ debugName: "_parsed" }] : []));
|
|
648
|
+
effect(() => {
|
|
649
|
+
const [jc, ai] = this._parsed();
|
|
650
|
+
this.safeSetStyle('justify-content', jc);
|
|
651
|
+
this.safeSetStyle('align-items', ai);
|
|
652
|
+
});
|
|
653
|
+
}
|
|
654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
655
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxLayoutAlignDirective, isStandalone: true, selector: "\n [fxLayoutAlign],\n [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],\n [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],\n [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],\n [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],\n [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]\n ", inputs: { fxLayoutAlign: { classPropertyName: "fxLayoutAlign", publicName: "fxLayoutAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
656
|
+
}
|
|
657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutAlignDirective, decorators: [{
|
|
658
|
+
type: Directive,
|
|
659
|
+
args: [{
|
|
660
|
+
selector: `
|
|
661
|
+
[fxLayoutAlign],
|
|
662
|
+
[fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],
|
|
663
|
+
[fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],
|
|
664
|
+
[fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],
|
|
665
|
+
[fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],
|
|
666
|
+
[fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]
|
|
667
|
+
`,
|
|
668
|
+
standalone: true,
|
|
669
|
+
}]
|
|
670
|
+
}], ctorParameters: () => [], propDecorators: { fxLayoutAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-down", required: false }] }] } });
|
|
671
|
+
|
|
672
|
+
/**
|
|
673
|
+
* @file fx-layout-gap.directive.ts (Angular 21 — signals)
|
|
674
|
+
*
|
|
675
|
+
* [fxLayoutGap] — sets gap on a flex or grid container.
|
|
676
|
+
* Unitless numbers are normalized to px (e.g. "16" → "16px").
|
|
677
|
+
*
|
|
678
|
+
* Angular 21 changes:
|
|
679
|
+
* • All @Input setters replaced by input() signals
|
|
680
|
+
* • computed() derives the normalized gap value
|
|
681
|
+
* • effect() in constructor writes to DOM
|
|
682
|
+
*
|
|
683
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
684
|
+
*/
|
|
685
|
+
function normalizeGap$1(raw) {
|
|
686
|
+
return raw.trim().split(/\s+/)
|
|
687
|
+
.map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
|
|
688
|
+
.join(' ');
|
|
689
|
+
}
|
|
690
|
+
class FxLayoutGapDirective extends ResponsiveBaseDirective {
|
|
691
|
+
constructor() {
|
|
692
|
+
super();
|
|
693
|
+
this.fxLayoutGap = input(undefined, { ...(ngDevMode ? { debugName: "fxLayoutGap" } : {}), alias: 'fxLayoutGap' });
|
|
694
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxLayoutGap.xs' });
|
|
695
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxLayoutGap.sm' });
|
|
696
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxLayoutGap.md' });
|
|
697
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxLayoutGap.lg' });
|
|
698
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxLayoutGap.xl' });
|
|
699
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxLayoutGap.xxl' });
|
|
700
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxLayoutGap.lt-sm' });
|
|
701
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxLayoutGap.lt-md' });
|
|
702
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxLayoutGap.lt-lg' });
|
|
703
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxLayoutGap.lt-xl' });
|
|
704
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxLayoutGap.lt-xxl' });
|
|
705
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxLayoutGap.gt-xs' });
|
|
706
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxLayoutGap.gt-sm' });
|
|
707
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxLayoutGap.gt-md' });
|
|
708
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxLayoutGap.gt-lg' });
|
|
709
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxLayoutGap.gt-xl' });
|
|
710
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxLayoutGap.sm-up' });
|
|
711
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxLayoutGap.md-up' });
|
|
712
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxLayoutGap.lg-up' });
|
|
713
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxLayoutGap.xl-up' });
|
|
714
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxLayoutGap.xxl-up' });
|
|
715
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxLayoutGap.sm-down' });
|
|
716
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxLayoutGap.md-down' });
|
|
717
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxLayoutGap.lg-down' });
|
|
718
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxLayoutGap.xl-down' });
|
|
719
|
+
this._gap = computed(() => normalizeGap$1(resolveAll({ default: this.fxLayoutGap(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
720
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
721
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
722
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
723
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
724
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
725
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
726
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
727
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? '0'), ...(ngDevMode ? [{ debugName: "_gap" }] : []));
|
|
728
|
+
effect(() => { this.safeSetStyle('gap', this._gap()); });
|
|
729
|
+
}
|
|
730
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
731
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxLayoutGapDirective, isStandalone: true, selector: "\n [fxLayoutGap],\n [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],\n [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],\n [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],\n [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],\n [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]\n ", inputs: { fxLayoutGap: { classPropertyName: "fxLayoutGap", publicName: "fxLayoutGap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutGap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutGap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutGap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutGap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutGap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
732
|
+
}
|
|
733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxLayoutGapDirective, decorators: [{
|
|
734
|
+
type: Directive,
|
|
735
|
+
args: [{
|
|
736
|
+
selector: `
|
|
737
|
+
[fxLayoutGap],
|
|
738
|
+
[fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],
|
|
739
|
+
[fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],
|
|
740
|
+
[fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],
|
|
741
|
+
[fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],
|
|
742
|
+
[fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]
|
|
743
|
+
`,
|
|
744
|
+
standalone: true,
|
|
745
|
+
}]
|
|
746
|
+
}], ctorParameters: () => [], propDecorators: { fxLayoutGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-down", required: false }] }] } });
|
|
747
|
+
|
|
748
|
+
/**
|
|
749
|
+
* @file fx-flex-extras.directives.ts (Angular 21 — signals)
|
|
750
|
+
*
|
|
751
|
+
* Flex child helper directives:
|
|
752
|
+
* [fxFlexOrder] — CSS order
|
|
753
|
+
* [fxFlexOffset] — margin-inline-start (RTL-safe)
|
|
754
|
+
* [fxFlexAlign] — align-self override
|
|
755
|
+
* [fxFlexFill] — fills the container (width/height 100%)
|
|
756
|
+
*
|
|
757
|
+
* Angular 21 changes:
|
|
758
|
+
* • All @Input setters replaced by input() signals
|
|
759
|
+
* • computed() derives the resolved CSS values
|
|
760
|
+
* • effect() in constructor writes to DOM — no lifecycle hooks
|
|
761
|
+
*
|
|
762
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
763
|
+
*/
|
|
764
|
+
class FxFlexOrderDirective extends ResponsiveBaseDirective {
|
|
765
|
+
constructor() {
|
|
766
|
+
super();
|
|
767
|
+
this.fxFlexOrder = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexOrder" } : {}), alias: 'fxFlexOrder' });
|
|
768
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxFlexOrder.xs' });
|
|
769
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxFlexOrder.sm' });
|
|
770
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxFlexOrder.md' });
|
|
771
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxFlexOrder.lg' });
|
|
772
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxFlexOrder.xl' });
|
|
773
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxFlexOrder.xxl' });
|
|
774
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxFlexOrder.lt-sm' });
|
|
775
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxFlexOrder.lt-md' });
|
|
776
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxFlexOrder.lt-lg' });
|
|
777
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxFlexOrder.lt-xl' });
|
|
778
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxFlexOrder.lt-xxl' });
|
|
779
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxFlexOrder.gt-xs' });
|
|
780
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxFlexOrder.gt-sm' });
|
|
781
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxFlexOrder.gt-md' });
|
|
782
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxFlexOrder.gt-lg' });
|
|
783
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxFlexOrder.gt-xl' });
|
|
784
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxFlexOrder.sm-up' });
|
|
785
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxFlexOrder.md-up' });
|
|
786
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxFlexOrder.lg-up' });
|
|
787
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxFlexOrder.xl-up' });
|
|
788
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxFlexOrder.xxl-up' });
|
|
789
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxFlexOrder.sm-down' });
|
|
790
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxFlexOrder.md-down' });
|
|
791
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxFlexOrder.lg-down' });
|
|
792
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxFlexOrder.xl-down' });
|
|
793
|
+
this._order = computed(() => resolveAll({ default: this.fxFlexOrder(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
794
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
795
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
796
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
797
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
798
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
799
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
800
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
801
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? '0', ...(ngDevMode ? [{ debugName: "_order" }] : []));
|
|
802
|
+
effect(() => {
|
|
803
|
+
const v = this._order();
|
|
804
|
+
if (isDevMode() && isNaN(Number(v)))
|
|
805
|
+
console.warn(`[fxFlexOrder] Non-numeric value: "${v}"`);
|
|
806
|
+
this.safeSetStyle('order', v);
|
|
807
|
+
});
|
|
808
|
+
}
|
|
809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexOrderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
810
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxFlexOrderDirective, isStandalone: true, selector: "\n [fxFlexOrder],\n [fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],\n [fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],\n [fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],\n [fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],\n [fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]\n ", inputs: { fxFlexOrder: { classPropertyName: "fxFlexOrder", publicName: "fxFlexOrder", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexOrder.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexOrder.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexOrder.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexOrder.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexOrder.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexOrder.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexOrder.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexOrder.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexOrder.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexOrder.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexOrder.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexOrder.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexOrder.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexOrder.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexOrder.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexOrder.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexOrder.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexOrder.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexOrder.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexOrder.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexOrder.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexOrder.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexOrder.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexOrder.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexOrder.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
811
|
+
}
|
|
812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexOrderDirective, decorators: [{
|
|
813
|
+
type: Directive,
|
|
814
|
+
args: [{
|
|
815
|
+
selector: `
|
|
816
|
+
[fxFlexOrder],
|
|
817
|
+
[fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],
|
|
818
|
+
[fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],
|
|
819
|
+
[fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],
|
|
820
|
+
[fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],
|
|
821
|
+
[fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]
|
|
822
|
+
`,
|
|
823
|
+
standalone: true,
|
|
824
|
+
}]
|
|
825
|
+
}], ctorParameters: () => [], propDecorators: { fxFlexOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl-down", required: false }] }] } });
|
|
826
|
+
// ─── fxFlexOffset ────────────────────────────────────────────────────────────
|
|
827
|
+
class FxFlexOffsetDirective extends ResponsiveBaseDirective {
|
|
828
|
+
constructor() {
|
|
829
|
+
super();
|
|
830
|
+
this.fxFlexOffset = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexOffset" } : {}), alias: 'fxFlexOffset' });
|
|
831
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxFlexOffset.xs' });
|
|
832
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxFlexOffset.sm' });
|
|
833
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxFlexOffset.md' });
|
|
834
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxFlexOffset.lg' });
|
|
835
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxFlexOffset.xl' });
|
|
836
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxFlexOffset.xxl' });
|
|
837
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxFlexOffset.lt-sm' });
|
|
838
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxFlexOffset.lt-md' });
|
|
839
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxFlexOffset.lt-lg' });
|
|
840
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxFlexOffset.lt-xl' });
|
|
841
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxFlexOffset.lt-xxl' });
|
|
842
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxFlexOffset.gt-xs' });
|
|
843
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxFlexOffset.gt-sm' });
|
|
844
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxFlexOffset.gt-md' });
|
|
845
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxFlexOffset.gt-lg' });
|
|
846
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxFlexOffset.gt-xl' });
|
|
847
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxFlexOffset.sm-up' });
|
|
848
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxFlexOffset.md-up' });
|
|
849
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxFlexOffset.lg-up' });
|
|
850
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxFlexOffset.xl-up' });
|
|
851
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxFlexOffset.xxl-up' });
|
|
852
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxFlexOffset.sm-down' });
|
|
853
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxFlexOffset.md-down' });
|
|
854
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxFlexOffset.lg-down' });
|
|
855
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxFlexOffset.xl-down' });
|
|
856
|
+
this._offset = computed(() => resolveAll({ default: this.fxFlexOffset(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
857
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
858
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
859
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
860
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
861
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
862
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
863
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
864
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? '0', ...(ngDevMode ? [{ debugName: "_offset" }] : []));
|
|
865
|
+
effect(() => { this.safeSetStyle('margin-inline-start', this._offset()); });
|
|
866
|
+
}
|
|
867
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexOffsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
868
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxFlexOffsetDirective, isStandalone: true, selector: "\n [fxFlexOffset],\n [fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],\n [fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],\n [fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],\n [fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],\n [fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]\n ", inputs: { fxFlexOffset: { classPropertyName: "fxFlexOffset", publicName: "fxFlexOffset", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexOffset.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexOffset.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexOffset.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexOffset.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexOffset.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexOffset.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexOffset.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexOffset.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexOffset.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexOffset.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexOffset.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexOffset.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexOffset.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexOffset.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexOffset.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexOffset.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexOffset.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexOffset.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexOffset.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexOffset.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexOffset.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexOffset.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexOffset.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexOffset.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexOffset.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
869
|
+
}
|
|
870
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexOffsetDirective, decorators: [{
|
|
871
|
+
type: Directive,
|
|
872
|
+
args: [{
|
|
873
|
+
selector: `
|
|
874
|
+
[fxFlexOffset],
|
|
875
|
+
[fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],
|
|
876
|
+
[fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],
|
|
877
|
+
[fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],
|
|
878
|
+
[fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],
|
|
879
|
+
[fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]
|
|
880
|
+
`,
|
|
881
|
+
standalone: true,
|
|
882
|
+
}]
|
|
883
|
+
}], ctorParameters: () => [], propDecorators: { fxFlexOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl-down", required: false }] }] } });
|
|
884
|
+
const ALIGN_SELF_MAP = {
|
|
885
|
+
start: 'flex-start', end: 'flex-end', center: 'center',
|
|
886
|
+
stretch: 'stretch', baseline: 'baseline', auto: 'auto',
|
|
887
|
+
};
|
|
888
|
+
class FxFlexAlignDirective extends ResponsiveBaseDirective {
|
|
889
|
+
constructor() {
|
|
890
|
+
super();
|
|
891
|
+
this.fxFlexAlign = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexAlign" } : {}), alias: 'fxFlexAlign' });
|
|
892
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxFlexAlign.xs' });
|
|
893
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxFlexAlign.sm' });
|
|
894
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxFlexAlign.md' });
|
|
895
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxFlexAlign.lg' });
|
|
896
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxFlexAlign.xl' });
|
|
897
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxFlexAlign.xxl' });
|
|
898
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxFlexAlign.lt-sm' });
|
|
899
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxFlexAlign.lt-md' });
|
|
900
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxFlexAlign.lt-lg' });
|
|
901
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxFlexAlign.lt-xl' });
|
|
902
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxFlexAlign.lt-xxl' });
|
|
903
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxFlexAlign.gt-xs' });
|
|
904
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxFlexAlign.gt-sm' });
|
|
905
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxFlexAlign.gt-md' });
|
|
906
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxFlexAlign.gt-lg' });
|
|
907
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxFlexAlign.gt-xl' });
|
|
908
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxFlexAlign.sm-up' });
|
|
909
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxFlexAlign.md-up' });
|
|
910
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxFlexAlign.lg-up' });
|
|
911
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxFlexAlign.xl-up' });
|
|
912
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxFlexAlign.xxl-up' });
|
|
913
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxFlexAlign.sm-down' });
|
|
914
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxFlexAlign.md-down' });
|
|
915
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxFlexAlign.lg-down' });
|
|
916
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxFlexAlign.xl-down' });
|
|
917
|
+
this._alignSelf = computed(() => {
|
|
918
|
+
const v = resolveAll({ default: this.fxFlexAlign(), xs: this.xs(), sm: this.sm(), md: this.md(),
|
|
919
|
+
lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
920
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
921
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
922
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
923
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
924
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
925
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
926
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'stretch';
|
|
927
|
+
if (isDevMode() && !ALIGN_SELF_MAP[v])
|
|
928
|
+
console.warn(`[fxFlexAlign] Unknown value: "${v}". Valid: ${Object.keys(ALIGN_SELF_MAP).join(', ')}`);
|
|
929
|
+
return ALIGN_SELF_MAP[v] ?? v;
|
|
930
|
+
}, ...(ngDevMode ? [{ debugName: "_alignSelf" }] : []));
|
|
931
|
+
effect(() => { this.safeSetStyle('align-self', this._alignSelf()); });
|
|
932
|
+
}
|
|
933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
934
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxFlexAlignDirective, isStandalone: true, selector: "\n [fxFlexAlign],\n [fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],\n [fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],\n [fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],\n [fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],\n [fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]\n ", inputs: { fxFlexAlign: { classPropertyName: "fxFlexAlign", publicName: "fxFlexAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
935
|
+
}
|
|
936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexAlignDirective, decorators: [{
|
|
937
|
+
type: Directive,
|
|
938
|
+
args: [{
|
|
939
|
+
selector: `
|
|
940
|
+
[fxFlexAlign],
|
|
941
|
+
[fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],
|
|
942
|
+
[fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],
|
|
943
|
+
[fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],
|
|
944
|
+
[fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],
|
|
945
|
+
[fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]
|
|
946
|
+
`,
|
|
947
|
+
standalone: true,
|
|
948
|
+
}]
|
|
949
|
+
}], ctorParameters: () => [], propDecorators: { fxFlexAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl-down", required: false }] }] } });
|
|
950
|
+
function toBool$1(v) {
|
|
951
|
+
if (v === undefined)
|
|
952
|
+
return undefined;
|
|
953
|
+
if (typeof v === 'boolean')
|
|
954
|
+
return v;
|
|
955
|
+
if (v === '')
|
|
956
|
+
return true;
|
|
957
|
+
return v !== 'none';
|
|
958
|
+
}
|
|
959
|
+
class FxFlexFillDirective extends ResponsiveBaseDirective {
|
|
960
|
+
constructor() {
|
|
961
|
+
super();
|
|
962
|
+
this.fxFlexFill = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexFill" } : {}), alias: 'fxFlexFill', transform: toBool$1 });
|
|
963
|
+
this.fxFill = input(undefined, { ...(ngDevMode ? { debugName: "fxFill" } : {}), alias: 'fxFill', transform: toBool$1 });
|
|
964
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxFlexFill.xs', transform: toBool$1 });
|
|
965
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxFlexFill.sm', transform: toBool$1 });
|
|
966
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxFlexFill.md', transform: toBool$1 });
|
|
967
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxFlexFill.lg', transform: toBool$1 });
|
|
968
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxFlexFill.xl', transform: toBool$1 });
|
|
969
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxFlexFill.xxl', transform: toBool$1 });
|
|
970
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxFlexFill.lt-sm', transform: toBool$1 });
|
|
971
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxFlexFill.lt-md', transform: toBool$1 });
|
|
972
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxFlexFill.lt-lg', transform: toBool$1 });
|
|
973
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxFlexFill.lt-xl', transform: toBool$1 });
|
|
974
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxFlexFill.lt-xxl', transform: toBool$1 });
|
|
975
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxFlexFill.gt-xs', transform: toBool$1 });
|
|
976
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxFlexFill.gt-sm', transform: toBool$1 });
|
|
977
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxFlexFill.gt-md', transform: toBool$1 });
|
|
978
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxFlexFill.gt-lg', transform: toBool$1 });
|
|
979
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxFlexFill.gt-xl', transform: toBool$1 });
|
|
980
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxFlexFill.sm-up', transform: toBool$1 });
|
|
981
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxFlexFill.md-up', transform: toBool$1 });
|
|
982
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxFlexFill.lg-up', transform: toBool$1 });
|
|
983
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxFlexFill.xl-up', transform: toBool$1 });
|
|
984
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxFlexFill.xxl-up', transform: toBool$1 });
|
|
985
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxFlexFill.sm-down', transform: toBool$1 });
|
|
986
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxFlexFill.md-down', transform: toBool$1 });
|
|
987
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxFlexFill.lg-down', transform: toBool$1 });
|
|
988
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxFlexFill.xl-down', transform: toBool$1 });
|
|
989
|
+
this._active = computed(() => resolveAll(
|
|
990
|
+
// fxFill is a shorthand alias for the default; fxFlexFill wins if both set
|
|
991
|
+
{ default: this.fxFlexFill() ?? this.fxFill(),
|
|
992
|
+
xs: this.xs(), sm: this.sm(),
|
|
993
|
+
md: this.md(), lg: this.lg(),
|
|
994
|
+
xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(),
|
|
995
|
+
'lt-lg': this.ltLg(), 'lt-xl': this.ltXl(),
|
|
996
|
+
'lt-xxl': this.ltXxl(),
|
|
997
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(),
|
|
998
|
+
'gt-md': this.gtMd(), 'gt-lg': this.gtLg(),
|
|
999
|
+
'gt-xl': this.gtXl(),
|
|
1000
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(),
|
|
1001
|
+
'lg-up': this.lgUp(), 'xl-up': this.xlUp(),
|
|
1002
|
+
'xxl-up': this.xxlUp(),
|
|
1003
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1004
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? true, ...(ngDevMode ? [{ debugName: "_active" }] : []));
|
|
1005
|
+
effect(() => {
|
|
1006
|
+
const active = this._active();
|
|
1007
|
+
const v = active ? '100%' : null;
|
|
1008
|
+
this.safeSetStyle('margin', active ? '0' : null);
|
|
1009
|
+
this.safeSetStyle('width', v);
|
|
1010
|
+
this.safeSetStyle('height', v);
|
|
1011
|
+
this.safeSetStyle('min-width', v);
|
|
1012
|
+
this.safeSetStyle('min-height', v);
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexFillDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1016
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxFlexFillDirective, isStandalone: true, selector: "\n [fxFlexFill],[fxFill],\n [fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],\n [fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],\n [fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],\n [fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],\n [fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]\n ", inputs: { fxFlexFill: { classPropertyName: "fxFlexFill", publicName: "fxFlexFill", isSignal: true, isRequired: false, transformFunction: null }, fxFill: { classPropertyName: "fxFill", publicName: "fxFill", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexFill.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexFill.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexFill.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexFill.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexFill.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexFill.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexFill.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexFill.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexFill.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexFill.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexFill.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexFill.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexFill.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexFill.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexFill.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexFill.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexFill.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexFill.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexFill.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexFill.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexFill.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexFill.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexFill.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexFill.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexFill.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1017
|
+
}
|
|
1018
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxFlexFillDirective, decorators: [{
|
|
1019
|
+
type: Directive,
|
|
1020
|
+
args: [{
|
|
1021
|
+
selector: `
|
|
1022
|
+
[fxFlexFill],[fxFill],
|
|
1023
|
+
[fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],
|
|
1024
|
+
[fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],
|
|
1025
|
+
[fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],
|
|
1026
|
+
[fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],
|
|
1027
|
+
[fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]
|
|
1028
|
+
`,
|
|
1029
|
+
standalone: true,
|
|
1030
|
+
}]
|
|
1031
|
+
}], ctorParameters: () => [], propDecorators: { fxFlexFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill", required: false }] }], fxFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFill", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-down", required: false }] }] } });
|
|
1032
|
+
|
|
1033
|
+
/**
|
|
1034
|
+
* @file fx-show-hide.directives.ts (Angular 21 — signals)
|
|
1035
|
+
*
|
|
1036
|
+
* [fxShow] / [fxHide] — responsive visibility via display:none.
|
|
1037
|
+
* Elements stay in the DOM (unlike *ifBp which removes them).
|
|
1038
|
+
*
|
|
1039
|
+
* Angular 21 changes:
|
|
1040
|
+
* • All @Input setters replaced by input() signals with transform
|
|
1041
|
+
* • computed() derives the resolved boolean visibility value
|
|
1042
|
+
* • effect() in constructor writes to DOM
|
|
1043
|
+
*
|
|
1044
|
+
* Uses removeStyle() when restoring visibility to avoid overriding
|
|
1045
|
+
* an external display value (e.g. display:grid set by CSS).
|
|
1046
|
+
*
|
|
1047
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
1048
|
+
*/
|
|
1049
|
+
function toBool(v) {
|
|
1050
|
+
if (v === undefined || v === null)
|
|
1051
|
+
return undefined;
|
|
1052
|
+
if (typeof v === 'boolean')
|
|
1053
|
+
return v;
|
|
1054
|
+
if (v === '')
|
|
1055
|
+
return true;
|
|
1056
|
+
if (v === 'false' || v === '0')
|
|
1057
|
+
return false;
|
|
1058
|
+
return true;
|
|
1059
|
+
}
|
|
1060
|
+
// ─── fxShow ──────────────────────────────────────────────────────────────────
|
|
1061
|
+
class FxShowDirective extends ResponsiveBaseDirective {
|
|
1062
|
+
constructor() {
|
|
1063
|
+
super();
|
|
1064
|
+
this.fxShow = input(undefined, { ...(ngDevMode ? { debugName: "fxShow" } : {}), alias: 'fxShow', transform: toBool });
|
|
1065
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxShow.xs', transform: toBool });
|
|
1066
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxShow.sm', transform: toBool });
|
|
1067
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxShow.md', transform: toBool });
|
|
1068
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxShow.lg', transform: toBool });
|
|
1069
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxShow.xl', transform: toBool });
|
|
1070
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxShow.xxl', transform: toBool });
|
|
1071
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxShow.lt-sm', transform: toBool });
|
|
1072
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxShow.lt-md', transform: toBool });
|
|
1073
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxShow.lt-lg', transform: toBool });
|
|
1074
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxShow.lt-xl', transform: toBool });
|
|
1075
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxShow.lt-xxl', transform: toBool });
|
|
1076
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxShow.gt-xs', transform: toBool });
|
|
1077
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxShow.gt-sm', transform: toBool });
|
|
1078
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxShow.gt-md', transform: toBool });
|
|
1079
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxShow.gt-lg', transform: toBool });
|
|
1080
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxShow.gt-xl', transform: toBool });
|
|
1081
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxShow.sm-up', transform: toBool });
|
|
1082
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxShow.md-up', transform: toBool });
|
|
1083
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxShow.lg-up', transform: toBool });
|
|
1084
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxShow.xl-up', transform: toBool });
|
|
1085
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxShow.xxl-up', transform: toBool });
|
|
1086
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxShow.sm-down', transform: toBool });
|
|
1087
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxShow.md-down', transform: toBool });
|
|
1088
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxShow.lg-down', transform: toBool });
|
|
1089
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxShow.xl-down', transform: toBool });
|
|
1090
|
+
this._show = computed(() => (resolveAll({ default: this.fxShow(),
|
|
1091
|
+
xs: this.xs(), sm: this.sm(),
|
|
1092
|
+
md: this.md(), lg: this.lg(),
|
|
1093
|
+
xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(),
|
|
1094
|
+
'lt-lg': this.ltLg(), 'lt-xl': this.ltXl(),
|
|
1095
|
+
'lt-xxl': this.ltXxl(),
|
|
1096
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(),
|
|
1097
|
+
'gt-md': this.gtMd(), 'gt-lg': this.gtLg(),
|
|
1098
|
+
'gt-xl': this.gtXl(),
|
|
1099
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(),
|
|
1100
|
+
'lg-up': this.lgUp(), 'xl-up': this.xlUp(),
|
|
1101
|
+
'xxl-up': this.xxlUp(),
|
|
1102
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1103
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? true), ...(ngDevMode ? [{ debugName: "_show" }] : []));
|
|
1104
|
+
effect(() => {
|
|
1105
|
+
this._show()
|
|
1106
|
+
? this.r2.removeStyle(this.el.nativeElement, 'display')
|
|
1107
|
+
: this.r2.setStyle(this.el.nativeElement, 'display', 'none');
|
|
1108
|
+
});
|
|
1109
|
+
}
|
|
1110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1111
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxShowDirective, isStandalone: true, selector: "\n [fxShow],\n [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],\n [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],\n [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],\n [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],\n [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down]\n ", inputs: { fxShow: { classPropertyName: "fxShow", publicName: "fxShow", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxShow.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxShow.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxShow.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxShow.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxShow.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxShow.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxShow.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxShow.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxShow.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxShow.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxShow.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxShow.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxShow.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxShow.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxShow.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxShow.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxShow.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxShow.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxShow.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxShow.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxShow.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxShow.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxShow.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxShow.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxShow.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1112
|
+
}
|
|
1113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxShowDirective, decorators: [{
|
|
1114
|
+
type: Directive,
|
|
1115
|
+
args: [{
|
|
1116
|
+
selector: `
|
|
1117
|
+
[fxShow],
|
|
1118
|
+
[fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],
|
|
1119
|
+
[fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],
|
|
1120
|
+
[fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],
|
|
1121
|
+
[fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],
|
|
1122
|
+
[fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down]
|
|
1123
|
+
`,
|
|
1124
|
+
standalone: true,
|
|
1125
|
+
}]
|
|
1126
|
+
}], ctorParameters: () => [], propDecorators: { fxShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-down", required: false }] }] } });
|
|
1127
|
+
// ─── fxHide ──────────────────────────────────────────────────────────────────
|
|
1128
|
+
class FxHideDirective extends ResponsiveBaseDirective {
|
|
1129
|
+
constructor() {
|
|
1130
|
+
super();
|
|
1131
|
+
this.fxHide = input(undefined, { ...(ngDevMode ? { debugName: "fxHide" } : {}), alias: 'fxHide', transform: toBool });
|
|
1132
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxHide.xs', transform: toBool });
|
|
1133
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxHide.sm', transform: toBool });
|
|
1134
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxHide.md', transform: toBool });
|
|
1135
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxHide.lg', transform: toBool });
|
|
1136
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxHide.xl', transform: toBool });
|
|
1137
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxHide.xxl', transform: toBool });
|
|
1138
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxHide.lt-sm', transform: toBool });
|
|
1139
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxHide.lt-md', transform: toBool });
|
|
1140
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxHide.lt-lg', transform: toBool });
|
|
1141
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxHide.lt-xl', transform: toBool });
|
|
1142
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxHide.lt-xxl', transform: toBool });
|
|
1143
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxHide.gt-xs', transform: toBool });
|
|
1144
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxHide.gt-sm', transform: toBool });
|
|
1145
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxHide.gt-md', transform: toBool });
|
|
1146
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxHide.gt-lg', transform: toBool });
|
|
1147
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxHide.gt-xl', transform: toBool });
|
|
1148
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxHide.sm-up', transform: toBool });
|
|
1149
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxHide.md-up', transform: toBool });
|
|
1150
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxHide.lg-up', transform: toBool });
|
|
1151
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxHide.xl-up', transform: toBool });
|
|
1152
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxHide.xxl-up', transform: toBool });
|
|
1153
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxHide.sm-down', transform: toBool });
|
|
1154
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxHide.md-down', transform: toBool });
|
|
1155
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxHide.lg-down', transform: toBool });
|
|
1156
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxHide.xl-down', transform: toBool });
|
|
1157
|
+
this._hide = computed(() => (resolveAll({ default: this.fxHide(),
|
|
1158
|
+
xs: this.xs(), sm: this.sm(),
|
|
1159
|
+
md: this.md(), lg: this.lg(),
|
|
1160
|
+
xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(),
|
|
1161
|
+
'lt-lg': this.ltLg(), 'lt-xl': this.ltXl(),
|
|
1162
|
+
'lt-xxl': this.ltXxl(),
|
|
1163
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(),
|
|
1164
|
+
'gt-md': this.gtMd(), 'gt-lg': this.gtLg(),
|
|
1165
|
+
'gt-xl': this.gtXl(),
|
|
1166
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(),
|
|
1167
|
+
'lg-up': this.lgUp(), 'xl-up': this.xlUp(),
|
|
1168
|
+
'xxl-up': this.xxlUp(),
|
|
1169
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1170
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? true), ...(ngDevMode ? [{ debugName: "_hide" }] : []));
|
|
1171
|
+
effect(() => {
|
|
1172
|
+
this._hide()
|
|
1173
|
+
? this.r2.setStyle(this.el.nativeElement, 'display', 'none')
|
|
1174
|
+
: this.r2.removeStyle(this.el.nativeElement, 'display');
|
|
1175
|
+
});
|
|
1176
|
+
}
|
|
1177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxHideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1178
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxHideDirective, isStandalone: true, selector: "\n [fxHide],\n [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],\n [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],\n [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],\n [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],\n [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]\n ", inputs: { fxHide: { classPropertyName: "fxHide", publicName: "fxHide", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxHide.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxHide.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxHide.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxHide.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxHide.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxHide.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxHide.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxHide.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxHide.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxHide.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxHide.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxHide.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxHide.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxHide.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxHide.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxHide.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxHide.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxHide.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxHide.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxHide.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxHide.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxHide.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxHide.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxHide.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxHide.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1179
|
+
}
|
|
1180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxHideDirective, decorators: [{
|
|
1181
|
+
type: Directive,
|
|
1182
|
+
args: [{
|
|
1183
|
+
selector: `
|
|
1184
|
+
[fxHide],
|
|
1185
|
+
[fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],
|
|
1186
|
+
[fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],
|
|
1187
|
+
[fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],
|
|
1188
|
+
[fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],
|
|
1189
|
+
[fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]
|
|
1190
|
+
`,
|
|
1191
|
+
standalone: true,
|
|
1192
|
+
}]
|
|
1193
|
+
}], ctorParameters: () => [], propDecorators: { fxHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-down", required: false }] }] } });
|
|
1194
|
+
|
|
1195
|
+
/**
|
|
1196
|
+
* @file fx-style-class.directives.ts (Angular 21 — signals)
|
|
1197
|
+
*
|
|
1198
|
+
* [fxStyle] — responsive inline style binding (Record<string,string>)
|
|
1199
|
+
* [fxClass] — responsive CSS class binding (string | string[] | Record<string,boolean>)
|
|
1200
|
+
*
|
|
1201
|
+
* Angular 21 changes:
|
|
1202
|
+
* • All @Input setters replaced by input() signals
|
|
1203
|
+
* • computed() derives resolved StyleMap / ClassInput value
|
|
1204
|
+
* • effect() in constructor handles DOM writes with diff
|
|
1205
|
+
*
|
|
1206
|
+
* Style/class leak prevention:
|
|
1207
|
+
* _appliedProps / _appliedClasses are regular Set<string> fields
|
|
1208
|
+
* (NOT signals) — they track what was actively applied so the
|
|
1209
|
+
* effect can remove stale properties/classes on the next run.
|
|
1210
|
+
*
|
|
1211
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
1212
|
+
*/
|
|
1213
|
+
class FxStyleDirective extends ResponsiveBaseDirective {
|
|
1214
|
+
constructor() {
|
|
1215
|
+
super();
|
|
1216
|
+
this.fxStyle = input(undefined, { ...(ngDevMode ? { debugName: "fxStyle" } : {}), alias: 'fxStyle' });
|
|
1217
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxStyle.xs' });
|
|
1218
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxStyle.sm' });
|
|
1219
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxStyle.md' });
|
|
1220
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxStyle.lg' });
|
|
1221
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxStyle.xl' });
|
|
1222
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxStyle.xxl' });
|
|
1223
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxStyle.lt-sm' });
|
|
1224
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxStyle.lt-md' });
|
|
1225
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxStyle.lt-lg' });
|
|
1226
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxStyle.lt-xl' });
|
|
1227
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxStyle.lt-xxl' });
|
|
1228
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxStyle.gt-xs' });
|
|
1229
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxStyle.gt-sm' });
|
|
1230
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxStyle.gt-md' });
|
|
1231
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxStyle.gt-lg' });
|
|
1232
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxStyle.gt-xl' });
|
|
1233
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxStyle.sm-up' });
|
|
1234
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxStyle.md-up' });
|
|
1235
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxStyle.lg-up' });
|
|
1236
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxStyle.xl-up' });
|
|
1237
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxStyle.xxl-up' });
|
|
1238
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxStyle.sm-down' });
|
|
1239
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxStyle.md-down' });
|
|
1240
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxStyle.lg-down' });
|
|
1241
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxStyle.xl-down' });
|
|
1242
|
+
this._resolved = computed(() => (resolveAll({ default: this.fxStyle(), xs: this.xs(), sm: this.sm(),
|
|
1243
|
+
md: this.md(), lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
1244
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
1245
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
1246
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
1247
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
1248
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
1249
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1250
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? {}), ...(ngDevMode ? [{ debugName: "_resolved" }] : []));
|
|
1251
|
+
/** Tracks which CSS properties were last applied — plain field, not a signal. */
|
|
1252
|
+
this._appliedProps = new Set();
|
|
1253
|
+
effect(() => {
|
|
1254
|
+
if (!this.isBrowser)
|
|
1255
|
+
return;
|
|
1256
|
+
const next = this._resolved();
|
|
1257
|
+
const nextKeys = new Set(Object.keys(next));
|
|
1258
|
+
for (const prop of this._appliedProps) {
|
|
1259
|
+
if (!nextKeys.has(prop))
|
|
1260
|
+
this.r2.removeStyle(this.el.nativeElement, prop);
|
|
1261
|
+
}
|
|
1262
|
+
for (const [prop, value] of Object.entries(next)) {
|
|
1263
|
+
this.r2.setStyle(this.el.nativeElement, prop, value);
|
|
1264
|
+
}
|
|
1265
|
+
this._appliedProps = nextKeys;
|
|
1266
|
+
});
|
|
1267
|
+
}
|
|
1268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1269
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxStyleDirective, isStandalone: true, selector: "\n [fxStyle],\n [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],\n [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],\n [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],\n [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],\n [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]\n ", inputs: { fxStyle: { classPropertyName: "fxStyle", publicName: "fxStyle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxStyle.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxStyle.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxStyle.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxStyle.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxStyle.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxStyle.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxStyle.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxStyle.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxStyle.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxStyle.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxStyle.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxStyle.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxStyle.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxStyle.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxStyle.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxStyle.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxStyle.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxStyle.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxStyle.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxStyle.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxStyle.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxStyle.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxStyle.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxStyle.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxStyle.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1270
|
+
}
|
|
1271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxStyleDirective, decorators: [{
|
|
1272
|
+
type: Directive,
|
|
1273
|
+
args: [{
|
|
1274
|
+
selector: `
|
|
1275
|
+
[fxStyle],
|
|
1276
|
+
[fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],
|
|
1277
|
+
[fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],
|
|
1278
|
+
[fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],
|
|
1279
|
+
[fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],
|
|
1280
|
+
[fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]
|
|
1281
|
+
`,
|
|
1282
|
+
standalone: true,
|
|
1283
|
+
}]
|
|
1284
|
+
}], ctorParameters: () => [], propDecorators: { fxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-down", required: false }] }] } });
|
|
1285
|
+
function toClassSet(v) {
|
|
1286
|
+
if (!v)
|
|
1287
|
+
return new Set();
|
|
1288
|
+
if (typeof v === 'string')
|
|
1289
|
+
return new Set(v.split(/\s+/).filter(Boolean));
|
|
1290
|
+
if (Array.isArray(v))
|
|
1291
|
+
return new Set(v.filter(Boolean));
|
|
1292
|
+
return new Set(Object.entries(v).filter(([, on]) => on).map(([cls]) => cls));
|
|
1293
|
+
}
|
|
1294
|
+
class FxClassDirective extends ResponsiveBaseDirective {
|
|
1295
|
+
constructor() {
|
|
1296
|
+
super();
|
|
1297
|
+
this.fxClass = input(undefined, { ...(ngDevMode ? { debugName: "fxClass" } : {}), alias: 'fxClass' });
|
|
1298
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxClass.xs' });
|
|
1299
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxClass.sm' });
|
|
1300
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxClass.md' });
|
|
1301
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxClass.lg' });
|
|
1302
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxClass.xl' });
|
|
1303
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxClass.xxl' });
|
|
1304
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxClass.lt-sm' });
|
|
1305
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxClass.lt-md' });
|
|
1306
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxClass.lt-lg' });
|
|
1307
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxClass.lt-xl' });
|
|
1308
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxClass.lt-xxl' });
|
|
1309
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxClass.gt-xs' });
|
|
1310
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxClass.gt-sm' });
|
|
1311
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxClass.gt-md' });
|
|
1312
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxClass.gt-lg' });
|
|
1313
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxClass.gt-xl' });
|
|
1314
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxClass.sm-up' });
|
|
1315
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxClass.md-up' });
|
|
1316
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxClass.lg-up' });
|
|
1317
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxClass.xl-up' });
|
|
1318
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxClass.xxl-up' });
|
|
1319
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxClass.sm-down' });
|
|
1320
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxClass.md-down' });
|
|
1321
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxClass.lg-down' });
|
|
1322
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxClass.xl-down' });
|
|
1323
|
+
this._resolved = computed(() => toClassSet(resolveAll({ default: this.fxClass(), xs: this.xs(), sm: this.sm(),
|
|
1324
|
+
md: this.md(), lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
1325
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
1326
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
1327
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
1328
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
1329
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
1330
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1331
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_resolved" }] : []));
|
|
1332
|
+
/** Tracks which CSS classes were last applied — plain field, not a signal. */
|
|
1333
|
+
this._appliedClasses = new Set();
|
|
1334
|
+
effect(() => {
|
|
1335
|
+
if (!this.isBrowser)
|
|
1336
|
+
return;
|
|
1337
|
+
const next = this._resolved();
|
|
1338
|
+
for (const cls of this._appliedClasses) {
|
|
1339
|
+
if (!next.has(cls))
|
|
1340
|
+
this.r2.removeClass(this.el.nativeElement, cls);
|
|
1341
|
+
}
|
|
1342
|
+
for (const cls of next) {
|
|
1343
|
+
this.r2.addClass(this.el.nativeElement, cls);
|
|
1344
|
+
}
|
|
1345
|
+
this._appliedClasses = next;
|
|
1346
|
+
});
|
|
1347
|
+
}
|
|
1348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1349
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxClassDirective, isStandalone: true, selector: "\n [fxClass],\n [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],\n [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],\n [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],\n [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],\n [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]\n ", inputs: { fxClass: { classPropertyName: "fxClass", publicName: "fxClass", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxClass.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxClass.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxClass.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxClass.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxClass.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxClass.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxClass.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxClass.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxClass.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxClass.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxClass.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxClass.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxClass.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxClass.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxClass.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxClass.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxClass.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxClass.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxClass.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxClass.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxClass.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxClass.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxClass.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxClass.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxClass.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1350
|
+
}
|
|
1351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxClassDirective, decorators: [{
|
|
1352
|
+
type: Directive,
|
|
1353
|
+
args: [{
|
|
1354
|
+
selector: `
|
|
1355
|
+
[fxClass],
|
|
1356
|
+
[fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],
|
|
1357
|
+
[fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],
|
|
1358
|
+
[fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],
|
|
1359
|
+
[fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],
|
|
1360
|
+
[fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]
|
|
1361
|
+
`,
|
|
1362
|
+
standalone: true,
|
|
1363
|
+
}]
|
|
1364
|
+
}], ctorParameters: () => [], propDecorators: { fxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-down", required: false }] }] } });
|
|
1365
|
+
|
|
1366
|
+
/**
|
|
1367
|
+
* @file fx-grid.directives.ts (Angular 21 — signals)
|
|
1368
|
+
*
|
|
1369
|
+
* CSS Grid responsive directives.
|
|
1370
|
+
*
|
|
1371
|
+
* [fxGrid] — display:grid + responsive grid-template-columns.
|
|
1372
|
+
* Accepts [fxGridRows] and [fxGridGap] inputs on same host.
|
|
1373
|
+
* [fxGridColumn] — grid-column on a child
|
|
1374
|
+
* [fxGridArea] — grid-area on a child
|
|
1375
|
+
*
|
|
1376
|
+
* Angular 21 changes:
|
|
1377
|
+
* • All @Input setters replaced by input() signals
|
|
1378
|
+
* • FxGridDirective uses 3 pairs of computed() for cols/rows/gap maps
|
|
1379
|
+
* • Single effect() in constructor writes all 3 CSS props
|
|
1380
|
+
* • Null/undefined props are removed (no style leak)
|
|
1381
|
+
*
|
|
1382
|
+
* Unitless numeric gap values are normalized to px ("16" → "16px").
|
|
1383
|
+
*
|
|
1384
|
+
* Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
|
|
1385
|
+
*/
|
|
1386
|
+
function normalizeGap(raw) {
|
|
1387
|
+
if (!raw)
|
|
1388
|
+
return undefined;
|
|
1389
|
+
return raw.trim().split(/\s+/)
|
|
1390
|
+
.map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
|
|
1391
|
+
.join(' ');
|
|
1392
|
+
}
|
|
1393
|
+
// ─── fxGrid (container) ──────────────────────────────────────────────────────
|
|
1394
|
+
class FxGridDirective extends ResponsiveBaseDirective {
|
|
1395
|
+
constructor() {
|
|
1396
|
+
super();
|
|
1397
|
+
// ── grid-template-columns ──────────────────────────────────────────────────
|
|
1398
|
+
this.fxGrid = input(undefined, { ...(ngDevMode ? { debugName: "fxGrid" } : {}), alias: 'fxGrid' });
|
|
1399
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxGrid.xs' });
|
|
1400
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxGrid.sm' });
|
|
1401
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxGrid.md' });
|
|
1402
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxGrid.lg' });
|
|
1403
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxGrid.xl' });
|
|
1404
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxGrid.xxl' });
|
|
1405
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxGrid.lt-sm' });
|
|
1406
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxGrid.lt-md' });
|
|
1407
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxGrid.lt-lg' });
|
|
1408
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxGrid.lt-xl' });
|
|
1409
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxGrid.lt-xxl' });
|
|
1410
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxGrid.gt-xs' });
|
|
1411
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxGrid.gt-sm' });
|
|
1412
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxGrid.gt-md' });
|
|
1413
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxGrid.gt-lg' });
|
|
1414
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxGrid.gt-xl' });
|
|
1415
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxGrid.sm-up' });
|
|
1416
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxGrid.md-up' });
|
|
1417
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxGrid.lg-up' });
|
|
1418
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxGrid.xl-up' });
|
|
1419
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxGrid.xxl-up' });
|
|
1420
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxGrid.sm-down' });
|
|
1421
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxGrid.md-down' });
|
|
1422
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxGrid.lg-down' });
|
|
1423
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxGrid.xl-down' });
|
|
1424
|
+
// ── grid-template-rows ────────────────────────────────────────────────────
|
|
1425
|
+
this.fxGridRows = input(undefined, { ...(ngDevMode ? { debugName: "fxGridRows" } : {}), alias: 'fxGridRows' });
|
|
1426
|
+
this.rowsXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsXs" } : {}), alias: 'fxGridRows.xs' });
|
|
1427
|
+
this.rowsSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsSm" } : {}), alias: 'fxGridRows.sm' });
|
|
1428
|
+
this.rowsMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsMd" } : {}), alias: 'fxGridRows.md' });
|
|
1429
|
+
this.rowsLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLg" } : {}), alias: 'fxGridRows.lg' });
|
|
1430
|
+
this.rowsXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXl" } : {}), alias: 'fxGridRows.xl' });
|
|
1431
|
+
this.rowsXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxl" } : {}), alias: 'fxGridRows.xxl' });
|
|
1432
|
+
this.rowsLtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtSm" } : {}), alias: 'fxGridRows.lt-sm' });
|
|
1433
|
+
this.rowsLtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtMd" } : {}), alias: 'fxGridRows.lt-md' });
|
|
1434
|
+
this.rowsLtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtLg" } : {}), alias: 'fxGridRows.lt-lg' });
|
|
1435
|
+
this.rowsLtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXl" } : {}), alias: 'fxGridRows.lt-xl' });
|
|
1436
|
+
this.rowsLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXxl" } : {}), alias: 'fxGridRows.lt-xxl' });
|
|
1437
|
+
this.rowsGtXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXs" } : {}), alias: 'fxGridRows.gt-xs' });
|
|
1438
|
+
this.rowsGtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtSm" } : {}), alias: 'fxGridRows.gt-sm' });
|
|
1439
|
+
this.rowsGtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtMd" } : {}), alias: 'fxGridRows.gt-md' });
|
|
1440
|
+
this.rowsGtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtLg" } : {}), alias: 'fxGridRows.gt-lg' });
|
|
1441
|
+
this.rowsGtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXl" } : {}), alias: 'fxGridRows.gt-xl' });
|
|
1442
|
+
this.rowsSmUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmUp" } : {}), alias: 'fxGridRows.sm-up' });
|
|
1443
|
+
this.rowsMdUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdUp" } : {}), alias: 'fxGridRows.md-up' });
|
|
1444
|
+
this.rowsLgUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgUp" } : {}), alias: 'fxGridRows.lg-up' });
|
|
1445
|
+
this.rowsXlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlUp" } : {}), alias: 'fxGridRows.xl-up' });
|
|
1446
|
+
this.rowsXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxlUp" } : {}), alias: 'fxGridRows.xxl-up' });
|
|
1447
|
+
this.rowsSmDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmDown" } : {}), alias: 'fxGridRows.sm-down' });
|
|
1448
|
+
this.rowsMdDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdDown" } : {}), alias: 'fxGridRows.md-down' });
|
|
1449
|
+
this.rowsLgDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgDown" } : {}), alias: 'fxGridRows.lg-down' });
|
|
1450
|
+
this.rowsXlDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlDown" } : {}), alias: 'fxGridRows.xl-down' });
|
|
1451
|
+
// ── gap ───────────────────────────────────────────────────────────────────
|
|
1452
|
+
this.fxGridGap = input(undefined, { ...(ngDevMode ? { debugName: "fxGridGap" } : {}), alias: 'fxGridGap' });
|
|
1453
|
+
this.gapXs = input(undefined, { ...(ngDevMode ? { debugName: "gapXs" } : {}), alias: 'fxGridGap.xs' });
|
|
1454
|
+
this.gapSm = input(undefined, { ...(ngDevMode ? { debugName: "gapSm" } : {}), alias: 'fxGridGap.sm' });
|
|
1455
|
+
this.gapMd = input(undefined, { ...(ngDevMode ? { debugName: "gapMd" } : {}), alias: 'fxGridGap.md' });
|
|
1456
|
+
this.gapLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLg" } : {}), alias: 'fxGridGap.lg' });
|
|
1457
|
+
this.gapXl = input(undefined, { ...(ngDevMode ? { debugName: "gapXl" } : {}), alias: 'fxGridGap.xl' });
|
|
1458
|
+
this.gapXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapXxl" } : {}), alias: 'fxGridGap.xxl' });
|
|
1459
|
+
this.gapLtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapLtSm" } : {}), alias: 'fxGridGap.lt-sm' });
|
|
1460
|
+
this.gapLtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapLtMd" } : {}), alias: 'fxGridGap.lt-md' });
|
|
1461
|
+
this.gapLtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLtLg" } : {}), alias: 'fxGridGap.lt-lg' });
|
|
1462
|
+
this.gapLtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXl" } : {}), alias: 'fxGridGap.lt-xl' });
|
|
1463
|
+
this.gapLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXxl" } : {}), alias: 'fxGridGap.lt-xxl' });
|
|
1464
|
+
this.gapGtXs = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXs" } : {}), alias: 'fxGridGap.gt-xs' });
|
|
1465
|
+
this.gapGtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapGtSm" } : {}), alias: 'fxGridGap.gt-sm' });
|
|
1466
|
+
this.gapGtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapGtMd" } : {}), alias: 'fxGridGap.gt-md' });
|
|
1467
|
+
this.gapGtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapGtLg" } : {}), alias: 'fxGridGap.gt-lg' });
|
|
1468
|
+
this.gapGtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXl" } : {}), alias: 'fxGridGap.gt-xl' });
|
|
1469
|
+
this.gapSmUp = input(undefined, { ...(ngDevMode ? { debugName: "gapSmUp" } : {}), alias: 'fxGridGap.sm-up' });
|
|
1470
|
+
this.gapMdUp = input(undefined, { ...(ngDevMode ? { debugName: "gapMdUp" } : {}), alias: 'fxGridGap.md-up' });
|
|
1471
|
+
this.gapLgUp = input(undefined, { ...(ngDevMode ? { debugName: "gapLgUp" } : {}), alias: 'fxGridGap.lg-up' });
|
|
1472
|
+
this.gapXlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXlUp" } : {}), alias: 'fxGridGap.xl-up' });
|
|
1473
|
+
this.gapXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXxlUp" } : {}), alias: 'fxGridGap.xxl-up' });
|
|
1474
|
+
this.gapSmDown = input(undefined, { ...(ngDevMode ? { debugName: "gapSmDown" } : {}), alias: 'fxGridGap.sm-down' });
|
|
1475
|
+
this.gapMdDown = input(undefined, { ...(ngDevMode ? { debugName: "gapMdDown" } : {}), alias: 'fxGridGap.md-down' });
|
|
1476
|
+
this.gapLgDown = input(undefined, { ...(ngDevMode ? { debugName: "gapLgDown" } : {}), alias: 'fxGridGap.lg-down' });
|
|
1477
|
+
this.gapXlDown = input(undefined, { ...(ngDevMode ? { debugName: "gapXlDown" } : {}), alias: 'fxGridGap.xl-down' });
|
|
1478
|
+
// ── resolved values (flat computed — no intermediate object computed) ──────
|
|
1479
|
+
this._cols = computed(() => resolveAll({ default: this.fxGrid(), xs: this.xs(), sm: this.sm(),
|
|
1480
|
+
md: this.md(), lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
1481
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
1482
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
1483
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
1484
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
1485
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
1486
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1487
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_cols" }] : []));
|
|
1488
|
+
this._rows = computed(() => resolveAll({ default: this.fxGridRows(), xs: this.rowsXs(), sm: this.rowsSm(),
|
|
1489
|
+
md: this.rowsMd(), lg: this.rowsLg(), xl: this.rowsXl(), xxl: this.rowsXxl() }, { 'lt-sm': this.rowsLtSm(), 'lt-md': this.rowsLtMd(), 'lt-lg': this.rowsLtLg(),
|
|
1490
|
+
'lt-xl': this.rowsLtXl(), 'lt-xxl': this.rowsLtXxl(),
|
|
1491
|
+
'gt-xs': this.rowsGtXs(), 'gt-sm': this.rowsGtSm(), 'gt-md': this.rowsGtMd(),
|
|
1492
|
+
'gt-lg': this.rowsGtLg(), 'gt-xl': this.rowsGtXl(),
|
|
1493
|
+
'sm-up': this.rowsSmUp(), 'md-up': this.rowsMdUp(), 'lg-up': this.rowsLgUp(),
|
|
1494
|
+
'xl-up': this.rowsXlUp(), 'xxl-up': this.rowsXxlUp(),
|
|
1495
|
+
'sm-down': this.rowsSmDown(), 'md-down': this.rowsMdDown(),
|
|
1496
|
+
'lg-down': this.rowsLgDown(), 'xl-down': this.rowsXlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_rows" }] : []));
|
|
1497
|
+
this._gap = computed(() => normalizeGap(resolveAll({ default: this.fxGridGap(), xs: this.gapXs(), sm: this.gapSm(),
|
|
1498
|
+
md: this.gapMd(), lg: this.gapLg(), xl: this.gapXl(), xxl: this.gapXxl() }, { 'lt-sm': this.gapLtSm(), 'lt-md': this.gapLtMd(), 'lt-lg': this.gapLtLg(),
|
|
1499
|
+
'lt-xl': this.gapLtXl(), 'lt-xxl': this.gapLtXxl(),
|
|
1500
|
+
'gt-xs': this.gapGtXs(), 'gt-sm': this.gapGtSm(), 'gt-md': this.gapGtMd(),
|
|
1501
|
+
'gt-lg': this.gapGtLg(), 'gt-xl': this.gapGtXl(),
|
|
1502
|
+
'sm-up': this.gapSmUp(), 'md-up': this.gapMdUp(), 'lg-up': this.gapLgUp(),
|
|
1503
|
+
'xl-up': this.gapXlUp(), 'xxl-up': this.gapXxlUp(),
|
|
1504
|
+
'sm-down': this.gapSmDown(), 'md-down': this.gapMdDown(),
|
|
1505
|
+
'lg-down': this.gapLgDown(), 'xl-down': this.gapXlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_gap" }] : []));
|
|
1506
|
+
effect(() => {
|
|
1507
|
+
const cols = this._cols();
|
|
1508
|
+
const rows = this._rows();
|
|
1509
|
+
const gap = this._gap();
|
|
1510
|
+
cols ? this.safeSetStyle('grid-template-columns', cols)
|
|
1511
|
+
: this.r2.removeStyle(this.el.nativeElement, 'grid-template-columns');
|
|
1512
|
+
rows ? this.safeSetStyle('grid-template-rows', rows)
|
|
1513
|
+
: this.r2.removeStyle(this.el.nativeElement, 'grid-template-rows');
|
|
1514
|
+
gap ? this.safeSetStyle('gap', gap)
|
|
1515
|
+
: this.r2.removeStyle(this.el.nativeElement, 'gap');
|
|
1516
|
+
});
|
|
1517
|
+
}
|
|
1518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1519
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxGridDirective, isStandalone: true, selector: "\n [fxGrid],\n [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],\n [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],\n [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],\n [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],\n [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]\n ", inputs: { fxGrid: { classPropertyName: "fxGrid", publicName: "fxGrid", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGrid.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGrid.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGrid.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGrid.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGrid.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGrid.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGrid.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGrid.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGrid.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGrid.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGrid.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGrid.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGrid.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGrid.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGrid.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGrid.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGrid.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGrid.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGrid.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGrid.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGrid.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGrid.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGrid.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGrid.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGrid.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridRows: { classPropertyName: "fxGridRows", publicName: "fxGridRows", isSignal: true, isRequired: false, transformFunction: null }, rowsXs: { classPropertyName: "rowsXs", publicName: "fxGridRows.xs", isSignal: true, isRequired: false, transformFunction: null }, rowsSm: { classPropertyName: "rowsSm", publicName: "fxGridRows.sm", isSignal: true, isRequired: false, transformFunction: null }, rowsMd: { classPropertyName: "rowsMd", publicName: "fxGridRows.md", isSignal: true, isRequired: false, transformFunction: null }, rowsLg: { classPropertyName: "rowsLg", publicName: "fxGridRows.lg", isSignal: true, isRequired: false, transformFunction: null }, rowsXl: { classPropertyName: "rowsXl", publicName: "fxGridRows.xl", isSignal: true, isRequired: false, transformFunction: null }, rowsXxl: { classPropertyName: "rowsXxl", publicName: "fxGridRows.xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtSm: { classPropertyName: "rowsLtSm", publicName: "fxGridRows.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsLtMd: { classPropertyName: "rowsLtMd", publicName: "fxGridRows.lt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsLtLg: { classPropertyName: "rowsLtLg", publicName: "fxGridRows.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXl: { classPropertyName: "rowsLtXl", publicName: "fxGridRows.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXxl: { classPropertyName: "rowsLtXxl", publicName: "fxGridRows.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXs: { classPropertyName: "rowsGtXs", publicName: "fxGridRows.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, rowsGtSm: { classPropertyName: "rowsGtSm", publicName: "fxGridRows.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsGtMd: { classPropertyName: "rowsGtMd", publicName: "fxGridRows.gt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsGtLg: { classPropertyName: "rowsGtLg", publicName: "fxGridRows.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXl: { classPropertyName: "rowsGtXl", publicName: "fxGridRows.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsSmUp: { classPropertyName: "rowsSmUp", publicName: "fxGridRows.sm-up", isSignal: true, isRequired: false, transformFunction: null }, rowsMdUp: { classPropertyName: "rowsMdUp", publicName: "fxGridRows.md-up", isSignal: true, isRequired: false, transformFunction: null }, rowsLgUp: { classPropertyName: "rowsLgUp", publicName: "fxGridRows.lg-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXlUp: { classPropertyName: "rowsXlUp", publicName: "fxGridRows.xl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXxlUp: { classPropertyName: "rowsXxlUp", publicName: "fxGridRows.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsSmDown: { classPropertyName: "rowsSmDown", publicName: "fxGridRows.sm-down", isSignal: true, isRequired: false, transformFunction: null }, rowsMdDown: { classPropertyName: "rowsMdDown", publicName: "fxGridRows.md-down", isSignal: true, isRequired: false, transformFunction: null }, rowsLgDown: { classPropertyName: "rowsLgDown", publicName: "fxGridRows.lg-down", isSignal: true, isRequired: false, transformFunction: null }, rowsXlDown: { classPropertyName: "rowsXlDown", publicName: "fxGridRows.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridGap: { classPropertyName: "fxGridGap", publicName: "fxGridGap", isSignal: true, isRequired: false, transformFunction: null }, gapXs: { classPropertyName: "gapXs", publicName: "fxGridGap.xs", isSignal: true, isRequired: false, transformFunction: null }, gapSm: { classPropertyName: "gapSm", publicName: "fxGridGap.sm", isSignal: true, isRequired: false, transformFunction: null }, gapMd: { classPropertyName: "gapMd", publicName: "fxGridGap.md", isSignal: true, isRequired: false, transformFunction: null }, gapLg: { classPropertyName: "gapLg", publicName: "fxGridGap.lg", isSignal: true, isRequired: false, transformFunction: null }, gapXl: { classPropertyName: "gapXl", publicName: "fxGridGap.xl", isSignal: true, isRequired: false, transformFunction: null }, gapXxl: { classPropertyName: "gapXxl", publicName: "fxGridGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, gapLtSm: { classPropertyName: "gapLtSm", publicName: "fxGridGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapLtMd: { classPropertyName: "gapLtMd", publicName: "fxGridGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, gapLtLg: { classPropertyName: "gapLtLg", publicName: "fxGridGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapLtXl: { classPropertyName: "gapLtXl", publicName: "fxGridGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapLtXxl: { classPropertyName: "gapLtXxl", publicName: "fxGridGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gapGtXs: { classPropertyName: "gapGtXs", publicName: "fxGridGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gapGtSm: { classPropertyName: "gapGtSm", publicName: "fxGridGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapGtMd: { classPropertyName: "gapGtMd", publicName: "fxGridGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gapGtLg: { classPropertyName: "gapGtLg", publicName: "fxGridGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapGtXl: { classPropertyName: "gapGtXl", publicName: "fxGridGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapSmUp: { classPropertyName: "gapSmUp", publicName: "fxGridGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, gapMdUp: { classPropertyName: "gapMdUp", publicName: "fxGridGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, gapLgUp: { classPropertyName: "gapLgUp", publicName: "fxGridGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, gapXlUp: { classPropertyName: "gapXlUp", publicName: "fxGridGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, gapXxlUp: { classPropertyName: "gapXxlUp", publicName: "fxGridGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, gapSmDown: { classPropertyName: "gapSmDown", publicName: "fxGridGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, gapMdDown: { classPropertyName: "gapMdDown", publicName: "fxGridGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, gapLgDown: { classPropertyName: "gapLgDown", publicName: "fxGridGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, gapXlDown: { classPropertyName: "gapXlDown", publicName: "fxGridGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"grid\"" } }, usesInheritance: true, ngImport: i0 }); }
|
|
1520
|
+
}
|
|
1521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridDirective, decorators: [{
|
|
1522
|
+
type: Directive,
|
|
1523
|
+
args: [{
|
|
1524
|
+
selector: `
|
|
1525
|
+
[fxGrid],
|
|
1526
|
+
[fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],
|
|
1527
|
+
[fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],
|
|
1528
|
+
[fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],
|
|
1529
|
+
[fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],
|
|
1530
|
+
[fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]
|
|
1531
|
+
`,
|
|
1532
|
+
standalone: true,
|
|
1533
|
+
host: { '[style.display]': '"grid"' },
|
|
1534
|
+
}]
|
|
1535
|
+
}], ctorParameters: () => [], propDecorators: { fxGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-down", required: false }] }], fxGridRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows", required: false }] }], rowsXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xs", required: false }] }], rowsSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm", required: false }] }], rowsMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md", required: false }] }], rowsLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg", required: false }] }], rowsXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl", required: false }] }], rowsXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl", required: false }] }], rowsLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-sm", required: false }] }], rowsLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-md", required: false }] }], rowsLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-lg", required: false }] }], rowsLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xl", required: false }] }], rowsLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xxl", required: false }] }], rowsGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xs", required: false }] }], rowsGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-sm", required: false }] }], rowsGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-md", required: false }] }], rowsGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-lg", required: false }] }], rowsGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xl", required: false }] }], rowsSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-up", required: false }] }], rowsMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-up", required: false }] }], rowsLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-up", required: false }] }], rowsXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-up", required: false }] }], rowsXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl-up", required: false }] }], rowsSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-down", required: false }] }], rowsMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-down", required: false }] }], rowsLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-down", required: false }] }], rowsXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-down", required: false }] }], fxGridGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap", required: false }] }], gapXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xs", required: false }] }], gapSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm", required: false }] }], gapMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md", required: false }] }], gapLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg", required: false }] }], gapXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl", required: false }] }], gapXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl", required: false }] }], gapLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-sm", required: false }] }], gapLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-md", required: false }] }], gapLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-lg", required: false }] }], gapLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xl", required: false }] }], gapLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xxl", required: false }] }], gapGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xs", required: false }] }], gapGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-sm", required: false }] }], gapGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-md", required: false }] }], gapGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-lg", required: false }] }], gapGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xl", required: false }] }], gapSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-up", required: false }] }], gapMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-up", required: false }] }], gapLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-up", required: false }] }], gapXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-up", required: false }] }], gapXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl-up", required: false }] }], gapSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-down", required: false }] }], gapMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-down", required: false }] }], gapLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-down", required: false }] }], gapXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-down", required: false }] }] } });
|
|
1536
|
+
// ─── fxGridColumn ─────────────────────────────────────────────────────────────
|
|
1537
|
+
class FxGridColumnDirective extends ResponsiveBaseDirective {
|
|
1538
|
+
constructor() {
|
|
1539
|
+
super();
|
|
1540
|
+
this.fxGridColumn = input(undefined, { ...(ngDevMode ? { debugName: "fxGridColumn" } : {}), alias: 'fxGridColumn' });
|
|
1541
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxGridColumn.xs' });
|
|
1542
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxGridColumn.sm' });
|
|
1543
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxGridColumn.md' });
|
|
1544
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxGridColumn.lg' });
|
|
1545
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxGridColumn.xl' });
|
|
1546
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxGridColumn.xxl' });
|
|
1547
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxGridColumn.lt-sm' });
|
|
1548
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxGridColumn.lt-md' });
|
|
1549
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxGridColumn.lt-lg' });
|
|
1550
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxGridColumn.lt-xl' });
|
|
1551
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxGridColumn.lt-xxl' });
|
|
1552
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxGridColumn.gt-xs' });
|
|
1553
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxGridColumn.gt-sm' });
|
|
1554
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxGridColumn.gt-md' });
|
|
1555
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxGridColumn.gt-lg' });
|
|
1556
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxGridColumn.gt-xl' });
|
|
1557
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxGridColumn.sm-up' });
|
|
1558
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxGridColumn.md-up' });
|
|
1559
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxGridColumn.lg-up' });
|
|
1560
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxGridColumn.xl-up' });
|
|
1561
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxGridColumn.xxl-up' });
|
|
1562
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxGridColumn.sm-down' });
|
|
1563
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxGridColumn.md-down' });
|
|
1564
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxGridColumn.lg-down' });
|
|
1565
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxGridColumn.xl-down' });
|
|
1566
|
+
this._resolved = computed(() => resolveAll({ default: this.fxGridColumn(), xs: this.xs(), sm: this.sm(),
|
|
1567
|
+
md: this.md(), lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
1568
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
1569
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
1570
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
1571
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
1572
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
1573
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1574
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_resolved" }] : []));
|
|
1575
|
+
effect(() => {
|
|
1576
|
+
const v = this._resolved();
|
|
1577
|
+
v ? this.safeSetStyle('grid-column', v)
|
|
1578
|
+
: this.r2.removeStyle(this.el.nativeElement, 'grid-column');
|
|
1579
|
+
});
|
|
1580
|
+
}
|
|
1581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1582
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxGridColumnDirective, isStandalone: true, selector: "\n [fxGridColumn],\n [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],\n [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],\n [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],\n [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],\n [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]\n ", inputs: { fxGridColumn: { classPropertyName: "fxGridColumn", publicName: "fxGridColumn", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridColumn.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridColumn.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridColumn.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridColumn.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridColumn.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridColumn.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridColumn.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridColumn.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridColumn.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridColumn.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridColumn.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridColumn.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridColumn.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridColumn.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridColumn.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridColumn.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridColumn.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridColumn.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridColumn.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridColumn.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridColumn.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridColumn.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridColumn.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridColumn.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridColumn.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1583
|
+
}
|
|
1584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridColumnDirective, decorators: [{
|
|
1585
|
+
type: Directive,
|
|
1586
|
+
args: [{
|
|
1587
|
+
selector: `
|
|
1588
|
+
[fxGridColumn],
|
|
1589
|
+
[fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],
|
|
1590
|
+
[fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],
|
|
1591
|
+
[fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],
|
|
1592
|
+
[fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],
|
|
1593
|
+
[fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]
|
|
1594
|
+
`,
|
|
1595
|
+
standalone: true,
|
|
1596
|
+
}]
|
|
1597
|
+
}], ctorParameters: () => [], propDecorators: { fxGridColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-down", required: false }] }] } });
|
|
1598
|
+
// ─── fxGridArea ───────────────────────────────────────────────────────────────
|
|
1599
|
+
class FxGridAreaDirective extends ResponsiveBaseDirective {
|
|
1600
|
+
constructor() {
|
|
1601
|
+
super();
|
|
1602
|
+
this.fxGridArea = input(undefined, { ...(ngDevMode ? { debugName: "fxGridArea" } : {}), alias: 'fxGridArea' });
|
|
1603
|
+
this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : {}), alias: 'fxGridArea.xs' });
|
|
1604
|
+
this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : {}), alias: 'fxGridArea.sm' });
|
|
1605
|
+
this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : {}), alias: 'fxGridArea.md' });
|
|
1606
|
+
this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : {}), alias: 'fxGridArea.lg' });
|
|
1607
|
+
this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : {}), alias: 'fxGridArea.xl' });
|
|
1608
|
+
this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : {}), alias: 'fxGridArea.xxl' });
|
|
1609
|
+
this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : {}), alias: 'fxGridArea.lt-sm' });
|
|
1610
|
+
this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : {}), alias: 'fxGridArea.lt-md' });
|
|
1611
|
+
this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : {}), alias: 'fxGridArea.lt-lg' });
|
|
1612
|
+
this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : {}), alias: 'fxGridArea.lt-xl' });
|
|
1613
|
+
this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : {}), alias: 'fxGridArea.lt-xxl' });
|
|
1614
|
+
this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : {}), alias: 'fxGridArea.gt-xs' });
|
|
1615
|
+
this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : {}), alias: 'fxGridArea.gt-sm' });
|
|
1616
|
+
this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : {}), alias: 'fxGridArea.gt-md' });
|
|
1617
|
+
this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : {}), alias: 'fxGridArea.gt-lg' });
|
|
1618
|
+
this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : {}), alias: 'fxGridArea.gt-xl' });
|
|
1619
|
+
this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : {}), alias: 'fxGridArea.sm-up' });
|
|
1620
|
+
this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : {}), alias: 'fxGridArea.md-up' });
|
|
1621
|
+
this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : {}), alias: 'fxGridArea.lg-up' });
|
|
1622
|
+
this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : {}), alias: 'fxGridArea.xl-up' });
|
|
1623
|
+
this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : {}), alias: 'fxGridArea.xxl-up' });
|
|
1624
|
+
this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : {}), alias: 'fxGridArea.sm-down' });
|
|
1625
|
+
this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : {}), alias: 'fxGridArea.md-down' });
|
|
1626
|
+
this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : {}), alias: 'fxGridArea.lg-down' });
|
|
1627
|
+
this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : {}), alias: 'fxGridArea.xl-down' });
|
|
1628
|
+
this._resolved = computed(() => resolveAll({ default: this.fxGridArea(), xs: this.xs(), sm: this.sm(),
|
|
1629
|
+
md: this.md(), lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
|
|
1630
|
+
'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
|
|
1631
|
+
'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
|
|
1632
|
+
'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
|
|
1633
|
+
'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
|
|
1634
|
+
'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
|
|
1635
|
+
'sm-down': this.smDown(), 'md-down': this.mdDown(),
|
|
1636
|
+
'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_resolved" }] : []));
|
|
1637
|
+
effect(() => {
|
|
1638
|
+
const v = this._resolved();
|
|
1639
|
+
v ? this.safeSetStyle('grid-area', v)
|
|
1640
|
+
: this.r2.removeStyle(this.el.nativeElement, 'grid-area');
|
|
1641
|
+
});
|
|
1642
|
+
}
|
|
1643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1644
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: FxGridAreaDirective, isStandalone: true, selector: "\n [fxGridArea],\n [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],\n [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],\n [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],\n [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],\n [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]\n ", inputs: { fxGridArea: { classPropertyName: "fxGridArea", publicName: "fxGridArea", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridArea.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridArea.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridArea.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridArea.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridArea.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridArea.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridArea.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridArea.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridArea.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridArea.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridArea.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridArea.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridArea.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridArea.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridArea.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridArea.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridArea.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridArea.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridArea.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridArea.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridArea.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridArea.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridArea.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridArea.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridArea.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
1645
|
+
}
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FxGridAreaDirective, decorators: [{
|
|
1647
|
+
type: Directive,
|
|
1648
|
+
args: [{
|
|
1649
|
+
selector: `
|
|
1650
|
+
[fxGridArea],
|
|
1651
|
+
[fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],
|
|
1652
|
+
[fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],
|
|
1653
|
+
[fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],
|
|
1654
|
+
[fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],
|
|
1655
|
+
[fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]
|
|
1656
|
+
`,
|
|
1657
|
+
standalone: true,
|
|
1658
|
+
}]
|
|
1659
|
+
}], ctorParameters: () => [], propDecorators: { fxGridArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-down", required: false }] }] } });
|
|
1660
|
+
|
|
1661
|
+
/**
|
|
1662
|
+
* @file if-bp.directive.ts (Angular 21 — signals)
|
|
1663
|
+
*
|
|
1664
|
+
* *ifBp — structural directive that adds/removes an element from the DOM
|
|
1665
|
+
* based on the active Bootstrap 5 breakpoint.
|
|
1666
|
+
*
|
|
1667
|
+
* Unlike [fxShow]/[fxHide] (which use display:none), *ifBp actually adds and
|
|
1668
|
+
* removes the element from the DOM — ideal for heavy components like mat-sidenav.
|
|
1669
|
+
*
|
|
1670
|
+
* Angular 21 changes:
|
|
1671
|
+
* • @Input setters replaced by input() / input.required()
|
|
1672
|
+
* • computed() derives alias list and active state reactively
|
|
1673
|
+
* • effect() in constructor handles DOM add/remove (no OnInit/OnChanges)
|
|
1674
|
+
* • No Injector, EffectRef, _initialized guard or manual subscriptions
|
|
1675
|
+
*
|
|
1676
|
+
* Usage:
|
|
1677
|
+
* <mat-sidenav *ifBp="'lg-up'"> only rendered on lg and above
|
|
1678
|
+
* <div *ifBp="'xs'">Mobile only</div>
|
|
1679
|
+
* <div *ifBp="'sm md'">sm and md only (space-separated list of aliases)</div>
|
|
1680
|
+
* <div *ifBp="'lg-up'; else mobileRef">Desktop view</div>
|
|
1681
|
+
* <ng-template #mobileRef>Mobile fallback</ng-template>
|
|
1682
|
+
*
|
|
1683
|
+
* Accepted alias values:
|
|
1684
|
+
* xs | sm | md | lg | xl | xxl
|
|
1685
|
+
* sm-up | md-up | lg-up | xl-up | xxl-up
|
|
1686
|
+
* sm-down | md-down | lg-down | xl-down
|
|
1687
|
+
* Space-separated list of any of the above
|
|
1688
|
+
*/
|
|
1689
|
+
class IfBpDirective {
|
|
1690
|
+
constructor() {
|
|
1691
|
+
this.tpl = inject((TemplateRef));
|
|
1692
|
+
this.vcr = inject(ViewContainerRef);
|
|
1693
|
+
this.media = inject(MediaObserver);
|
|
1694
|
+
this.bp = inject(LAYOUT_BREAKPOINTS);
|
|
1695
|
+
/** Space-separated list of breakpoint aliases, e.g. `'lg xl xxl-up'` */
|
|
1696
|
+
this.ifBp = input.required(...(ngDevMode ? [{ debugName: "ifBp" }] : []));
|
|
1697
|
+
/** Optional else-template shown when no alias is active */
|
|
1698
|
+
this.ifBpElse = input(...(ngDevMode ? [undefined, { debugName: "ifBpElse" }] : []));
|
|
1699
|
+
this._aliases = computed(() => this.ifBp().trim().split(/\s+/), ...(ngDevMode ? [{ debugName: "_aliases" }] : []));
|
|
1700
|
+
this._isActive = computed(() => this._aliases().some(alias => this.media.isActive(this.bp[alias] ?? alias)), ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
|
|
1701
|
+
/** Tracks whether the main view is currently embedded — plain field, not a signal. */
|
|
1702
|
+
this._hasView = false;
|
|
1703
|
+
effect(() => {
|
|
1704
|
+
const active = this._isActive();
|
|
1705
|
+
const elseTpl = this.ifBpElse();
|
|
1706
|
+
if (active === this._hasView)
|
|
1707
|
+
return; // dirty-check
|
|
1708
|
+
this.vcr.clear();
|
|
1709
|
+
if (active) {
|
|
1710
|
+
this.vcr.createEmbeddedView(this.tpl);
|
|
1711
|
+
}
|
|
1712
|
+
else if (elseTpl) {
|
|
1713
|
+
this.vcr.createEmbeddedView(elseTpl);
|
|
1714
|
+
}
|
|
1715
|
+
this._hasView = active;
|
|
1716
|
+
});
|
|
1717
|
+
}
|
|
1718
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IfBpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1719
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: IfBpDirective, isStandalone: true, selector: "[ifBp]", inputs: { ifBp: { classPropertyName: "ifBp", publicName: "ifBp", isSignal: true, isRequired: true, transformFunction: null }, ifBpElse: { classPropertyName: "ifBpElse", publicName: "ifBpElse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1720
|
+
}
|
|
1721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IfBpDirective, decorators: [{
|
|
1722
|
+
type: Directive,
|
|
1723
|
+
args: [{
|
|
1724
|
+
selector: '[ifBp]',
|
|
1725
|
+
standalone: true,
|
|
1726
|
+
}]
|
|
1727
|
+
}], ctorParameters: () => [], propDecorators: { ifBp: [{ type: i0.Input, args: [{ isSignal: true, alias: "ifBp", required: true }] }], ifBpElse: [{ type: i0.Input, args: [{ isSignal: true, alias: "ifBpElse", required: false }] }] } });
|
|
1728
|
+
|
|
33
1729
|
class PaginatorIntl extends MatPaginatorIntl {
|
|
34
1730
|
constructor() {
|
|
35
1731
|
super(...arguments);
|
|
@@ -714,14 +2410,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
714
2410
|
|
|
715
2411
|
class ArsUIModule {
|
|
716
2412
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArsUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
717
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: ArsUIModule, imports: [ArsCoreModule
|
|
2413
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: ArsUIModule, imports: [ArsCoreModule,
|
|
2414
|
+
// Flex
|
|
2415
|
+
FxLayoutDirective,
|
|
2416
|
+
FxLayoutWrapDirective,
|
|
2417
|
+
FxFlexDirective,
|
|
2418
|
+
FxLayoutAlignDirective,
|
|
2419
|
+
FxLayoutGapDirective,
|
|
2420
|
+
FxFlexOrderDirective,
|
|
2421
|
+
FxFlexOffsetDirective,
|
|
2422
|
+
FxFlexAlignDirective,
|
|
2423
|
+
FxFlexFillDirective,
|
|
2424
|
+
// Visibility
|
|
2425
|
+
FxShowDirective,
|
|
2426
|
+
FxHideDirective,
|
|
2427
|
+
// Style / Class
|
|
2428
|
+
FxStyleDirective,
|
|
2429
|
+
FxClassDirective,
|
|
2430
|
+
// Grid
|
|
2431
|
+
FxGridDirective,
|
|
2432
|
+
FxGridColumnDirective,
|
|
2433
|
+
FxGridAreaDirective,
|
|
2434
|
+
// Structural
|
|
2435
|
+
IfBpDirective], exports: [
|
|
2436
|
+
// Flex
|
|
2437
|
+
FxLayoutDirective,
|
|
2438
|
+
FxLayoutWrapDirective,
|
|
2439
|
+
FxFlexDirective,
|
|
2440
|
+
FxLayoutAlignDirective,
|
|
2441
|
+
FxLayoutGapDirective,
|
|
2442
|
+
FxFlexOrderDirective,
|
|
2443
|
+
FxFlexOffsetDirective,
|
|
2444
|
+
FxFlexAlignDirective,
|
|
2445
|
+
FxFlexFillDirective,
|
|
2446
|
+
// Visibility
|
|
2447
|
+
FxShowDirective,
|
|
2448
|
+
FxHideDirective,
|
|
2449
|
+
// Style / Class
|
|
2450
|
+
FxStyleDirective,
|
|
2451
|
+
FxClassDirective,
|
|
2452
|
+
// Grid
|
|
2453
|
+
FxGridDirective,
|
|
2454
|
+
FxGridColumnDirective,
|
|
2455
|
+
FxGridAreaDirective,
|
|
2456
|
+
// Structural
|
|
2457
|
+
IfBpDirective] }); }
|
|
718
2458
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArsUIModule, imports: [ArsCoreModule] }); }
|
|
719
2459
|
}
|
|
720
2460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ArsUIModule, decorators: [{
|
|
721
2461
|
type: NgModule,
|
|
722
2462
|
args: [{
|
|
723
2463
|
imports: [
|
|
724
|
-
ArsCoreModule
|
|
2464
|
+
ArsCoreModule,
|
|
2465
|
+
// Flex
|
|
2466
|
+
FxLayoutDirective,
|
|
2467
|
+
FxLayoutWrapDirective,
|
|
2468
|
+
FxFlexDirective,
|
|
2469
|
+
FxLayoutAlignDirective,
|
|
2470
|
+
FxLayoutGapDirective,
|
|
2471
|
+
FxFlexOrderDirective,
|
|
2472
|
+
FxFlexOffsetDirective,
|
|
2473
|
+
FxFlexAlignDirective,
|
|
2474
|
+
FxFlexFillDirective,
|
|
2475
|
+
// Visibility
|
|
2476
|
+
FxShowDirective,
|
|
2477
|
+
FxHideDirective,
|
|
2478
|
+
// Style / Class
|
|
2479
|
+
FxStyleDirective,
|
|
2480
|
+
FxClassDirective,
|
|
2481
|
+
// Grid
|
|
2482
|
+
FxGridDirective,
|
|
2483
|
+
FxGridColumnDirective,
|
|
2484
|
+
FxGridAreaDirective,
|
|
2485
|
+
// Structural
|
|
2486
|
+
IfBpDirective,
|
|
2487
|
+
],
|
|
2488
|
+
exports: [
|
|
2489
|
+
// Flex
|
|
2490
|
+
FxLayoutDirective,
|
|
2491
|
+
FxLayoutWrapDirective,
|
|
2492
|
+
FxFlexDirective,
|
|
2493
|
+
FxLayoutAlignDirective,
|
|
2494
|
+
FxLayoutGapDirective,
|
|
2495
|
+
FxFlexOrderDirective,
|
|
2496
|
+
FxFlexOffsetDirective,
|
|
2497
|
+
FxFlexAlignDirective,
|
|
2498
|
+
FxFlexFillDirective,
|
|
2499
|
+
// Visibility
|
|
2500
|
+
FxShowDirective,
|
|
2501
|
+
FxHideDirective,
|
|
2502
|
+
// Style / Class
|
|
2503
|
+
FxStyleDirective,
|
|
2504
|
+
FxClassDirective,
|
|
2505
|
+
// Grid
|
|
2506
|
+
FxGridDirective,
|
|
2507
|
+
FxGridColumnDirective,
|
|
2508
|
+
FxGridAreaDirective,
|
|
2509
|
+
// Structural
|
|
2510
|
+
IfBpDirective,
|
|
725
2511
|
]
|
|
726
2512
|
}]
|
|
727
2513
|
}] });
|
|
@@ -1024,5 +2810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1024
2810
|
* Generated bundle index. Do not edit.
|
|
1025
2811
|
*/
|
|
1026
2812
|
|
|
1027
|
-
export { ArsUIModule, BusyDialogComponent, BusyTimer, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, InfoDialogComponent, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ToastComponent, UIService };
|
|
2813
|
+
export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxHideDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, resolve, resolveAll, resolveNonCanonical };
|
|
1028
2814
|
//# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map
|