@edsis/ui 21.3.7 → 21.3.8

package/page/README.md

@@ -18,16 +18,96 @@ Primitive page shell untuk layout halaman dengan pendekatan nested component.
 - `stacked`
 - `side`
 
+## Scroll Modes
+
+- `content` (default): hanya `ui-page-content` yang menjadi area scroll. Pada variant `side`, `ui-page-side` dan `ui-page-content` sama-sama stretch ke parent dan masing-masing punya scroll sendiri.
+- `page`: seluruh isi `ui-page` menjadi area scroll. Header, content, footer, dan pada variant `side` juga `ui-page-side` akan mengikuti tinggi content induk tanpa scroll internal.
+
+## Height Modes
+
+- `auto` (default): tinggi `ui-page-header` dan `ui-page-footer` mengikuti isi.
+- `fix`: `ui-page-header` dan `ui-page-footer` dipaksa `h-12` dan `overflow-hidden`, sehingga isi yang melebihi tinggi tersebut akan terpotong.
+
+## Behavior Summary
+
+| Variant   | `scroll="content"`                                                                        | `scroll="page"`                                                                           |
+| --------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `stacked` | `ui-page-content` stretch ke tinggi yang tersedia dan menjadi area scroll                 | seluruh `ui-page` scroll bersama; header, content, footer ikut satu kanvas                |
+| `side`    | `ui-page-side` dan `ui-page-content` sama-sama stretch ke parent dan punya scroll sendiri | `ui-page-side` dan `ui-page-content` mengikuti tinggi content induk tanpa scroll internal |
+
+## Header And Footer Height
+
+Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang disediakan:
+
+- `ui-page-header`: `h-12` dengan `overflow-hidden`
+- `ui-page-footer`: `h-12` dengan `overflow-hidden`
+
 ## Side Modes
 
 - `sticky`
 - `drawer`
 - `overlay`
 
-## Example
+## Examples
+
+### Stacked with content scroll
+
+```html
+<ui-page variant="stacked">
+  <ui-page-header>
+    <h1>Executive summary</h1>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Secara default, slot content yang menjadi area scroll.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <button type="button">Save</button>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Stacked with fixed header and footer height
 
 ```html
-<ui-page variant="side" position="left">
+<ui-page variant="stacked" height="fix">
+  <ui-page-header>
+    <div class="h-20">Bagian ini akan terpotong ke tinggi h-12.</div>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Content tetap mengikuti mode scroll yang aktif.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <div class="h-20">Footer juga tidak boleh melebihi h-12.</div>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Stacked with page scroll
+
+```html
+<ui-page variant="stacked" scroll="page">
+  <ui-page-header>
+    <h1>Executive summary</h1>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Semua area di dalam page ikut scroll bersama.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <button type="button">Save</button>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Side with content scroll
+
+```html
+<ui-page variant="side" position="left" scroll="content">
   <ui-page-header>
     <ui-page-side-toggle ariaLabel="Toggle side">
       <span>Open filters</span>
@@ -35,12 +115,30 @@ Primitive page shell untuk layout halaman dengan pendekatan nested component.
     <h1>Page title</h1>
   </ui-page-header>
 
-  <ui-page-side mode="overlay">
-    <p>Filters</p>
+  <ui-page-side mode="sticky">
+    <p>Side rail scroll sendiri.</p>
+  </ui-page-side>
+
+  <ui-page-content>
+    <p>Main content juga scroll sendiri.</p>
+  </ui-page-content>
+</ui-page>
+```
+
+### Side with page scroll
+
+```html
+<ui-page variant="side" position="left" scroll="page">
+  <ui-page-header>
+    <h1>Executive detail</h1>
+  </ui-page-header>
+
+  <ui-page-side mode="sticky">
+    <p>Side mengikuti tinggi content induk.</p>
   </ui-page-side>
 
   <ui-page-content>
-    <p>Main content</p>
+    <p>Root `ui-page` yang menjadi area scroll tunggal.</p>
   </ui-page-content>
 </ui-page>
 ```

package/types/edsis-ui-editor.d.ts

@@ -114,6 +114,7 @@ declare class EditorContentComponent implements AfterViewInit, OnDestroy, Contro
     protected handleBlur(): void;
     protected handleKeydown(event: KeyboardEvent): void;
     private exec;
+    private highlightColor;
     private syncEmptyState;
     private shortcutCommand;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorContentComponent, never>;

package/types/edsis-ui-page.d.ts

@@ -3,19 +3,29 @@ import * as _angular_core from '@angular/core';
 declare const UI_PAGE_VARIANTS: readonly ["stacked", "side"];
 declare const UI_PAGE_SIDE_POSITIONS: readonly ["left", "right"];
 declare const UI_PAGE_SIDE_MODES: readonly ["sticky", "drawer", "overlay"];
+declare const UI_PAGE_SCROLL_VALUES: readonly ["content", "page"];
+declare const UI_PAGE_HEIGHT_VALUES: readonly ["auto", "fix"];
 type UiPageVariant = (typeof UI_PAGE_VARIANTS)[number];
 type UiPageSidePosition = (typeof UI_PAGE_SIDE_POSITIONS)[number];
 type UiPageSideMode = (typeof UI_PAGE_SIDE_MODES)[number];
+type UiPageScroll = (typeof UI_PAGE_SCROLL_VALUES)[number];
+type UiPageHeight = (typeof UI_PAGE_HEIGHT_VALUES)[number];
 declare const UI_PAGE_DEFAULT_VARIANT: UiPageVariant;
 declare const UI_PAGE_DEFAULT_SIDE_POSITION: UiPageSidePosition;
 declare const UI_PAGE_DEFAULT_SIDE_MODE: UiPageSideMode;
+declare const UI_PAGE_DEFAULT_SCROLL: UiPageScroll;
+declare const UI_PAGE_DEFAULT_HEIGHT: UiPageHeight;
 declare const UI_PAGE_DEFAULT_SIDE_WIDTH = "16rem";
 declare function isUiPageVariant(value: string | null): value is UiPageVariant;
 declare function isUiPageSidePosition(value: string | null): value is UiPageSidePosition;
 declare function isUiPageSideMode(value: string | null): value is UiPageSideMode;
+declare function isUiPageScroll(value: string | null): value is UiPageScroll;
+declare function isUiPageHeight(value: string | null): value is UiPageHeight;
 
 declare class UiPageStateService {
     private readonly variantState;
+    private readonly heightState;
+    private readonly scrollState;
     private readonly positionState;
     private readonly sideModeState;
     private readonly internalSideOpenState;
@@ -25,6 +35,8 @@ declare class UiPageStateService {
     private readonly sideOpenRequestState;
     private readonly sideOpenRequestVersionState;
     readonly variant: _angular_core.Signal<"stacked" | "side">;
+    readonly height: _angular_core.Signal<"auto" | "fix">;
+    readonly scroll: _angular_core.Signal<"content" | "page">;
     readonly position: _angular_core.Signal<"left" | "right">;
     readonly sideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     readonly sideWidth: _angular_core.Signal<string>;
@@ -36,6 +48,8 @@ declare class UiPageStateService {
     readonly isSideVisible: _angular_core.Signal<boolean>;
     registerRoot(config: {
         variant: UiPageVariant;
+        height: UiPageHeight;
+        scroll: UiPageScroll;
         position: UiPageSidePosition;
         sideMode: UiPageSideMode;
         sideWidth: string;
@@ -71,6 +85,7 @@ declare class UiPageSideComponent {
     protected readonly isSticky: _angular_core.Signal<boolean>;
     protected readonly isDrawer: _angular_core.Signal<boolean>;
     protected readonly isOverlay: _angular_core.Signal<boolean>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
     protected readonly ariaHidden: _angular_core.Signal<"true" | null>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
@@ -82,6 +97,8 @@ declare class UiPageComponent {
     protected readonly page: UiPageStateService;
     protected readonly projectedSide: _angular_core.Signal<UiPageSideComponent | undefined>;
     readonly variant: _angular_core.InputSignal<"stacked" | "side">;
+    readonly height: _angular_core.InputSignal<"auto" | "fix">;
+    readonly scroll: _angular_core.InputSignal<"content" | "page">;
     readonly position: _angular_core.InputSignal<"left" | "right">;
     readonly sideMode: _angular_core.InputSignal<"sticky" | "drawer" | "overlay">;
     readonly sideOpen: _angular_core.InputSignal<boolean | null>;
@@ -99,7 +116,7 @@ declare class UiPageComponent {
     constructor();
     protected handleBackdropClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content", "ui-page-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content", "ui-page-footer"], true, never>;
 }
 
 declare class UiPageSideToggleComponent {
@@ -115,23 +132,29 @@ declare class UiPageSideToggleComponent {
 }
 
 declare class UiPageHeaderComponent {
+    private readonly page;
     readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageHeaderComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageHeaderComponent, "ui-page-header", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class UiPageContentComponent {
+    private readonly page;
     readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageContentComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageContentComponent, "ui-page-content", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class UiPageFooterComponent {
+    private readonly page;
     readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageFooterComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageFooterComponent, "ui-page-footer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
-export type { UiPageSideMode, UiPageSidePosition, UiPageVariant };
+export { UI_PAGE_DEFAULT_HEIGHT, UI_PAGE_DEFAULT_SCROLL, UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_HEIGHT_VALUES, UI_PAGE_SCROLL_VALUES, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
+export type { UiPageHeight, UiPageScroll, UiPageSideMode, UiPageSidePosition, UiPageVariant };

package/types/edsis-ui-theme.d.ts

@@ -4,9 +4,11 @@ import { InjectionToken, EnvironmentProviders } from '@angular/core';
 declare const THEME_MODES: readonly ["light", "dark", "system"];
 declare const RESOLVED_THEME_MODES: readonly ["light", "dark"];
 declare const THEME_SEASONS: readonly ["base", "imlek", "ramadhan", "ied", "natal", "new-year"];
+type ThemeBrand = string;
 type ThemeMode = (typeof THEME_MODES)[number];
 type ResolvedThemeMode = (typeof RESOLVED_THEME_MODES)[number];
 type ThemeSeason = (typeof THEME_SEASONS)[number];
+declare const DEFAULT_THEME_BRAND: ThemeBrand;
 declare const DEFAULT_THEME_MODE: ThemeMode;
 declare const DEFAULT_THEME_SEASON: ThemeSeason;
 declare const THEME_MODE_STORAGE_KEY = "theme-mode";
@@ -15,9 +17,11 @@ declare function isThemeMode(value: string | null | undefined): value is ThemeMo
 declare function isResolvedThemeMode(value: string | null | undefined): value is ResolvedThemeMode;
 declare function isThemeSeason(value: string | null | undefined): value is ThemeSeason;
 declare function normalizeThemeMode(value: string | null | undefined): ThemeMode;
+declare function normalizeThemeBrand(value: string | null | undefined): ThemeBrand;
 declare function normalizeThemeSeason(value: string | null | undefined): ThemeSeason;
 
 interface UiThemeOptions {
+    readonly brand?: ThemeBrand;
     readonly mode?: ThemeMode;
     readonly season?: ThemeSeason;
 }
@@ -67,5 +71,5 @@ declare class ThemeSeasonService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSeasonService>;
 }
 
-export { DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
-export type { ResolvedThemeMode, ThemeMode, ThemeSeason, UiThemeOptions };
+export { DEFAULT_THEME_BRAND, DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeBrand, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
+export type { ResolvedThemeMode, ThemeBrand, ThemeMode, ThemeSeason, UiThemeOptions };