@egose/shadcn-theme-ng 0.0.28 → 0.2.0

package/label/fesm2022/label.mjs

@@ -6,19 +6,19 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmLabel {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    _computedClass = computed(() => hlm('flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50', this.userClass()), /* @ts-ignore */
+    _computedClass = computed(() => hlm("flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50", this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmLabel, isStandalone: true, selector: "[hlmLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnLabel, inputs: ["id", "id"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmLabel, isStandalone: true, selector: "[hlmLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnLabel, inputs: ["id", "id", "for", "for"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmLabel]',
                     hostDirectives: [
                         {
                             directive: BrnLabel,
-                            inputs: ['id'],
+                            inputs: ['id', 'for'],
                         },
                     ],
                     host: {
@@ -32,11 +32,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmLabelImports = [HlmLabel];
 class HlmLabelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmLabelModule, imports: [HlmLabel], exports: [HlmLabel] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmLabelModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmLabelModule, imports: [HlmLabel], exports: [HlmLabel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLabelModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmLabelImports],
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmLabel, HlmLabelImports, HlmLabelModule };
-//# sourceMappingURL=label.mjs.map
+

package/label/types/label.d.ts

@@ -6,7 +6,7 @@ declare class HlmLabel {
     readonly userClass: i0.InputSignal<ClassValue>;
     protected readonly _computedClass: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmLabel, "[hlmLabel]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnLabel; inputs: { "id": "id"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmLabel, "[hlmLabel]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnLabel; inputs: { "id": "id"; "for": "for"; }; outputs: {}; }]>;
 }
 
 declare const HlmLabelImports: readonly [typeof HlmLabel];

package/layout-simple/README.md

@@ -1,64 +1,194 @@
-# LayoutSimple
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
+# Simple application layout
+
+A responsive Angular shell with branded header, keyboard-accessible navigation, async page search, optional sidebar, and footer. Colors use the consumer's `background`, `foreground`, `border`, and `ring` theme tokens. Navigation has visible active and focus states, and controls have 44px minimum touch targets.
+
+Import standalone components from `@egose/shadcn-theme-ng/layout-simple`, or `@egose/shadcn-theme-ng-tw/layout-simple` for Tailwind's `tw:` prefix. See the [package README](../../README.md) for installation and styling setup. Configure Angular Router (`provideRouter`) before using the shell.
+
+## Basic usage
+
+```ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { EgLayoutSimple, type MenuItem } from '@egose/shadcn-theme-ng/layout-simple';
+
+@Component({
+  imports: [EgLayoutSimple, RouterOutlet],
+  template: `
+    <eg-layout-simple
+      brandName="Acme workspace"
+      [primaryNavigation]="navigation"
+      [footerEnabled]="true"
+      footerText="Acme workspace"
+    >
+      <router-outlet />
+    </eg-layout-simple>
+  `,
+})
+export class App {
+  readonly navigation: MenuItem[] = [
+    { label: 'Home', link: '/' },
+    { label: 'Projects', link: '/projects', activeMatch: 'prefix' },
+    { label: 'Reports', disabled: true },
+  ];
+}
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
+## Navigation model
+
+`MenuItem` is shared by every navigation surface, including `UserMenuItem`:
+
+| Field                               | Meaning                                                           |
+| ----------------------------------- | ----------------------------------------------------------------- |
+| `label: string`                     | Visible link/action text                                          |
+| `description?: string`              | Supporting text in desktop and mobile fly-out cards               |
+| `link?: string`                     | Internal router URL; takes precedence over `action`               |
+| `action?: () => void`               | Button callback when there is no link                             |
+| `icon?: string`                     | SVG data such as `lucideHome` from `@ng-icons/lucide`             |
+| `activeMatch?: 'exact' \| 'prefix'` | Exact path by default; query parameters and fragments are ignored |
+| `disabled?: boolean`                | Prevents navigation and activation                                |
+| `class?: string`                    | Per-item classes                                                  |
+
+An item without a link or action renders as disabled. `MenuGroup` contains an optional `label` and required readonly `items`. `UserMenuSection` has optional `label`, `items`, and `separator` (a desktop dropdown separator).
+
+### Shell inputs
+
+| Input                                               | Default / purpose                                                         |
+| --------------------------------------------------- | ------------------------------------------------------------------------- |
+| `primaryNavigation`                                 | `[]`; main header destinations                                            |
+| `navigationGroups`                                  | `[]`; header dropdown groups, operated by click or keyboard               |
+| `utilityNavigation`                                 | `[]`; header utility actions                                              |
+| `sectionNavigation`                                 | `[]`; navigation row below the header                                     |
+| `secondaryNavigationGroups`                         | `[]`; horizontally scrollable grouped navigation                          |
+| `flyoutNavigationGroups`                            | `[]`; category navbar with wide card panels; `readonly FlyoutMenuGroup[]` |
+| `flyoutNavigationLabel` / `flyoutCloseLabel`        | `'Fly-out navigation'` / `'Close navigation panel'`; accessible labels    |
+| `userMenuSections`                                  | `[]`; desktop account dropdown and mobile account section                 |
+| `brandName`                                         | `'Workspace'`; visible name and accessible home-link label                |
+| `logo` / `logoLink`                                 | `''` / `'/'`; optional decorative image and brand destination             |
+| `fullHeight`                                        | `true`; minimum viewport height; set `false` for embedded previews        |
+| `loading` / `loadingText`                           | `false` / `'Loading content…'`; busy state with visible status            |
+| `skipLinkText`                                      | `'Skip to content'`; keyboard shortcut to the main landmark               |
+| `sidebarEnabled`                                    | `false`; adds a sidebar trigger                                           |
+| `sidebarTitle`                                      | `'Navigation'`                                                            |
+| `sidebarContent`                                    | `TemplateRef<unknown>` with a `close` context function                    |
+| `sidebarToggleLabel`                                | `'Open navigation sidebar'`                                               |
+| `mobileMenuLabel` / `mobileMenuCloseLabel`          | `'Open navigation menu'` / `'Close navigation menu'`                      |
+| `userMenuTrigger` / `userMenuLabel`                 | Optional trigger template / `'Open account menu'`                         |
+| `footerEnabled` / `footerText` / `footerNavigation` | `false` / `''` / `[]`                                                     |
+
+Style hooks accept `ClassValue`: `logoClass`, `headerClass`, `contentClass`, `primaryNavigationClass`, `utilityNavigationClass`, `sectionNavigationClass`, `secondaryNavigationClass`, `flyoutNavigationClass`, `flyoutPanelClass`, `navigationItemClass`, and `footerClass`. Per-item classes also work on mobile.
+
+Below 768px, desktop navigation is replaced by a scrollable mobile disclosure. It includes page search and all navigation destinations. Escape and item selection close it and return focus to its trigger; routing and resizing to desktop also close it. Multiple shells generate distinct content and panel IDs. `EG_LAYOUT_SIMPLE_MOBILE_BREAKPOINT` exposes the breakpoint contract; Tailwind's `md` breakpoint must match it.
+
+The sidebar is a modal sheet with focus handling from Spartan/CDK. Its body scrolls independently of its header and close button. Use `#shell` with `shell.openSidebar()` / `shell.closeSidebar()` for programmatic control:
+
+```html
+<eg-layout-simple [sidebarEnabled]="true" [sidebarContent]="sidebar">
+  <h1>Dashboard</h1>
+</eg-layout-simple>
+<ng-template #sidebar let-close="close">
+  <a routerLink="/projects" (click)="close()">Projects</a>
+</ng-template>
 ```
 
-## Building
-
-To build the library, run:
-
-```bash
-ng build layout-simple
+## Dropdown / fly-out navbar
+
+`flyoutNavigationGroups` adds a category navbar below the header/section navigation. Each trigger opens a shell-width panel with a responsive two- or three-column grid of cards. Cards support the same routes, actions, disabled state, and active matching as other navigation, plus optional icons and descriptions.
+
+```ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { lucideLayers, lucideTable } from '@ng-icons/lucide';
+import { EgLayoutSimple, type FlyoutMenuGroup } from '@egose/shadcn-theme-ng/layout-simple';
+
+@Component({
+  imports: [EgLayoutSimple, RouterOutlet],
+  template: `
+    <eg-layout-simple brandName="Acme" [flyoutNavigationGroups]="groups">
+      <router-outlet />
+    </eg-layout-simple>
+  `,
+})
+export class App {
+  readonly groups: FlyoutMenuGroup[] = [
+    {
+      label: 'Explore',
+      description: 'Find the right tools for your next project.',
+      items: [
+        { label: 'Projects', description: 'Plan and organize your work.', icon: lucideLayers, link: '/projects' },
+        { label: 'Reports', description: 'Turn your data into useful insights.', icon: lucideTable, link: '/reports' },
+      ],
+    },
+  ];
+}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+`FlyoutMenuGroup` extends `MenuGroup` with a required `label`, optional `description`, and optional trigger `icon`. `secondaryNavigationGroups` is still the independent scrollable link strip; both inputs can be used together. `navigationGroups` remains the compact header dropdown. The example app derives its fly-out groups from the active component/example catalog section and hides the row on Home.
 
-### Publishing the Library
+- **Pointer:** click a category to open or toggle it; opening another category replaces the panel. Click outside or use the close button to dismiss.
+- **Keyboard:** Enter/Space toggles a trigger; Left/Right/Home/End move among enabled category triggers. Down/Up opens the panel and focuses its first/last enabled card. Tab follows normal document order. Escape returns focus to the trigger. Moving focus outside closes the panel.
+- **Mobile:** below 768px the categories become native expandable sections inside the mobile navigation, retaining icons and descriptions.
+- **State:** selection, route changes, group replacement, and resizing to mobile dismiss the desktop panel. Current categories and destination links have active styling. Empty categories are disabled.
+- **Sizing:** panels overlay page content, are bounded to the shell width, and scroll internally for large catalogs. Avoid `overflow: hidden` on containing elements if the panel should extend past an embedded preview.
 
-Once the project is built, you can publish your library by following these steps:
+## Async search
 
-1. Navigate to the `dist` directory:
+```ts
+type Page = { title: string; url: string };
 
-   ```bash
-   cd dist/layout-simple
-   ```
+// Members of the consuming component:
+readonly pages: Page[] = [
+  { title: 'Dashboard', url: '/' },
+  { title: 'Projects', url: '/projects' },
+];
+readonly loadPages = async ({ search }: { search: string }): Promise<Page[]> =>
+  this.pages.filter((page) => page.title.toLowerCase().includes(search.toLowerCase()));
+readonly pageLabel = (page: Page) => page.title;
+// Handle selection by navigating with your injected Router.
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+```html
+<eg-layout-simple
+  [searchEnabled]="true"
+  [searchLoader]="loadPages"
+  [searchResultLabel]="pageLabel"
+  [searchResultTemplate]="result"
+  (searchResultSelected)="router.navigateByUrl($event.url)"
+>
+  <router-outlet />
+</eg-layout-simple>
+<ng-template #result let-page>{{ page.title }}</ng-template>
+```
 
-## Running unit tests
+`LayoutSearchLoader<TItem>` receives `{ search: string }` and resolves to a readonly array. It runs on opening (empty query) and after a 180ms debounce when typing. The loader owns filtering; the component does not filter results a second time. Changing the query, closing, or destroying the search invalidates old responses. Loading, empty, and error states are distinct, with a retry button on failure. Arrow keys move between the search field and result buttons; Enter selects; Escape closes the popover.
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+Shell search inputs: `searchEnabled`, `searchLoader`, `searchResultLabel`, `searchResultTemplate`, `searchPlaceholder`, `searchEmptyText`, and `searchErrorText`. Selection emits `searchResultSelected`. The template context is `LayoutSearchResultContext<TItem>` (`$implicit: TItem`). Always supply a result label or template for object results.
 
-```bash
-ng test
-```
+### Standalone building blocks
 
-## Running end-to-end tests
+- `EgLayoutSearch` (`eg-layout-search`): `loader`, `resultLabel`, `resultTemplate`, `placeholder`, `emptyText`, `errorText`, `loadingText`, `retryText`; emits `resultSelected`.
+- `EgLayoutSimpleUserMenu` (`eg-layout-simple-user-menu`): `sections`, `triggerTemplate`, `triggerLabel`. Custom trigger templates supply non-interactive content; the component provides the button.
+- The sidebar, fly-out navbar, navigation-item renderer, and mobile group are internal components, not public imports.
 
-For end-to-end (e2e) testing, run:
+## Migration from the positional API
 
-```bash
-ng e2e
-```
+| Previous name                                       | New name                                                                       |
+| --------------------------------------------------- | ------------------------------------------------------------------------------ |
+| `leftMenus` / `leftMenuGroups`                      | `primaryNavigation` / `navigationGroups`                                       |
+| `rightMenus`                                        | `utilityNavigation`                                                            |
+| `topMenus` / `topSecondaryMenus`                    | `sectionNavigation` / `secondaryNavigationGroups`                              |
+| `userMenus`                                         | `userMenuSections`                                                             |
+| `footerMenus` / `footerContent`                     | `footerNavigation` / `footerText`                                              |
+| `leftClass` / `rightClass` / `topClass`             | `primaryNavigationClass` / `utilityNavigationClass` / `sectionNavigationClass` |
+| `leftLinkClass` / `rightLinkClass` / `topLinkClass` | `navigationItemClass` or per-item `class`                                      |
+| `searchLoaderFn`                                    | `searchLoader`                                                                 |
+| `searchTransformValueToSearch`                      | `searchResultLabel`                                                            |
+| `searchPlaceholderText`                             | `searchPlaceholder`                                                            |
+| `searchOptionTemplate` / `searchOptionChange`       | `searchResultTemplate` / `searchResultSelected`                                |
+| `EgGenericAutocomplete`                             | `EgLayoutSearch`                                                               |
+| User menu `menus` / `menuTrigger`                   | `sections` / `triggerTemplate`                                                 |
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+`contentBottomClass` and the empty content spacer were removed; use `contentClass` for content sizing. Footer-specific menu/link class inputs were replaced by per-item `class`. The unsupported generic search-parameter cast and unused `AutocompleteOption` type were removed. Search now has a single generic item type. Use public `openSidebar()` / `closeSidebar()` methods instead of reaching into the sheet query.
 
-## Additional Resources
+## Verification
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+From `packages/angular`: `pnpm test:library layout-simple`. The example at `@examples/standard` exercises source imports and custom search templates; its `pnpm build` also checks prerendering.