@ojiepermana/angular 21.3.3 → 22.0.1

package/fesm2022/ojiepermana-angular-layout-component.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-component.mjs","sources":["../../../projects/angular/layout/component/src/lib/theme-panel.component.ts","../../../projects/angular/layout/component/ojiepermana-angular-layout-component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  InjectionToken,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  type Signal,\n} from '@angular/core';\nimport { DomSanitizer, type SafeHtml } from '@angular/platform-browser';\nimport { ButtonComponent } from '@ojiepermana/angular/component/button';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type ThemePanelColor =\n  | 'base'\n  | 'red'\n  | 'orange'\n  | 'amber'\n  | 'yellow'\n  | 'lime'\n  | 'green'\n  | 'emerald'\n  | 'teal'\n  | 'cyan'\n  | 'sky'\n  | 'blue'\n  | 'indigo'\n  | 'violet'\n  | 'purple'\n  | 'fuchsia'\n  | 'pink'\n  | 'rose';\n\nexport type ThemePanelMode = 'light' | 'dark' | 'system';\n\nexport type ThemePanelStyle = 'default' | 'sharp' | 'brutal' | 'soft';\n\nexport type ThemePanelLayoutMode = 'vertical' | 'horizontal' | 'empty';\n\nexport type ThemePanelLayoutWidth = 'full' | 'container' | 'wide';\n\nexport interface ThemePanelThemePort {\n  readonly color: Signal<ThemePanelColor>;\n  readonly scheme: Signal<ThemePanelMode>;\n  readonly style: Signal<ThemePanelStyle>;\n  setColor(color: ThemePanelColor): void;\n  setScheme(mode: ThemePanelMode): void;\n  setStyle(style: ThemePanelStyle): void;\n}\n\nexport interface ThemePanelLayoutPort {\n  readonly mode: Signal<ThemePanelLayoutMode>;\n  readonly width: Signal<ThemePanelLayoutWidth>;\n  setMode(mode: ThemePanelLayoutMode): void;\n  setWidth(width: ThemePanelLayoutWidth): void;\n}\n\nexport const THEME_PANEL_THEME_PORT = new InjectionToken<ThemePanelThemePort>('THEME_PANEL_THEME_PORT');\n\nexport const THEME_PANEL_LAYOUT_PORT = new InjectionToken<ThemePanelLayoutPort>('THEME_PANEL_LAYOUT_PORT');\n\ntype ThemePanelIconName =\n  | 'sun'\n  | 'moon'\n  | 'system'\n  | 'default-style'\n  | 'sharp-style'\n  | 'brutal-style'\n  | 'soft-style'\n  | 'vertical-layout'\n  | 'horizontal-layout'\n  | 'empty-layout'\n  | 'full-width'\n  | 'container-width'\n  | 'wide-width';\n\ninterface ThemePanelOption<T extends string> {\n  readonly value: T;\n  readonly label: string;\n  readonly icon?: ThemePanelIconName;\n  readonly swatchClass?: string;\n}\n\nconst THEME_COLOR_OPTIONS = [\n  { value: 'base', label: 'Base', swatchClass: 'bg-zinc-800' },\n  { value: 'red', label: 'Red', swatchClass: 'bg-red-500' },\n  { value: 'orange', label: 'Orange', swatchClass: 'bg-orange-500' },\n  { value: 'amber', label: 'Amber', swatchClass: 'bg-amber-400' },\n  { value: 'yellow', label: 'Yellow', swatchClass: 'bg-yellow-400' },\n  { value: 'lime', label: 'Lime', swatchClass: 'bg-lime-400' },\n  { value: 'green', label: 'Green', swatchClass: 'bg-green-600' },\n  { value: 'emerald', label: 'Emerald', swatchClass: 'bg-emerald-600' },\n  { value: 'teal', label: 'Teal', swatchClass: 'bg-teal-600' },\n  { value: 'cyan', label: 'Cyan', swatchClass: 'bg-cyan-600' },\n  { value: 'sky', label: 'Sky', swatchClass: 'bg-sky-600' },\n  { value: 'blue', label: 'Blue', swatchClass: 'bg-blue-500' },\n  { value: 'indigo', label: 'Indigo', swatchClass: 'bg-indigo-500' },\n  { value: 'violet', label: 'Violet', swatchClass: 'bg-violet-500' },\n  { value: 'purple', label: 'Purple', swatchClass: 'bg-purple-500' },\n  { value: 'fuchsia', label: 'Fuchsia', swatchClass: 'bg-fuchsia-600' },\n  { value: 'pink', label: 'Pink', swatchClass: 'bg-pink-600' },\n  { value: 'rose', label: 'Rose', swatchClass: 'bg-rose-500' },\n] as const satisfies readonly ThemePanelOption<ThemePanelColor>[];\n\nconst THEME_MODE_OPTIONS = [\n  { value: 'light', label: 'Light', icon: 'sun' },\n  { value: 'dark', label: 'Dark', icon: 'moon' },\n  { value: 'system', label: 'System', icon: 'system' },\n] as const satisfies readonly ThemePanelOption<ThemePanelMode>[];\n\nconst THEME_STYLE_OPTIONS = [\n  { value: 'default', label: 'Default', icon: 'default-style' },\n  { value: 'sharp', label: 'Sharp', icon: 'sharp-style' },\n  { value: 'brutal', label: 'Brutal', icon: 'brutal-style' },\n  { value: 'soft', label: 'Soft', icon: 'soft-style' },\n] as const satisfies readonly ThemePanelOption<ThemePanelStyle>[];\n\nconst LAYOUT_MODE_OPTIONS = [\n  { value: 'vertical', label: 'Vertical', icon: 'vertical-layout' },\n  { value: 'horizontal', label: 'Horizontal', icon: 'horizontal-layout' },\n  { value: 'empty', label: 'Empty', icon: 'empty-layout' },\n] as const satisfies readonly ThemePanelOption<ThemePanelLayoutMode>[];\n\nconst LAYOUT_WIDTH_OPTIONS = [\n  { value: 'full', label: 'Full', icon: 'full-width' },\n  { value: 'container', label: 'Container', icon: 'container-width' },\n  { value: 'wide', label: 'Wide', icon: 'wide-width' },\n] as const satisfies readonly ThemePanelOption<ThemePanelLayoutWidth>[];\n\n@Component({\n  selector: 'ui-theme-panel',\n  imports: [ButtonComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  template: `\n    <div class=\"flex flex-col gap-4 p-4\">\n      @if (hasUserHeader()) {\n        <header class=\"flex items-center gap-3 px-1 pt-1\">\n          <span class=\"flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary\">\n            <span\n              class=\"flex size-11 items-center justify-center rounded-full bg-primary text-xs font-semibold tracking-[0.22em] text-primary-foreground\">\n              {{ resolvedUserInitials() }}\n            </span>\n          </span>\n\n          <div class=\"min-w-0 flex-1\">\n            <h2 class=\"truncate text-[1.05rem] font-semibold leading-none tracking-tight text-foreground\">\n              {{ userName() }}\n            </h2>\n            @if (userSubtitle(); as subtitle) {\n              <p class=\"mt-1 text-sm leading-none text-muted-foreground\">{{ subtitle }}</p>\n            }\n          </div>\n        </header>\n      } @else {\n        <header class=\"space-y-1 px-1 pt-1\">\n          <h2 class=\"text-base font-semibold tracking-tight text-foreground\">{{ title() }}</h2>\n          @if (description(); as text) {\n            <p class=\"text-sm leading-6 text-muted-foreground\">{{ text }}</p>\n          }\n        </header>\n      }\n\n      <div class=\"grid gap-4\">\n        <section data-setting=\"theme-mode\" [attr.data-current]=\"currentThemeMode()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Mode</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Theme mode\">\n              @for (option of themeModeOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-mode\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentThemeMode() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentThemeMode() === option.value)\"\n                  (click)=\"setThemeMode(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentThemeMode() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"theme-color\" [attr.data-current]=\"currentThemeColor()\" class=\"space-y-2\">\n          <div class=\"flex items-center justify-between gap-3 px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Color</p>\n            <p class=\"text-xs font-semibold text-muted-foreground\">{{ currentThemeColorLabel() }}</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-1\">\n            <div class=\"grid grid-cols-6 justify-items-center gap-1\" role=\"group\" aria-label=\"Theme color\">\n              @for (option of themeColorOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"icon\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-color\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-label]=\"'Theme color ' + option.label\"\n                  [attr.aria-pressed]=\"currentThemeColor() === option.value\"\n                  [class]=\"swatchButtonClasses(currentThemeColor() === option.value)\"\n                  (click)=\"setThemeColor(option.value)\">\n                  <span\n                    aria-hidden=\"true\"\n                    [class]=\"colorSwatchClasses(option.swatchClass, currentThemeColor() === option.value)\"></span>\n                  <span class=\"sr-only\">{{ option.label }}</span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"theme-style\" [attr.data-current]=\"currentThemeStyle()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Style</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-2 gap-1 sm:grid-cols-4\" role=\"group\" aria-label=\"Theme style\">\n              @for (option of themeStyleOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-style\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentThemeStyle() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentThemeStyle() === option.value)\"\n                  (click)=\"setThemeStyle(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentThemeStyle() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"layout-mode\" [attr.data-current]=\"currentLayoutMode()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Layout</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Layout mode\">\n              @for (option of layoutModeOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"layout-mode\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentLayoutMode() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentLayoutMode() === option.value)\"\n                  (click)=\"setLayoutMode(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentLayoutMode() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"layout-width\" [attr.data-current]=\"currentLayoutWidth()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Width</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Layout width\">\n              @for (option of layoutWidthOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"layout-width\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentLayoutWidth() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentLayoutWidth() === option.value)\"\n                  (click)=\"setLayoutWidth(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentLayoutWidth() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  `,\n})\nexport class ThemePanelComponent {\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly themePort = inject(THEME_PANEL_THEME_PORT, { optional: true });\n  private readonly layoutPort = inject(THEME_PANEL_LAYOUT_PORT, { optional: true });\n\n  readonly connected = input<boolean>(true);\n  readonly class = input<string>('');\n  readonly title = input<string>('Theme panel');\n  readonly description = input<string>('');\n  readonly userName = input<string>('');\n  readonly userSubtitle = input<string>('');\n  readonly userInitials = input<string>('');\n  readonly themeColor = input<ThemePanelColor>('base');\n  readonly themeMode = input<ThemePanelMode>('light');\n  readonly themeStyle = input<ThemePanelStyle>('default');\n  readonly layoutMode = input<ThemePanelLayoutMode>('vertical');\n  readonly layoutWidth = input<ThemePanelLayoutWidth>('container');\n\n  readonly themeColorChange = output<ThemePanelColor>();\n  readonly themeModeChange = output<ThemePanelMode>();\n  readonly themeStyleChange = output<ThemePanelStyle>();\n  readonly layoutModeChange = output<ThemePanelLayoutMode>();\n  readonly layoutWidthChange = output<ThemePanelLayoutWidth>();\n\n  protected readonly currentThemeColor = signal<ThemePanelColor>(this.themeColor());\n  protected readonly currentThemeMode = signal<ThemePanelMode>(this.themeMode());\n  protected readonly currentThemeStyle = signal<ThemePanelStyle>(this.themeStyle());\n  protected readonly currentLayoutMode = signal<ThemePanelLayoutMode>(this.layoutMode());\n  protected readonly currentLayoutWidth = signal<ThemePanelLayoutWidth>(this.layoutWidth());\n\n  protected readonly themeColorOptions = THEME_COLOR_OPTIONS;\n  protected readonly themeModeOptions = THEME_MODE_OPTIONS;\n  protected readonly themeStyleOptions = THEME_STYLE_OPTIONS;\n  protected readonly layoutModeOptions = LAYOUT_MODE_OPTIONS;\n  protected readonly layoutWidthOptions = LAYOUT_WIDTH_OPTIONS;\n\n  protected readonly hostClasses = computed(() =>\n    cn('block overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-sm', this.class()),\n  );\n  protected readonly hasUserHeader = computed(() => !!this.userName().trim() || !!this.userSubtitle().trim());\n  protected readonly resolvedUserInitials = computed(\n    () => this.userInitials().trim() || this.toInitials(this.userName() || this.title()),\n  );\n  protected readonly currentThemeColorLabel = computed(\n    () => this.themeColorOptions.find((option) => option.value === this.currentThemeColor())?.label ?? '',\n  );\n\n  constructor() {\n    effect(() => {\n      this.currentThemeColor.set(this.connected() && this.themePort ? this.themePort.color() : this.themeColor());\n    });\n    effect(() => {\n      this.currentThemeMode.set(this.connected() && this.themePort ? this.themePort.scheme() : this.themeMode());\n    });\n    effect(() => {\n      this.currentThemeStyle.set(this.connected() && this.themePort ? this.themePort.style() : this.themeStyle());\n    });\n    effect(() => {\n      this.currentLayoutMode.set(this.connected() && this.layoutPort ? this.layoutPort.mode() : this.layoutMode());\n    });\n    effect(() => {\n      this.currentLayoutWidth.set(this.connected() && this.layoutPort ? this.layoutPort.width() : this.layoutWidth());\n    });\n  }\n\n  protected setThemeColor(color: ThemePanelColor): void {\n    this.currentThemeColor.set(color);\n    this.themePort?.setColor(color);\n    this.themeColorChange.emit(color);\n  }\n\n  protected setThemeMode(mode: ThemePanelMode): void {\n    this.currentThemeMode.set(mode);\n    this.themePort?.setScheme(mode);\n    this.themeModeChange.emit(mode);\n  }\n\n  protected setThemeStyle(style: ThemePanelStyle): void {\n    this.currentThemeStyle.set(style);\n    this.themePort?.setStyle(style);\n    this.themeStyleChange.emit(style);\n  }\n\n  protected setLayoutMode(mode: ThemePanelLayoutMode): void {\n    this.currentLayoutMode.set(mode);\n    this.layoutPort?.setMode(mode);\n    this.layoutModeChange.emit(mode);\n  }\n\n  protected setLayoutWidth(width: ThemePanelLayoutWidth): void {\n    this.currentLayoutWidth.set(width);\n    this.layoutPort?.setWidth(width);\n    this.layoutWidthChange.emit(width);\n  }\n\n  protected sectionEyebrowClasses(): string {\n    return 'text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground';\n  }\n\n  protected segmentedOptionClasses(active: boolean): string {\n    return cn(\n      'rounded-[calc(var(--layout-frame-radius)-2px)] px-3',\n      active\n        ? 'border border-border/70 bg-background shadow-sm hover:bg-background'\n        : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',\n    );\n  }\n\n  protected swatchButtonClasses(active: boolean): string {\n    return cn(\n      'size-9 rounded-full p-0',\n      active\n        ? 'border border-border/70 bg-background shadow-sm hover:bg-background'\n        : 'border border-transparent hover:bg-background/70',\n    );\n  }\n\n  protected optionIconClasses(active: boolean): string {\n    return cn(\n      'inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4',\n      active ? 'text-foreground' : 'text-muted-foreground',\n    );\n  }\n\n  protected colorSwatchClasses(swatchClass: string | undefined, isActive: boolean): string {\n    return cn(\n      'size-4 rounded-full border border-black/10 shadow-sm',\n      swatchClass,\n      isActive ? 'ring-2 ring-ring ring-offset-2 ring-offset-background' : '',\n    );\n  }\n\n  protected iconSvg(name: ThemePanelIconName): SafeHtml {\n    return this.sanitizer.bypassSecurityTrustHtml(this.rawIconSvg(name));\n  }\n\n  private rawIconSvg(name: ThemePanelIconName): string {\n    switch (name) {\n      case 'sun':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2.5v2.2\"></path><path d=\"M12 19.3v2.2\"></path><path d=\"M4.93 4.93 6.5 6.5\"></path><path d=\"M17.5 17.5 19.07 19.07\"></path><path d=\"M2.5 12h2.2\"></path><path d=\"M19.3 12h2.2\"></path><path d=\"M4.93 19.07 6.5 17.5\"></path><path d=\"M17.5 6.5 19.07 4.93\"></path></svg>';\n      case 'moon':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.4 14.8A8.8 8.8 0 1 1 9.2 3.6a7.2 7.2 0 0 0 11.2 11.2Z\"></path></svg>';\n      case 'system':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"4.5\" width=\"17\" height=\"11.5\" rx=\"1.8\"></rect><path d=\"M9 19.5h6\"></path><path d=\"M12 16v3.5\"></path></svg>';\n      case 'default-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"4\"></rect></svg>';\n      case 'sharp-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"1\"></rect></svg>';\n      case 'brutal-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 7.5h14\"></path><path d=\"M5 12h14\"></path><path d=\"M5 16.5h14\"></path></svg>';\n      case 'soft-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7.5 9A4.5 4.5 0 0 1 12 4.5h1A4.5 4.5 0 0 1 17.5 9v1A4.5 4.5 0 0 1 13 14.5h-1A4.5 4.5 0 0 1 7.5 10Z\"></path><path d=\"M6.5 15.5c1.3 2 3.2 3 5.5 3s4.2-1 5.5-3\"></path></svg>';\n      case 'vertical-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\"></rect><path d=\"M9 5v14\"></path></svg>';\n      case 'horizontal-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\"></rect><path d=\"M4 10h16\"></path></svg>';\n      case 'empty-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"5.5\" width=\"15\" height=\"13\" rx=\"2\"></rect></svg>';\n      case 'full-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8V5h3\"></path><path d=\"M20 8V5h-3\"></path><path d=\"M4 16v3h3\"></path><path d=\"M20 16v3h-3\"></path><path d=\"M8 5H4\"></path><path d=\"M20 5h-4\"></path><path d=\"M8 19H4\"></path><path d=\"M20 19h-4\"></path></svg>';\n      case 'container-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"></rect><path d=\"M9 9.5h6\"></path><path d=\"M9 14.5h6\"></path></svg>';\n      case 'wide-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"></rect><path d=\"M7 9.5h10\"></path><path d=\"M7 14.5h10\"></path></svg>';\n    }\n  }\n\n  private toInitials(value: string): string {\n    const words = value\n      .split(/\\s+/)\n      .map((item) => item.trim())\n      .filter(Boolean)\n      .slice(0, 2);\n\n    if (!words.length) {\n      return 'UI';\n    }\n\n    return words.map((word) => word[0]?.toUpperCase() ?? '').join('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-layout-component.mjs","sources":["../../../projects/angular/layout/component/theme-panel.component.ts","../../../projects/angular/layout/component/ojiepermana-angular-layout-component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  InjectionToken,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  type Signal,\n} from '@angular/core';\nimport { DomSanitizer, type SafeHtml } from '@angular/platform-browser';\nimport { ButtonComponent } from '@ojiepermana/angular/component/button';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type ThemePanelColor =\n  | 'base'\n  | 'red'\n  | 'orange'\n  | 'amber'\n  | 'yellow'\n  | 'lime'\n  | 'green'\n  | 'emerald'\n  | 'teal'\n  | 'cyan'\n  | 'sky'\n  | 'blue'\n  | 'indigo'\n  | 'violet'\n  | 'purple'\n  | 'fuchsia'\n  | 'pink'\n  | 'rose';\n\nexport type ThemePanelMode = 'light' | 'dark' | 'system';\n\nexport type ThemePanelStyle = 'default' | 'sharp' | 'brutal' | 'soft';\n\nexport type ThemePanelLayoutMode = 'vertical' | 'horizontal' | 'empty';\n\nexport type ThemePanelLayoutWidth = 'full' | 'container' | 'wide';\n\nexport interface ThemePanelThemePort {\n  readonly color: Signal<ThemePanelColor>;\n  readonly scheme: Signal<ThemePanelMode>;\n  readonly style: Signal<ThemePanelStyle>;\n  setColor(color: ThemePanelColor): void;\n  setScheme(mode: ThemePanelMode): void;\n  setStyle(style: ThemePanelStyle): void;\n}\n\nexport interface ThemePanelLayoutPort {\n  readonly mode: Signal<ThemePanelLayoutMode>;\n  readonly width: Signal<ThemePanelLayoutWidth>;\n  setMode(mode: ThemePanelLayoutMode): void;\n  setWidth(width: ThemePanelLayoutWidth): void;\n}\n\nexport const THEME_PANEL_THEME_PORT = new InjectionToken<ThemePanelThemePort>('THEME_PANEL_THEME_PORT');\n\nexport const THEME_PANEL_LAYOUT_PORT = new InjectionToken<ThemePanelLayoutPort>('THEME_PANEL_LAYOUT_PORT');\n\ntype ThemePanelIconName =\n  | 'sun'\n  | 'moon'\n  | 'system'\n  | 'default-style'\n  | 'sharp-style'\n  | 'brutal-style'\n  | 'soft-style'\n  | 'vertical-layout'\n  | 'horizontal-layout'\n  | 'empty-layout'\n  | 'full-width'\n  | 'container-width'\n  | 'wide-width';\n\ninterface ThemePanelOption<T extends string> {\n  readonly value: T;\n  readonly label: string;\n  readonly icon?: ThemePanelIconName;\n  readonly swatchClass?: string;\n}\n\nconst THEME_COLOR_OPTIONS = [\n  { value: 'base', label: 'Base', swatchClass: 'bg-zinc-800' },\n  { value: 'red', label: 'Red', swatchClass: 'bg-red-500' },\n  { value: 'orange', label: 'Orange', swatchClass: 'bg-orange-500' },\n  { value: 'amber', label: 'Amber', swatchClass: 'bg-amber-400' },\n  { value: 'yellow', label: 'Yellow', swatchClass: 'bg-yellow-400' },\n  { value: 'lime', label: 'Lime', swatchClass: 'bg-lime-400' },\n  { value: 'green', label: 'Green', swatchClass: 'bg-green-600' },\n  { value: 'emerald', label: 'Emerald', swatchClass: 'bg-emerald-600' },\n  { value: 'teal', label: 'Teal', swatchClass: 'bg-teal-600' },\n  { value: 'cyan', label: 'Cyan', swatchClass: 'bg-cyan-600' },\n  { value: 'sky', label: 'Sky', swatchClass: 'bg-sky-600' },\n  { value: 'blue', label: 'Blue', swatchClass: 'bg-blue-500' },\n  { value: 'indigo', label: 'Indigo', swatchClass: 'bg-indigo-500' },\n  { value: 'violet', label: 'Violet', swatchClass: 'bg-violet-500' },\n  { value: 'purple', label: 'Purple', swatchClass: 'bg-purple-500' },\n  { value: 'fuchsia', label: 'Fuchsia', swatchClass: 'bg-fuchsia-600' },\n  { value: 'pink', label: 'Pink', swatchClass: 'bg-pink-600' },\n  { value: 'rose', label: 'Rose', swatchClass: 'bg-rose-500' },\n] as const satisfies readonly ThemePanelOption<ThemePanelColor>[];\n\nconst THEME_MODE_OPTIONS = [\n  { value: 'light', label: 'Light', icon: 'sun' },\n  { value: 'dark', label: 'Dark', icon: 'moon' },\n  { value: 'system', label: 'System', icon: 'system' },\n] as const satisfies readonly ThemePanelOption<ThemePanelMode>[];\n\nconst THEME_STYLE_OPTIONS = [\n  { value: 'default', label: 'Default', icon: 'default-style' },\n  { value: 'sharp', label: 'Sharp', icon: 'sharp-style' },\n  { value: 'brutal', label: 'Brutal', icon: 'brutal-style' },\n  { value: 'soft', label: 'Soft', icon: 'soft-style' },\n] as const satisfies readonly ThemePanelOption<ThemePanelStyle>[];\n\nconst LAYOUT_MODE_OPTIONS = [\n  { value: 'vertical', label: 'Vertical', icon: 'vertical-layout' },\n  { value: 'horizontal', label: 'Horizontal', icon: 'horizontal-layout' },\n  { value: 'empty', label: 'Empty', icon: 'empty-layout' },\n] as const satisfies readonly ThemePanelOption<ThemePanelLayoutMode>[];\n\nconst LAYOUT_WIDTH_OPTIONS = [\n  { value: 'full', label: 'Full', icon: 'full-width' },\n  { value: 'container', label: 'Container', icon: 'container-width' },\n  { value: 'wide', label: 'Wide', icon: 'wide-width' },\n] as const satisfies readonly ThemePanelOption<ThemePanelLayoutWidth>[];\n\n@Component({\n  selector: 'ui-theme-panel',\n  imports: [ButtonComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  template: `\n    <div class=\"flex flex-col gap-4 p-4\">\n      @if (hasUserHeader()) {\n        <header class=\"flex items-center gap-3 px-1 pt-1\">\n          <span class=\"flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary\">\n            <span\n              class=\"flex size-11 items-center justify-center rounded-full bg-primary text-xs font-semibold tracking-[0.22em] text-primary-foreground\">\n              {{ resolvedUserInitials() }}\n            </span>\n          </span>\n\n          <div class=\"min-w-0 flex-1\">\n            <h2 class=\"truncate text-[1.05rem] font-semibold leading-none tracking-tight text-foreground\">\n              {{ userName() }}\n            </h2>\n            @if (userSubtitle(); as subtitle) {\n              <p class=\"mt-1 text-sm leading-none text-muted-foreground\">{{ subtitle }}</p>\n            }\n          </div>\n        </header>\n      } @else {\n        <header class=\"space-y-1 px-1 pt-1\">\n          <h2 class=\"text-base font-semibold tracking-tight text-foreground\">{{ title() }}</h2>\n          @if (description(); as text) {\n            <p class=\"text-sm leading-6 text-muted-foreground\">{{ text }}</p>\n          }\n        </header>\n      }\n\n      <div class=\"grid gap-4\">\n        <section data-setting=\"theme-mode\" [attr.data-current]=\"currentThemeMode()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Mode</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Theme mode\">\n              @for (option of themeModeOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-mode\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentThemeMode() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentThemeMode() === option.value)\"\n                  (click)=\"setThemeMode(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentThemeMode() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"theme-color\" [attr.data-current]=\"currentThemeColor()\" class=\"space-y-2\">\n          <div class=\"flex items-center justify-between gap-3 px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Color</p>\n            <p class=\"text-xs font-semibold text-muted-foreground\">{{ currentThemeColorLabel() }}</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-1\">\n            <div class=\"grid grid-cols-6 justify-items-center gap-1\" role=\"group\" aria-label=\"Theme color\">\n              @for (option of themeColorOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"icon\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-color\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-label]=\"'Theme color ' + option.label\"\n                  [attr.aria-pressed]=\"currentThemeColor() === option.value\"\n                  [class]=\"swatchButtonClasses(currentThemeColor() === option.value)\"\n                  (click)=\"setThemeColor(option.value)\">\n                  <span\n                    aria-hidden=\"true\"\n                    [class]=\"colorSwatchClasses(option.swatchClass, currentThemeColor() === option.value)\"></span>\n                  <span class=\"sr-only\">{{ option.label }}</span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"theme-style\" [attr.data-current]=\"currentThemeStyle()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Style</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-2 gap-1 sm:grid-cols-4\" role=\"group\" aria-label=\"Theme style\">\n              @for (option of themeStyleOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"theme-style\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentThemeStyle() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentThemeStyle() === option.value)\"\n                  (click)=\"setThemeStyle(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentThemeStyle() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"layout-mode\" [attr.data-current]=\"currentLayoutMode()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Layout</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Layout mode\">\n              @for (option of layoutModeOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"layout-mode\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentLayoutMode() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentLayoutMode() === option.value)\"\n                  (click)=\"setLayoutMode(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentLayoutMode() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n\n        <section data-setting=\"layout-width\" [attr.data-current]=\"currentLayoutWidth()\" class=\"space-y-2\">\n          <div class=\"px-1\">\n            <p [class]=\"sectionEyebrowClasses()\">Width</p>\n          </div>\n\n          <div class=\"rounded-(--layout-frame-radius) bg-muted/65 p-0.5\">\n            <div class=\"grid grid-cols-3 gap-1\" role=\"group\" aria-label=\"Layout width\">\n              @for (option of layoutWidthOptions; track option.value) {\n                <button\n                  type=\"button\"\n                  ui-button\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  data-setting-option=\"layout-width\"\n                  [attr.data-value]=\"option.value\"\n                  [attr.aria-pressed]=\"currentLayoutWidth() === option.value\"\n                  [class]=\"segmentedOptionClasses(currentLayoutWidth() === option.value)\"\n                  (click)=\"setLayoutWidth(option.value)\">\n                  <span class=\"inline-flex items-center gap-2.5\">\n                    <span\n                      aria-hidden=\"true\"\n                      [class]=\"optionIconClasses(currentLayoutWidth() === option.value)\"\n                      [innerHTML]=\"iconSvg(option.icon!)\"></span>\n                    <span class=\"text-sm font-semibold leading-none\">{{ option.label }}</span>\n                  </span>\n                </button>\n              }\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n  `,\n})\nexport class ThemePanelComponent {\n  private readonly sanitizer = inject(DomSanitizer);\n  private readonly themePort = inject(THEME_PANEL_THEME_PORT, { optional: true });\n  private readonly layoutPort = inject(THEME_PANEL_LAYOUT_PORT, { optional: true });\n\n  readonly connected = input<boolean>(true);\n  readonly class = input<string>('');\n  readonly title = input<string>('Theme panel');\n  readonly description = input<string>('');\n  readonly userName = input<string>('');\n  readonly userSubtitle = input<string>('');\n  readonly userInitials = input<string>('');\n  readonly themeColor = input<ThemePanelColor>('base');\n  readonly themeMode = input<ThemePanelMode>('light');\n  readonly themeStyle = input<ThemePanelStyle>('default');\n  readonly layoutMode = input<ThemePanelLayoutMode>('vertical');\n  readonly layoutWidth = input<ThemePanelLayoutWidth>('container');\n\n  readonly themeColorChange = output<ThemePanelColor>();\n  readonly themeModeChange = output<ThemePanelMode>();\n  readonly themeStyleChange = output<ThemePanelStyle>();\n  readonly layoutModeChange = output<ThemePanelLayoutMode>();\n  readonly layoutWidthChange = output<ThemePanelLayoutWidth>();\n\n  protected readonly currentThemeColor = signal<ThemePanelColor>(this.themeColor());\n  protected readonly currentThemeMode = signal<ThemePanelMode>(this.themeMode());\n  protected readonly currentThemeStyle = signal<ThemePanelStyle>(this.themeStyle());\n  protected readonly currentLayoutMode = signal<ThemePanelLayoutMode>(this.layoutMode());\n  protected readonly currentLayoutWidth = signal<ThemePanelLayoutWidth>(this.layoutWidth());\n\n  protected readonly themeColorOptions = THEME_COLOR_OPTIONS;\n  protected readonly themeModeOptions = THEME_MODE_OPTIONS;\n  protected readonly themeStyleOptions = THEME_STYLE_OPTIONS;\n  protected readonly layoutModeOptions = LAYOUT_MODE_OPTIONS;\n  protected readonly layoutWidthOptions = LAYOUT_WIDTH_OPTIONS;\n\n  protected readonly hostClasses = computed(() =>\n    cn('block overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-sm', this.class()),\n  );\n  protected readonly hasUserHeader = computed(() => !!this.userName().trim() || !!this.userSubtitle().trim());\n  protected readonly resolvedUserInitials = computed(\n    () => this.userInitials().trim() || this.toInitials(this.userName() || this.title()),\n  );\n  protected readonly currentThemeColorLabel = computed(\n    () => this.themeColorOptions.find((option) => option.value === this.currentThemeColor())?.label ?? '',\n  );\n\n  constructor() {\n    effect(() => {\n      this.currentThemeColor.set(this.connected() && this.themePort ? this.themePort.color() : this.themeColor());\n    });\n    effect(() => {\n      this.currentThemeMode.set(this.connected() && this.themePort ? this.themePort.scheme() : this.themeMode());\n    });\n    effect(() => {\n      this.currentThemeStyle.set(this.connected() && this.themePort ? this.themePort.style() : this.themeStyle());\n    });\n    effect(() => {\n      this.currentLayoutMode.set(this.connected() && this.layoutPort ? this.layoutPort.mode() : this.layoutMode());\n    });\n    effect(() => {\n      this.currentLayoutWidth.set(this.connected() && this.layoutPort ? this.layoutPort.width() : this.layoutWidth());\n    });\n  }\n\n  protected setThemeColor(color: ThemePanelColor): void {\n    this.currentThemeColor.set(color);\n    this.themePort?.setColor(color);\n    this.themeColorChange.emit(color);\n  }\n\n  protected setThemeMode(mode: ThemePanelMode): void {\n    this.currentThemeMode.set(mode);\n    this.themePort?.setScheme(mode);\n    this.themeModeChange.emit(mode);\n  }\n\n  protected setThemeStyle(style: ThemePanelStyle): void {\n    this.currentThemeStyle.set(style);\n    this.themePort?.setStyle(style);\n    this.themeStyleChange.emit(style);\n  }\n\n  protected setLayoutMode(mode: ThemePanelLayoutMode): void {\n    this.currentLayoutMode.set(mode);\n    this.layoutPort?.setMode(mode);\n    this.layoutModeChange.emit(mode);\n  }\n\n  protected setLayoutWidth(width: ThemePanelLayoutWidth): void {\n    this.currentLayoutWidth.set(width);\n    this.layoutPort?.setWidth(width);\n    this.layoutWidthChange.emit(width);\n  }\n\n  protected sectionEyebrowClasses(): string {\n    return 'text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground';\n  }\n\n  protected segmentedOptionClasses(active: boolean): string {\n    return cn(\n      'rounded-[calc(var(--layout-frame-radius)-2px)] px-3',\n      active\n        ? 'border border-border/70 bg-background shadow-sm hover:bg-background'\n        : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',\n    );\n  }\n\n  protected swatchButtonClasses(active: boolean): string {\n    return cn(\n      'size-9 rounded-full p-0',\n      active\n        ? 'border border-border/70 bg-background shadow-sm hover:bg-background'\n        : 'border border-transparent hover:bg-background/70',\n    );\n  }\n\n  protected optionIconClasses(active: boolean): string {\n    return cn(\n      'inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4',\n      active ? 'text-foreground' : 'text-muted-foreground',\n    );\n  }\n\n  protected colorSwatchClasses(swatchClass: string | undefined, isActive: boolean): string {\n    return cn(\n      'size-4 rounded-full border border-black/10 shadow-sm',\n      swatchClass,\n      isActive ? 'ring-2 ring-ring ring-offset-2 ring-offset-background' : '',\n    );\n  }\n\n  protected iconSvg(name: ThemePanelIconName): SafeHtml {\n    return this.sanitizer.bypassSecurityTrustHtml(this.rawIconSvg(name));\n  }\n\n  private rawIconSvg(name: ThemePanelIconName): string {\n    switch (name) {\n      case 'sun':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2.5v2.2\"></path><path d=\"M12 19.3v2.2\"></path><path d=\"M4.93 4.93 6.5 6.5\"></path><path d=\"M17.5 17.5 19.07 19.07\"></path><path d=\"M2.5 12h2.2\"></path><path d=\"M19.3 12h2.2\"></path><path d=\"M4.93 19.07 6.5 17.5\"></path><path d=\"M17.5 6.5 19.07 4.93\"></path></svg>';\n      case 'moon':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.4 14.8A8.8 8.8 0 1 1 9.2 3.6a7.2 7.2 0 0 0 11.2 11.2Z\"></path></svg>';\n      case 'system':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"4.5\" width=\"17\" height=\"11.5\" rx=\"1.8\"></rect><path d=\"M9 19.5h6\"></path><path d=\"M12 16v3.5\"></path></svg>';\n      case 'default-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"4\"></rect></svg>';\n      case 'sharp-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"1\"></rect></svg>';\n      case 'brutal-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 7.5h14\"></path><path d=\"M5 12h14\"></path><path d=\"M5 16.5h14\"></path></svg>';\n      case 'soft-style':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7.5 9A4.5 4.5 0 0 1 12 4.5h1A4.5 4.5 0 0 1 17.5 9v1A4.5 4.5 0 0 1 13 14.5h-1A4.5 4.5 0 0 1 7.5 10Z\"></path><path d=\"M6.5 15.5c1.3 2 3.2 3 5.5 3s4.2-1 5.5-3\"></path></svg>';\n      case 'vertical-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\"></rect><path d=\"M9 5v14\"></path></svg>';\n      case 'horizontal-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\"></rect><path d=\"M4 10h16\"></path></svg>';\n      case 'empty-layout':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4.5\" y=\"5.5\" width=\"15\" height=\"13\" rx=\"2\"></rect></svg>';\n      case 'full-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8V5h3\"></path><path d=\"M20 8V5h-3\"></path><path d=\"M4 16v3h3\"></path><path d=\"M20 16v3h-3\"></path><path d=\"M8 5H4\"></path><path d=\"M20 5h-4\"></path><path d=\"M8 19H4\"></path><path d=\"M20 19h-4\"></path></svg>';\n      case 'container-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"></rect><path d=\"M9 9.5h6\"></path><path d=\"M9 14.5h6\"></path></svg>';\n      case 'wide-width':\n        return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\"></rect><path d=\"M7 9.5h10\"></path><path d=\"M7 14.5h10\"></path></svg>';\n    }\n  }\n\n  private toInitials(value: string): string {\n    const words = value\n      .split(/\\s+/)\n      .map((item) => item.trim())\n      .filter(Boolean)\n      .slice(0, 2);\n\n    if (!words.length) {\n      return 'UI';\n    }\n\n    return words.map((word) => word[0]?.toUpperCase() ?? '').join('');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ojiepermana-angular-layout-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-provider.mjs","sources":["../../../projects/angular/layout/provider/src/lib/layout.provider.ts","../../../projects/angular/layout/provider/ojiepermana-angular-layout-provider.ts"],"sourcesContent":["import {\n  inject,\n  type EnvironmentProviders,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { THEME_PANEL_LAYOUT_PORT } from '@ojiepermana/angular/layout/component';\nimport { LayoutService } from '@ojiepermana/angular/layout/services';\nimport { MATERIAL_LAYOUT_CONFIG, type MaterialLayoutConfig } from '@ojiepermana/angular/layout/token';\n\nexport function provideMaterialLayout(config: MaterialLayoutConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_LAYOUT_CONFIG, useValue: config },\n    { provide: THEME_PANEL_LAYOUT_PORT, useExisting: LayoutService },\n    provideEnvironmentInitializer(() => {\n      inject(LayoutService);\n    }),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAUM,SAAU,qBAAqB,CAAC,MAAA,GAA+B,EAAE,EAAA;AACrE,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,EAAE;AACrD,QAAA,EAAE,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,aAAa,EAAE;QAChE,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,aAAa,CAAC;AACvB,QAAA,CAAC,CAAC;AACH,KAAA,CAAC;AACJ;;AClBA;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-layout-provider.mjs","sources":["../../../projects/angular/layout/provider/layout.provider.ts","../../../projects/angular/layout/provider/ojiepermana-angular-layout-provider.ts"],"sourcesContent":["import {\n  inject,\n  type EnvironmentProviders,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { THEME_PANEL_LAYOUT_PORT } from '@ojiepermana/angular/layout/component';\nimport { LayoutService } from '@ojiepermana/angular/layout/services';\nimport { MATERIAL_LAYOUT_CONFIG, type MaterialLayoutConfig } from '@ojiepermana/angular/layout/token';\n\nexport function provideMaterialLayout(config: MaterialLayoutConfig = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: MATERIAL_LAYOUT_CONFIG, useValue: config },\n    { provide: THEME_PANEL_LAYOUT_PORT, useExisting: LayoutService },\n    provideEnvironmentInitializer(() => {\n      inject(LayoutService);\n    }),\n  ]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAUM,SAAU,qBAAqB,CAAC,MAAA,GAA+B,EAAE,EAAA;AACrE,IAAA,OAAO,wBAAwB,CAAC;AAC9B,QAAA,EAAE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,EAAE;AACrD,QAAA,EAAE,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,aAAa,EAAE;QAChE,6BAA6B,CAAC,MAAK;YACjC,MAAM,CAAC,aAAa,CAAC;AACvB,QAAA,CAAC,CAAC;AACH,KAAA,CAAC;AACJ;;AClBA;;AAEG;;;;"}

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

@@ -6,8 +6,10 @@ import { LAYOUT_WIDTHS, MATERIAL_LAYOUT_CONFIG, DEFAULT_MATERIAL_LAYOUT_CONFIG,
 class LayoutService {
     document = inject(DOCUMENT);
     config = this.resolveConfig();
-    _mode = signal(this.readPersistedMode() ?? this.config.defaultMode, ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
-    _width = signal(this.readPersistedWidth() ?? this.config.defaultWidth, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
+    _mode = signal(this.readPersistedMode() ?? this.config.defaultMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    _width = signal(this.readPersistedWidth() ?? this.config.defaultWidth, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
     mode = this._mode.asReadonly();
     width = this._width.asReadonly();
     constructor() {
@@ -98,10 +100,10 @@ class LayoutService {
             /* ignore */
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/fesm2022/ojiepermana-angular-layout-services.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-services.mjs","sources":["../../../projects/angular/layout/services/src/lib/layout.service.ts","../../../projects/angular/layout/services/ojiepermana-angular-layout-services.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Injectable, effect, inject, signal } from '@angular/core';\nimport {\n  DEFAULT_MATERIAL_LAYOUT_CONFIG,\n  LAYOUT_WIDTHS,\n  MATERIAL_LAYOUT_CONFIG,\n  isLayoutMode,\n  normalizeLayoutWidth,\n  type LayoutMode,\n  type LayoutWidth,\n  type ResolvedMaterialLayoutConfig,\n} from '@ojiepermana/angular/layout/token';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n  private readonly document = inject(DOCUMENT);\n  private readonly config = this.resolveConfig();\n\n  private readonly _mode = signal<LayoutMode>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _width = signal<LayoutWidth>(this.readPersistedWidth() ?? this.config.defaultWidth);\n\n  readonly mode = this._mode.asReadonly();\n  readonly width = this._width.asReadonly();\n\n  constructor() {\n    effect(() => {\n      this.persistMode(this._mode());\n    });\n\n    effect(() => {\n      this.persistWidth(this._width());\n    });\n  }\n\n  setMode(mode: LayoutMode): void {\n    this._mode.set(mode);\n  }\n\n  toggleMode(): void {\n    this._mode.update((mode) => {\n      if (mode === 'vertical') {\n        return 'horizontal';\n      }\n\n      if (mode === 'horizontal') {\n        return 'vertical';\n      }\n\n      return 'vertical';\n    });\n  }\n\n  setWidth(width: LayoutWidth): void {\n    this._width.set(width);\n  }\n\n  toggleWidth(): void {\n    this._width.update((width) => {\n      const currentIndex = LAYOUT_WIDTHS.indexOf(width);\n      return LAYOUT_WIDTHS[(currentIndex + 1) % LAYOUT_WIDTHS.length] ?? LAYOUT_WIDTHS[0];\n    });\n  }\n\n  private resolveConfig(): ResolvedMaterialLayoutConfig {\n    const config = inject(MATERIAL_LAYOUT_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode;\n    const configuredWidth = config.width;\n\n    return {\n      defaultMode: isLayoutMode(configuredMode) ? configuredMode : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultMode,\n      defaultWidth: normalizeLayoutWidth(configuredWidth) ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultWidth,\n      storageKey: config.storageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.storageKey,\n      widthStorageKey: config.widthStorageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.widthStorageKey,\n    };\n  }\n\n  private readPersistedMode(): LayoutMode | null {\n    const key = this.config.storageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isLayoutMode(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedWidth(): LayoutWidth | null {\n    const key = this.config.widthStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return normalizeLayoutWidth(value);\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: LayoutMode): void {\n    const key = this.config.storageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistWidth(width: LayoutWidth): void {\n    const key = this.config.widthStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, width);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ojiepermana-angular-layout-services.mjs","sources":["../../../projects/angular/layout/services/layout.service.ts","../../../projects/angular/layout/services/ojiepermana-angular-layout-services.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Injectable, effect, inject, signal } from '@angular/core';\nimport {\n  DEFAULT_MATERIAL_LAYOUT_CONFIG,\n  LAYOUT_WIDTHS,\n  MATERIAL_LAYOUT_CONFIG,\n  isLayoutMode,\n  normalizeLayoutWidth,\n  type LayoutMode,\n  type LayoutWidth,\n  type ResolvedMaterialLayoutConfig,\n} from '@ojiepermana/angular/layout/token';\n\n@Injectable({ providedIn: 'root' })\nexport class LayoutService {\n  private readonly document = inject(DOCUMENT);\n  private readonly config = this.resolveConfig();\n\n  private readonly _mode = signal<LayoutMode>(this.readPersistedMode() ?? this.config.defaultMode);\n  private readonly _width = signal<LayoutWidth>(this.readPersistedWidth() ?? this.config.defaultWidth);\n\n  readonly mode = this._mode.asReadonly();\n  readonly width = this._width.asReadonly();\n\n  constructor() {\n    effect(() => {\n      this.persistMode(this._mode());\n    });\n\n    effect(() => {\n      this.persistWidth(this._width());\n    });\n  }\n\n  setMode(mode: LayoutMode): void {\n    this._mode.set(mode);\n  }\n\n  toggleMode(): void {\n    this._mode.update((mode) => {\n      if (mode === 'vertical') {\n        return 'horizontal';\n      }\n\n      if (mode === 'horizontal') {\n        return 'vertical';\n      }\n\n      return 'vertical';\n    });\n  }\n\n  setWidth(width: LayoutWidth): void {\n    this._width.set(width);\n  }\n\n  toggleWidth(): void {\n    this._width.update((width) => {\n      const currentIndex = LAYOUT_WIDTHS.indexOf(width);\n      return LAYOUT_WIDTHS[(currentIndex + 1) % LAYOUT_WIDTHS.length] ?? LAYOUT_WIDTHS[0];\n    });\n  }\n\n  private resolveConfig(): ResolvedMaterialLayoutConfig {\n    const config = inject(MATERIAL_LAYOUT_CONFIG, { optional: true }) ?? {};\n    const configuredMode = config.mode ?? config.defaultMode;\n    const configuredWidth = config.width;\n\n    return {\n      defaultMode: isLayoutMode(configuredMode) ? configuredMode : DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultMode,\n      defaultWidth: normalizeLayoutWidth(configuredWidth) ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.defaultWidth,\n      storageKey: config.storageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.storageKey,\n      widthStorageKey: config.widthStorageKey ?? DEFAULT_MATERIAL_LAYOUT_CONFIG.widthStorageKey,\n    };\n  }\n\n  private readPersistedMode(): LayoutMode | null {\n    const key = this.config.storageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return isLayoutMode(value) ? value : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private readPersistedWidth(): LayoutWidth | null {\n    const key = this.config.widthStorageKey;\n    if (!key) return null;\n    try {\n      const value = this.document.defaultView?.localStorage?.getItem(key);\n      return normalizeLayoutWidth(value);\n    } catch {\n      return null;\n    }\n  }\n\n  private persistMode(mode: LayoutMode): void {\n    const key = this.config.storageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, mode);\n    } catch {\n      /* ignore */\n    }\n  }\n\n  private persistWidth(width: LayoutWidth): void {\n    const key = this.config.widthStorageKey;\n    if (!key) return;\n    try {\n      this.document.defaultView?.localStorage?.setItem(key, width);\n    } catch {\n      /* ignore */\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 class ShellPagesComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ShellPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: ShellPagesComponent, isStandalone: true, selector: "shell-pages", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShellPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ShellPagesComponent, isStandalone: true, selector: "shell-pages", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: `
     <div class="flex h-full flex-col overflow-hidden">
       <header class="flex h-12 min-w-0 shrink-0 items-center gap-2 border-b border-primary/30 px-2">
         <ng-content select="[shell-pages-header]" />
@@ -19,7 +19,7 @@ class ShellPagesComponent {
     </div>
   `, isInline: true, styles: ["footer:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ShellPagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShellPagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'shell-pages', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'block h-full min-h-0',

package/fesm2022/ojiepermana-angular-layout-shell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-shell.mjs","sources":["../../../projects/angular/layout/shell/src/lib/shell-pages.ts","../../../projects/angular/layout/shell/ojiepermana-angular-layout-shell.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'shell-pages',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block h-full min-h-0',\n  },\n  template: `\n    <div class=\"flex h-full flex-col overflow-hidden\">\n      <header class=\"flex h-12 min-w-0 shrink-0 items-center gap-2 border-b border-primary/30 px-2\">\n        <ng-content select=\"[shell-pages-header]\" />\n      </header>\n\n      <main class=\"min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10\">\n        <ng-content select=\"[shell-pages-main]\" />\n      </main>\n\n      <footer class=\"flex h-12 min-w-0 shrink-0 items-center gap-2 border-t border-primary/30 px-2\">\n        <ng-content select=\"[shell-pages-footer]\" />\n      </footer>\n    </div>\n  `,\n  styles: `\n    footer:empty {\n      display: none;\n    }\n  `,\n})\nexport class ShellPagesComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA6Ba,mBAAmB,CAAA;wGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EArBpB;;;;;;;;;;;;;;AAcT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAOU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBA3B/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,eAAA,EACN,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,sBAAsB;qBAC9B,EAAA,QAAA,EACS;;;;;;;;;;;;;;AAcT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;;ACtBH;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-layout-shell.mjs","sources":["../../../projects/angular/layout/shell/shell-pages.ts","../../../projects/angular/layout/shell/ojiepermana-angular-layout-shell.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'shell-pages',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block h-full min-h-0',\n  },\n  template: `\n    <div class=\"flex h-full flex-col overflow-hidden\">\n      <header class=\"flex h-12 min-w-0 shrink-0 items-center gap-2 border-b border-primary/30 px-2\">\n        <ng-content select=\"[shell-pages-header]\" />\n      </header>\n\n      <main class=\"min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10\">\n        <ng-content select=\"[shell-pages-main]\" />\n      </main>\n\n      <footer class=\"flex h-12 min-w-0 shrink-0 items-center gap-2 border-t border-primary/30 px-2\">\n        <ng-content select=\"[shell-pages-footer]\" />\n      </footer>\n    </div>\n  `,\n  styles: `\n    footer:empty {\n      display: none;\n    }\n  `,\n})\nexport class ShellPagesComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MA6Ba,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EArBpB;;;;;;;;;;;;;;AAcT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAOU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBA3B/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,eAAA,EACN,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,sBAAsB;qBAC9B,EAAA,QAAA,EACS;;;;;;;;;;;;;;AAcT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,CAAA,EAAA;;;ACtBH;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-layout-token-directive.mjs

@@ -5,13 +5,16 @@ import { LayoutService } from '@ojiepermana/angular/layout/services';
 
 class LayoutProfilePopoverDefaultsDirective {
     layout = inject(LayoutService);
-    side = computed(() => (this.layout.mode() === 'horizontal' ? 'bottom' : 'right'), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    align = computed(() => 'end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    sideOffset = computed(() => (this.layout.mode() === 'horizontal' ? -20 : 12), ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutProfilePopoverDefaultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LayoutProfilePopoverDefaultsDirective, isStandalone: true, selector: "[ui-layout-profile][uiPopoverTrigger]", providers: [{ provide: POPOVER_TRIGGER_DEFAULTS, useExisting: LayoutProfilePopoverDefaultsDirective }], ngImport: i0 });
+    side = computed(() => (this.layout.mode() === 'horizontal' ? 'bottom' : 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    align = computed(() => 'end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    sideOffset = computed(() => (this.layout.mode() === 'horizontal' ? -20 : 12), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LayoutProfilePopoverDefaultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: LayoutProfilePopoverDefaultsDirective, isStandalone: true, selector: "[ui-layout-profile][uiPopoverTrigger]", providers: [{ provide: POPOVER_TRIGGER_DEFAULTS, useExisting: LayoutProfilePopoverDefaultsDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LayoutProfilePopoverDefaultsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LayoutProfilePopoverDefaultsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ui-layout-profile][uiPopoverTrigger]',

package/fesm2022/ojiepermana-angular-layout-token-directive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-token-directive.mjs","sources":["../../../projects/angular/layout/token/directive/src/lib/layout-profile-popover-defaults.directive.ts","../../../projects/angular/layout/token/directive/ojiepermana-angular-layout-token-directive.ts"],"sourcesContent":["import { Directive, computed, inject } from '@angular/core';\nimport {\n  POPOVER_TRIGGER_DEFAULTS,\n  type PopoverAlign,\n  type PopoverSide,\n  type PopoverTriggerDefaults,\n} from '@ojiepermana/angular/component/popover';\nimport { LayoutService } from '@ojiepermana/angular/layout/services';\n\n@Directive({\n  selector: '[ui-layout-profile][uiPopoverTrigger]',\n  providers: [{ provide: POPOVER_TRIGGER_DEFAULTS, useExisting: LayoutProfilePopoverDefaultsDirective }],\n})\nexport class LayoutProfilePopoverDefaultsDirective implements PopoverTriggerDefaults {\n  private readonly layout = inject(LayoutService);\n\n  readonly side = computed<PopoverSide>(() => (this.layout.mode() === 'horizontal' ? 'bottom' : 'right'));\n  readonly align = computed<PopoverAlign>(() => 'end');\n  readonly sideOffset = computed(() => (this.layout.mode() === 'horizontal' ? -20 : 12));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAaa,qCAAqC,CAAA;AAC/B,IAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;IAEtC,IAAI,GAAG,QAAQ,CAAc,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAC9F,KAAK,GAAG,QAAQ,CAAe,MAAM,KAAK,4EAAC;IAC3C,UAAU,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;wGAL3E,qCAAqC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAArC,qCAAqC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,SAAA,EAFrC,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,qCAAqC,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAE3F,qCAAqC,EAAA,UAAA,EAAA,CAAA;kBAJjD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uCAAuC;oBACjD,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAA,qCAAuC,EAAE,CAAC;AACvG,iBAAA;;;ACZD;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-layout-token-directive.mjs","sources":["../../../projects/angular/layout/token/directive/layout-profile-popover-defaults.directive.ts","../../../projects/angular/layout/token/directive/ojiepermana-angular-layout-token-directive.ts"],"sourcesContent":["import { Directive, computed, inject } from '@angular/core';\nimport {\n  POPOVER_TRIGGER_DEFAULTS,\n  type PopoverAlign,\n  type PopoverSide,\n  type PopoverTriggerDefaults,\n} from '@ojiepermana/angular/component/popover';\nimport { LayoutService } from '@ojiepermana/angular/layout/services';\n\n@Directive({\n  selector: '[ui-layout-profile][uiPopoverTrigger]',\n  providers: [{ provide: POPOVER_TRIGGER_DEFAULTS, useExisting: LayoutProfilePopoverDefaultsDirective }],\n})\nexport class LayoutProfilePopoverDefaultsDirective implements PopoverTriggerDefaults {\n  private readonly layout = inject(LayoutService);\n\n  readonly side = computed<PopoverSide>(() => (this.layout.mode() === 'horizontal' ? 'bottom' : 'right'));\n  readonly align = computed<PopoverAlign>(() => 'end');\n  readonly sideOffset = computed(() => (this.layout.mode() === 'horizontal' ? -20 : 12));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAaa,qCAAqC,CAAA;AAC/B,IAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;IAEtC,IAAI,GAAG,QAAQ,CAAc,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC;6EAAC;AAC9F,IAAA,KAAK,GAAG,QAAQ,CAAe,MAAM,KAAK;8EAAC;IAC3C,UAAU,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC;mFAAC;uGAL3E,qCAAqC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArC,qCAAqC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,SAAA,EAFrC,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,qCAAqC,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAE3F,qCAAqC,EAAA,UAAA,EAAA,CAAA;kBAJjD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uCAAuC;oBACjD,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAA,qCAAuC,EAAE,CAAC;AACvG,iBAAA;;;ACZD;;AAEG;;;;"}

package/fesm2022/ojiepermana-angular-layout-token.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ojiepermana-angular-layout-token.mjs","sources":["../../../projects/angular/layout/token/src/lib/layout.tokens.ts","../../../projects/angular/layout/token/ojiepermana-angular-layout-token.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\n\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_WIDTHS = ['full', 'container', 'wide'] as const;\n\nexport type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];\n\n/** @deprecated Use `container` instead. */\nexport type LegacyLayoutWidth = 'fixed';\n\nexport type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;\n\nexport interface MaterialLayoutConfig {\n  /** Initial layout mode. */\n  readonly mode?: LayoutMode;\n  /** Initial layout width. */\n  readonly width?: ConfiguredLayoutWidth;\n  /** @deprecated Use `mode` instead. */\n  /** Initial layout mode. Defaults to `vertical`. */\n  readonly defaultMode?: LayoutMode;\n  /** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */\n  readonly storageKey?: string | null;\n  /** localStorage key used to persist the layout width. Set to `null` to disable persistence. */\n  readonly widthStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialLayoutConfig {\n  readonly defaultMode: LayoutMode;\n  readonly defaultWidth: LayoutWidth;\n  readonly storageKey: string | null;\n  readonly widthStorageKey: string | null;\n}\n\nexport const MATERIAL_LAYOUT_CONFIG = new InjectionToken<MaterialLayoutConfig>('MATERIAL_LAYOUT_CONFIG');\n\nexport const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig = {\n  defaultMode: 'vertical',\n  defaultWidth: 'wide',\n  storageKey: 'layout-mode',\n  widthStorageKey: 'layout-width',\n};\n\nexport function isLayoutMode(value: string | null | undefined): value is LayoutMode {\n  return LAYOUT_MODES.some((mode) => mode === value);\n}\n\nexport function isLayoutWidth(value: string | null | undefined): value is LayoutWidth {\n  return LAYOUT_WIDTHS.some((width) => width === value);\n}\n\nexport function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null {\n  if (isLayoutWidth(value)) {\n    return value;\n  }\n\n  if (value === 'fixed') {\n    return 'container';\n  }\n\n  return null;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO;AAIvD,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM;MA8B5C,sBAAsB,GAAG,IAAI,cAAc,CAAuB,wBAAwB;AAEhG,MAAM,8BAA8B,GAAiC;AAC1E,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,UAAU,EAAE,aAAa;AACzB,IAAA,eAAe,EAAE,cAAc;;AAG3B,SAAU,YAAY,CAAC,KAAgC,EAAA;AAC3D,IAAA,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC;AACpD;AAEM,SAAU,aAAa,CAAC,KAAgC,EAAA;AAC5D,IAAA,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AACvD;AAEM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;AACxB,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,KAAK,KAAK,OAAO,EAAE;AACrB,QAAA,OAAO,WAAW;IACpB;AAEA,IAAA,OAAO,IAAI;AACb;;AC/DA;;AAEG;;;;"}
+{"version":3,"file":"ojiepermana-angular-layout-token.mjs","sources":["../../../projects/angular/layout/token/layout.tokens.ts","../../../projects/angular/layout/token/ojiepermana-angular-layout-token.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const LAYOUT_MODES = ['vertical', 'horizontal', 'empty'] as const;\n\nexport type LayoutMode = (typeof LAYOUT_MODES)[number];\n\nexport const LAYOUT_WIDTHS = ['full', 'container', 'wide'] as const;\n\nexport type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];\n\n/** @deprecated Use `container` instead. */\nexport type LegacyLayoutWidth = 'fixed';\n\nexport type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;\n\nexport interface MaterialLayoutConfig {\n  /** Initial layout mode. */\n  readonly mode?: LayoutMode;\n  /** Initial layout width. */\n  readonly width?: ConfiguredLayoutWidth;\n  /** @deprecated Use `mode` instead. */\n  /** Initial layout mode. Defaults to `vertical`. */\n  readonly defaultMode?: LayoutMode;\n  /** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */\n  readonly storageKey?: string | null;\n  /** localStorage key used to persist the layout width. Set to `null` to disable persistence. */\n  readonly widthStorageKey?: string | null;\n}\n\nexport interface ResolvedMaterialLayoutConfig {\n  readonly defaultMode: LayoutMode;\n  readonly defaultWidth: LayoutWidth;\n  readonly storageKey: string | null;\n  readonly widthStorageKey: string | null;\n}\n\nexport const MATERIAL_LAYOUT_CONFIG = new InjectionToken<MaterialLayoutConfig>('MATERIAL_LAYOUT_CONFIG');\n\nexport const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig = {\n  defaultMode: 'vertical',\n  defaultWidth: 'wide',\n  storageKey: 'layout-mode',\n  widthStorageKey: 'layout-width',\n};\n\nexport function isLayoutMode(value: string | null | undefined): value is LayoutMode {\n  return LAYOUT_MODES.some((mode) => mode === value);\n}\n\nexport function isLayoutWidth(value: string | null | undefined): value is LayoutWidth {\n  return LAYOUT_WIDTHS.some((width) => width === value);\n}\n\nexport function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null {\n  if (isLayoutWidth(value)) {\n    return value;\n  }\n\n  if (value === 'fixed') {\n    return 'container';\n  }\n\n  return null;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO;AAIvD,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM;MA8B5C,sBAAsB,GAAG,IAAI,cAAc,CAAuB,wBAAwB;AAEhG,MAAM,8BAA8B,GAAiC;AAC1E,IAAA,WAAW,EAAE,UAAU;AACvB,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,UAAU,EAAE,aAAa;AACzB,IAAA,eAAe,EAAE,cAAc;;AAG3B,SAAU,YAAY,CAAC,KAAgC,EAAA;AAC3D,IAAA,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC;AACpD;AAEM,SAAU,aAAa,CAAC,KAAgC,EAAA;AAC5D,IAAA,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC;AACvD;AAEM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;AACxB,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,KAAK,KAAK,OAAO,EAAE;AACrB,QAAA,OAAO,WAAW;IACpB;AAEA,IAAA,OAAO,IAAI;AACb;;AC/DA;;AAEG;;;;"}

package/fesm2022/{ojiepermana-angular-layout-empty.mjs → ojiepermana-angular-layout-type-empty.mjs}

@@ -17,14 +17,14 @@ import { RouterOutlet } from '@angular/router';
  * ```
  */
 class EmptyLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: EmptyLayoutComponent, isStandalone: true, selector: "empty", host: { classAttribute: "flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: EmptyLayoutComponent, isStandalone: true, selector: "empty", host: { classAttribute: "flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground" }, ngImport: i0, template: `
     <main class="w-full max-w-sm">
       <router-outlet />
     </main>
   `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EmptyLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'empty',
@@ -46,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 
 export { EmptyLayoutComponent };
-//# sourceMappingURL=ojiepermana-angular-layout-empty.mjs.map
+//# sourceMappingURL=ojiepermana-angular-layout-type-empty.mjs.map

package/fesm2022/ojiepermana-angular-layout-type-empty.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-layout-type-empty.mjs","sources":["../../../projects/angular/layout/type/empty/empty.component.ts","../../../projects/angular/layout/type/empty/ojiepermana-angular-layout-type-empty.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n/**\n * Empty layout — full-viewport, flex-centered main.\n *\n * Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).\n * Konten dirender lewat `<router-outlet>`; consumer men-style card / form\n * milik halaman route sendiri.\n *\n * Markup:\n * ```html\n * <empty>\n *   <!-- router-outlet dirender oleh komponen -->\n * </empty>\n * ```\n */\n@Component({\n  selector: 'empty',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet],\n  host: {\n    class: 'flex min-h-dvh w-full items-center justify-center bg-background p-6 text-foreground',\n  },\n  template: `\n    <main class=\"w-full max-w-sm\">\n      <router-outlet />\n    </main>\n  `,\n})\nexport class EmptyLayoutComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;;;;AAaG;MAcU,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qFAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANrB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EARS,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAUX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,OAAO;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,qFAAqF;AAC7F,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA,CAAA;AACF,iBAAA;;;AC7BD;;AAEG;;;;"}

package/fesm2022/{ojiepermana-angular-layout-horizontal.mjs → ojiepermana-angular-layout-type-horizontal.mjs}

@@ -22,14 +22,20 @@ import { ThemeService } from '@ojiepermana/angular/theme';
 class HorizontalLayoutComponent {
     layout = inject(LayoutService);
     theme = inject(ThemeService);
-    topbarAppearance = input('default', ...(ngDevMode ? [{ debugName: "topbarAppearance" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    topbarVariant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topbarVariant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     layoutWidth = this.layout.width;
     themeStyle = this.theme.style;
-    isConstrainedWidth = computed(() => this.layoutWidth() !== 'full', ...(ngDevMode ? [{ debugName: "isConstrainedWidth" }] : /* istanbul ignore next */ []));
-    isWideWidth = computed(() => this.layoutWidth() === 'wide', ...(ngDevMode ? [{ debugName: "isWideWidth" }] : /* istanbul ignore next */ []));
-    shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null), ...(ngDevMode ? [{ debugName: "shellBorderWidth" }] : /* istanbul ignore next */ []));
-    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
+    isConstrainedWidth = computed(() => this.layoutWidth() !== 'full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isConstrainedWidth" }] : /* istanbul ignore next */ []));
+    isWideWidth = computed(() => this.layoutWidth() === 'wide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isWideWidth" }] : /* istanbul ignore next */ []));
+    shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellBorderWidth" }] : /* istanbul ignore next */ []));
+    dividerBorderWidth = computed(() => 'var(--border-width)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];
         if (this.isConstrainedWidth()) {
@@ -39,14 +45,16 @@ class HorizontalLayoutComponent {
             classes.push('bg-background');
         }
         return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     frameClasses = computed(() => {
         const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden', 'bg-background'];
         if (this.isConstrainedWidth()) {
             classes.push('lg:border', 'lg:border-primary/30', 'lg:rounded-lg', 'lg:shadow-sm');
         }
         return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
     mainClasses = computed(() => {
         const classes = ['min-w-0', 'flex-1', 'overflow-auto'];
         if (this.layoutWidth() === 'container') {
@@ -56,14 +64,15 @@ class HorizontalLayoutComponent {
             classes.push('mx-auto', 'w-full', 'max-w-screen-2xl');
         }
         return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: HorizontalLayoutComponent, isStandalone: true, selector: "horizontal", inputs: { topbarAppearance: { classPropertyName: "topbarAppearance", publicName: "topbarAppearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-layout-width": "layoutWidth()", "attr.data-style": "themeStyle()" } }, ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: HorizontalLayoutComponent, isStandalone: true, selector: "horizontal", inputs: { topbarVariant: { classPropertyName: "topbarVariant", publicName: "topbarVariant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-layout-width": "layoutWidth()", "attr.data-style": "themeStyle()" } }, ngImport: i0, template: `
     <div [class]="frameClasses()" [style.border-width]="shellBorderWidth()">
       <topbar
         class="w-full shrink-0 border-b border-border"
         [style.border-bottom-width]="dividerBorderWidth()"
-        [appearance]="topbarAppearance()"
+        [variant]="topbarVariant()"
         [ariaLabel]="ariaLabel()">
         <div topbar-start class="flex min-w-0 items-center">
           <ng-content select="[ui-layout-brand],[topbar-start]" />
@@ -76,9 +85,9 @@ class HorizontalLayoutComponent {
         <router-outlet />
       </main>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "topbar", inputs: ["items", "navigationId", "variant", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: HorizontalLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'horizontal',
@@ -94,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <topbar
         class="w-full shrink-0 border-b border-border"
         [style.border-bottom-width]="dividerBorderWidth()"
-        [appearance]="topbarAppearance()"
+        [variant]="topbarVariant()"
         [ariaLabel]="ariaLabel()">
         <div topbar-start class="flex min-w-0 items-center">
           <ng-content select="[ui-layout-brand],[topbar-start]" />
@@ -109,11 +118,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { topbarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarAppearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+        }], propDecorators: { topbarVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarVariant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
 export { HorizontalLayoutComponent };
-//# sourceMappingURL=ojiepermana-angular-layout-horizontal.mjs.map
+//# sourceMappingURL=ojiepermana-angular-layout-type-horizontal.mjs.map

package/fesm2022/ojiepermana-angular-layout-type-horizontal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-layout-type-horizontal.mjs","sources":["../../../projects/angular/layout/type/horizontal/horizontal.component.ts","../../../projects/angular/layout/type/horizontal/ojiepermana-angular-layout-type-horizontal.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { LayoutService } from '@ojiepermana/angular/layout/services';\nimport { TopbarComponent } from '@ojiepermana/angular/navigation/topbar';\nimport type { TopbarVariant } from '@ojiepermana/angular/navigation/types';\nimport { ThemeService } from '@ojiepermana/angular/theme';\n\n/**\n * Horizontal layout — themed topbar + main (scrollable).\n *\n * Data navigasi diambil dari `NavigationService`.\n * Consumer app dapat memproyeksikan brand kiri dan profile kanan.\n *\n * Markup:\n * ```html\n * <horizontal>\n *   <a ui-layout-brand>Brand</a>\n *   <button ui-layout-profile type=\"button\">Profile</button>\n * </horizontal>\n * ```\n */\n@Component({\n  selector: 'horizontal',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterOutlet, TopbarComponent],\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.data-layout-width]': 'layoutWidth()',\n    '[attr.data-style]': 'themeStyle()',\n  },\n  template: `\n    <div [class]=\"frameClasses()\" [style.border-width]=\"shellBorderWidth()\">\n      <topbar\n        class=\"w-full shrink-0 border-b border-border\"\n        [style.border-bottom-width]=\"dividerBorderWidth()\"\n        [variant]=\"topbarVariant()\"\n        [ariaLabel]=\"ariaLabel()\">\n        <div topbar-start class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-brand],[topbar-start]\" />\n        </div>\n        <div topbar-end class=\"flex min-w-0 items-center\">\n          <ng-content select=\"[ui-layout-profile],[topbar-end]\" />\n        </div>\n      </topbar>\n      <main [class]=\"mainClasses()\">\n        <router-outlet />\n      </main>\n    </div>\n  `,\n})\nexport class HorizontalLayoutComponent {\n  private readonly layout = inject(LayoutService);\n  private readonly theme = inject(ThemeService);\n\n  readonly topbarVariant = input<TopbarVariant>('default');\n  readonly ariaLabel = input<string>('Primary');\n\n  protected readonly layoutWidth = this.layout.width;\n  protected readonly themeStyle = this.theme.style;\n  protected readonly isConstrainedWidth = computed(() => this.layoutWidth() !== 'full');\n  protected readonly isWideWidth = computed(() => this.layoutWidth() === 'wide');\n  protected readonly shellBorderWidth = computed(() => (this.isConstrainedWidth() ? 'var(--border-width)' : null));\n  protected readonly dividerBorderWidth = computed(() => 'var(--border-width)');\n\n  protected readonly hostClasses = computed(() => {\n    const classes = ['block', 'h-dvh', 'w-full', 'overflow-hidden', 'text-foreground'];\n    if (this.isConstrainedWidth()) {\n      classes.push('bg-primary/10', 'box-border', 'lg:p-8');\n    } else {\n      classes.push('bg-background');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly frameClasses = computed(() => {\n    const classes = ['flex', 'h-full', 'w-full', 'flex-col', 'overflow-hidden', 'bg-background'];\n    if (this.isConstrainedWidth()) {\n      classes.push('lg:border', 'lg:border-primary/30', 'lg:rounded-lg', 'lg:shadow-sm');\n    }\n    return classes.join(' ');\n  });\n\n  protected readonly mainClasses = computed(() => {\n    const classes = ['min-w-0', 'flex-1', 'overflow-auto'];\n    if (this.layoutWidth() === 'container') {\n      classes.push('mx-auto', 'w-full', 'max-w-7xl');\n    } else if (this.isWideWidth()) {\n      classes.push('mx-auto', 'w-full', 'max-w-screen-2xl');\n    }\n    return classes.join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}