@ojiepermana/angular 21.1.30 → 21.2.4

package/brand/etos/README.md

@@ -1,273 +0,0 @@
-# Etos Brand
-
-Etos implementation lives under `projects/angular/brand/etos`. Published consumers should use `@ojiepermana/angular/etos`.
-
-This package is the Etos-specific layer on top of the shared Angular libraries. It owns the Etos brand defaults, shell composition, brand stylesheet, and Etos-only UI such as the profile/theme switcher.
-
-Use this folder for Etos-specific implementation:
-
-- `core/` contains brand defaults and provider composition.
-- `component/` contains Etos-owned UI such as `EtosThemeSwitcherComponent`.
-- `shells/` contains `EtosLayoutComponent` and the Etos empty, horizontal, and vertical shells.
-- `themes/` contains Etos color, style, layout, and component-facing CSS.
-- `navigation/`, `assets/`, and `docs/` can be added when Etos needs brand-specific behavior beyond shared primitives.
-
-Shared services, types, and primitives stay in the generic libraries:
-
-- `@ojiepermana/angular/theme`
-- `@ojiepermana/angular/layout`
-- `@ojiepermana/angular/navigation`
-
-## Public entrypoint
-
-Published consumers should import Etos providers and Etos-owned UI through the short public entrypoint. Shell UI can also be imported through deeper shell aliases:
-
-```ts
-import {
-  EtosLayoutComponent,
-  EtosThemeSwitcherComponent,
-  ShellPagesComponent,
-  provideEtosBrand,
-  provideEtosLayout,
-  provideEtosTheme,
-  type EtosBrandOptions,
-  type EtosThemeSwitcherQuickAction,
-  type EtosThemeSwitcherUserInfo,
-} from '@ojiepermana/angular/etos';
-
-import { EtosLayoutComponent } from '@ojiepermana/angular/etos/shell/layout';
-import { ShellPagesComponent } from '@ojiepermana/angular/etos/shell/pages';
-```
-
-`@ojiepermana/angular/etos` currently exports:
-
-- `provideEtosBrand()` to apply the Etos theme and layout defaults together and optionally register navigation items.
-- `provideEtosTheme()` to install only the Etos theme wrapper over the shared theme provider.
-- `provideEtosLayout()` to install only the Etos layout wrapper over the shared layout provider.
-- `EtosLayoutComponent` to render the Etos shell from the current layout mode.
-- `EtosThemeSwitcherComponent` and related types for the profile/preferences UI.
-- `ShellPagesComponent` for the fixed-header, scroll-main, optional-footer page shell.
-
-Shell-specific UI is exported through deeper entrypoints:
-
-- `@ojiepermana/angular/etos/shell/layout` aliases `EtosLayoutComponent`.
-- `@ojiepermana/angular/etos/shell/pages` aliases `ShellPagesComponent`.
-
-## Provider setup
-
-Etos ships with these defaults:
-
-- Theme defaults to brand `etos` with light mode.
-- Layout defaults to `vertical` mode with `wide` width.
-
-Recommended provider configuration:
-
-```ts
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { type EtosBrandOptions, provideEtosBrand } from '@ojiepermana/angular/etos';
-
-import { AppNavigation } from './app.navigation';
-import { routes } from './app.routes';
-
-export const etosBrandConfig = {
-  theme: {
-    mode: 'light',
-  },
-  layout: {
-    mode: 'vertical',
-  },
-  navigation: AppNavigation,
-} satisfies EtosBrandOptions;
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes), provideEtosBrand(etosBrandConfig)],
-};
-```
-
-`provideEtosBrand()` accepts these Etos-specific options:
-
-- `theme` merges into the shared Material theme config while keeping the Etos brand tokens.
-- `layout` merges into the shared Material layout config while keeping the Etos layout defaults.
-- `navigation` registers navigation items during application startup.
-- `navigationId` targets a non-default navigation registry id when needed.
-- `materialDefaults` defaults to `true`; set it to `false` to skip `withMaterialDefaults()`.
-
-Use the granular providers when the consumer only needs one part of the Etos stack:
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideEtosLayout, provideEtosTheme } from '@ojiepermana/angular/etos';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideEtosTheme(), provideEtosLayout({ mode: 'horizontal', width: 'wide' })],
-};
-```
-
-## Using the brand theme
-
-The Etos brand theme has two parts:
-
-- TypeScript setup through one of the Etos providers.
-- CSS setup through the Etos stylesheet so the `theme-brand="etos"` tokens are available at runtime.
-
-App CSS should import the Etos package stylesheet before Tailwind:
-
-```css
-@import '@ojiepermana/angular/etos/styles';
-@import 'tailwindcss';
-@import '@ojiepermana/angular/theme/tailwind/theme.css';
-```
-
-## Using the layout shell
-
-`EtosLayoutComponent` is the exported shell component for Etos. It resolves `empty`, `horizontal`, or `vertical` from its `mode` input or from `LayoutService` when the input is omitted.
-
-This is the same composition pattern used by the Etos demo:
-
-```ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { EtosLayoutComponent } from '@ojiepermana/angular/etos/shell/layout';
-import {
-  type EtosThemeSwitcherQuickAction,
-  EtosThemeSwitcherComponent,
-  type EtosThemeSwitcherUserInfo,
-} from '@ojiepermana/angular/etos';
-
-@Component({
-  selector: 'app-pages',
-  imports: [RouterLink, EtosLayoutComponent, EtosThemeSwitcherComponent],
-  template: `
-    <ng-template #layoutBrand>
-      <a routerLink="/" class="flex min-w-0 items-center gap-3 px-2 py-1.5 transition-colors">
-        <span class="text-sm font-semibold leading-none tracking-tight">angular UI</span>
-      </a>
-    </ng-template>
-
-    <ng-template #layoutPanel>
-      <div class="flex h-full w-full min-w-0 items-center justify-start gap-3 px-2 py-0">
-        <etos-theme-switcher [userInfo]="profileInfo" [quickActions]="quickActions" />
-
-        <div class="min-w-0 flex flex-col gap-px">
-          <span class="truncate text-sm font-semibold leading-none text-foreground">{{ profileName }}</span>
-          <span class="truncate text-xs leading-none text-muted-foreground">{{ profileTitle }}</span>
-        </div>
-      </div>
-    </ng-template>
-
-    <etos-layout [layoutBrandTemplate]="layoutBrand" [layoutProfileTemplate]="layoutPanel" />
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class Pages {
-  protected readonly profileName = 'angular';
-  protected readonly profileTitle = 'Etos design system navigator';
-  protected readonly profileInfo = {
-    name: this.profileName,
-    subtitle: this.profileTitle,
-    avatarSrc: '/avatar-ojie.svg',
-    avatarAlt: 'angular avatar',
-  } satisfies EtosThemeSwitcherUserInfo;
-
-  protected readonly quickActions = [
-    { value: 'notifications', label: 'Notifications', icon: 'notifications' },
-    { value: 'sign-out', label: 'Logout', icon: 'logout', tone: 'destructive' },
-  ] satisfies readonly EtosThemeSwitcherQuickAction[];
-}
-```
-
-Layout inputs:
-
-- `mode`: optional explicit override for the active layout mode.
-- `layoutBrandTemplate`: used in the horizontal brand area and as the default vertical sidebar header.
-- `layoutProfileTemplate`: used in the horizontal profile area and as the default vertical sidebar footer.
-- `sidebarHeaderTemplate`: optional vertical-only override for the sidebar header.
-- `sidebarFooterTemplate`: optional vertical-only override for the sidebar footer.
-
-That fallback behavior means a single `layoutBrandTemplate` and `layoutProfileTemplate` pair is enough for most consumers, while vertical layouts can still diverge when needed.
-
-## Using the theme switcher
-
-`EtosThemeSwitcherComponent` is exported from `@ojiepermana/angular/etos` and is intended to live inside the Etos shell profile area or any consumer-owned profile trigger.
-
-Common inputs and output:
-
-- `quickActions`: required array rendered in the popup footer. Pass `[]` if you only want the built-in theme and layout controls.
-- `userInfo`: object input for `name`, `subtitle`, `avatarSrc`, and `avatarAlt`.
-- `userName`, `userSubtitle`, `avatarSrc`, and `avatarAlt`: fallback inputs when `userInfo` is not supplied.
-- `notificationShortcut`: configures the standalone notification trigger shown beside the avatar.
-- `showNotificationShortcut`: legacy boolean shortcut for rendering the default notification button.
-- `popoverSide`, `popoverAlign`, and `popoverSideOffset`: explicit popover placement overrides.
-- `actionSelected`: emits the selected quick action or notification shortcut value.
-
-The popup always exposes theme scheme, layout mode, and layout width controls. The quick action area is fully consumer-driven:
-
-- Provide the action values and labels you need in `quickActions`.
-- Handle actions such as logout in the app consumer through `(actionSelected)`.
-- When `notificationShortcut.value` matches one of the `quickActions` values, the matching popup item is removed to avoid duplication.
-
-Popover defaults now follow the active layout automatically:
-
-- Vertical layout defaults to `side="top"` and `align="start"`.
-- Horizontal and empty layouts default to `side="bottom"` and `align="end"`.
-
-Only pass `popoverSide`, `popoverAlign`, or `popoverSideOffset` when you need to override those defaults.
-
-Input shape examples:
-
-```ts
-profileInfo = {
-  name: 'angular',
-  subtitle: 'Etos design system navigator',
-  avatarSrc: '/avatar-ojie.svg',
-  avatarAlt: 'angular avatar',
-};
-
-notificationShortcut = {
-  value: 'notifications',
-  icon: 'notifications',
-  ariaLabel: 'Open notifications for angular',
-};
-
-quickActions = [
-  { value: 'notifications', label: 'Notifications', icon: 'notifications' },
-  { value: 'sign-out', label: 'Logout', icon: 'logout', tone: 'destructive' },
-];
-```
-
-Example consumer-owned action handling:
-
-```html
-<etos-theme-switcher
-  [userInfo]="profileInfo"
-  [quickActions]="quickActions"
-  (actionSelected)="onThemeSwitcherAction($event)" />
-```
-
-```ts
-onThemeSwitcherAction(action: string): void {
-  if (action === 'sign-out') {
-    this.authService.logout();
-  }
-}
-```
-
-## Workspace usage in this repository
-
-The Etos demo under `projects/demo/etos` already uses the short TypeScript entrypoint for provider setup and shell composition:
-
-- `src/app/app.config.ts` imports `provideEtosBrand` and passes `navigation: AppNavigation`.
-- `src/pages/pages.ts` imports `EtosLayoutComponent` and `EtosThemeSwitcherComponent` and wires `layoutBrandTemplate` plus `layoutProfileTemplate`.
-
-For CSS, the workspace demo currently imports the Etos source stylesheet directly:
-
-```css
-@import '../../../angular/etos/themes/index.css';
-@import 'tailwindcss';
-@import '@ojiepermana/angular/theme/tailwind/theme.css';
-```
-
-That local CSS path is intentional while developing inside this monorepo. Angular resolves bare CSS package imports from `node_modules/@ojiepermana/angular`, while TypeScript imports in the demo resolve through `tsconfig.json` path aliases. After the package is built, published, and installed with the latest exports, consumers should use `@ojiepermana/angular/etos/styles`.
-
-The older `@ojiepermana/angular/theme/styles/etos.css` path is kept only as a compatibility shim.

package/brand/etos/package.json

@@ -1,4 +0,0 @@
-{
-  "module": "../../fesm2022/ojiepermana-angular-brand-etos.mjs",
-  "typings": "../../types/ojiepermana-angular-brand-etos.d.ts"
-}

package/etos/styles/color.css

@@ -1,73 +0,0 @@
-/**
- * Etos brand color layer.
- */
-@layer tokens {
-  [theme-brand='etos'] {
-    --brand: 0 0% 64%;
-    --brand-border-alpha: 0.7;
-    --brand-background-alpha: 0.7;
-
-    --background: 210 38% 98%;
-    --surface: 0 0% 89.8%;
-    --surface-foreground: 211 56% 12%;
-    --foreground: 211 56% 12%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 211 56% 12%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 211 56% 12%;
-
-    --muted: 211 34% 94%;
-    --muted-foreground: 211 24% 38%;
-
-    --border: 211 28% 82%;
-    --input: 211 28% 82%;
-
-    --primary: 211 95% 29%;
-    --primary-foreground: 0 0% 100%;
-    --accent: 211 95% 96%;
-    --accent-foreground: 211 95% 22%;
-    --secondary: 211 24% 95%;
-    --secondary-foreground: 211 75% 24%;
-    --ring: 211 95% 29%;
-  }
-
-  [data-mode='dark'][theme-brand='etos'] {
-    --brand: 0 0% 64%;
-    --brand-border-alpha: 0.45;
-    --brand-background-alpha: 0.55;
-
-    --background: 211 38% 9%;
-    --surface: 211 22% 18%;
-    --surface-foreground: 210 40% 96%;
-    --foreground: 210 40% 96%;
-
-    --card: 211 34% 11%;
-    --card-foreground: 210 40% 96%;
-
-    --popover: 211 34% 11%;
-    --popover-foreground: 210 40% 96%;
-
-    --muted: 211 22% 18%;
-    --muted-foreground: 211 18% 70%;
-
-    --border: 211 24% 24%;
-    --input: 211 24% 24%;
-
-    --accent: 211 58% 18%;
-    --accent-foreground: 211 90% 84%;
-    --secondary: 211 24% 18%;
-    --secondary-foreground: 211 82% 84%;
-  }
-}
-
-@layer utilities {
-  .border-brand {
-    border-color: hsl(var(--brand, var(--border)) / var(--brand-border-alpha, 0.7));
-  }
-
-  .bg-brand {
-    background-color: hsl(var(--brand, var(--border)) / var(--brand-background-alpha, 0.7));
-  }
-}

package/etos/styles/index.css

@@ -1,7 +0,0 @@
-/**
- * Compatibility entry for consumers that resolve the explicit index file.
- *
- * Keep this publish-safe because ng-packagr copies it verbatim to
- * `@ojiepermana/angular/etos/styles/index.css`.
- */
-@import './package.css';

package/etos/styles/layout.css

@@ -1,21 +0,0 @@
-/**
- * Etos brand layout layer.
- */
-@layer tokens {
-  [theme-brand='etos'] {
-    --layout-shell-padding: clamp(1rem, 2vw, 2rem);
-    --layout-frame-radius: var(--radius-lg);
-    --layout-frame-shadow: var(--shadow-sm);
-    --layout-sidebar-width: 17.5rem;
-    --layout-main-max-width: 80rem;
-    --layout-vertical-shell-max-width: calc(var(--layout-sidebar-width) + var(--layout-main-max-width));
-    --layout-empty-max-width: 24rem;
-    --layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
-    --layout-topbar-inline: 0.875rem;
-    --layout-brand-mark-size: 2rem;
-  }
-
-  [data-mode='dark'][theme-brand='etos'] {
-    --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
-  }
-}

package/etos/styles/package.css

@@ -1,15 +0,0 @@
-/**
- * @ojiepermana/angular/etos — published Etos brand stylesheet.
- *
- * Import before Tailwind, then import the shared Tailwind token bridge.
- */
-@import '@ojiepermana/angular/theme/styles/themes/library/_layers.css';
-@import '@ojiepermana/angular/theme/styles/themes/mode/index.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/color/index.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/style/index.css';
-@import './color.css';
-@import './style.css';
-@import './layout.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_tokens.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_material-overrides.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_components.css';

package/etos/styles/style.css

@@ -1,53 +0,0 @@
-/**
- * Etos brand style layer.
- */
-@layer tokens {
-  [theme-brand='etos'] {
-    --theme-radius-xs: 0.125rem;
-    --theme-radius-base: 0.375rem;
-    --theme-radius-sm: calc(var(--theme-radius-base) - 2px);
-    --theme-radius-md: var(--theme-radius-base);
-    --theme-radius-lg: calc(var(--theme-radius-base) + 2px);
-
-    --radius: var(--theme-radius-md);
-    --radius-xs: var(--theme-radius-xs);
-    --radius-sm: var(--theme-radius-sm);
-    --radius-md: var(--theme-radius-md);
-    --radius-lg: var(--theme-radius-lg);
-
-    --border-width: 1px;
-
-    --theme-shadow-sm: 0 1px 0 0 hsl(211 95% 12% / 0.08);
-    --theme-shadow: 0 2px 4px -2px hsl(211 95% 12% / 0.14);
-    --theme-shadow-md: 0 8px 18px -14px hsl(211 95% 12% / 0.24);
-    --theme-shadow-lg: 0 18px 36px -28px hsl(211 95% 12% / 0.34);
-
-    --shadow-sm: var(--theme-shadow-sm);
-    --shadow: var(--theme-shadow);
-    --shadow-md: var(--theme-shadow-md);
-    --shadow-lg: var(--theme-shadow-lg);
-
-    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-
-    --font-sans: var(--theme-font-sans);
-    --font-mono: var(--theme-font-mono);
-    --font-weight-bold: 650;
-    --theme-text-scale: 1;
-    --nav-font-family: var(--font-sans);
-    --nav-text-size: calc(var(--text-sm) - 0.125rem);
-    --nav-text-line-height: var(--text-sm--line-height);
-    --nav-heading-font-family: var(--font-sans);
-    --nav-heading-size: var(--text-xs);
-    --nav-heading-line-height: var(--text-xs--line-height);
-    --nav-heading-weight: 700;
-    --nav-heading-letter-spacing: 0.14em;
-    --nav-badge-font-family: var(--font-sans);
-    --nav-badge-size: var(--text-xs);
-    --nav-badge-line-height: var(--text-xs--line-height);
-    --nav-badge-weight: 600;
-    --letter-spacing: 0;
-    --space-unit: 0.25rem;
-    --layout-topbar-height: 3.25rem;
-  }
-}