@ojiepermana/angular 21.1.2 → 21.1.5

package/fesm2022/ojiepermana-angular-etos.mjs

@@ -1,12 +1,818 @@
-export * from '@ojiepermana/angular/brand/etos';
+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';
+
+const ETOS_BRAND_NAME = 'etos';
+const ETOS_THEME_CONFIG = {
+    mode: 'light',
+    brand: ETOS_BRAND_NAME,
+};
+const ETOS_LAYOUT_CONFIG = {
+    mode: 'vertical',
+    width: 'fixed',
+};
+
+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' },
+];
+const LAYOUT_WIDTH_OPTIONS = [
+    { value: 'full', label: 'Full', icon: 'fit_screen' },
+    { value: 'fixed', label: 'Fixed', icon: 'center_focus_strong' },
+];
+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('bottom', ...(ngDevMode ? [{ debugName: "popoverSide" }] : /* istanbul ignore next */ []));
+    popoverAlign = input('end', ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* 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 */ []));
+    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(--etos-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(--etos-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(--etos-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) {
+        return mode === 'horizontal' ? 'Horizontal' : 'Vertical';
+    }
+    labelForLayoutWidth(width) {
+        return width === 'full' ? 'Full' : 'Fixed';
+    }
+    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.9", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 } }, 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]="popoverSide()"
+      [align]="popoverAlign()"
+      [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 rounded-[var(--etos-layout-frame-radius)] 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-[var(--etos-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-[var(--etos-layout-frame-radius)] bg-muted/65 p-0.5">
+              <div class="grid grid-cols-2 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-[var(--etos-layout-frame-radius)] bg-muted/65 p-0.5">
+              <div class="grid grid-cols-2 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: ["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", "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.9", 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]="popoverSide()"
+      [align]="popoverAlign()"
+      [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 rounded-[var(--etos-layout-frame-radius)] 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-[var(--etos-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-[var(--etos-layout-frame-radius)] bg-muted/65 p-0.5">
+              <div class="grid grid-cols-2 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-[var(--etos-layout-frame-radius)] bg-muted/65 p-0.5">
+              <div class="grid grid-cols-2 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 }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }] } });
+
+class EtosEmptyLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosEmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: EtosEmptyLayoutComponent, isStandalone: true, selector: "etos-empty-layout", host: { attributes: { "data-brand-layout": "etos-empty" }, classAttribute: "etos-layout-empty-host" }, ngImport: i0, template: `
+    <main class="etos-layout-empty-main">
+      <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.9", ngImport: i0, type: EtosEmptyLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'etos-empty-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet],
+                    host: {
+                        class: 'etos-layout-empty-host',
+                        'data-brand-layout': 'etos-empty',
+                    },
+                    template: `
+    <main class="etos-layout-empty-main">
+      <router-outlet />
+    </main>
+  `,
+                }]
+        }] });
+
+class EtosHorizontalLayoutComponent {
+    layout = inject(LayoutService);
+    topbarAppearance = input('default', ...(ngDevMode ? [{ debugName: "topbarAppearance" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    brandLayout = 'etos-horizontal';
+    layoutWidth = this.layout.width;
+    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['etos-layout-host', 'etos-layout-host--horizontal'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-host--fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => {
+        const classes = ['etos-layout-frame', 'etos-layout-frame--horizontal'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-frame--fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    mainClasses = computed(() => {
+        const classes = ['etos-layout-main'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-main--fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosHorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: EtosHorizontalLayoutComponent, isStandalone: true, selector: "etos-horizontal-layout", 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-brand-layout": "brandLayout", "attr.data-layout-width": "layoutWidth()" } }, ngImport: i0, template: `
+    <div [class]="frameClasses()">
+      <ui-topbar
+        class="etos-layout-topbar"
+        [appearance]="topbarAppearance()"
+        [ariaLabel]="ariaLabel()"
+        [style.border-bottom-width]="dividerBorderWidth()">
+        <div ui-topbar-start class="etos-layout-topbar-slot etos-layout-topbar-slot--start">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+        </div>
+        <div ui-topbar-end class="etos-layout-topbar-slot etos-layout-topbar-slot--end">
+          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+        </div>
+      </ui-topbar>
+      <main [class]="mainClasses()">
+        <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: "ui-topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosHorizontalLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'etos-horizontal-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet, TopbarComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-brand-layout]': 'brandLayout',
+                        '[attr.data-layout-width]': 'layoutWidth()',
+                    },
+                    template: `
+    <div [class]="frameClasses()">
+      <ui-topbar
+        class="etos-layout-topbar"
+        [appearance]="topbarAppearance()"
+        [ariaLabel]="ariaLabel()"
+        [style.border-bottom-width]="dividerBorderWidth()">
+        <div ui-topbar-start class="etos-layout-topbar-slot etos-layout-topbar-slot--start">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+        </div>
+        <div ui-topbar-end class="etos-layout-topbar-slot etos-layout-topbar-slot--end">
+          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+        </div>
+      </ui-topbar>
+      <main [class]="mainClasses()">
+        <router-outlet />
+      </main>
+    </div>
+  `,
+                }]
+        }], propDecorators: { topbarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarAppearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class EtosVerticalLayoutComponent {
+    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 */ []));
+    brandLayout = 'etos-vertical';
+    layoutWidth = this.layout.width;
+    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['etos-layout-host', 'etos-layout-host--vertical'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-host--fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => {
+        const classes = ['etos-layout-frame', 'etos-layout-frame--vertical'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-frame--fixed', 'etos-layout-frame--vertical-fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    mainClasses = computed(() => {
+        const classes = ['etos-layout-main'];
+        if (this.layoutWidth() === 'fixed') {
+            classes.push('etos-layout-main--fixed', 'etos-layout-main--vertical-fixed');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: EtosVerticalLayoutComponent, isStandalone: true, selector: "etos-vertical-layout", 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 } }, host: { properties: { "class": "hostClasses()", "attr.data-brand-layout": "brandLayout", "attr.data-layout-width": "layoutWidth()" } }, ngImport: i0, template: `
+    <div [class]="frameClasses()">
+      <ui-sidebar
+        class="etos-layout-sidebar"
+        [appearance]="sidebarAppearance()"
+        [position]="sidebarPosition()"
+        [ariaLabel]="ariaLabel()"
+        [style.border-left-width]="dividerBorderWidth()"
+        [style.border-right-width]="dividerBorderWidth()">
+        <div ui-sidebar-header class="flex h-full w-full min-w-0 items-center">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start],[ui-sidebar-header]" />
+        </div>
+
+        <div ui-sidebar-footer class="flex h-full w-full min-w-0 items-center justify-between gap-3 px-3">
+          <ng-content select="[ui-layout-profile],[ui-topbar-end],[ui-sidebar-footer]" />
+        </div>
+      </ui-sidebar>
+      <main [class]="mainClasses()">
+        <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: SidebarComponent, selector: "ui-sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosVerticalLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'etos-vertical-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterOutlet, SidebarComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-brand-layout]': 'brandLayout',
+                        '[attr.data-layout-width]': 'layoutWidth()',
+                    },
+                    template: `
+    <div [class]="frameClasses()">
+      <ui-sidebar
+        class="etos-layout-sidebar"
+        [appearance]="sidebarAppearance()"
+        [position]="sidebarPosition()"
+        [ariaLabel]="ariaLabel()"
+        [style.border-left-width]="dividerBorderWidth()"
+        [style.border-right-width]="dividerBorderWidth()">
+        <div ui-sidebar-header class="flex h-full w-full min-w-0 items-center">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start],[ui-sidebar-header]" />
+        </div>
+
+        <div ui-sidebar-footer class="flex h-full w-full min-w-0 items-center justify-between gap-3 px-3">
+          <ng-content select="[ui-layout-profile],[ui-topbar-end],[ui-sidebar-footer]" />
+        </div>
+      </ui-sidebar>
+      <main [class]="mainClasses()">
+        <router-outlet />
+      </main>
+    </div>
+  `,
+                }]
+        }], 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 }] }] } });
+
+class EtosLayoutComponent {
+    layout = inject(LayoutService);
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    layoutMode = this.layout.mode;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EtosLayoutComponent, isStandalone: true, selector: "etos-layout", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    @switch (layoutMode()) {
+      @case ('horizontal') {
+        <etos-horizontal-layout [ariaLabel]="ariaLabel()">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+        </etos-horizontal-layout>
+      }
+      @default {
+        <etos-vertical-layout [ariaLabel]="ariaLabel()" />
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: EtosHorizontalLayoutComponent, selector: "etos-horizontal-layout", inputs: ["topbarAppearance", "ariaLabel"] }, { kind: "component", type: EtosVerticalLayoutComponent, selector: "etos-vertical-layout", inputs: ["sidebarAppearance", "sidebarPosition", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'etos-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [EtosHorizontalLayoutComponent, EtosVerticalLayoutComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @switch (layoutMode()) {
+      @case ('horizontal') {
+        <etos-horizontal-layout [ariaLabel]="ariaLabel()">
+          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+        </etos-horizontal-layout>
+      }
+      @default {
+        <etos-vertical-layout [ariaLabel]="ariaLabel()" />
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /*
  * Public API Surface of @ojiepermana/angular/etos
  *
- * Etos-specific implementation remains isolated in projects/angular/brand/etos.
+ * Etos-specific implementation lives directly under projects/angular/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, EtosEmptyLayoutComponent, EtosHorizontalLayoutComponent, EtosLayoutComponent, EtosThemeSwitcherComponent, EtosVerticalLayoutComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
 //# sourceMappingURL=ojiepermana-angular-etos.mjs.map