@ovyn/menu 0.3.0

package/README.md

@@ -0,0 +1,64 @@
+# Menu
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build menu
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/menu
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+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.

package/fesm2022/ovyn-menu.mjs

@@ -0,0 +1,106 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, input, output, Component, contentChild, linkedSignal } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { Ripple } from 'primeng/ripple';
+import { Popover } from 'primeng/popover';
+import { NgTemplateOutlet, JsonPipe } from '@angular/common';
+import { Button } from 'primeng/button';
+import { Drawer } from 'primeng/drawer';
+import { Image } from 'primeng/image';
+
+const MENU_CONFIG = new InjectionToken('MENU_CONFIG');
+const DEFAULT_MENU_CONFIG = {
+    location: 'top',
+    links: [],
+    collapseBreakpoint: 768,
+};
+const provideMenu = (config) => {
+    return ([
+        { provide: MENU_CONFIG, useValue: config },
+        MenuConfigService
+    ]);
+};
+
+class MenuConfigService {
+    $config = inject(MENU_CONFIG);
+    $breakpoint = inject(BreakpointObserver);
+    location = signal(this.$config.location ?? 'top', ...(ngDevMode ? [{ debugName: "location" }] : []));
+    links = signal(this.$config.links ?? [], ...(ngDevMode ? [{ debugName: "links" }] : []));
+    userActions = signal(this.$config.userActions ?? [], ...(ngDevMode ? [{ debugName: "userActions" }] : []));
+    logoSrc = signal(this.$config.logoSrc, ...(ngDevMode ? [{ debugName: "logoSrc" }] : []));
+    collapsed = toSignal(this.$breakpoint.observe(`(max-width: ${this.$config.collapseBreakpoint - 0.02}px)`).pipe(map((result) => result.matches)), { initialValue: false });
+    setLocation(location) {
+        this.location.set(location);
+    }
+    setLinks(links) {
+        this.links.set(links);
+    }
+    setUserActions(actions) {
+        this.userActions.set(actions);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MenuItem {
+    linkInput = input.required({ ...(ngDevMode ? { debugName: "linkInput" } : {}), alias: 'link' });
+    location = input(...(ngDevMode ? [undefined, { debugName: "location" }] : []));
+    onChildClickEvent = output({ alias: 'onChildClick' });
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    onChildClick(link) {
+        this.onChildClickEvent.emit(link);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MenuItem, isStandalone: true, selector: "menu-item", inputs: { linkInput: { classPropertyName: "linkInput", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChildClickEvent: "onChildClick" }, ngImport: i0, template: "<!-- Feuille : lien simple -->\n@let link = linkInput();\n@if (!link.children?.length) {\n  <a pRipple\n     [routerLink]=\"link.route\"\n     [routerLinkActive]=\"'bg-[var(--m-menu-item-active)]! font-semibold'\"\n     [attr.aria-disabled]=\"link.disabled || null\"\n     class=\"flex items-center gap-2 no-underline text-inherit whitespace-nowrap\n                rounded-(--m-menu-item-radius)\n                px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                aria-disabled:opacity-40 aria-disabled:pointer-events-none\"\n     (click)=\"onChildClick(link)\">\n    @if (link.icon) { <i [class]=\"link.icon\" class=\"shrink-0\"></i> }\n    <span class=\"flex-1\">{{ link.label }}</span>\n    @if (link.badge != null) {\n      <span class=\"text-xs px-2 py-0.5 rounded-full bg-(--m-menu-item-hover)\">\n            {{ link.badge }}</span>\n    }\n  </a>\n}\n@else {\n  <!-- Branche avec enfants -->\n    <!-- TOP : bouton + popover dropdown -->\n  @if (location() === 'top') {\n    <button pRipple type=\"button\"\n            class=\"flex items-center gap-2 whitespace-nowrap\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"pop.toggle($event)\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span>{{ link.label }}</span>\n      <i class=\"pi pi-angle-down text-xl\"></i>\n    </button>\n\n    <p-popover #pop styleClass=\"m-menu-panel\">\n      <div class=\"flex flex-col gap-0.5 min-w-48\n                      text-(--m-menu-panel-fg)\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"top\"\n                     (onChildClick)=\"onChildClick($event); pop.hide()\" />\n        }\n      </div>\n    </p-popover>\n  }\n  @else {\n    <!-- LEFT : en-t\u00EAte cliquable + accord\u00E9on inline -->\n    <button pRipple type=\"button\"\n            class=\"w-full flex items-center gap-2\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"open.set(!open())\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span class=\"flex-1 text-left\">{{ link.label }}</span>\n      <i class=\"pi text-xs transition-transform\"\n         [class.pi-angle-down]=\"!open()\" [class.pi-angle-up]=\"open()\"></i>\n    </button>\n\n    @if (open()) {\n      <div class=\"flex flex-col gap-0.5 pl-4 mt-0.5\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"left\"\n                     (onChildClick)=\"onChildClickEvent.emit($event)\" />\n        }\n      </div>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: MenuItem, selector: "menu-item", inputs: ["link", "location"], outputs: ["onChildClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'menu-item', imports: [RouterLink, Ripple, RouterLinkActive, Popover], template: "<!-- Feuille : lien simple -->\n@let link = linkInput();\n@if (!link.children?.length) {\n  <a pRipple\n     [routerLink]=\"link.route\"\n     [routerLinkActive]=\"'bg-[var(--m-menu-item-active)]! font-semibold'\"\n     [attr.aria-disabled]=\"link.disabled || null\"\n     class=\"flex items-center gap-2 no-underline text-inherit whitespace-nowrap\n                rounded-(--m-menu-item-radius)\n                px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                aria-disabled:opacity-40 aria-disabled:pointer-events-none\"\n     (click)=\"onChildClick(link)\">\n    @if (link.icon) { <i [class]=\"link.icon\" class=\"shrink-0\"></i> }\n    <span class=\"flex-1\">{{ link.label }}</span>\n    @if (link.badge != null) {\n      <span class=\"text-xs px-2 py-0.5 rounded-full bg-(--m-menu-item-hover)\">\n            {{ link.badge }}</span>\n    }\n  </a>\n}\n@else {\n  <!-- Branche avec enfants -->\n    <!-- TOP : bouton + popover dropdown -->\n  @if (location() === 'top') {\n    <button pRipple type=\"button\"\n            class=\"flex items-center gap-2 whitespace-nowrap\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"pop.toggle($event)\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span>{{ link.label }}</span>\n      <i class=\"pi pi-angle-down text-xl\"></i>\n    </button>\n\n    <p-popover #pop styleClass=\"m-menu-panel\">\n      <div class=\"flex flex-col gap-0.5 min-w-48\n                      text-(--m-menu-panel-fg)\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"top\"\n                     (onChildClick)=\"onChildClick($event); pop.hide()\" />\n        }\n      </div>\n    </p-popover>\n  }\n  @else {\n    <!-- LEFT : en-t\u00EAte cliquable + accord\u00E9on inline -->\n    <button pRipple type=\"button\"\n            class=\"w-full flex items-center gap-2\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"open.set(!open())\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span class=\"flex-1 text-left\">{{ link.label }}</span>\n      <i class=\"pi text-xs transition-transform\"\n         [class.pi-angle-down]=\"!open()\" [class.pi-angle-up]=\"open()\"></i>\n    </button>\n\n    @if (open()) {\n      <div class=\"flex flex-col gap-0.5 pl-4 mt-0.5\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"left\"\n                     (onChildClick)=\"onChildClickEvent.emit($event)\" />\n        }\n      </div>\n    }\n  }\n}\n" }]
+        }], propDecorators: { linkInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], onChildClickEvent: [{ type: i0.Output, args: ["onChildClick"] }] } });
+
+class MMenu {
+    $config = inject(MenuConfigService);
+    logoTemplate = contentChild('logo', ...(ngDevMode ? [{ debugName: "logoTemplate" }] : []));
+    actionsTemplate = contentChild('actions', ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : []));
+    contentTemplate = contentChild('content', ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    logoSrc = this.$config.logoSrc;
+    items = this.$config.links;
+    location = this.$config.location;
+    collapsed = this.$config.collapsed;
+    userActions = this.$config.userActions;
+    drawerOpened = signal(false, ...(ngDevMode ? [{ debugName: "drawerOpened" }] : []));
+    renderLocation = linkedSignal({ ...(ngDevMode ? { debugName: "renderLocation" } : {}), source: () => ({
+            collapsed: this.collapsed(),
+            location: this.location(),
+        }),
+        computation: ({ collapsed, location }) => (collapsed ? 'left' : location) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MMenu, isStandalone: true, selector: "m-menu", queries: [{ propertyName: "logoTemplate", first: true, predicate: ["logo"], descendants: true, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fragment r\u00E9utilisable : liste de liens -->\n<ng-template #linkList let-orient=\"orient\">\n  <nav class=\"flex\" [class.flex-row]=\"orient === 'top'\" [class.flex-col]=\"orient === 'left'\"\n       [class.items-center]=\"orient === 'top'\"\n       [style.gap]=\"orient === 'top' ? '0.5rem' : '0.25rem'\">\n    @for (link of items(); track link.label) {\n      <menu-item [link]=\"link\" [location]=\"orient\"\n                 (onChildClick)=\"drawerOpened.set(false)\" />\n    }\n  </nav>\n</ng-template>\n\n<!-- Fragments logo / actions / contenu avec fallback -->\n<ng-template #logoSlot>\n  @let logo = logoTemplate();\n  @if (logo) { <ng-container [ngTemplateOutlet]=\"logo\" /> }\n  @else {\n    @if (logoSrc()) {\n      <!--      <img [src]=\"logoSrc()\" alt=\"\" class=\"img-logo\" />-->\n      <p-image [src]=\"logoSrc()\" class=\"h-16 w-16 cursor-pointer flex items-center justify-center\" />\n    }\n    @else {\n      <span class=\"font-bold text-lg px-2\">App</span>\n    }\n  }\n</ng-template>\n\n<ng-template #actionsSlot>\n  @let actions = actionsTemplate();\n  @if (actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{$implicit: userActions()}\" />\n  }\n</ng-template>\n\n<ng-template #contentSlot>\n  @let content = contentTemplate();\n  @if (content) { <ng-container [ngTemplateOutlet]=\"content\" /> }\n  @else { <router-outlet /> }\n</ng-template>\n\n@if (collapsed()) {\n  <!-- ============ REPLI\u00C9 (mobile) : hamburger + drawer ============ -->\n  <div class=\"h-screen flex flex-col text-(--m-menu-fg)\">\n    <header class=\"flex items-center px-(--m-menu-pad-x)\n                   h-(--m-menu-bar-height) [background:var(--m-menu-bg)]\">\n      <p-button variant=\"text\" icon=\"pi pi-bars\" styleClass=\"text-white!\"\n                (click)=\"drawerOpened.set(true)\" />\n      <div class=\"ml-2\"><ng-container [ngTemplateOutlet]=\"logoSlot\" /></div>\n      <nav   class=\"ml-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n\n    <p-drawer [(visible)]=\"drawerOpened\" position=\"left\" [modal]=\"true\"\n              styleClass=\"!border-0 w-[var(--m-menu-rail-width)]\">\n      <ng-template #headless>\n        <div class=\"h-full flex flex-col text-(--m-menu-fg)\n                    [background:var(--m-menu-bg)] p-(--m-menu-pad-x) gap-4\">\n          <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n            <p-button variant=\"text\" icon=\"pi pi-times\" styleClass=\"text-white!\"\n                      (click)=\"drawerOpened.set(false)\" />\n          </div>\n          <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n          <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else if (location() === 'top') {\n  <!-- ============ TOP : barre horizontale ============ -->\n  <div class=\"h-screen flex flex-col\">\n    <header class=\"top\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'top' }\" />\n      <nav class=\"ml-auto flex flex-row items-center\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else {\n  <!-- ============ LEFT : rail vertical ============ -->\n  <div class=\"h-screen flex flex-row\">\n    <aside class=\"left\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n      <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </aside>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n<!--<ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: location() }\" />-->\n", styles: ["@reference \"tailwindcss\";.img-logo{height:var(--m-menu-bar-height);aspect-ratio:1 / 1}aside.left{@apply w-(--m-menu-rail-width) p-(--m-menu-pad-x);@apply flex flex-col gap-4;@apply text-(--m-menu-fg);background:var(--m-menu-bg)}header.top{@apply flex gap-(--m-menu-gap) items-center;@apply h-(--m-menu-bar-height) px-(--m-menu-pad-x);@apply text-(--m-menu-fg);background:var(--m-menu-bg)}\n"], dependencies: [{ kind: "component", type: MenuItem, selector: "menu-item", inputs: ["link", "location"], outputs: ["onChildClick"] }, { 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: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: Image, selector: "p-image", inputs: ["imageClass", "imageStyle", "styleClass", "src", "srcSet", "sizes", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "preview", "showTransitionOptions", "hideTransitionOptions", "modalEnterAnimation", "modalLeaveAnimation", "appendTo", "maskMotionOptions", "motionOptions"], outputs: ["onShow", "onHide", "onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-menu', imports: [MenuItem, NgTemplateOutlet, RouterOutlet, Button, Drawer, Image, JsonPipe], template: "<!-- Fragment r\u00E9utilisable : liste de liens -->\n<ng-template #linkList let-orient=\"orient\">\n  <nav class=\"flex\" [class.flex-row]=\"orient === 'top'\" [class.flex-col]=\"orient === 'left'\"\n       [class.items-center]=\"orient === 'top'\"\n       [style.gap]=\"orient === 'top' ? '0.5rem' : '0.25rem'\">\n    @for (link of items(); track link.label) {\n      <menu-item [link]=\"link\" [location]=\"orient\"\n                 (onChildClick)=\"drawerOpened.set(false)\" />\n    }\n  </nav>\n</ng-template>\n\n<!-- Fragments logo / actions / contenu avec fallback -->\n<ng-template #logoSlot>\n  @let logo = logoTemplate();\n  @if (logo) { <ng-container [ngTemplateOutlet]=\"logo\" /> }\n  @else {\n    @if (logoSrc()) {\n      <!--      <img [src]=\"logoSrc()\" alt=\"\" class=\"img-logo\" />-->\n      <p-image [src]=\"logoSrc()\" class=\"h-16 w-16 cursor-pointer flex items-center justify-center\" />\n    }\n    @else {\n      <span class=\"font-bold text-lg px-2\">App</span>\n    }\n  }\n</ng-template>\n\n<ng-template #actionsSlot>\n  @let actions = actionsTemplate();\n  @if (actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{$implicit: userActions()}\" />\n  }\n</ng-template>\n\n<ng-template #contentSlot>\n  @let content = contentTemplate();\n  @if (content) { <ng-container [ngTemplateOutlet]=\"content\" /> }\n  @else { <router-outlet /> }\n</ng-template>\n\n@if (collapsed()) {\n  <!-- ============ REPLI\u00C9 (mobile) : hamburger + drawer ============ -->\n  <div class=\"h-screen flex flex-col text-(--m-menu-fg)\">\n    <header class=\"flex items-center px-(--m-menu-pad-x)\n                   h-(--m-menu-bar-height) [background:var(--m-menu-bg)]\">\n      <p-button variant=\"text\" icon=\"pi pi-bars\" styleClass=\"text-white!\"\n                (click)=\"drawerOpened.set(true)\" />\n      <div class=\"ml-2\"><ng-container [ngTemplateOutlet]=\"logoSlot\" /></div>\n      <nav   class=\"ml-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n\n    <p-drawer [(visible)]=\"drawerOpened\" position=\"left\" [modal]=\"true\"\n              styleClass=\"!border-0 w-[var(--m-menu-rail-width)]\">\n      <ng-template #headless>\n        <div class=\"h-full flex flex-col text-(--m-menu-fg)\n                    [background:var(--m-menu-bg)] p-(--m-menu-pad-x) gap-4\">\n          <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n            <p-button variant=\"text\" icon=\"pi pi-times\" styleClass=\"text-white!\"\n                      (click)=\"drawerOpened.set(false)\" />\n          </div>\n          <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n          <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else if (location() === 'top') {\n  <!-- ============ TOP : barre horizontale ============ -->\n  <div class=\"h-screen flex flex-col\">\n    <header class=\"top\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'top' }\" />\n      <nav class=\"ml-auto flex flex-row items-center\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else {\n  <!-- ============ LEFT : rail vertical ============ -->\n  <div class=\"h-screen flex flex-row\">\n    <aside class=\"left\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n      <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </aside>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n<!--<ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: location() }\" />-->\n", styles: ["@reference \"tailwindcss\";.img-logo{height:var(--m-menu-bar-height);aspect-ratio:1 / 1}aside.left{@apply w-(--m-menu-rail-width) p-(--m-menu-pad-x);@apply flex flex-col gap-4;@apply text-(--m-menu-fg);background:var(--m-menu-bg)}header.top{@apply flex gap-(--m-menu-gap) items-center;@apply h-(--m-menu-bar-height) px-(--m-menu-pad-x);@apply text-(--m-menu-fg);background:var(--m-menu-bg)}\n"] }]
+        }], propDecorators: { logoTemplate: [{ type: i0.ContentChild, args: ['logo', { isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: ['actions', { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of menu
+ */
+// export * from './lib/container/menu';
+// export * from './lib/components/m-menu-vertical/m-menu-vertical';
+// export * from './lib/components/m-menu-horizontal/m-menu-horizontal';
+// export * from './lib/providers/menu-config';
+// export * from './lib/styles/m-menu.theme'
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_MENU_CONFIG, MENU_CONFIG, MMenu, MenuConfigService, provideMenu };
+//# sourceMappingURL=ovyn-menu.mjs.map

package/fesm2022/ovyn-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ovyn-menu.mjs","sources":["../../../projects/menu/src/lib/menu.provider.ts","../../../projects/menu/src/lib/menu-config.service.ts","../../../projects/menu/src/lib/menu-item/menu-item.ts","../../../projects/menu/src/lib/menu-item/menu-item.html","../../../projects/menu/src/lib/m-menu/m-menu.ts","../../../projects/menu/src/lib/m-menu/m-menu.html","../../../projects/menu/src/public-api.ts","../../../projects/menu/src/ovyn-menu.ts"],"sourcesContent":["import { MenuLink, MenuLocation } from './menu.model';\nimport {\n  EnvironmentProviders,\n  InjectionToken,\n  makeEnvironmentProviders,\n  Provider,\n} from '@angular/core';\nimport { MenuConfigService } from './menu-config.service';\nimport { MenuItem } from './menu-item/menu-item';\n\nexport interface MenuConfig {\n  location: MenuLocation;\n  links: MenuLink[];\n  collapseBreakpoint: number;\n  logoSrc?: string;\n  userActions?: MenuLink[];\n}\n\nexport const MENU_CONFIG = new InjectionToken<MenuConfig>('MENU_CONFIG');\n\nexport const DEFAULT_MENU_CONFIG: MenuConfig = {\n  location:'top',\n  links: [],\n  collapseBreakpoint: 768,\n};\n\nexport const provideMenu = (config: Partial<MenuConfig>): Provider => {\n  return ([\n    { provide: MENU_CONFIG, useValue: config },\n    MenuConfigService\n  ])\n}\n","import { inject, Injectable, signal } from '@angular/core';\r\nimport { BreakpointObserver } from '@angular/cdk/layout';\r\nimport { MenuLink, MenuLocation } from './menu.model';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { map } from 'rxjs';\r\nimport { MENU_CONFIG } from './menu.provider';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class MenuConfigService {\r\n  private readonly $config = inject(MENU_CONFIG);\r\n  private readonly $breakpoint = inject(BreakpointObserver);\r\n\r\n  readonly location = signal<MenuLocation>(this.$config.location ?? 'top');\r\n  readonly links = signal<MenuLink[]>(this.$config.links ?? []);\r\n  readonly userActions = signal<MenuLink[]>(this.$config.userActions ?? []);\r\n  readonly logoSrc = signal<string | undefined>(this.$config.logoSrc);\r\n\r\n  readonly collapsed = toSignal(\r\n    this.$breakpoint.observe(`(max-width: ${this.$config.collapseBreakpoint - 0.02}px)`).pipe(map((result) => result.matches)),\r\n    { initialValue: false }\r\n  );\r\n\r\n  setLocation(location: MenuLocation) {\r\n    this.location.set(location);\r\n  }\r\n  setLinks(links: MenuLink[]) {\r\n    this.links.set(links);\r\n  }\r\n  setUserActions(actions: MenuLink[]) {\r\n    this.userActions.set(actions);\r\n  }\r\n}\r\n","import { Component, input, output, signal } from '@angular/core';\nimport { MenuLink, MenuLocation } from '../menu.model';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { Ripple } from 'primeng/ripple';\nimport { Popover } from 'primeng/popover';\n\n@Component({\n  selector: 'menu-item',\n  imports: [RouterLink, Ripple, RouterLinkActive, Popover],\n  templateUrl: './menu-item.html',\n  styleUrl: './menu-item.css',\n})\nexport class MenuItem {\n  readonly linkInput = input.required<MenuLink>({ alias: 'link' });\n  readonly location = input<MenuLocation>();\n\n  onChildClickEvent = output<MenuLink>({ alias: 'onChildClick' });\n\n  readonly open = signal(false);\n\n  protected onChildClick(link: MenuLink) {\n    this.onChildClickEvent.emit(link);\n  }\n}\n","<!-- Feuille : lien simple -->\n@let link = linkInput();\n@if (!link.children?.length) {\n  <a pRipple\n     [routerLink]=\"link.route\"\n     [routerLinkActive]=\"'bg-[var(--m-menu-item-active)]! font-semibold'\"\n     [attr.aria-disabled]=\"link.disabled || null\"\n     class=\"flex items-center gap-2 no-underline text-inherit whitespace-nowrap\n                rounded-(--m-menu-item-radius)\n                px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                aria-disabled:opacity-40 aria-disabled:pointer-events-none\"\n     (click)=\"onChildClick(link)\">\n    @if (link.icon) { <i [class]=\"link.icon\" class=\"shrink-0\"></i> }\n    <span class=\"flex-1\">{{ link.label }}</span>\n    @if (link.badge != null) {\n      <span class=\"text-xs px-2 py-0.5 rounded-full bg-(--m-menu-item-hover)\">\n            {{ link.badge }}</span>\n    }\n  </a>\n}\n@else {\n  <!-- Branche avec enfants -->\n    <!-- TOP : bouton + popover dropdown -->\n  @if (location() === 'top') {\n    <button pRipple type=\"button\"\n            class=\"flex items-center gap-2 whitespace-nowrap\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"pop.toggle($event)\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span>{{ link.label }}</span>\n      <i class=\"pi pi-angle-down text-xl\"></i>\n    </button>\n\n    <p-popover #pop styleClass=\"m-menu-panel\">\n      <div class=\"flex flex-col gap-0.5 min-w-48\n                      text-(--m-menu-panel-fg)\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"top\"\n                     (onChildClick)=\"onChildClick($event); pop.hide()\" />\n        }\n      </div>\n    </p-popover>\n  }\n  @else {\n    <!-- LEFT : en-tête cliquable + accordéon inline -->\n    <button pRipple type=\"button\"\n            class=\"w-full flex items-center gap-2\n                       rounded-(--m-menu-item-radius)\n                       px-(--m-menu-item-pad-x) py-(--m-menu-item-pad-y)\n                       hover:bg-(--m-menu-item-hover) transition-colors cursor-pointer\n                       text-inherit bg-transparent border-0\"\n            (click)=\"open.set(!open())\">\n      @if (link.icon) { <i [class]=\"link.icon\"></i> }\n      <span class=\"flex-1 text-left\">{{ link.label }}</span>\n      <i class=\"pi text-xs transition-transform\"\n         [class.pi-angle-down]=\"!open()\" [class.pi-angle-up]=\"open()\"></i>\n    </button>\n\n    @if (open()) {\n      <div class=\"flex flex-col gap-0.5 pl-4 mt-0.5\">\n        @for (child of link.children; track child.label) {\n          <menu-item [link]=\"child\" location=\"left\"\n                     (onChildClick)=\"onChildClickEvent.emit($event)\" />\n        }\n      </div>\n    }\n  }\n}\n","import { Component, contentChild, inject, input, linkedSignal, signal, TemplateRef } from '@angular/core';\nimport { MenuConfigService } from '../menu-config.service';\nimport { MenuItem } from '../menu-item/menu-item';\nimport { JsonPipe, NgTemplateOutlet } from '@angular/common';\nimport { RouterOutlet } from '@angular/router';\nimport { Button } from 'primeng/button';\nimport { Drawer } from 'primeng/drawer';\nimport { Image } from 'primeng/image';\nimport { MenuLink } from '../menu.model';\n\n@Component({\n  selector: 'm-menu',\n  imports: [MenuItem, NgTemplateOutlet, RouterOutlet, Button, Drawer, Image, JsonPipe],\n  templateUrl: './m-menu.html',\n  styleUrl: './m-menu.css',\n})\nexport class MMenu {\n  private readonly $config = inject(MenuConfigService);\n\n  logoTemplate = contentChild<TemplateRef<unknown>>('logo');\n  actionsTemplate = contentChild<TemplateRef<any>>('actions');\n  contentTemplate = contentChild<TemplateRef<unknown>>('content');\n\n  readonly logoSrc = this.$config.logoSrc;\n  readonly items = this.$config.links;\n  readonly location = this.$config.location;\n  readonly collapsed = this.$config.collapsed;\n  readonly userActions = this.$config.userActions;\n  drawerOpened = signal<boolean>(false);\n\n  readonly renderLocation = linkedSignal({\n    source: () => ({\n      collapsed: this.collapsed(),\n      location: this.location(),\n    }),\n    computation: ({ collapsed, location }) => (collapsed ? 'left' : location),\n  });\n}\n","<!-- Fragment réutilisable : liste de liens -->\n<ng-template #linkList let-orient=\"orient\">\n  <nav class=\"flex\" [class.flex-row]=\"orient === 'top'\" [class.flex-col]=\"orient === 'left'\"\n       [class.items-center]=\"orient === 'top'\"\n       [style.gap]=\"orient === 'top' ? '0.5rem' : '0.25rem'\">\n    @for (link of items(); track link.label) {\n      <menu-item [link]=\"link\" [location]=\"orient\"\n                 (onChildClick)=\"drawerOpened.set(false)\" />\n    }\n  </nav>\n</ng-template>\n\n<!-- Fragments logo / actions / contenu avec fallback -->\n<ng-template #logoSlot>\n  @let logo = logoTemplate();\n  @if (logo) { <ng-container [ngTemplateOutlet]=\"logo\" /> }\n  @else {\n    @if (logoSrc()) {\n      <!--      <img [src]=\"logoSrc()\" alt=\"\" class=\"img-logo\" />-->\n      <p-image [src]=\"logoSrc()\" class=\"h-16 w-16 cursor-pointer flex items-center justify-center\" />\n    }\n    @else {\n      <span class=\"font-bold text-lg px-2\">App</span>\n    }\n  }\n</ng-template>\n\n<ng-template #actionsSlot>\n  @let actions = actionsTemplate();\n  @if (actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{$implicit: userActions()}\" />\n  }\n</ng-template>\n\n<ng-template #contentSlot>\n  @let content = contentTemplate();\n  @if (content) { <ng-container [ngTemplateOutlet]=\"content\" /> }\n  @else { <router-outlet /> }\n</ng-template>\n\n@if (collapsed()) {\n  <!-- ============ REPLIÉ (mobile) : hamburger + drawer ============ -->\n  <div class=\"h-screen flex flex-col text-(--m-menu-fg)\">\n    <header class=\"flex items-center px-(--m-menu-pad-x)\n                   h-(--m-menu-bar-height) [background:var(--m-menu-bg)]\">\n      <p-button variant=\"text\" icon=\"pi pi-bars\" styleClass=\"text-white!\"\n                (click)=\"drawerOpened.set(true)\" />\n      <div class=\"ml-2\"><ng-container [ngTemplateOutlet]=\"logoSlot\" /></div>\n      <nav   class=\"ml-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n\n    <p-drawer [(visible)]=\"drawerOpened\" position=\"left\" [modal]=\"true\"\n              styleClass=\"!border-0 w-[var(--m-menu-rail-width)]\">\n      <ng-template #headless>\n        <div class=\"h-full flex flex-col text-(--m-menu-fg)\n                    [background:var(--m-menu-bg)] p-(--m-menu-pad-x) gap-4\">\n          <div class=\"flex items-center justify-between\">\n            <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n            <p-button variant=\"text\" icon=\"pi pi-times\" styleClass=\"text-white!\"\n                      (click)=\"drawerOpened.set(false)\" />\n          </div>\n          <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n          <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n        </div>\n      </ng-template>\n    </p-drawer>\n\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else if (location() === 'top') {\n  <!-- ============ TOP : barre horizontale ============ -->\n  <div class=\"h-screen flex flex-col\">\n    <header class=\"top\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'top' }\" />\n      <nav class=\"ml-auto flex flex-row items-center\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </header>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n@else {\n  <!-- ============ LEFT : rail vertical ============ -->\n  <div class=\"h-screen flex flex-row\">\n    <aside class=\"left\">\n      <ng-container [ngTemplateOutlet]=\"logoSlot\" />\n      <ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: 'left' }\" />\n      <nav class=\"mt-auto\"><ng-container [ngTemplateOutlet]=\"actionsSlot\" /></nav>\n    </aside>\n    <main class=\"flex-1 overflow-auto\">\n      <ng-container [ngTemplateOutlet]=\"contentSlot\" />\n    </main>\n  </div>\n}\n\n<!--<ng-container [ngTemplateOutlet]=\"linkList\" [ngTemplateOutletContext]=\"{ orient: location() }\" />-->\n","/*\n * Public API Surface of menu\n */\n\n// export * from './lib/container/menu';\n// export * from './lib/components/m-menu-vertical/m-menu-vertical';\n// export * from './lib/components/m-menu-horizontal/m-menu-horizontal';\n// export * from './lib/providers/menu-config';\n// export * from './lib/styles/m-menu.theme'\n\nexport * from './lib/m-menu/m-menu';\nexport * from './lib/menu-config.service';\nexport * from './lib/menu.model';\nexport * from './lib/menu.provider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ovyn/menu",
+  "version": "0.3.0",
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@primeuix/themes": "^2.0.3",
+    "@angular/cdk": "^21.2.0",
+    "primeng": "^21.1.3",
+    "tailwindcss-primeui": "^0.6.1"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/ovyn-menu.d.ts",
+      "esm": "./esm2022/ovyn-ng-menu.mjs",
+      "default": "./fesm2022/ovyn-menu.mjs"
+    },
+    "./styles/menu-theme.css": {
+      "style": "./styles/menu-theme.css",
+      "default": "./styles/menu-theme.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "keywords": [
+    "ng",
+    "angular",
+    "primeng",
+    "menu"
+  ],
+  "author": "Flavian Ovyn",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/fovyn-private/ovyn-lib/-/tree/main/projects/menu.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/fovyn-private/ovyn-lib.git/issues"
+  },
+  "homepage": "https://gitlab.com/fovyn-private/ovyn-lib/-/tree/main/projects/menu#readme",
+  "sideEffects": false,
+  "module": "fesm2022/ovyn-menu.mjs",
+  "typings": "types/ovyn-menu.d.ts"
+}

package/styles/menu-theme.css

@@ -0,0 +1,42 @@
+@import 'tailwindcss';
+
+@layer primeng;
+
+:root {
+  /* Alias applicatifs → tokens du preset, avec valeur par défaut en fallback */
+  --m-menu-bar-height: var(--p-menu-bar-height, 4rem);
+  --m-menu-rail-width: var(--p-menu-rail-width, 16rem);
+  --m-menu-gap: var(--p-menu-gap, calc(var(--spacing, 0.5rem) * 4));
+  --m-menu-pad-x: var(--p-menu-pad-x, calc(var(--spacing, 0.5rem) * 2));
+
+  --m-menu-bg: var(--p-menu-bg, linear-gradient(90deg, #63c1c9 0%, #82c9a0 45%, #bdd977 100%));
+  --m-menu-fg: var(--p-menu-fg, #ffffff);
+
+  --m-menu-item-radius: var(--p-menu-item-radius, var(--spacing, 0.5rem));
+  --m-menu-item-padx: var(--p-menu-item-pad-x, calc(var(--spacing) * 1.5));
+  --m-menu-item-pady: var(--p-menu-item-pad-y, var(--spacing, 0.5rem));
+  --m-menu-item-hover: var(--p-menu-item-hover, rgb(255 255 255 / 0.15));
+  --m-menu-item-active: var(--p-menu-item-active, rgb(255 255 255 / 0.24));
+
+  --m-menu-panel-bg: var(--p-menu-panel-bg, #1e293b);
+  --m-menu-panel-fg: var(--p-menu-panel-fg, #f1f5f9);
+  --m-menu-panel-radius: var(--p-menu-panel-radius, calc(var(--spacing, 0.5rem) * 1.5));
+
+  /* Pas un token CSS runtime (media query) → reste en dur */
+  --m-menu-breakpoint: 768px;
+}
+
+@layer primeng {
+  .m-menu-panel.p-popover {
+    background: var(--m-menu-panel-bg);
+    color: var(--m-menu-panel-fg);
+    border: 0;
+    border-radius: var(--m-menu-panel-radius);
+  }
+  .m-menu-panel .p-popover-content { padding: var(--m-menu-item-padx) var(--m-menu-item-pady); }
+
+  .m-menu-panel menu-item a:hover,
+  .m-menu-panel menu-item button:hover {
+    background: rgb(255 255 255 / 0.08);
+  }
+}

package/types/ovyn-menu.d.ts

@@ -0,0 +1,71 @@
+import * as _ovyn_menu from '@ovyn/menu';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, InjectionToken, Provider } from '@angular/core';
+
+type MenuLocation = 'top' | 'left';
+interface MenuLink {
+    label: string;
+    icon?: string;
+    route?: string | string[];
+    badge?: string | number;
+    disabled?: boolean;
+    visible?: boolean;
+    children?: MenuLink[];
+}
+interface MenuThemeConfig {
+    barHeight: string;
+    railWidth: string;
+    bg: string;
+    fg: string;
+    itemHover: string;
+    itemActive: string;
+    panelBg: string;
+    panelFg: string;
+    panelRadius: string;
+}
+type MenuTheme = Partial<MenuThemeConfig>;
+
+declare class MMenu {
+    private readonly $config;
+    logoTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    actionsTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    contentTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly logoSrc: _angular_core.WritableSignal<string | undefined>;
+    readonly items: _angular_core.WritableSignal<MenuLink[]>;
+    readonly location: _angular_core.WritableSignal<_ovyn_menu.MenuLocation>;
+    readonly collapsed: _angular_core.Signal<boolean>;
+    readonly userActions: _angular_core.WritableSignal<MenuLink[]>;
+    drawerOpened: _angular_core.WritableSignal<boolean>;
+    readonly renderLocation: _angular_core.WritableSignal<_ovyn_menu.MenuLocation>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MMenu, "m-menu", never, {}, {}, ["logoTemplate", "actionsTemplate", "contentTemplate"], never, true, never>;
+}
+
+declare class MenuConfigService {
+    private readonly $config;
+    private readonly $breakpoint;
+    readonly location: _angular_core.WritableSignal<MenuLocation>;
+    readonly links: _angular_core.WritableSignal<MenuLink[]>;
+    readonly userActions: _angular_core.WritableSignal<MenuLink[]>;
+    readonly logoSrc: _angular_core.WritableSignal<string | undefined>;
+    readonly collapsed: _angular_core.Signal<boolean>;
+    setLocation(location: MenuLocation): void;
+    setLinks(links: MenuLink[]): void;
+    setUserActions(actions: MenuLink[]): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuConfigService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MenuConfigService>;
+}
+
+interface MenuConfig {
+    location: MenuLocation;
+    links: MenuLink[];
+    collapseBreakpoint: number;
+    logoSrc?: string;
+    userActions?: MenuLink[];
+}
+declare const MENU_CONFIG: InjectionToken<MenuConfig>;
+declare const DEFAULT_MENU_CONFIG: MenuConfig;
+declare const provideMenu: (config: Partial<MenuConfig>) => Provider;
+
+export { DEFAULT_MENU_CONFIG, MENU_CONFIG, MMenu, MenuConfigService, provideMenu };
+export type { MenuConfig, MenuLink, MenuLocation, MenuTheme, MenuThemeConfig };