npm - @ojiepermana/angular-theme - Versions diffs - 22.0.32 → 22.0.34 - Mend

@ojiepermana/angular-theme 22.0.32 → 22.0.34

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.

Files changed (10) hide show

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

@@ -3,8 +3,8 @@ import { inject, input, computed, DestroyRef, Component, effect, ChangeDetection
 import { cn } from '@ojiepermana/angular-component/utils';
 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_DEFAULT_SURFACE, LAYOUT_DEFAULT_STYLE, LAYOUT_DEFAULT_WIDTH } from '@ojiepermana/angular-theme/layout/types';
-export { LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_STYLE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_STYLES, LAYOUT_STYLE_STORAGE_KEY, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@ojiepermana/angular-theme/layout/types';
+import { 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_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 { NavigationContainerComponent } from '@ojiepermana/angular-navigation';
 /**
@@ -92,27 +92,32 @@ class LayoutComponent {
     ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
     appearance = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    layoutStyleAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutStyleAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-style' });
+    layoutAppearanceAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutAppearanceAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-appearance' });
     width = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Tipe layout (`vertical` | `horizontal` | `empty` | `fluid`). Bila di-set, menjadi sumber
+     * kebenaran tipe (override variant `Layout*`); bila `null`, variant yang menetapkan.
+     */
+    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.layoutStyleAttribute(), /* @ts-ignore */
+    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 */ []));
-    resolvedStyle = computed(() => this.layout.appearance(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedStyle" }] : /* istanbul ignore next */ []));
     resolvedWidth = computed(() => 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.layout.type() === 'fluid', /* @ts-ignore */
+    isFluidFrame = computed(() => this.resolvedWidth() === 'fluid' && this.resolvedType() === 'fluid', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
     showsInsetRails = computed(() => {
-        const layoutType = this.layout.type();
+        const layoutType = this.resolvedType();
         return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showsInsetRails" }] : /* istanbul ignore next */ []));
@@ -142,7 +147,7 @@ class LayoutComponent {
                 this.layout.setAppearance(appearance, { persist: false });
             }
             else {
-                this.layout.registerAppearance(LAYOUT_DEFAULT_STYLE);
+                this.layout.registerAppearance(LAYOUT_DEFAULT_APPEARANCE);
             }
             const width = this.width();
             if (width !== null) {
@@ -151,6 +156,13 @@ class LayoutComponent {
             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() {
@@ -183,10 +195,12 @@ class LayoutComponent {
         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';
+        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.0.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, layoutStyleAttribute: { classPropertyName: "layoutStyleAttribute", publicName: "layout-style", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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-style": "resolvedStyle()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "layout.type()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: `
     <LayoutLoading />
     <div data-layout-stage [class]="frameStageClasses()">
@@ -194,63 +208,92 @@ class LayoutComponent {
         <div
           aria-hidden="true"
           data-layout-rail
-          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible">
+          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-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-top-left-vertical
-              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-top-right-horizontal
-              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-top-right-vertical
-              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-left-horizontal
-              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-left-vertical
-              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-right-horizontal
-              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-right-vertical
-              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             @if (showsInsetRails()) {
-              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-top-rail
+                class="absolute inset-x-0 top-12 h-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-top-left-extension
-                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-top-right-extension
-                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
-              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"></div>
+                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-rail
+                class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-bottom-left-extension
-                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-bottom-right-extension
-                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
-              <div data-layout-vertical-left-rail class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-rail
+                class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-left-top-extension
-                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-left-bottom-extension
-                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
-              <div data-layout-vertical-right-rail class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"></div>
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
+              <div
+                data-layout-vertical-right-rail
+                class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-right-top-extension
-                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-right-bottom-extension
-                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
             }
           </div>
         </div>
@@ -274,9 +317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[class]': 'hostClasses()',
                         '[attr.data-surface]': 'resolvedSurface()',
                         '[attr.data-layout-appearance]': 'resolvedAppearance()',
-                        '[attr.data-layout-style]': 'resolvedStyle()',
                         '[attr.data-layout-width]': 'resolvedWidth()',
-                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-type]': 'resolvedType()',
                     },
                     template: `
     <LayoutLoading />
@@ -286,63 +328,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         <div
           aria-hidden="true"
           data-layout-rail
-          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible">
+          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-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-top-left-vertical
-              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-top-right-horizontal
-              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-top-right-vertical
-              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-left-horizontal
-              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-left-vertical
-              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-right-horizontal
-              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+            ></div>
             <div
               data-layout-rail-bottom-right-vertical
-              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+            ></div>
             @if (showsInsetRails()) {
-              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-top-rail
+                class="absolute inset-x-0 top-12 h-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-top-left-extension
-                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-top-right-extension
-                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
-              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"></div>
+                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
+              <div
+                data-layout-horizontal-bottom-rail
+                class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-bottom-left-extension
-                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
               <div
                 data-layout-horizontal-bottom-right-extension
-                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"
+              ></div>
-              <div data-layout-vertical-left-rail class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-rail
+                class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-left-top-extension
-                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-left-bottom-extension
-                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
-              <div data-layout-vertical-right-rail class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"></div>
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
+              <div
+                data-layout-vertical-right-rail
+                class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-right-top-extension
-                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
               <div
                 data-layout-vertical-right-bottom-extension
-                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+              ></div>
             }
           </div>
         </div>
@@ -356,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </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 }] }], layoutStyleAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-style", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], 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);
@@ -480,24 +551,30 @@ class LayoutNavigationComponent {
         // overflow-visible: clipping diatur host <Navigation>; overlay nav (aside
         // drawer dockbar, preview rail) keluar dari kolom w-16 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', layoutType === 'empty' && 'hidden', this.class());
+        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.0.2", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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-style": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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: `
     @if (showsVerticalRail()) {
       <div
         aria-hidden="true"
         data-layout-nav-rail
         class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
-        [style.transform]="railTransform()">
+        [style.transform]="railTransform()"
+      >
         <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
         <div
           data-layout-nav-rail-top
-          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+        ></div>
         <div
           data-layout-nav-rail-bottom
-          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+        ></div>
       </div>
     }
@@ -515,7 +592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.data-layout-type]': 'layout.type()',
                         '[attr.data-layout-appearance]': 'layout.appearance()',
-                        '[attr.data-layout-style]': 'layout.appearance()',
                         '[attr.data-layout-nav-rail-offset]': 'resolvedRailOffset()',
                     },
                     template: `
@@ -524,14 +600,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         aria-hidden="true"
         data-layout-nav-rail
         class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
-        [style.transform]="railTransform()">
+        [style.transform]="railTransform()"
+      >
         <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
         <div
           data-layout-nav-rail-top
-          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+        ></div>
         <div
           data-layout-nav-rail-bottom
-          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+        ></div>
       </div>
     }
@@ -546,7 +625,9 @@ class LayoutContentComponent {
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     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', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
+        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 */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });