megamenu: стилизация, сторисы, обёртки

src/lib/components/megamenu/megamenu.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { MegaMenu } from 'primeng/megamenu';
+import { MegaMenuItem, PrimeTemplate } from 'primeng/api';
+import { Badge } from 'primeng/badge';
+
+export type MegaMenuOrientation = 'horizontal' | 'vertical';
+
+export interface MegaMenuModel extends MegaMenuItem {
+  description?: string;
+  badge?: string;
+}
+
+@Component({
+  selector: 'megamenu',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [MegaMenu, PrimeTemplate, NgTemplateOutlet, Badge],
+  template: `
+    <p-megamenu
+      [model]="model"
+      [orientation]="orientation"
+      [breakpoint]="breakpoint"
+      [scrollHeight]="scrollHeight"
+      [disabled]="disabled"
+      [ariaLabel]="ariaLabel"
+      [ariaLabelledBy]="ariaLabelledBy"
+      [tabindex]="tabindex"
+    >
+      <ng-template pTemplate="item" let-item let-hasSubmenu="hasSubmenu">
+        @if (itemTemplate) {
+          <ng-container [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item, hasSubmenu: hasSubmenu }">
+          </ng-container>
+        } @else {
+          <a
+            class="p-megamenu-item-link"
+            role="menuitem"
+            tabindex="0"
+            [class.p-disabled]="item.disabled"
+            [attr.href]="item.url || null"
+            [attr.target]="item.target || null"
+          >
+            @if (item.icon) {
+              <span [class]="item.icon + ' p-megamenu-item-icon'"></span>
+            }
+            @if ($any(item).description) {
+              <div class="megamenu-item-label">
+                <span class="p-megamenu-item-label">{{ item.label }}</span>
+                <small class="megamenu-item-caption">{{ $any(item).description }}</small>
+              </div>
+            } @else {
+              <span class="p-megamenu-item-label">{{ item.label }}</span>
+            }
+            @if ($any(item).badge) {
+              <p-badge [value]="$any(item).badge"></p-badge>
+            }
+            @if (hasSubmenu) {
+              <span class="p-megamenu-submenu-icon ti ti-chevron-down"></span>
+            }
+          </a>
+        }
+      </ng-template>
+    </p-megamenu>
+  `,
+})
+export class MegaMenuComponent {
+  @Input() model: MegaMenuModel[] = [];
+  @Input() orientation: MegaMenuOrientation = 'horizontal';
+  @Input() breakpoint: string = '960px';
+  @Input() scrollHeight: string = '';
+  @Input() disabled: boolean = false;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() ariaLabelledBy: string | undefined = undefined;
+  @Input() tabindex: number = 0;
+  @Input() itemTemplate: TemplateRef<any> | null = null;
+}

src/prime-preset/map-tokens.ts

@@ -6,6 +6,7 @@ import tokens from './tokens/tokens.json';
 import { avatarCss } from './tokens/components/avatar';
 import { buttonCss } from './tokens/components/button';
 import { tooltipCss } from './tokens/components/tooltip';
+import { megamenuCss } from './tokens/components/megamenu';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -24,6 +25,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.tooltip as unknown as ComponentsDesignTokens['tooltip']),
       css: tooltipCss,
     },
+    megamenu: {
+      ...(tokens.components.megamenu as unknown as ComponentsDesignTokens['megamenu']),
+      css: megamenuCss,
+    },
   } as ComponentsDesignTokens,
 };
 

src/prime-preset/tokens/components/megamenu.ts

@@ -0,0 +1,42 @@
+export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string => `
+/* ─── Размер иконок ─── */
+.p-megamenu-submenu-icon,
+.p-megamenu-item-icon {
+  font-size: ${dt('megamenu.extend.iconSize')};
+}
+
+/* ─── Типографика пунктов меню ─── */
+.p-megamenu-item-label {
+  font-size: ${dt('fonts.fontSize.300')};
+  font-weight: ${dt('fonts.fontWeight.regular')};
+}
+
+/* ─── Caption (описание) для кастомных пунктов ─── */
+.p-megamenu .megamenu-item-label {
+  display: flex;
+  flex-direction: column;
+  gap: ${dt('megamenu.extend.extItem.caption.gap')};
+}
+
+.p-megamenu .megamenu-item-caption {
+  font-size: ${dt('fonts.fontSize.200')};
+  color: ${dt('megamenu.extend.extItem.caption.color')};
+}
+
+/* ─── Иконка мобильной кнопки ─── */
+.p-megamenu-mobile-button-icon {
+  font-size: ${dt('megamenu.extend.iconSize')};
+}
+
+/* ─── Размер ширины панели по контенту и позиционирование для активных пунктов горизонтального вида от начала пункта меню ─── */
+.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay,
+.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+  min-width: fit-content;
+  left: unset;
+}
+
+/* ─── Позиционирование оверлея от пункта для вертикального вида ─── */
+.p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+  left: 100%;
+}
+`;

src/prime-preset/tokens/tokens.json

@@ -630,7 +630,7 @@
       },
       "submenuLabel": {
         "padding": "{spacing.2x} {spacing.3x}",
-        "fontWeight": "{fonts.fontWeight.demibold}"
+        "fontWeight": "{fonts.fontWeight.regular}"
       },
       "submenuIcon": {
         "size": "{fonts.fontSize.500}"
@@ -3292,6 +3292,7 @@
         "gap": "{navigation.list.gap}"
       },
       "submenuLabel": {
+        "fontWeight": "{navigation.submenuLabel.fontWeight}",
         "padding": "{navigation.submenuLabel.padding}",
         "background": "{navigation.submenuLabel.background}",
         "color": "{navigation.submenuLabel.color}"

src/stories/components/megamenu/examples/megamenu-custom.component.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component';
+
+const template = `<megamenu [model]="items"></megamenu>`;
+
+@Component({
+  selector: 'app-megamenu-custom',
+  standalone: true,
+  imports: [MegaMenuComponent],
+  template,
+})
+export class MegaMenuCustomComponent {
+  items: MegaMenuModel[] = [
+    {
+      label: 'Products',
+      icon: 'ti ti-box',
+      items: [
+        [
+          {
+            label: 'Components',
+            items: [
+              {
+                label: 'Form',
+                description: 'Input, Select, Checkbox',
+                icon: 'ti ti-forms',
+                badge: 'New',
+              } as any,
+              {
+                label: 'Button',
+                description: 'Actions and triggers',
+                icon: 'ti ti-hand-click',
+              } as any,
+            ],
+          },
+        ],
+        [
+          {
+            label: 'Charts',
+            items: [
+              {
+                label: 'Bar Chart',
+                description: 'Categorical comparison',
+                icon: 'ti ti-chart-bar',
+              } as any,
+              {
+                label: 'Line Chart',
+                description: 'Trends over time',
+                icon: 'ti ti-chart-line',
+                badge: 'Beta',
+              } as any,
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Solutions',
+      icon: 'ti ti-bulb',
+      items: [
+        [
+          {
+            label: 'Business',
+            items: [
+              {
+                label: 'Analytics',
+                description: 'Reports and dashboards',
+                icon: 'ti ti-chart-dots',
+              } as any,
+              {
+                label: 'CRM',
+                description: 'Customer management',
+                icon: 'ti ti-users',
+                badge: 'Pro',
+              } as any,
+            ],
+          },
+        ],
+      ],
+    },
+  ];
+}

src/stories/components/megamenu/examples/megamenu-horizontal.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component';
+
+const template = `<megamenu [model]="items"></megamenu>`;
+
+@Component({
+  selector: 'app-megamenu-horizontal',
+  standalone: true,
+  imports: [MegaMenuComponent],
+  template,
+})
+export class MegaMenuHorizontalComponent {
+  items: MegaMenuModel[] = [
+    {
+      label: 'Products',
+      icon: 'ti ti-box',
+      items: [
+        [
+          {
+            label: 'UI Components',
+            items: [
+              { label: 'Form', icon: 'ti ti-forms' },
+              { label: 'Button', icon: 'ti ti-hand-click' },
+              { label: 'Table', icon: 'ti ti-table' },
+            ],
+          },
+        ],
+        [
+          {
+            label: 'Charts',
+            items: [
+              { label: 'Bar Chart', icon: 'ti ti-chart-bar' },
+              { label: 'Line Chart', icon: 'ti ti-chart-line' },
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Solutions',
+      icon: 'ti ti-bulb',
+      items: [
+        [
+          {
+            label: 'Business',
+            items: [
+              { label: 'Analytics', icon: 'ti ti-chart-dots' },
+              { label: 'CRM', icon: 'ti ti-users' },
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Contact',
+      icon: 'ti ti-mail',
+      disabled: true,
+    },
+  ];
+}

src/stories/components/megamenu/examples/megamenu-vertical.component.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component';
+
+const template = `<megamenu [model]="items" orientation="vertical"></megamenu>`;
+
+@Component({
+  selector: 'app-megamenu-vertical',
+  standalone: true,
+  imports: [MegaMenuComponent],
+  template,
+})
+export class MegaMenuVerticalComponent {
+  items: MegaMenuModel[] = [
+    {
+      label: 'Products',
+      icon: 'ti ti-box',
+      items: [
+        [
+          {
+            label: 'UI Components',
+            items: [
+              { label: 'Form', icon: 'ti ti-forms' },
+              { label: 'Button', icon: 'ti ti-hand-click' },
+              { label: 'Table', icon: 'ti ti-table' },
+            ],
+          },
+        ],
+        [
+          {
+            label: 'Charts',
+            items: [
+              { label: 'Bar Chart', icon: 'ti ti-chart-bar' },
+              { label: 'Line Chart', icon: 'ti ti-chart-line' },
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Solutions',
+      icon: 'ti ti-bulb',
+      items: [
+        [
+          {
+            label: 'Business',
+            items: [
+              { label: 'Analytics', icon: 'ti ti-chart-dots' },
+              { label: 'CRM', icon: 'ti ti-users' },
+            ],
+          },
+        ],
+      ],
+    },
+    {
+      label: 'Contact',
+      icon: 'ti ti-mail',
+      disabled: true,
+    },
+  ];
+}