@ojiepermana/angular-theme 22.0.41 → 22.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +6 -6
- package/fesm2022/ojiepermana-angular-theme-layout-types.mjs +10 -1
- package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +27 -27
- package/fesm2022/ojiepermana-angular-theme-layout.mjs +136 -76
- package/fesm2022/ojiepermana-angular-theme-page.mjs +507 -39
- package/fesm2022/ojiepermana-angular-theme-styles.mjs +15 -15
- package/layout/README.md +20 -17
- package/package.json +3 -3
- package/page/README.md +157 -11
- package/styles/css/base/components.css +212 -0
- package/styles/css/base/theme.css +91 -3
- package/styles/css/base/tokens.css +50 -8
- package/styles/css/space/index.css +6 -3
- package/types/ojiepermana-angular-theme-layout-services.d.ts +1 -1
- package/types/ojiepermana-angular-theme-layout-types.d.ts +1 -1
- package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +1 -1
- package/types/ojiepermana-angular-theme-layout.d.ts +3 -2
- package/types/ojiepermana-angular-theme-page.d.ts +188 -43
|
@@ -39,8 +39,8 @@ class LayoutLoadingComponent {
|
|
|
39
39
|
constructor() {
|
|
40
40
|
inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
|
|
41
41
|
}
|
|
42
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
|
|
44
44
|
@if (isPrimary() && loading.active()) {
|
|
45
45
|
<div
|
|
46
46
|
role="progressbar"
|
|
@@ -58,7 +58,7 @@ class LayoutLoadingComponent {
|
|
|
58
58
|
}
|
|
59
59
|
`, isInline: true });
|
|
60
60
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{
|
|
64
64
|
selector: 'LayoutLoading',
|
|
@@ -118,6 +118,11 @@ class LayoutComponent {
|
|
|
118
118
|
...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
|
|
119
119
|
isFullFlat = computed(() => this.resolvedWidth() === 'full' && !this.isBorderRail(), /* @ts-ignore */
|
|
120
120
|
...(ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []));
|
|
121
|
+
// The `grid-line` surface forces square frame corners (like `border-rail`) so
|
|
122
|
+
// the mosaic grid runs cleanly to the edges instead of being clipped by the
|
|
123
|
+
// theme-radius curve.
|
|
124
|
+
isGridLineSurface = computed(() => this.resolvedSurface() === 'grid-line', /* @ts-ignore */
|
|
125
|
+
...(ngDevMode ? [{ debugName: "isGridLineSurface" }] : /* istanbul ignore next */ []));
|
|
121
126
|
showsInsetRails = computed(() => {
|
|
122
127
|
const layoutType = this.resolvedType();
|
|
123
128
|
return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
|
|
@@ -131,15 +136,35 @@ class LayoutComponent {
|
|
|
131
136
|
...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
|
|
132
137
|
hostClasses = computed(() => cn('relative isolate h-dvh w-full min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
|
|
133
138
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
134
|
-
frameClasses = computed(() =>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
139
|
+
frameClasses = computed(() => {
|
|
140
|
+
const gridLine = this.isGridLineSurface();
|
|
141
|
+
return cn('relative min-h-0 min-w-0 bg-background/55 backdrop-blur-xs', this.frameSizeClasses(),
|
|
142
|
+
// Frame border color:
|
|
143
|
+
// • border-rail → the rail color var (--layout-rail-color / -opacity), so the
|
|
144
|
+
// 1.5px frame border matches the rail lines. Defaults resolve to --border
|
|
145
|
+
// at full opacity (unchanged for most surfaces); the `grid-line` host
|
|
146
|
+
// raises them to the accent (see [data-surface='grid-line'] in
|
|
147
|
+
// base/components.css), so grid-line's rails read brighter + theme-tinted.
|
|
148
|
+
// • grid-line flat → the accent at --layout-grid-line-border-opacity (~0.666).
|
|
149
|
+
// • everything else → --border.
|
|
150
|
+
this.isBorderRail()
|
|
151
|
+
? 'border-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]'
|
|
152
|
+
: gridLine
|
|
153
|
+
? 'border-[hsl(var(--accent-foreground)/var(--layout-grid-line-border-opacity))]'
|
|
154
|
+
: 'border-border',
|
|
155
|
+
// flat: the outer frame rounds with the active theme-radius
|
|
156
|
+
// (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
|
|
157
|
+
// square corners for its grid-rail aesthetic. `grid-line` is always a clearly
|
|
158
|
+
// bordered square box (rounded-none + a visible border in every width) so the
|
|
159
|
+
// mosaic reads as a framed panel.
|
|
160
|
+
this.isBorderRail()
|
|
161
|
+
? 'overflow-visible border-[length:var(--layout-rail-width)]'
|
|
162
|
+
: gridLine
|
|
163
|
+
? 'overflow-hidden border rounded-none'
|
|
164
|
+
: this.isFullFlat()
|
|
165
|
+
? 'overflow-hidden'
|
|
166
|
+
: 'overflow-hidden border rounded-[var(--layout-frame-radius)]');
|
|
167
|
+
}, /* @ts-ignore */
|
|
143
168
|
...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
|
|
144
169
|
frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
|
|
145
170
|
...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -178,9 +203,44 @@ class LayoutComponent {
|
|
|
178
203
|
surfaceClasses() {
|
|
179
204
|
switch (this.resolvedSurface()) {
|
|
180
205
|
case 'grid':
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
206
|
+
// `grid`: two-axis 1px gradient. The line color is --layout-grid-color,
|
|
207
|
+
// which follows the accent (hue from --accent-foreground at the grid's
|
|
208
|
+
// pinned lightness) where CSS relative color is supported, else falls back
|
|
209
|
+
// to the neutral --layout-grid-line — both at --layout-grid-line-opacity
|
|
210
|
+
// (see base/theme.css). So the grid stays as faint as before but tints with
|
|
211
|
+
// the theme-color.
|
|
212
|
+
return '[--layout-grid-size:2rem] bg-background bg-[linear-gradient(var(--layout-grid-color)_1px,transparent_1px),linear-gradient(to_right,var(--layout-grid-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]';
|
|
213
|
+
case 'grid-line':
|
|
214
|
+
// `grid-line`: a richer "mosaic" cousin of `grid`, painted by the
|
|
215
|
+
// `.layout-surface-grid-line` mask layer (base/components.css). One mask
|
|
216
|
+
// carries the faint uniform grid PLUS scattered bright highlight squares
|
|
217
|
+
// and a few subtly-lit cells, so the layers stay pixel-aligned. The glow
|
|
218
|
+
// FOLLOWS THE ACCENT (accent hue from --accent-foreground, lightness pinned
|
|
219
|
+
// to --layout-grid-highlight-l so brightness stays put — grayscale in the
|
|
220
|
+
// base theme, tinted under a color theme), like the frame border.
|
|
221
|
+
return 'bg-background layout-surface-grid-line';
|
|
222
|
+
case 'honeycomb':
|
|
223
|
+
// True honeycomb: tileable hexagon outline painted by the
|
|
224
|
+
// `.layout-surface-honeycomb` mask layer (base/components.css), so it
|
|
225
|
+
// stays token-colored across themes. `bg-background` is the base.
|
|
226
|
+
return 'bg-background layout-surface-honeycomb';
|
|
227
|
+
case 'matrix':
|
|
228
|
+
// `matrix`: a scattered binary (0/1) field painted by the
|
|
229
|
+
// `.layout-surface-matrix` mask layer (base/components.css). Unlike
|
|
230
|
+
// the neutral grid surfaces, the glyphs are tinted with the brand
|
|
231
|
+
// `--primary` accent and carry baked-in per-glyph opacity, so the field
|
|
232
|
+
// reads as a soft "digital" signature that recolors with the theme.
|
|
233
|
+
return 'bg-background layout-surface-matrix';
|
|
234
|
+
case 'circuit':
|
|
235
|
+
// `circuit`: a tileable PCB / circuit-board texture — routed traces with
|
|
236
|
+
// 45° bends, via nodes, and concentric ring pads. Painted by the
|
|
237
|
+
// `.layout-surface-circuit` class (base/components.css) as TWO stacked,
|
|
238
|
+
// pixel-aligned mask layers (a single mask only carries alpha, so two
|
|
239
|
+
// colors need two layers): `::before` strokes the neutral copper traces
|
|
240
|
+
// (`--layout-grid-line`) and `::after` paints the via nodes/pads in the
|
|
241
|
+
// brand `--primary` accent — so the board is grayscale but its nodes glow
|
|
242
|
+
// with the theme. Both recolor across themes + dark mode.
|
|
243
|
+
return 'bg-background layout-surface-circuit';
|
|
184
244
|
case 'line-vertical':
|
|
185
245
|
return 'bg-background bg-[linear-gradient(to_right,hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
|
|
186
246
|
case 'line-horizontal':
|
|
@@ -211,8 +271,8 @@ class LayoutComponent {
|
|
|
211
271
|
? 'h-full w-full lg:container lg:mx-auto'
|
|
212
272
|
: 'h-full w-full';
|
|
213
273
|
}
|
|
214
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
274
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutAppearanceAttribute: { classPropertyName: "layoutAppearanceAttribute", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "resolvedType()" } }, ngImport: i0, template: `
|
|
216
276
|
<LayoutLoading />
|
|
217
277
|
|
|
218
278
|
<div data-layout-stage [class]="frameStageClasses()">
|
|
@@ -225,86 +285,86 @@ class LayoutComponent {
|
|
|
225
285
|
<div data-layout-rail-anchor [class]="railAnchorClasses()">
|
|
226
286
|
<div
|
|
227
287
|
data-layout-rail-top-left-horizontal
|
|
228
|
-
class="absolute top-0 right-full h-[
|
|
288
|
+
class="absolute top-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
229
289
|
></div>
|
|
230
290
|
<div
|
|
231
291
|
data-layout-rail-top-left-vertical
|
|
232
|
-
class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[
|
|
292
|
+
class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
233
293
|
></div>
|
|
234
294
|
<div
|
|
235
295
|
data-layout-rail-top-right-horizontal
|
|
236
|
-
class="absolute top-0 left-full h-[
|
|
296
|
+
class="absolute top-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
237
297
|
></div>
|
|
238
298
|
<div
|
|
239
299
|
data-layout-rail-top-right-vertical
|
|
240
|
-
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[
|
|
300
|
+
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
241
301
|
></div>
|
|
242
302
|
<div
|
|
243
303
|
data-layout-rail-bottom-left-horizontal
|
|
244
|
-
class="absolute bottom-0 right-full h-[
|
|
304
|
+
class="absolute bottom-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
245
305
|
></div>
|
|
246
306
|
<div
|
|
247
307
|
data-layout-rail-bottom-left-vertical
|
|
248
|
-
class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[
|
|
308
|
+
class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
249
309
|
></div>
|
|
250
310
|
<div
|
|
251
311
|
data-layout-rail-bottom-right-horizontal
|
|
252
|
-
class="absolute bottom-0 left-full h-[
|
|
312
|
+
class="absolute bottom-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
253
313
|
></div>
|
|
254
314
|
<div
|
|
255
315
|
data-layout-rail-bottom-right-vertical
|
|
256
|
-
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[
|
|
316
|
+
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
257
317
|
></div>
|
|
258
318
|
|
|
259
319
|
@if (showsInsetRails()) {
|
|
260
320
|
<div
|
|
261
321
|
data-layout-horizontal-top-rail
|
|
262
|
-
class="absolute inset-x-0 top-12 h-[
|
|
322
|
+
class="absolute inset-x-0 top-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
263
323
|
></div>
|
|
264
324
|
<div
|
|
265
325
|
data-layout-horizontal-top-left-extension
|
|
266
|
-
class="absolute top-12 right-full h-[
|
|
326
|
+
class="absolute top-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
267
327
|
></div>
|
|
268
328
|
<div
|
|
269
329
|
data-layout-horizontal-top-right-extension
|
|
270
|
-
class="absolute top-12 left-full h-[
|
|
330
|
+
class="absolute top-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
271
331
|
></div>
|
|
272
332
|
<div
|
|
273
333
|
data-layout-horizontal-bottom-rail
|
|
274
|
-
class="absolute inset-x-0 bottom-12 h-[
|
|
334
|
+
class="absolute inset-x-0 bottom-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
275
335
|
></div>
|
|
276
336
|
<div
|
|
277
337
|
data-layout-horizontal-bottom-left-extension
|
|
278
|
-
class="absolute bottom-12 right-full h-[
|
|
338
|
+
class="absolute bottom-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
279
339
|
></div>
|
|
280
340
|
<div
|
|
281
341
|
data-layout-horizontal-bottom-right-extension
|
|
282
|
-
class="absolute bottom-12 left-full h-[
|
|
342
|
+
class="absolute bottom-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
283
343
|
></div>
|
|
284
344
|
|
|
285
345
|
<div
|
|
286
346
|
data-layout-vertical-left-rail
|
|
287
|
-
class="absolute inset-y-0 -left-4 w-[
|
|
347
|
+
class="absolute inset-y-0 -left-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
288
348
|
></div>
|
|
289
349
|
<div
|
|
290
350
|
data-layout-vertical-left-top-extension
|
|
291
|
-
class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[
|
|
351
|
+
class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
292
352
|
></div>
|
|
293
353
|
<div
|
|
294
354
|
data-layout-vertical-left-bottom-extension
|
|
295
|
-
class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[
|
|
355
|
+
class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
296
356
|
></div>
|
|
297
357
|
<div
|
|
298
358
|
data-layout-vertical-right-rail
|
|
299
|
-
class="absolute inset-y-0 -right-4 w-[
|
|
359
|
+
class="absolute inset-y-0 -right-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
300
360
|
></div>
|
|
301
361
|
<div
|
|
302
362
|
data-layout-vertical-right-top-extension
|
|
303
|
-
class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[
|
|
363
|
+
class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
304
364
|
></div>
|
|
305
365
|
<div
|
|
306
366
|
data-layout-vertical-right-bottom-extension
|
|
307
|
-
class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[
|
|
367
|
+
class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
308
368
|
></div>
|
|
309
369
|
}
|
|
310
370
|
</div>
|
|
@@ -319,7 +379,7 @@ class LayoutComponent {
|
|
|
319
379
|
</div>
|
|
320
380
|
`, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
321
381
|
}
|
|
322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
323
383
|
type: Component,
|
|
324
384
|
args: [{
|
|
325
385
|
selector: 'Layout',
|
|
@@ -345,86 +405,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
345
405
|
<div data-layout-rail-anchor [class]="railAnchorClasses()">
|
|
346
406
|
<div
|
|
347
407
|
data-layout-rail-top-left-horizontal
|
|
348
|
-
class="absolute top-0 right-full h-[
|
|
408
|
+
class="absolute top-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
349
409
|
></div>
|
|
350
410
|
<div
|
|
351
411
|
data-layout-rail-top-left-vertical
|
|
352
|
-
class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[
|
|
412
|
+
class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
353
413
|
></div>
|
|
354
414
|
<div
|
|
355
415
|
data-layout-rail-top-right-horizontal
|
|
356
|
-
class="absolute top-0 left-full h-[
|
|
416
|
+
class="absolute top-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
357
417
|
></div>
|
|
358
418
|
<div
|
|
359
419
|
data-layout-rail-top-right-vertical
|
|
360
|
-
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[
|
|
420
|
+
class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
361
421
|
></div>
|
|
362
422
|
<div
|
|
363
423
|
data-layout-rail-bottom-left-horizontal
|
|
364
|
-
class="absolute bottom-0 right-full h-[
|
|
424
|
+
class="absolute bottom-0 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
365
425
|
></div>
|
|
366
426
|
<div
|
|
367
427
|
data-layout-rail-bottom-left-vertical
|
|
368
|
-
class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[
|
|
428
|
+
class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
369
429
|
></div>
|
|
370
430
|
<div
|
|
371
431
|
data-layout-rail-bottom-right-horizontal
|
|
372
|
-
class="absolute bottom-0 left-full h-[
|
|
432
|
+
class="absolute bottom-0 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
373
433
|
></div>
|
|
374
434
|
<div
|
|
375
435
|
data-layout-rail-bottom-right-vertical
|
|
376
|
-
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[
|
|
436
|
+
class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
377
437
|
></div>
|
|
378
438
|
|
|
379
439
|
@if (showsInsetRails()) {
|
|
380
440
|
<div
|
|
381
441
|
data-layout-horizontal-top-rail
|
|
382
|
-
class="absolute inset-x-0 top-12 h-[
|
|
442
|
+
class="absolute inset-x-0 top-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
383
443
|
></div>
|
|
384
444
|
<div
|
|
385
445
|
data-layout-horizontal-top-left-extension
|
|
386
|
-
class="absolute top-12 right-full h-[
|
|
446
|
+
class="absolute top-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
387
447
|
></div>
|
|
388
448
|
<div
|
|
389
449
|
data-layout-horizontal-top-right-extension
|
|
390
|
-
class="absolute top-12 left-full h-[
|
|
450
|
+
class="absolute top-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
391
451
|
></div>
|
|
392
452
|
<div
|
|
393
453
|
data-layout-horizontal-bottom-rail
|
|
394
|
-
class="absolute inset-x-0 bottom-12 h-[
|
|
454
|
+
class="absolute inset-x-0 bottom-12 h-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
395
455
|
></div>
|
|
396
456
|
<div
|
|
397
457
|
data-layout-horizontal-bottom-left-extension
|
|
398
|
-
class="absolute bottom-12 right-full h-[
|
|
458
|
+
class="absolute bottom-12 right-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
399
459
|
></div>
|
|
400
460
|
<div
|
|
401
461
|
data-layout-horizontal-bottom-right-extension
|
|
402
|
-
class="absolute bottom-12 left-full h-[
|
|
462
|
+
class="absolute bottom-12 left-full h-[var(--layout-rail-width)] w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
403
463
|
></div>
|
|
404
464
|
|
|
405
465
|
<div
|
|
406
466
|
data-layout-vertical-left-rail
|
|
407
|
-
class="absolute inset-y-0 -left-4 w-[
|
|
467
|
+
class="absolute inset-y-0 -left-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
408
468
|
></div>
|
|
409
469
|
<div
|
|
410
470
|
data-layout-vertical-left-top-extension
|
|
411
|
-
class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[
|
|
471
|
+
class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
412
472
|
></div>
|
|
413
473
|
<div
|
|
414
474
|
data-layout-vertical-left-bottom-extension
|
|
415
|
-
class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[
|
|
475
|
+
class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
416
476
|
></div>
|
|
417
477
|
<div
|
|
418
478
|
data-layout-vertical-right-rail
|
|
419
|
-
class="absolute inset-y-0 -right-4 w-[
|
|
479
|
+
class="absolute inset-y-0 -right-4 w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
420
480
|
></div>
|
|
421
481
|
<div
|
|
422
482
|
data-layout-vertical-right-top-extension
|
|
423
|
-
class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[
|
|
483
|
+
class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
424
484
|
></div>
|
|
425
485
|
<div
|
|
426
486
|
data-layout-vertical-right-bottom-extension
|
|
427
|
-
class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[
|
|
487
|
+
class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[var(--layout-rail-width)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
|
|
428
488
|
></div>
|
|
429
489
|
}
|
|
430
490
|
</div>
|
|
@@ -450,10 +510,10 @@ class LayoutVerticalComponent {
|
|
|
450
510
|
constructor() {
|
|
451
511
|
this.layout.setType('vertical', { persist: false });
|
|
452
512
|
}
|
|
453
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
454
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
513
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
514
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
455
515
|
}
|
|
456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
|
|
457
517
|
type: Component,
|
|
458
518
|
args: [{
|
|
459
519
|
selector: 'LayoutVertical',
|
|
@@ -475,10 +535,10 @@ class LayoutHorizontalComponent {
|
|
|
475
535
|
constructor() {
|
|
476
536
|
this.layout.setType('horizontal', { persist: false });
|
|
477
537
|
}
|
|
478
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
538
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
480
540
|
}
|
|
481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
|
|
482
542
|
type: Component,
|
|
483
543
|
args: [{
|
|
484
544
|
selector: 'LayoutHorizontal',
|
|
@@ -500,10 +560,10 @@ class LayoutEmptyComponent {
|
|
|
500
560
|
constructor() {
|
|
501
561
|
this.layout.setType('empty', { persist: false });
|
|
502
562
|
}
|
|
503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
563
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
505
565
|
}
|
|
506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
|
|
507
567
|
type: Component,
|
|
508
568
|
args: [{
|
|
509
569
|
selector: 'LayoutEmpty',
|
|
@@ -525,10 +585,10 @@ class LayoutFluidComponent {
|
|
|
525
585
|
constructor() {
|
|
526
586
|
this.layout.setType('fluid', { persist: false });
|
|
527
587
|
}
|
|
528
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
529
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
530
590
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, decorators: [{
|
|
532
592
|
type: Component,
|
|
533
593
|
args: [{
|
|
534
594
|
selector: 'LayoutFluid',
|
|
@@ -569,8 +629,8 @@ class LayoutNavigationComponent {
|
|
|
569
629
|
(layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
|
|
570
630
|
}, /* @ts-ignore */
|
|
571
631
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
572
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
573
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
632
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
574
634
|
@if (showsVerticalRail()) {
|
|
575
635
|
<div
|
|
576
636
|
aria-hidden="true"
|
|
@@ -593,7 +653,7 @@ class LayoutNavigationComponent {
|
|
|
593
653
|
<ng-content />
|
|
594
654
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
595
655
|
}
|
|
596
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
|
|
597
657
|
type: Component,
|
|
598
658
|
args: [{
|
|
599
659
|
selector: 'LayoutNavigation',
|
|
@@ -642,10 +702,10 @@ class LayoutContentComponent {
|
|
|
642
702
|
layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
|
|
643
703
|
}, /* @ts-ignore */
|
|
644
704
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
645
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
647
707
|
}
|
|
648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, decorators: [{
|
|
649
709
|
type: Component,
|
|
650
710
|
args: [{
|
|
651
711
|
selector: 'LayoutContent',
|