@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-theme-layout.mjs

@@ -1,7 +1,733 @@
-export * from '@ojiepermana/angular-theme/layout';
+import * as i0 from '@angular/core';
+import { inject, input, computed, DestroyRef, Component, effect, booleanAttribute, ElementRef } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { LayoutLoadingService, LayoutService } from '@ojiepermana/angular/theme/layout/services';
+export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular/theme/layout/services';
+import { LAYOUT_LOCKED_WIDTH, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH } from '@ojiepermana/angular/theme/layout/types';
+export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_LOCKED_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@ojiepermana/angular/theme/layout/types';
+import { DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd } from '@angular/router';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * A thin progress line along the top edge of the viewport, running left to right.
+ * `Layout` renders it automatically and `LayoutLoadingService` drives it, so it
+ * turns itself on while a route navigation or a data load is in flight.
+ *
+ * It can also be placed at the application root, so the bar is already up during
+ * the first navigation; any extra instance inside `Layout` goes inert on its own,
+ * and the line is never drawn twice.
+ */
+class LayoutLoadingComponent {
+    loading = inject(LayoutLoadingService);
+    hostId = this.loading.registerHost();
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Loading page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    isPrimary = computed(() => this.loading.primaryHostId() === this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []));
+    state = computed(() => {
+        if (!this.isPrimary()) {
+            return 'inert';
+        }
+        return this.loading.active() ? 'active' : 'idle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('pointer-events-none fixed inset-x-0 top-0 z-50 block h-0.5', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    roundedProgress = computed(() => Math.round(this.loading.progress()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundedProgress" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: { attributes: { "data-layout-loading": "" }, properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
+    @if (isPrimary() && loading.active()) {
+      <div
+        role="progressbar"
+        data-layout-loading-track
+        class="h-full w-full"
+        [attr.aria-label]="ariaLabel()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-valuenow]="roundedProgress()"
+      >
+        <div
+          data-layout-loading-bar
+          class="h-full rounded-r-full bg-primary transition-[width] duration-200 ease-out"
+          [style.width.%]="loading.progress()"
+        ></div>
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutLoading',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-layout-loading': '',
+                        '[attr.data-state]': 'state()',
+                    },
+                    template: `
+    @if (isPrimary() && loading.active()) {
+      <div
+        role="progressbar"
+        data-layout-loading-track
+        class="h-full w-full"
+        [attr.aria-label]="ariaLabel()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-valuenow]="roundedProgress()"
+      >
+        <div
+          data-layout-loading-bar
+          class="h-full rounded-r-full bg-primary transition-[width] duration-200 ease-out"
+          [style.width.%]="loading.progress()"
+        ></div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class LayoutComponent {
+    layout = inject(LayoutService);
+    surface = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    appearance = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    layoutAppearanceAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutAppearanceAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-appearance' });
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout type (`vertical` | `horizontal` | `empty` | `fluid`). When set it is the
+     * source of truth and overrides the projected `Layout*` variant; `null` leaves the
+     * variant in charge.
+     */
+    type = input(null, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'layout-type' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    appearanceInput = computed(() => this.appearance() ?? this.layoutAppearanceAttribute(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceInput" }] : /* istanbul ignore next */ []));
+    resolvedSurface = computed(() => this.surface() ?? this.layout.surface(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => this.appearanceInput() ?? this.layout.appearance(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    // The shell-mode lock outranks a host-declared width: on desktop, tablet, and
+    // mobile the app IS the surface, so there is no page for the frame to be inset
+    // within, whatever the consumer asked for.
+    resolvedWidth = computed(() => this.layout.widthLocked() ? LAYOUT_LOCKED_WIDTH : (this.width() ?? this.layout.width()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    resolvedType = computed(() => this.type() ?? this.layout.type(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => this.resolvedAppearance() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isFluidFrame = computed(() => this.resolvedWidth() === 'fluid' && this.resolvedType() === 'fluid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
+    isFullFlat = computed(() => this.resolvedWidth() === 'full' && !this.isBorderRail(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []));
+    // The `grid-line` surface forces square frame corners (like `border-rail`) so
+    // the mosaic grid runs cleanly to the edges instead of being clipped by the
+    // theme-radius curve.
+    isGridLineSurface = computed(() => this.resolvedSurface() === 'grid-line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isGridLineSurface" }] : /* istanbul ignore next */ []));
+    showsInsetRails = computed(() => {
+        const layoutType = this.resolvedType();
+        return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsInsetRails" }] : /* istanbul ignore next */ []));
+    frameStageClasses = computed(() => cn('relative grid min-h-0 min-w-0 grid-cols-1 grid-rows-1', this.frameSizeClasses()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameStageClasses" }] : /* istanbul ignore next */ []));
+    railAnchorClasses = computed(() => 'relative h-full min-h-0 w-full min-w-0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railAnchorClasses" }] : /* istanbul ignore next */ []));
+    contentShellClasses = computed(() => cn('relative z-10 min-h-0 min-w-0', this.isFluidFrame() ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.isBorderRail() ? 'overflow-visible' : 'overflow-hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(
+    // Size comes from --layout-viewport-height / -width so the layout can be
+    // nested. Height is 100dvh by default (the layout IS the viewport) and a
+    // <Shell> retunes it to `auto` so the titlebar keeps its own slice. Width is
+    // 100% by default; `frame='modern'` retunes it to `auto` so the shell's inset
+    // margins actually shrink the panel instead of pushing it off the window.
+    // These go through variables rather than being overridden in CSS because
+    // these are Tailwind UTILITIES — a rule in @layer components could never win
+    // against them, whatever its specificity.
+    'relative isolate h-[var(--layout-viewport-height,100dvh)] w-[var(--layout-viewport-width,100%)] min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => {
+        const gridLine = this.isGridLineSurface();
+        return cn(
+        // Solid frame (FluxUI-style): the panel stays --background (constant
+        // white / near-black) while the tinted --layout-canvas shows only around
+        // it. The old translucent veil (bg-background/55 + blur) is gone — the
+        // decorative host surfaces/rails no longer bleed through the frame.
+        'relative min-h-0 min-w-0 bg-background', this.frameSizeClasses(), 
+        // Frame border color:
+        // • border-rail → the accent-driven rail color var (--layout-rail-color / -opacity),
+        //   so the frame border (--layout-rail-width) matches the rail lines.
+        // • grid-line flat → the accent at --layout-grid-line-border-opacity (0.484).
+        // • everything else → --border.
+        this.isBorderRail()
+            ? 'border-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]'
+            : gridLine
+                ? 'border-[hsl(var(--accent-foreground)/var(--layout-grid-line-border-opacity))]'
+                : 'border-border', 
+        // flat: the outer frame rounds with the active theme-radius
+        // (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
+        // square corners for its grid-rail aesthetic. `grid-line` is always a clearly
+        // bordered square box (rounded-none + a visible border in every width) so the
+        // mosaic reads as a framed panel.
+        this.isBorderRail()
+            ? 'overflow-visible border-[length:var(--layout-rail-width)]'
+            : gridLine
+                ? 'overflow-hidden border rounded-none'
+                : this.isFullFlat()
+                    ? 'overflow-hidden'
+                    : 'overflow-hidden border rounded-[var(--layout-frame-radius)]');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const surface = this.surface();
+            if (surface !== null) {
+                this.layout.setSurface(surface, { persist: false });
+            }
+            else {
+                this.layout.registerSurface(LAYOUT_DEFAULT_SURFACE);
+            }
+            const appearance = this.appearanceInput();
+            if (appearance !== null) {
+                this.layout.setAppearance(appearance, { persist: false });
+            }
+            else {
+                this.layout.registerAppearance(LAYOUT_DEFAULT_APPEARANCE);
+            }
+            // While the shell mode locks the width, the incoming value is NOT recorded.
+            // Hosts commonly feed `width` straight back from `LayoutService.width()`, which
+            // already reports the locked width — writing that back would overwrite the
+            // user's real preference with the lock and lose it for good.
+            const width = this.width();
+            if (this.layout.widthLocked()) {
+                // no-op: resolvedWidth() forces the locked width regardless
+            }
+            else if (width !== null) {
+                this.layout.setWidth(width, { persist: false });
+            }
+            else {
+                this.layout.registerWidth(LAYOUT_DEFAULT_WIDTH);
+            }
+            // Type: bila consumer mendaftarkan `layout-type`, itu jadi sumber kebenaran (override
+            // variant). Bila null, dibiarkan — variant `Layout*` yang menetapkan (registerType default
+            // sengaja TIDAK dipanggil agar tidak menimpa type yang sudah di-set variant).
+            const type = this.type();
+            if (type !== null) {
+                this.layout.setType(type, { persist: false });
+            }
+        });
+    }
+    surfaceClasses() {
+        switch (this.resolvedSurface()) {
+            case 'grid':
+                // `grid`: two-axis 1px gradient. The line color is --layout-grid-color —
+                // the pattern LINE tier at --layout-grid-line-opacity (base/theme.css):
+                // the active theme-neutral's family hue (saturation-raised so it reads),
+                // or the accent at pinned lightness on theme-neutral='base'. Classic HSL
+                // triplets keep the same mapping without relative-color support.
+                return '[--layout-grid-size:2rem] bg-layout-canvas 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)]';
+            case 'grid-line':
+                // `grid-line`: a richer "mosaic" cousin of `grid`, painted by the
+                // `.layout-surface-grid-line` mask layer (base/components.css). One mask
+                // carries the faint uniform grid PLUS scattered bright highlight squares
+                // and a few subtly-lit cells, so the layers stay pixel-aligned. The glow
+                // is the pattern HIGHLIGHT tier: the active neutral family's hue, or the
+                // accent on theme-neutral='base' — lightness pinned to
+                // --layout-grid-highlight-l either way so brightness stays put. (The
+                // frame border stays accent on every neutral: it is chrome, not pattern.)
+                return 'bg-layout-canvas layout-surface-grid-line';
+            case 'honeycomb':
+                // True honeycomb: tileable hexagon outline painted by the
+                // `.layout-surface-honeycomb` mask layer (base/components.css), so it
+                // stays token-colored across themes. `bg-layout-canvas` is the base.
+                return 'bg-layout-canvas layout-surface-honeycomb';
+            case 'matrix':
+                // `matrix`: a scattered binary (0/1) field painted by the
+                // `.layout-surface-matrix` mask layer (base/components.css). The glyphs
+                // are tinted with the pattern NODE tier (the active neutral family's
+                // hue; `--primary` on theme-neutral='base') and carry
+                // baked-in per-glyph opacity, so the field reads as a soft "digital"
+                // signature that recolors with the neutral/theme.
+                return 'bg-layout-canvas layout-surface-matrix';
+            case 'circuit':
+                // `circuit`: a tileable PCB / circuit-board texture — routed traces with
+                // 45° bends, via nodes, and concentric ring pads. Painted by the
+                // `.layout-surface-circuit` class (base/components.css) as TWO stacked,
+                // pixel-aligned mask layers (a single mask only carries alpha, so two
+                // colors need two layers): `::before` strokes the copper traces in the
+                // pattern LINE tier (`--layout-circuit-trace-color`) and `::after`
+                // paints the via nodes/pads in the pattern NODE tier
+                // (`--layout-circuit-node-color`) — the neutral family's hue on every
+                // neutral except 'base', where the traces tint with the accent and the
+                // nodes glow with `--primary`. Both recolor across neutrals + dark mode.
+                return 'bg-layout-canvas layout-surface-circuit';
+            case 'line-vertical':
+                // Single-axis rules: --layout-line-color is the pattern LINE tier at
+                // --layout-grid-dot-opacity (a step above the dense multi-axis tier),
+                // composed in base/theme.css like --layout-grid-color.
+                return 'bg-layout-canvas bg-[linear-gradient(to_right,var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            case 'line-horizontal':
+                return 'bg-layout-canvas bg-[linear-gradient(var(--layout-line-color)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            default:
+                return 'bg-layout-canvas';
+        }
+    }
+    widthPaddingClasses() {
+        if (this.isFullFlat())
+            return '';
+        switch (this.resolvedWidth()) {
+            case 'wide':
+                return 'p-4 lg:p-12';
+            case 'container':
+                return 'p-4 lg:px-0 lg:py-16';
+            case 'fluid':
+                return 'p-4 sm:p-6 lg:p-8';
+            default:
+                return 'p-4'; // full + border-rail
+        }
+    }
+    frameSizeClasses() {
+        if (this.isFluidFrame()) {
+            return 'h-auto w-auto max-h-full max-w-full';
+        }
+        return this.resolvedWidth() === 'container'
+            ? 'h-full w-full lg:container lg:mx-auto'
+            : 'h-full w-full';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: { attributes: { "data-layout-root": "" }, 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: `
+    <LayoutLoading />
+
+    <div data-layout-stage [class]="frameStageClasses()">
+      @if (isBorderRail()) {
+        <div
+          aria-hidden="true"
+          data-layout-rail
+          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible"
+        >
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+
+            @if (showsInsetRails()) {
+              <div
+                data-layout-horizontal-top-rail
+                class="absolute inset-x-0 top-12 h-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-rail
+                class="absolute inset-x-0 bottom-12 h-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+
+              <div
+                data-layout-vertical-left-rail
+                class="absolute inset-y-0 -left-4 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-left-top-extension
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-left-bottom-extension
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-rail
+                class="absolute inset-y-0 -right-4 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-top-extension
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-bottom-extension
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+            }
+          </div>
+        </div>
+      }
+
+      <div data-layout-frame [class]="frameLayerClasses()">
+        <div data-layout-content-shell [class]="contentShellClasses()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Layout',
+                    imports: [LayoutLoadingComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-layout-root': '',
+                        '[attr.data-surface]': 'resolvedSurface()',
+                        '[attr.data-layout-appearance]': 'resolvedAppearance()',
+                        '[attr.data-layout-width]': 'resolvedWidth()',
+                        '[attr.data-layout-type]': 'resolvedType()',
+                    },
+                    template: `
+    <LayoutLoading />
+
+    <div data-layout-stage [class]="frameStageClasses()">
+      @if (isBorderRail()) {
+        <div
+          aria-hidden="true"
+          data-layout-rail
+          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible"
+        >
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+            ></div>
+
+            @if (showsInsetRails()) {
+              <div
+                data-layout-horizontal-top-rail
+                class="absolute inset-x-0 top-12 h-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-rail
+                class="absolute inset-x-0 bottom-12 h-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-(--layout-rail-width) w-[calc((100vw-100%)/2)] bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+
+              <div
+                data-layout-vertical-left-rail
+                class="absolute inset-y-0 -left-4 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-left-top-extension
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-left-bottom-extension
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-rail
+                class="absolute inset-y-0 -right-4 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-top-extension
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+              <div
+                data-layout-vertical-right-bottom-extension
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+              ></div>
+            }
+          </div>
+        </div>
+      }
+
+      <div data-layout-frame [class]="frameLayerClasses()">
+        <div data-layout-content-shell [class]="contentShellClasses()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], layoutAppearanceAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-appearance", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-type", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutVerticalComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid h-full min-h-0 w-full min-w-0 grid-cols-[auto_minmax(0,1fr)]', this.layout.appearance() === 'border-rail' ? 'overflow-visible' : 'overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('vertical', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutVertical',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-variant': '',
+                        'data-layout-type': 'vertical',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutHorizontalComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('horizontal', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutHorizontal',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-variant': '',
+                        'data-layout-type': 'horizontal',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutEmptyComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('h-full min-h-0 w-full min-w-0 overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('empty', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutEmpty',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-variant': '',
+                        'data-layout-type': 'empty',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutFluidComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid min-h-0 min-w-0 place-items-center overflow-auto', this.layout.width() === 'fluid' ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('fluid', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-variant": "", "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutFluidComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutFluid',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-variant': '',
+                        'data-layout-type': 'fluid',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutNavigationComponent {
+    layout = inject(LayoutService);
+    ariaLabel = input('Layout navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Turn off when the child `<Navigation>` is already the semantic navigation landmark. */
+    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        return cn('relative block min-h-0 min-w-0', layoutType === 'horizontal' &&
+            'h-(--layout-topbar-height) min-h-(--layout-topbar-height) w-full shrink-0 overflow-visible', 
+        // overflow-visible: clipping diatur host <Navigation>; overlay nav (aside
+        // drawer dockbar, preview rail) keluar dari kolom rail collapsed dan overflow-hidden
+        // di sini ikut ter-scroll oleh focus scroll-into-view sehingga rail hilang.
+        layoutType === 'vertical' && 'h-full w-max max-w-full shrink-0 overflow-visible', 
+        // empty & fluid = layout fokus-konten: slot nav boleh tetap diproyeksikan agar struktur
+        // konsumen seragam (`LayoutNavigation` + `LayoutContent`), tapi nav-nya disembunyikan.
+        (layoutType === 'empty' || layoutType === 'fluid') && 'hidden', this.class());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-navigation": "" }, properties: { "class": "classes()", "attr.role": "landmark() ? \"navigation\" : null", "attr.aria-label": "landmark() ? ariaLabel() || null : null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavigation',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-navigation': '',
+                        '[attr.role]': 'landmark() ? "navigation" : null',
+                        '[attr.aria-label]': 'landmark() ? ariaLabel() || null : null',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-appearance]': 'layout.appearance()',
+                    },
+                    template: ` <ng-content /> `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutContentComponent {
+    layout = inject(LayoutService);
+    document = inject(DOCUMENT, { optional: true });
+    host = inject((ElementRef));
+    router = inject(Router, { optional: true });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Stable target for the skip link. */
+    contentId = input('main-content', { ...(ngDevMode ? { debugName: "contentId" } : /* istanbul ignore next */ {}), alias: 'content-id' });
+    /** Move focus to the main landmark after NavigationEnd (opt-in). */
+    focusOnNavigation = input(false, { ...(ngDevMode ? { debugName: "focusOnNavigation" } : /* istanbul ignore next */ {}), alias: 'focus-on-navigation' });
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        return cn('block min-h-0 min-w-0 overflow-auto', layoutType === 'horizontal' && 'flex-1', layoutType === 'vertical' && 'h-full', layoutType === 'empty' && 'h-full w-full', 
+        // fluid: konten dipusatkan oleh LayoutFluid; batasi ke ukuran frame agar tetap scrollable.
+        layoutType === 'fluid' && 'max-h-full max-w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (!(event instanceof NavigationEnd) || !this.focusOnNavigation()) {
+                return;
+            }
+            const view = this.document?.defaultView;
+            if (!view) {
+                return;
+            }
+            view.requestAnimationFrame(() => this.host.nativeElement.focus());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "content-id", isSignal: true, isRequired: false, transformFunction: null }, focusOnNavigation: { classPropertyName: "focusOnNavigation", publicName: "focus-on-navigation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-content": "", "role": "main", "tabindex": "-1" }, properties: { "class": "classes()", "attr.id": "contentId()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutContent',
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-content': '',
+                        '[attr.id]': 'contentId()',
+                        role: 'main',
+                        tabindex: '-1',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-width]': 'layout.width()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-id", required: false }] }], focusOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "focus-on-navigation", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { LayoutComponent, LayoutContentComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutHorizontalComponent, LayoutLoadingComponent, LayoutNavigationComponent, LayoutVerticalComponent };