@ojiepermana/angular 21.1.30 → 21.2.4

package/fesm2022/ojiepermana-angular-brand-etos.mjs

@@ -1,1060 +0,0 @@
-import * as i0 from '@angular/core';
-import { provideEnvironmentInitializer, inject, makeEnvironmentProviders, viewChild, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { provideMaterialLayout, LayoutService } from '@ojiepermana/angular/layout';
-import { NavigationService, DEFAULT_NAVIGATION_ID, UiNavIconComponent, TopbarComponent, SidebarComponent } from '@ojiepermana/angular/navigation';
-import { provideMaterialTheme, withMaterialDefaults, ThemeService } from '@ojiepermana/angular/theme';
-import { cn, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, ButtonComponent, PopoverContentDirective, PopoverTriggerDirective } from '@ojiepermana/angular/component';
-import { RouterOutlet } from '@angular/router';
-import { NgTemplateOutlet } from '@angular/common';
-
-const ETOS_BRAND_NAME = 'etos';
-const ETOS_THEME_CONFIG = {
-    mode: 'light',
-    brand: ETOS_BRAND_NAME,
-};
-const ETOS_LAYOUT_CONFIG = {
-    mode: 'vertical',
-};
-
-function provideEtosTheme(config = {}, ...features) {
-    return provideMaterialTheme({
-        ...ETOS_THEME_CONFIG,
-        ...config,
-        brand: ETOS_BRAND_NAME,
-        'theme-brand': ETOS_BRAND_NAME,
-    }, ...features);
-}
-function provideEtosLayout(config = {}) {
-    return provideMaterialLayout({
-        ...ETOS_LAYOUT_CONFIG,
-        ...config,
-    });
-}
-function provideEtosBrand(options = {}) {
-    const providers = [
-        provideEtosTheme(options.theme, ...(options.materialDefaults === false ? [] : [withMaterialDefaults()])),
-        provideEtosLayout(options.layout),
-    ];
-    const navigation = options.navigation;
-    if (navigation) {
-        providers.push(provideEnvironmentInitializer(() => {
-            inject(NavigationService).registerItems(options.navigationId ?? DEFAULT_NAVIGATION_ID, navigation);
-        }));
-    }
-    return makeEnvironmentProviders(providers);
-}
-
-const THEME_SCHEME_OPTIONS = [
-    { value: 'light', label: 'Light', icon: 'light_mode' },
-    { value: 'dark', label: 'Dark', icon: 'dark_mode' },
-    { value: 'system', label: 'System', icon: 'computer' },
-];
-const LAYOUT_MODE_OPTIONS = [
-    { value: 'horizontal', label: 'Horizontal', icon: 'view_column' },
-    { value: 'vertical', label: 'Vertical', icon: 'view_sidebar' },
-    { value: 'empty', label: 'Empty', icon: 'crop_square' },
-];
-const LAYOUT_WIDTH_OPTIONS = [
-    { value: 'full', label: 'Full', icon: 'fit_screen' },
-    { value: 'container', label: 'Container', icon: 'center_focus_strong' },
-    { value: 'wide', label: 'Wide', icon: 'width_wide' },
-];
-const SWITCHER_PANEL_OVERLAP_OFFSET = -32;
-class EtosThemeSwitcherComponent {
-    theme = inject(ThemeService);
-    layout = inject(LayoutService);
-    popoverTrigger = viewChild.required('trigger');
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    userInfo = input(null, ...(ngDevMode ? [{ debugName: "userInfo" }] : /* istanbul ignore next */ []));
-    userName = input('User', ...(ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []));
-    userSubtitle = input('Theme and layout preferences', ...(ngDevMode ? [{ debugName: "userSubtitle" }] : /* istanbul ignore next */ []));
-    avatarSrc = input(null, ...(ngDevMode ? [{ debugName: "avatarSrc" }] : /* istanbul ignore next */ []));
-    avatarAlt = input('', ...(ngDevMode ? [{ debugName: "avatarAlt" }] : /* istanbul ignore next */ []));
-    quickActions = input.required(...(ngDevMode ? [{ debugName: "quickActions" }] : /* istanbul ignore next */ []));
-    notificationShortcut = input(null, ...(ngDevMode ? [{ debugName: "notificationShortcut" }] : /* istanbul ignore next */ []));
-    showNotificationShortcut = input(false, ...(ngDevMode ? [{ debugName: "showNotificationShortcut" }] : /* istanbul ignore next */ []));
-    popoverSide = input(null, ...(ngDevMode ? [{ debugName: "popoverSide" }] : /* istanbul ignore next */ []));
-    popoverAlign = input(null, ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []));
-    popoverSideOffset = input(null, ...(ngDevMode ? [{ debugName: "popoverSideOffset" }] : /* istanbul ignore next */ []));
-    actionSelected = output();
-    themeMode = this.theme.mode;
-    themeScheme = this.theme.scheme;
-    layoutMode = this.layout.mode;
-    layoutWidth = this.layout.width;
-    themeSchemeOptions = THEME_SCHEME_OPTIONS;
-    layoutModeOptions = LAYOUT_MODE_OPTIONS;
-    layoutWidthOptions = LAYOUT_WIDTH_OPTIONS;
-    notificationShortcutConfig = computed(() => {
-        const shortcut = this.notificationShortcut();
-        if (shortcut) {
-            return {
-                value: shortcut.value ?? 'notifications',
-                icon: shortcut.icon ?? 'notifications',
-                ariaLabel: shortcut.ariaLabel ?? `Open notifications for ${this.resolvedUserName()}`,
-            };
-        }
-        if (!this.showNotificationShortcut()) {
-            return null;
-        }
-        return {
-            value: 'notifications',
-            icon: 'notifications',
-            ariaLabel: `Open notifications for ${this.resolvedUserName()}`,
-        };
-    }, ...(ngDevMode ? [{ debugName: "notificationShortcutConfig" }] : /* istanbul ignore next */ []));
-    actionOptions = computed(() => {
-        const shortcutValue = this.notificationShortcutConfig()?.value;
-        if (!shortcutValue) {
-            return this.quickActions();
-        }
-        return this.quickActions().filter((action) => action.value !== shortcutValue);
-    }, ...(ngDevMode ? [{ debugName: "actionOptions" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('inline-flex shrink-0 items-center gap-2', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    resolvedPopoverSide = computed(() => this.popoverSide() ?? (this.layoutMode() === 'vertical' ? 'top' : 'bottom'), ...(ngDevMode ? [{ debugName: "resolvedPopoverSide" }] : /* istanbul ignore next */ []));
-    resolvedPopoverAlign = computed(() => this.popoverAlign() ?? (this.layoutMode() === 'vertical' ? 'start' : 'end'), ...(ngDevMode ? [{ debugName: "resolvedPopoverAlign" }] : /* istanbul ignore next */ []));
-    resolvedPopoverSideOffset = computed(() => this.popoverSideOffset() ?? SWITCHER_PANEL_OVERLAP_OFFSET, ...(ngDevMode ? [{ debugName: "resolvedPopoverSideOffset" }] : /* istanbul ignore next */ []));
-    resolvedUserName = computed(() => this.userInfo()?.name?.trim() || this.userName(), ...(ngDevMode ? [{ debugName: "resolvedUserName" }] : /* istanbul ignore next */ []));
-    resolvedUserSubtitle = computed(() => this.userInfo()?.subtitle ?? this.userSubtitle(), ...(ngDevMode ? [{ debugName: "resolvedUserSubtitle" }] : /* istanbul ignore next */ []));
-    resolvedAvatarSrc = computed(() => this.userInfo()?.avatarSrc ?? this.avatarSrc(), ...(ngDevMode ? [{ debugName: "resolvedAvatarSrc" }] : /* istanbul ignore next */ []));
-    resolvedAvatarAlt = computed(() => this.userInfo()?.avatarAlt ?? this.avatarAlt(), ...(ngDevMode ? [{ debugName: "resolvedAvatarAlt" }] : /* istanbul ignore next */ []));
-    hasAvatar = computed(() => !!this.resolvedAvatarSrc(), ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
-    avatarImageSrc = computed(() => this.resolvedAvatarSrc() ?? '', ...(ngDevMode ? [{ debugName: "avatarImageSrc" }] : /* istanbul ignore next */ []));
-    avatarAltText = computed(() => this.resolvedAvatarAlt() || `${this.resolvedUserName()} avatar`, ...(ngDevMode ? [{ debugName: "avatarAltText" }] : /* istanbul ignore next */ []));
-    initials = computed(() => this.toInitials(this.resolvedUserName()), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
-    triggerLabel = computed(() => `Open user info for ${this.resolvedUserName()}`, ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
-    triggerButtonClasses(open) {
-        return cn('relative h-8 w-8 rounded-full p-0 transition-colors duration-150 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', open && 'bg-muted/50');
-    }
-    notificationButtonClasses() {
-        return cn('h-8 w-8 rounded-[var(--layout-frame-radius)] p-0 text-muted-foreground transition-colors duration-150 hover:bg-muted/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background');
-    }
-    segmentedOptionClasses(active) {
-        return cn('h-10 rounded-[var(--layout-frame-radius)] border border-transparent px-[0.3125rem] py-[0.1875rem] text-foreground transition-colors', active ? 'bg-background shadow-sm' : 'text-muted-foreground hover:bg-background/70');
-    }
-    themeOptionClasses(active) {
-        return this.segmentedOptionClasses(active);
-    }
-    themeIconClasses(active) {
-        return active ? 'text-foreground' : 'text-muted-foreground';
-    }
-    actionButtonClasses(tone = 'default') {
-        return cn('h-12 w-full justify-start gap-2.5 rounded-[var(--layout-frame-radius)] border border-transparent px-2 py-1.5 text-left transition-colors hover:bg-muted/50', tone === 'destructive' && 'hover:bg-destructive/8 focus-visible:ring-destructive/30');
-    }
-    actionIconClasses(tone = 'default') {
-        return tone === 'destructive' ? 'text-destructive' : 'text-foreground';
-    }
-    actionLabelClasses(tone = 'default') {
-        return tone === 'destructive' ? 'text-sm font-medium text-destructive' : 'text-sm font-medium text-foreground';
-    }
-    setThemeScheme(mode) {
-        this.theme.setScheme(mode);
-    }
-    setLayoutMode(mode) {
-        this.layout.setMode(mode);
-    }
-    setLayoutWidth(width) {
-        this.layout.setWidth(width);
-    }
-    triggerAction(action) {
-        this.actionSelected.emit(action);
-        this.popoverTrigger().close();
-    }
-    triggerNotificationAction(event) {
-        event.stopPropagation();
-        const shortcut = this.notificationShortcutConfig();
-        if (!shortcut) {
-            return;
-        }
-        this.actionSelected.emit(shortcut.value);
-    }
-    labelForLayoutMode(mode) {
-        if (mode === 'horizontal') {
-            return 'Horizontal';
-        }
-        if (mode === 'empty') {
-            return 'Empty';
-        }
-        return 'Vertical';
-    }
-    labelForLayoutWidth(width) {
-        if (width === 'container') {
-            return 'Container';
-        }
-        if (width === 'wide') {
-            return 'Wide';
-        }
-        return 'Full';
-    }
-    toInitials(name) {
-        const segments = name.trim().split(/\s+/).filter(Boolean);
-        if (segments.length === 0) {
-            return 'UI';
-        }
-        if (segments.length === 1) {
-            return segments[0].slice(0, 2).toUpperCase();
-        }
-        return `${segments[0][0] ?? ''}${segments[1][0] ?? ''}`.toUpperCase();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: EtosThemeSwitcherComponent, isStandalone: true, selector: "etos-theme-switcher", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: true, transformFunction: null }, notificationShortcut: { classPropertyName: "notificationShortcut", publicName: "notificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, showNotificationShortcut: { classPropertyName: "showNotificationShortcut", publicName: "showNotificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverSideOffset: { classPropertyName: "popoverSideOffset", publicName: "popoverSideOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (notificationShortcutConfig(); as shortcut) {
-      <button
-        type="button"
-        ui-button
-        variant="ghost"
-        size="icon"
-        data-trigger-action="notifications"
-        [attr.data-value]="shortcut.value"
-        [attr.aria-label]="shortcut.ariaLabel"
-        [class]="notificationButtonClasses()"
-        (click)="triggerNotificationAction($event)">
-        <ui-nav-icon [name]="shortcut.icon" [size]="18" class="text-current" />
-      </button>
-    }
-
-    <button
-      #trigger="uiPopoverTrigger"
-      type="button"
-      ui-button
-      variant="ghost"
-      size="icon"
-      [uiPopoverTrigger]="preferencesPanel"
-      [side]="resolvedPopoverSide()"
-      [align]="resolvedPopoverAlign()"
-      [sideOffset]="resolvedPopoverSideOffset()"
-      [attr.aria-label]="triggerLabel()"
-      [class]="triggerButtonClasses(trigger.isOpen())">
-      <ui-avatar class="h-8 w-8 border border-border/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]">
-        @if (hasAvatar()) {
-          <ui-avatar-image [src]="avatarImageSrc()" [alt]="avatarAltText()" />
-        }
-        <ui-avatar-fallback class="bg-primary text-xs font-semibold tracking-[0.24em] text-primary-foreground">
-          {{ initials() }}
-        </ui-avatar-fallback>
-      </ui-avatar>
-    </button>
-
-    <ng-template uiPopoverContent #preferencesPanel="uiPopoverContent">
-      <section
-        data-etos-theme-switcher-panel
-        role="dialog"
-        aria-label="User Info"
-        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden  border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
-        <header class="p-5 pb-4">
-          <div class="flex items-center gap-4">
-            <ui-avatar class="h-14 w-14 border border-border/60 shadow-sm">
-              @if (hasAvatar()) {
-                <ui-avatar-image [src]="avatarImageSrc()" [alt]="avatarAltText()" />
-              }
-              <ui-avatar-fallback class="bg-primary text-sm font-semibold tracking-[0.24em] text-primary-foreground">
-                {{ initials() }}
-              </ui-avatar-fallback>
-            </ui-avatar>
-
-            <div class="min-w-0 flex min-h-14 flex-1 flex-col justify-center self-center">
-              <div class="space-y-px">
-                <h2 class="truncate text-[1.1rem] font-semibold leading-none tracking-tight text-foreground">
-                  {{ resolvedUserName() }}
-                </h2>
-                <p class="text-sm leading-[0.95rem] text-muted-foreground">
-                  {{ resolvedUserSubtitle() }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <div class="space-y-4 px-5 pb-5">
-          <section
-            data-setting="theme-scheme"
-            [attr.data-current]="themeScheme()"
-            class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-            <div class="grid grid-cols-3 gap-1">
-              @for (option of themeSchemeOptions; track option.value) {
-                <button
-                  type="button"
-                  ui-button
-                  size="sm"
-                  variant="ghost"
-                  [class]="themeOptionClasses(themeScheme() === option.value)"
-                  data-setting-option="theme-scheme"
-                  [attr.data-value]="option.value"
-                  (click)="setThemeScheme(option.value)">
-                  <span class="inline-flex items-center gap-2.5">
-                    <ui-nav-icon
-                      [name]="option.icon"
-                      [size]="18"
-                      [class]="themeIconClasses(themeScheme() === option.value)" />
-                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                  </span>
-                </button>
-              }
-            </div>
-          </section>
-
-          <section data-setting="layout-mode" [attr.data-current]="layoutMode()" class="space-y-2">
-            <div class="px-1">
-              <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
-            </div>
-            <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-3 gap-1">
-                @for (option of layoutModeOptions; track option.value) {
-                  <button
-                    type="button"
-                    ui-button
-                    size="sm"
-                    variant="ghost"
-                    [class]="segmentedOptionClasses(layoutMode() === option.value)"
-                    data-setting-option="layout-mode"
-                    [attr.data-value]="option.value"
-                    (click)="setLayoutMode(option.value)">
-                    <span class="inline-flex items-center gap-2.5">
-                      <ui-nav-icon
-                        [name]="option.icon"
-                        [size]="18"
-                        [class]="themeIconClasses(layoutMode() === option.value)" />
-                      <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                    </span>
-                  </button>
-                }
-              </div>
-            </div>
-          </section>
-
-          <section data-setting="layout-width" [attr.data-current]="layoutWidth()" class="space-y-2">
-            <div class="px-1">
-              <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
-            </div>
-            <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-3 gap-1">
-                @for (option of layoutWidthOptions; track option.value) {
-                  <button
-                    type="button"
-                    ui-button
-                    size="sm"
-                    variant="ghost"
-                    [class]="segmentedOptionClasses(layoutWidth() === option.value)"
-                    data-setting-option="layout-width"
-                    [attr.data-value]="option.value"
-                    (click)="setLayoutWidth(option.value)">
-                    <span class="inline-flex items-center gap-2.5">
-                      <ui-nav-icon
-                        [name]="option.icon"
-                        [size]="18"
-                        [class]="themeIconClasses(layoutWidth() === option.value)" />
-                      <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                    </span>
-                  </button>
-                }
-              </div>
-            </div>
-          </section>
-
-          <section class="space-y-1 border-t border-border/70 pt-2">
-            <h3 class="sr-only">Quick Actions</h3>
-            <div class="grid gap-1">
-              @for (action of actionOptions(); track action.value) {
-                <button
-                  type="button"
-                  ui-button
-                  variant="ghost"
-                  [class]="actionButtonClasses(action.tone ?? 'default')"
-                  data-action-option
-                  [attr.data-value]="action.value"
-                  (click)="triggerAction(action.value)">
-                  <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted/65">
-                    <ui-nav-icon
-                      [name]="action.icon"
-                      [size]="19"
-                      [class]="actionIconClasses(action.tone ?? 'default')" />
-                  </span>
-                  <span [class]="actionLabelClasses(action.tone ?? 'default')">
-                    {{ action.label }}
-                  </span>
-                </button>
-              }
-            </div>
-          </section>
-        </div>
-      </section>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "ui-avatar-fallback", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "ui-avatar-image", inputs: ["src", "alt", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: PopoverContentDirective, selector: "ng-template[uiPopoverContent]", exportAs: ["uiPopoverContent"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[uiPopoverTrigger]", inputs: ["uiPopoverTrigger", "side", "align", "sideOffset", "disabled"], outputs: ["openedChange"], exportAs: ["uiPopoverTrigger"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'etos-theme-switcher',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        AvatarComponent,
-                        AvatarFallbackComponent,
-                        AvatarImageComponent,
-                        ButtonComponent,
-                        PopoverContentDirective,
-                        PopoverTriggerDirective,
-                        UiNavIconComponent,
-                    ],
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `
-    @if (notificationShortcutConfig(); as shortcut) {
-      <button
-        type="button"
-        ui-button
-        variant="ghost"
-        size="icon"
-        data-trigger-action="notifications"
-        [attr.data-value]="shortcut.value"
-        [attr.aria-label]="shortcut.ariaLabel"
-        [class]="notificationButtonClasses()"
-        (click)="triggerNotificationAction($event)">
-        <ui-nav-icon [name]="shortcut.icon" [size]="18" class="text-current" />
-      </button>
-    }
-
-    <button
-      #trigger="uiPopoverTrigger"
-      type="button"
-      ui-button
-      variant="ghost"
-      size="icon"
-      [uiPopoverTrigger]="preferencesPanel"
-      [side]="resolvedPopoverSide()"
-      [align]="resolvedPopoverAlign()"
-      [sideOffset]="resolvedPopoverSideOffset()"
-      [attr.aria-label]="triggerLabel()"
-      [class]="triggerButtonClasses(trigger.isOpen())">
-      <ui-avatar class="h-8 w-8 border border-border/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]">
-        @if (hasAvatar()) {
-          <ui-avatar-image [src]="avatarImageSrc()" [alt]="avatarAltText()" />
-        }
-        <ui-avatar-fallback class="bg-primary text-xs font-semibold tracking-[0.24em] text-primary-foreground">
-          {{ initials() }}
-        </ui-avatar-fallback>
-      </ui-avatar>
-    </button>
-
-    <ng-template uiPopoverContent #preferencesPanel="uiPopoverContent">
-      <section
-        data-etos-theme-switcher-panel
-        role="dialog"
-        aria-label="User Info"
-        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden  border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
-        <header class="p-5 pb-4">
-          <div class="flex items-center gap-4">
-            <ui-avatar class="h-14 w-14 border border-border/60 shadow-sm">
-              @if (hasAvatar()) {
-                <ui-avatar-image [src]="avatarImageSrc()" [alt]="avatarAltText()" />
-              }
-              <ui-avatar-fallback class="bg-primary text-sm font-semibold tracking-[0.24em] text-primary-foreground">
-                {{ initials() }}
-              </ui-avatar-fallback>
-            </ui-avatar>
-
-            <div class="min-w-0 flex min-h-14 flex-1 flex-col justify-center self-center">
-              <div class="space-y-px">
-                <h2 class="truncate text-[1.1rem] font-semibold leading-none tracking-tight text-foreground">
-                  {{ resolvedUserName() }}
-                </h2>
-                <p class="text-sm leading-[0.95rem] text-muted-foreground">
-                  {{ resolvedUserSubtitle() }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <div class="space-y-4 px-5 pb-5">
-          <section
-            data-setting="theme-scheme"
-            [attr.data-current]="themeScheme()"
-            class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-            <div class="grid grid-cols-3 gap-1">
-              @for (option of themeSchemeOptions; track option.value) {
-                <button
-                  type="button"
-                  ui-button
-                  size="sm"
-                  variant="ghost"
-                  [class]="themeOptionClasses(themeScheme() === option.value)"
-                  data-setting-option="theme-scheme"
-                  [attr.data-value]="option.value"
-                  (click)="setThemeScheme(option.value)">
-                  <span class="inline-flex items-center gap-2.5">
-                    <ui-nav-icon
-                      [name]="option.icon"
-                      [size]="18"
-                      [class]="themeIconClasses(themeScheme() === option.value)" />
-                    <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                  </span>
-                </button>
-              }
-            </div>
-          </section>
-
-          <section data-setting="layout-mode" [attr.data-current]="layoutMode()" class="space-y-2">
-            <div class="px-1">
-              <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
-            </div>
-            <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-3 gap-1">
-                @for (option of layoutModeOptions; track option.value) {
-                  <button
-                    type="button"
-                    ui-button
-                    size="sm"
-                    variant="ghost"
-                    [class]="segmentedOptionClasses(layoutMode() === option.value)"
-                    data-setting-option="layout-mode"
-                    [attr.data-value]="option.value"
-                    (click)="setLayoutMode(option.value)">
-                    <span class="inline-flex items-center gap-2.5">
-                      <ui-nav-icon
-                        [name]="option.icon"
-                        [size]="18"
-                        [class]="themeIconClasses(layoutMode() === option.value)" />
-                      <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                    </span>
-                  </button>
-                }
-              </div>
-            </div>
-          </section>
-
-          <section data-setting="layout-width" [attr.data-current]="layoutWidth()" class="space-y-2">
-            <div class="px-1">
-              <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
-            </div>
-            <div class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-3 gap-1">
-                @for (option of layoutWidthOptions; track option.value) {
-                  <button
-                    type="button"
-                    ui-button
-                    size="sm"
-                    variant="ghost"
-                    [class]="segmentedOptionClasses(layoutWidth() === option.value)"
-                    data-setting-option="layout-width"
-                    [attr.data-value]="option.value"
-                    (click)="setLayoutWidth(option.value)">
-                    <span class="inline-flex items-center gap-2.5">
-                      <ui-nav-icon
-                        [name]="option.icon"
-                        [size]="18"
-                        [class]="themeIconClasses(layoutWidth() === option.value)" />
-                      <span class="text-sm font-semibold leading-none">{{ option.label }}</span>
-                    </span>
-                  </button>
-                }
-              </div>
-            </div>
-          </section>
-
-          <section class="space-y-1 border-t border-border/70 pt-2">
-            <h3 class="sr-only">Quick Actions</h3>
-            <div class="grid gap-1">
-              @for (action of actionOptions(); track action.value) {
-                <button
-                  type="button"
-                  ui-button
-                  variant="ghost"
-                  [class]="actionButtonClasses(action.tone ?? 'default')"
-                  data-action-option
-                  [attr.data-value]="action.value"
-                  (click)="triggerAction(action.value)">
-                  <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted/65">
-                    <ui-nav-icon
-                      [name]="action.icon"
-                      [size]="19"
-                      [class]="actionIconClasses(action.tone ?? 'default')" />
-                  </span>
-                  <span [class]="actionLabelClasses(action.tone ?? 'default')">
-                    {{ action.label }}
-                  </span>
-                </button>
-              }
-            </div>
-          </section>
-        </div>
-      </section>
-    </ng-template>
-  `,
-                }]
-        }], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], userSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSubtitle", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: true }] }], notificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationShortcut", required: false }] }], showNotificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotificationShortcut", required: false }] }], popoverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSide", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverSideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSideOffset", required: false }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }] } });
-
-class EmptyLayout {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EmptyLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: EmptyLayout, isStandalone: true, selector: "empty", ngImport: i0, template: `
-    <div
-      class="h-dvh overflow-hidden bg-neutral-200  bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div class="relative isolate box-border h-full overflow-hidden py-3">
-        <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 inset-x-0 px-3">
-          <div class="relative mx-auto h-full w-full">
-            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
-            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
-          </div>
-        </div>
-
-        <div class="h-full min-h-0 border border-brand px-3">
-          <main class="mx-auto w-full h-full min-h-0 overflow-y-auto bg-background/65">
-            <router-outlet />
-          </main>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], 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.13", ngImport: i0, type: EmptyLayout, decorators: [{
-            type: Component,
-            args: [{ selector: 'empty', imports: [RouterOutlet], template: `
-    <div
-      class="h-dvh overflow-hidden bg-neutral-200  bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div class="relative isolate box-border h-full overflow-hidden py-3">
-        <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 inset-x-0 px-3">
-          <div class="relative mx-auto h-full w-full">
-            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
-            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
-          </div>
-        </div>
-
-        <div class="h-full min-h-0 border border-brand px-3">
-          <main class="mx-auto w-full h-full min-h-0 overflow-y-auto bg-background/65">
-            <router-outlet />
-          </main>
-        </div>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
-
-class HorizontalLayout {
-    layout = inject(LayoutService);
-    brandTemplate = input(null, ...(ngDevMode ? [{ debugName: "brandTemplate" }] : /* istanbul ignore next */ []));
-    profileTemplate = input(null, ...(ngDevMode ? [{ debugName: "profileTemplate" }] : /* istanbul ignore next */ []));
-    layoutWidth = this.layout.width;
-    shellClasses = computed(() => {
-        switch (this.layoutWidth()) {
-            case 'full':
-                return 'relative isolate box-border h-dvh overflow-hidden py-3';
-            case 'wide':
-                return 'relative isolate box-border h-dvh overflow-hidden py-3 lg:py-10';
-            default:
-                return 'relative isolate box-border h-dvh overflow-hidden py-3 lg:py-20';
-        }
-    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
-    railOverlayClasses = computed(() => {
-        const classes = ['pointer-events-none', 'absolute', 'inset-y-0', 'inset-x-0', 'z-20'];
-        if (this.layoutWidth() === 'full') {
-            classes.push('px-3');
-        }
-        else if (this.layoutWidth() === 'wide') {
-            classes.push('px-3', 'lg:px-10');
-        }
-        else {
-            classes.push('px-3', 'lg:px-10');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "railOverlayClasses" }] : /* istanbul ignore next */ []));
-    railGuideClasses = computed(() => this.layoutWidth() === 'container' ? 'relative mx-auto h-full w-full max-w-7xl' : 'relative mx-auto h-full w-full', ...(ngDevMode ? [{ debugName: "railGuideClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => {
-        const classes = ['relative', 'z-10', 'h-full', 'min-h-0', 'border', 'border-brand'];
-        if (this.layoutWidth() === 'full') {
-            classes.push('px-3');
-        }
-        else if (this.layoutWidth() === 'wide') {
-            classes.push('px-3', 'lg:px-10');
-        }
-        else {
-            classes.push('px-3', 'lg:px-10');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
-    maskClasses = computed(() => {
-        const classes = ['h-full', 'bg-position-[center_center]', 'bg-size-[2.775rem_2.775rem]'];
-        if (this.layoutWidth() === 'container') {
-            classes.unshift('mx-auto', 'w-full', 'max-w-7xl');
-        }
-        else {
-            classes.unshift('mx-auto', 'w-full');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "maskClasses" }] : /* istanbul ignore next */ []));
-    contentClasses = computed(() => {
-        const classes = [
-            'relative',
-            'z-20',
-            'mx-auto',
-            'flex',
-            'h-full',
-            'min-h-0',
-            'flex-col',
-            'overflow-hidden',
-            'bg-background/65',
-        ];
-        if (this.layoutWidth() === 'container') {
-            classes.push('w-full', 'max-w-7xl');
-        }
-        else {
-            classes.push('w-full');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HorizontalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: HorizontalLayout, isStandalone: true, selector: "horizontal", inputs: { brandTemplate: { classPropertyName: "brandTemplate", publicName: "brandTemplate", isSignal: true, isRequired: false, transformFunction: null }, profileTemplate: { classPropertyName: "profileTemplate", publicName: "profileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block" }, ngImport: i0, template: `
-    <div
-      class="min-h-screen bg-neutral-200 text-neutral-600 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div [class]="shellClasses()">
-        <div aria-hidden="true" [class]="railOverlayClasses()">
-          <div [class]="railGuideClasses()">
-            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
-            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
-          </div>
-        </div>
-
-        <div [class]="frameClasses()">
-          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-0">
-            <div class="absolute inset-x-0 top-11 h-px bg-brand"></div>
-            <div class="absolute inset-x-0 bottom-11.75 h-px bg-brand"></div>
-          </div>
-          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-10">
-            <div [class]="maskClasses()"></div>
-          </div>
-          <div [class]="contentClasses()">
-            <nav class="shrink-0">
-              <topbar class="shrink-0" [showHamburger]="false">
-                @if (brandTemplate(); as brand) {
-                  <div topbar-start class="min-w-0">
-                    <ng-container [ngTemplateOutlet]="brand" />
-                  </div>
-                }
-
-                @if (profileTemplate(); as profile) {
-                  <div topbar-end class="flex min-w-0 items-center">
-                    <ng-container [ngTemplateOutlet]="profile" />
-                  </div>
-                }
-              </topbar>
-            </nav>
-            <main class="min-h-0 flex-1 overflow-auto">
-              <router-outlet />
-            </main>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: HorizontalLayout, decorators: [{
-            type: Component,
-            args: [{ selector: 'horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, RouterOutlet, TopbarComponent], host: {
-                        class: 'block',
-                        '[attr.data-layout-width]': 'layoutWidth()',
-                    }, template: `
-    <div
-      class="min-h-screen bg-neutral-200 text-neutral-600 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div [class]="shellClasses()">
-        <div aria-hidden="true" [class]="railOverlayClasses()">
-          <div [class]="railGuideClasses()">
-            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
-            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
-          </div>
-        </div>
-
-        <div [class]="frameClasses()">
-          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-0">
-            <div class="absolute inset-x-0 top-11 h-px bg-brand"></div>
-            <div class="absolute inset-x-0 bottom-11.75 h-px bg-brand"></div>
-          </div>
-          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-10">
-            <div [class]="maskClasses()"></div>
-          </div>
-          <div [class]="contentClasses()">
-            <nav class="shrink-0">
-              <topbar class="shrink-0" [showHamburger]="false">
-                @if (brandTemplate(); as brand) {
-                  <div topbar-start class="min-w-0">
-                    <ng-container [ngTemplateOutlet]="brand" />
-                  </div>
-                }
-
-                @if (profileTemplate(); as profile) {
-                  <div topbar-end class="flex min-w-0 items-center">
-                    <ng-container [ngTemplateOutlet]="profile" />
-                  </div>
-                }
-              </topbar>
-            </nav>
-            <main class="min-h-0 flex-1 overflow-auto">
-              <router-outlet />
-            </main>
-          </div>
-        </div>
-      </div>
-    </div>
-  ` }]
-        }], propDecorators: { brandTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandTemplate", required: false }] }], profileTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileTemplate", required: false }] }] } });
-
-class VerticalLayout {
-    layout = inject(LayoutService);
-    sidebarAppearance = input('default', ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
-    sidebarPosition = input('left', ...(ngDevMode ? [{ debugName: "sidebarPosition" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    sidebarHeaderTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarHeaderTemplate" }] : /* istanbul ignore next */ []));
-    sidebarFooterTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarFooterTemplate" }] : /* istanbul ignore next */ []));
-    layoutWidth = this.layout.width;
-    shellClasses = computed(() => {
-        switch (this.layoutWidth()) {
-            case 'full':
-                return 'relative isolate h-full overflow-hidden py-2';
-            case 'wide':
-                return 'relative isolate h-full overflow-hidden py-2 lg:py-10';
-            default:
-                return 'relative isolate h-full overflow-hidden py-2  lg:py-18';
-        }
-    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => {
-        if (this.layoutWidth() === 'wide') {
-            return 'relative h-full border-y border-brand';
-        }
-        return '-mx-18 relative h-full border-y border-brand';
-    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
-    frameBodyClasses = computed(() => {
-        if (this.layoutWidth() === 'wide') {
-            return 'h-full lg:px-10';
-        }
-        return 'h-full px-20';
-    }, ...(ngDevMode ? [{ debugName: "frameBodyClasses" }] : /* istanbul ignore next */ []));
-    gridClasses = computed(() => {
-        const classes = [
-            'relative',
-            'mx-auto',
-            'grid',
-            'h-full',
-            'w-full',
-            'max-w-full',
-            'grid-cols-[auto_minmax(0,1fr)]',
-            'items-stretch',
-            'bg-background/65',
-        ];
-        switch (this.layoutWidth()) {
-            case 'container':
-                classes.push('lg:max-w-[var(--layout-vertical-shell-max-width)]');
-                break;
-            default:
-                break;
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "gridClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: VerticalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: VerticalLayout, isStandalone: true, selector: "vertical", inputs: { sidebarAppearance: { classPropertyName: "sidebarAppearance", publicName: "sidebarAppearance", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block h-dvh overflow-hidden" }, ngImport: i0, template: `
-    <!-- prettier-ignore -->
-    <div class="h-full overflow-hidden bg-neutral-200   bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div [class]="shellClasses()">
-        <div [class]="frameClasses()">
-          <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
-            <div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
-            <div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
-          </div>
-          <div [class]="frameBodyClasses()">
-            <div [class]="gridClasses()">
-              <div
-                aria-hidden="true"
-                class="pointer-events-none absolute bottom-[-100vh] left-0 top-[-100vh] z-20 w-px bg-brand"></div>
-              <div
-                aria-hidden="true"
-                class="pointer-events-none absolute bottom-[-100vh] right-0 top-[-100vh] z-20 w-px bg-brand"></div>
-              <nav class="relative h-full min-h-0 shrink-0 overflow-visible border-r border-primary/30">
-                <div
-                  aria-hidden="true"
-                  data-sidebar-rail
-                  class="pointer-events-none absolute bottom-[-100vh] left-full top-[-100vh] -z-10 w-px bg-primary/30 transition-transform duration-200 ease-out"></div>
-                <sidebar
-                  class="h-full"
-                  [appearance]="sidebarAppearance()"
-                  [borderSource]="'layout'"
-                  [position]="sidebarPosition()"
-                  [ariaLabel]="ariaLabel()">
-                  @if (sidebarHeaderTemplate(); as headerTemplate) {
-                    <div sidebar-header class="contents">
-                      <ng-container [ngTemplateOutlet]="headerTemplate" />
-                    </div>
-                  }
-                  @if (sidebarFooterTemplate(); as footerTemplate) {
-                    <div sidebar-footer class="contents">
-                      <ng-container [ngTemplateOutlet]="footerTemplate" />
-                    </div>
-                  }
-                </sidebar>
-              </nav>
-              <main class="relative min-h-0 min-w-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10">
-                <router-outlet />
-              </main>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: ["nav:has(>sidebar[data-appearance=thin][data-expanded=true])>[data-sidebar-rail]{transform:translate(13.5rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["items", "navigationId", "appearance", "borderSource", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: VerticalLayout, decorators: [{
-            type: Component,
-            args: [{ selector: 'vertical', imports: [NgTemplateOutlet, RouterOutlet, SidebarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'block h-dvh overflow-hidden',
-                        '[attr.data-layout-width]': 'layoutWidth()',
-                    }, template: `
-    <!-- prettier-ignore -->
-    <div class="h-full overflow-hidden bg-neutral-200   bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
-      <div [class]="shellClasses()">
-        <div [class]="frameClasses()">
-          <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
-            <div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
-            <div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
-          </div>
-          <div [class]="frameBodyClasses()">
-            <div [class]="gridClasses()">
-              <div
-                aria-hidden="true"
-                class="pointer-events-none absolute bottom-[-100vh] left-0 top-[-100vh] z-20 w-px bg-brand"></div>
-              <div
-                aria-hidden="true"
-                class="pointer-events-none absolute bottom-[-100vh] right-0 top-[-100vh] z-20 w-px bg-brand"></div>
-              <nav class="relative h-full min-h-0 shrink-0 overflow-visible border-r border-primary/30">
-                <div
-                  aria-hidden="true"
-                  data-sidebar-rail
-                  class="pointer-events-none absolute bottom-[-100vh] left-full top-[-100vh] -z-10 w-px bg-primary/30 transition-transform duration-200 ease-out"></div>
-                <sidebar
-                  class="h-full"
-                  [appearance]="sidebarAppearance()"
-                  [borderSource]="'layout'"
-                  [position]="sidebarPosition()"
-                  [ariaLabel]="ariaLabel()">
-                  @if (sidebarHeaderTemplate(); as headerTemplate) {
-                    <div sidebar-header class="contents">
-                      <ng-container [ngTemplateOutlet]="headerTemplate" />
-                    </div>
-                  }
-                  @if (sidebarFooterTemplate(); as footerTemplate) {
-                    <div sidebar-footer class="contents">
-                      <ng-container [ngTemplateOutlet]="footerTemplate" />
-                    </div>
-                  }
-                </sidebar>
-              </nav>
-              <main class="relative min-h-0 min-w-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10">
-                <router-outlet />
-              </main>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: ["nav:has(>sidebar[data-appearance=thin][data-expanded=true])>[data-sidebar-rail]{transform:translate(13.5rem)}\n"] }]
-        }], propDecorators: { sidebarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarAppearance", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], sidebarHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarHeaderTemplate", required: false }] }], sidebarFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFooterTemplate", required: false }] }] } });
-
-class EtosLayoutComponent {
-    mode = input(null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    sidebarHeaderTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarHeaderTemplate" }] : /* istanbul ignore next */ []));
-    sidebarFooterTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarFooterTemplate" }] : /* istanbul ignore next */ []));
-    layoutBrandTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutBrandTemplate" }] : /* istanbul ignore next */ []));
-    layoutProfileTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutProfileTemplate" }] : /* istanbul ignore next */ []));
-    layout = inject(LayoutService);
-    resolvedMode = computed(() => this.mode() ?? this.layout.mode(), ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: EtosLayoutComponent, isStandalone: true, selector: "etos-layout", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutBrandTemplate: { classPropertyName: "layoutBrandTemplate", publicName: "layoutBrandTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutProfileTemplate: { classPropertyName: "layoutProfileTemplate", publicName: "layoutProfileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-mode": "resolvedMode()" }, classAttribute: "contents" }, ngImport: i0, template: `
-    @switch (resolvedMode()) {
-      @case ('empty') {
-        <empty />
-      }
-      @case ('horizontal') {
-        <horizontal [brandTemplate]="layoutBrandTemplate()" [profileTemplate]="layoutProfileTemplate()" />
-      }
-      @default {
-        <vertical
-          [sidebarHeaderTemplate]="sidebarHeaderTemplate() ?? layoutBrandTemplate()"
-          [sidebarFooterTemplate]="sidebarFooterTemplate() ?? layoutProfileTemplate()" />
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: EmptyLayout, selector: "empty" }, { kind: "component", type: HorizontalLayout, selector: "horizontal", inputs: ["brandTemplate", "profileTemplate"] }, { kind: "component", type: VerticalLayout, selector: "vertical", inputs: ["sidebarAppearance", "sidebarPosition", "ariaLabel", "sidebarHeaderTemplate", "sidebarFooterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EtosLayoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'etos-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [EmptyLayout, HorizontalLayout, VerticalLayout],
-                    host: {
-                        class: 'contents',
-                        '[attr.data-layout-mode]': 'resolvedMode()',
-                    },
-                    template: `
-    @switch (resolvedMode()) {
-      @case ('empty') {
-        <empty />
-      }
-      @case ('horizontal') {
-        <horizontal [brandTemplate]="layoutBrandTemplate()" [profileTemplate]="layoutProfileTemplate()" />
-      }
-      @default {
-        <vertical
-          [sidebarHeaderTemplate]="sidebarHeaderTemplate() ?? layoutBrandTemplate()"
-          [sidebarFooterTemplate]="sidebarFooterTemplate() ?? layoutProfileTemplate()" />
-      }
-    }
-  `,
-                }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], sidebarHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarHeaderTemplate", required: false }] }], sidebarFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFooterTemplate", required: false }] }], layoutBrandTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutBrandTemplate", required: false }] }], layoutProfileTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutProfileTemplate", required: false }] }] } });
-
-class ShellPagesComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ShellPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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-border px-2">
-        <ng-content select="[shell-pages-header]" />
-      </header>
-
-      <main class="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10">
-        <ng-content select="[shell-pages-main]" />
-      </main>
-
-      <footer class="flex h-12 min-w-0 shrink-0 items-center gap-2 border-t border-border px-2">
-        <ng-content select="[shell-pages-footer]" />
-      </footer>
-    </div>
-  `, isInline: true, styles: ["footer:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ShellPagesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'shell-pages', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'block h-full min-h-0',
-                    }, 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-border px-2">
-        <ng-content select="[shell-pages-header]" />
-      </header>
-
-      <main class="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10">
-        <ng-content select="[shell-pages-main]" />
-      </main>
-
-      <footer class="flex h-12 min-w-0 shrink-0 items-center gap-2 border-t border-border px-2">
-        <ng-content select="[shell-pages-footer]" />
-      </footer>
-    </div>
-  `, styles: ["footer:empty{display:none}\n"] }]
-        }] });
-
-/*
- * Public API Surface of @ojiepermana/angular/etos
- *
- * Etos-specific implementation lives under projects/angular/brand/etos.
- */
-const ETOS_BRAND_VERSION = '0.0.1';
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ETOS_BRAND_NAME, ETOS_BRAND_VERSION, ETOS_LAYOUT_CONFIG, ETOS_THEME_CONFIG, EtosLayoutComponent, EtosThemeSwitcherComponent, ShellPagesComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
-//# sourceMappingURL=ojiepermana-angular-brand-etos.mjs.map