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

src/lib/components/drawer/drawer.component.ts

@@ -0,0 +1,74 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core';
+import { Drawer } from 'primeng/drawer';
+import { SharedModule } from 'primeng/api';
+import { NgTemplateOutlet } from '@angular/common';
+
+@Component({
+  selector: 'extra-drawer',
+  standalone: true,
+  imports: [Drawer, SharedModule, NgTemplateOutlet],
+  template: `
+    <p-drawer
+      [visible]="visible"
+      [header]="headerTemplate ? undefined : header"
+      [modal]="modal"
+      [fullScreen]="fullScreen"
+      [dismissible]="dismissible"
+      [closable]="showCloseIcon"
+      [closeOnEscape]="closeOnEscape"
+      [blockScroll]="blockScroll"
+      [styleClass]="sizeClass"
+      [position]="position"
+      [closeButtonProps]="{ text: true, rounded: true }"
+      (visibleChange)="visibleChange.emit($event)"
+      (onShow)="onShow.emit()"
+      (onHide)="onHide.emit()"
+    >
+      <ng-content></ng-content>
+      @if (headerTemplate) {
+        <ng-template pTemplate="header">
+          <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+        </ng-template>
+      }
+      @if (footerTemplate) {
+        <ng-template pTemplate="footer">
+          <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+        </ng-template>
+      }
+    </p-drawer>
+  `,
+})
+export class ExtraDrawerComponent {
+  @Input() visible = false;
+  @Input() header: string | undefined;
+  @Input() position: 'left' | 'right' | 'top' | 'bottom' = 'right';
+  @Input() size: 'default' | 'sm' | 'lg' | 'xlg' = 'default';
+  @Input() modal = true;
+  @Input() fullScreen = false;
+  @Input() dismissible = true;
+  @Input() showCloseIcon = true;
+  @Input() closeOnEscape = true;
+  @Input() blockScroll = true;
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() onShow = new EventEmitter<void>();
+  @Output() onHide = new EventEmitter<void>();
+
+  @ContentChild('drawerHeader') headerTemplate: TemplateRef<unknown> | null =
+    null;
+
+  @ContentChild('drawerFooter') footerTemplate: TemplateRef<unknown> | null =
+    null;
+
+  get sizeClass(): string {
+    if (this.size === 'default') return '';
+    return `p-drawer-${this.size}`;
+  }
+}

src/lib/components/drawer/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public_api.ts"
+  }
+}
+

src/lib/components/drawer/public_api.ts

@@ -0,0 +1,4 @@
+export * from './drawer.component';
+
+
+

src/lib/providers/prime-preset/map-tokens.ts

@@ -24,6 +24,7 @@ import { inputotpCss } from './tokens/components/inputotp';
 import { carouselCss } from './tokens/components/carousel';
 import { galleriaCss } from './tokens/components/galleria';
 import { confirmDialogCss } from './tokens/components/confirm-dialog';
+import { drawerCss } from './tokens/components/drawer';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -104,6 +105,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
     confirmdialog: {
       ...(tokens.components.confirmdialog as unknown as ComponentsDesignTokens['confirmdialog']),
       css: confirmDialogCss
+    },
+    drawer: {
+      ...(tokens.components.drawer as unknown as ComponentsDesignTokens['drawer']),
+      css: drawerCss
     }
   } as ComponentsDesignTokens
 };

src/lib/providers/prime-preset/tokens/components/drawer.ts

@@ -0,0 +1,66 @@
+const drawerCss = ({ dt }: { dt: (token: string) => string }): string => `
+
+/* Скругление углов */
+.p-drawer.p-component {
+  border-radius: ${dt('drawer.extend.borderRadius')};
+}
+
+/* Нижняя граница и внутренние отступы заголовка */
+.p-drawer.p-component .p-drawer-header {
+  border-bottom: 1px solid ${dt('drawer.extend.extHeader.borderColor')};
+  padding: ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.100')} ${dt('overlay.modal.padding.300')};
+}
+
+/* Типографика */
+.p-drawer.p-component .p-drawer-title {
+  font-weight: ${dt('drawer.title.fontWeight')};
+  font-size: ${dt('drawer.title.fontSize')};
+}
+
+/* Кнопки действий в заголовке - расстояние между элементами */
+.p-drawer.p-component .p-drawer-header-actions {
+  gap: ${dt('drawer.extend.extHeader.gap')};
+}
+
+/* Внутренние отступы контента и футера */
+.p-drawer.p-component .p-drawer-content {
+  padding: ${dt('overlay.modal.padding.300')};
+}
+
+.p-drawer.p-component .p-drawer-footer {
+  padding: 0 ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')};
+}
+
+/* Боковые drawer (слева/справа) - базовые размеры и отступы от краев экрана */
+.p-drawer.p-component.p-drawer-left,
+.p-drawer.p-component.p-drawer-right {
+  margin: ${dt('drawer.extend.padding')};
+  width: ${dt('drawer.root.width')};
+  height: calc(100% - ${dt('drawer.extend.padding')} * 2);
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-sm,
+.p-drawer.p-component.p-drawer-right.p-drawer-sm {
+  width: ${dt('drawer.sm.width')};
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-lg,
+.p-drawer.p-component.p-drawer-right.p-drawer-lg {
+  width: ${dt('drawer.lg.width')};
+}
+
+.p-drawer.p-component.p-drawer-left.p-drawer-xlg,
+.p-drawer.p-component.p-drawer-right.p-drawer-xlg {
+  width: ${dt('drawer.xlg.width')};
+}
+
+/* Горизонтальные drawer (сверху/снизу) - базовые размеры и отступы от краев экрана */
+.p-drawer.p-component.p-drawer-top,
+.p-drawer.p-component.p-drawer-bottom {
+  margin: ${dt('drawer.extend.padding')};
+  width: calc(100% - ${dt('drawer.extend.padding')} * 2);
+}
+
+`;
+
+export { drawerCss };

src/lib/providers/prime-preset/tokens/tokens.json

@@ -2813,10 +2813,20 @@
         "background": "{overlay.modal.background}",
         "borderColor": "{overlay.modal.borderColor}",
         "color": "{overlay.modal.color}",
-        "shadow": "{overlay.modal.shadow}"
+        "shadow": "{overlay.modal.shadow}",
+        "width": "{overlay.width}"
+      },
+      "sm": {
+        "width": "{overlay.sm.width}"
+      },
+      "lg": {
+        "width": "{overlay.lg.width}"
+      },
+      "xlg": {
+        "width": "{overlay.xlg.width}"
       },
       "header": {
-        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.100} {overlay.modal.padding.300} "
+        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} "
       },
       "title": {
         "fontSize": "{fonts.fontSize.500}",