Overlay.dialog

.gitignore

@@ -56,6 +56,6 @@ src/assets/components/themes
 /debug-storybook.log
 /documentation.json
 
-.claude/*
-
 .playwright-mcp/*
+
+.claude/*

src/lib/components/accordion/accordion.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'primeng/accordion';
+
+export interface ExtraAccordionItem {
+  value: string;
+  header: string;
+  content: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'extra-accordion',
+  host: { style: 'display: block' },
+  standalone: true,
+  imports: [Accordion, AccordionPanel, AccordionHeader, AccordionContent],
+  template: `
+    <p-accordion [multiple]="multiple" [value]="activeValue" (valueChange)="activeValueChange.emit($event)">
+      @for (item of items; track item.value) {
+        <p-accordion-panel [value]="item.value" [disabled]="item.disabled ?? false">
+          <p-accordion-header>
+            <div>
+              @if (item.icon) {
+                <i [class]="item.icon"></i>
+              }
+              <span>{{ item.header }}</span>
+            </div>
+          </p-accordion-header>
+          <p-accordion-content>{{ item.content }}</p-accordion-content>
+        </p-accordion-panel>
+      }
+    </p-accordion>
+  `
+})
+export class ExtraAccordionComponent {
+  @Input() items: ExtraAccordionItem[] = [];
+  @Input() multiple = false;
+  @Input() activeValue: string | null = '0';
+  @Output() activeValueChange = new EventEmitter<string | number | string[] | number[] | null | undefined>();
+}

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

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

src/lib/components/accordion/public_api.ts

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

src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,88 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { PrimeTemplate } from 'primeng/api';
+import { ExtraButtonComponent } from '../button/button.component';
+
+export type ExtraConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+
+@Component({
+  selector: 'extra-confirm-dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [ConfirmDialog, ExtraButtonComponent, PrimeTemplate, NgTemplateOutlet],
+  template: `
+    <p-confirmDialog [key]="key" [styleClass]="computedClass" appendTo="body">
+      <ng-template pTemplate="headless" let-message let-onAccept="onAccept" let-onReject="onReject">
+        @if (headerTemplate) {
+          <ng-container [ngTemplateOutlet]="headerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-header">
+            <div class="p-dialog-title">
+              <i [class]="message.icon"></i>
+              <span>{{ message.header }}</span>
+            </div>
+            <extra-button
+              styleClass="p-dialog-close-button"
+              variant="text"
+              icon="ti ti-x"
+              [rounded]="true"
+              [iconOnly]="true"
+              (click)="onReject()"
+            ></extra-button>
+          </div>
+        }
+        <div class="p-dialog-content">
+          <p>{{ message.message }}</p>
+        </div>
+        @if (footerTemplate) {
+          <ng-container [ngTemplateOutlet]="footerTemplate"
+            [ngTemplateOutletContext]="{ $implicit: message, onAccept, onReject }">
+          </ng-container>
+        } @else {
+          <div class="p-dialog-footer">
+            <extra-button
+              [label]="message.rejectLabel"
+              variant="text"
+              (click)="onReject()"
+            ></extra-button>
+            <extra-button
+              [label]="message.acceptLabel"
+              [severity]="message.acceptButtonProps?.severity"
+              (click)="onAccept()"
+            ></extra-button>
+          </div>
+        }
+      </ng-template>
+    </p-confirmDialog>
+  `,
+})
+export class ExtraConfirmDialogComponent {
+  @Input() key = '';
+  @Input() size: ExtraConfirmDialogSize = 'default';
+  @Input() severity: ExtraConfirmDialogSeverity = 'default';
+  @Input() headerTemplate: TemplateRef<any> | null = null;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
+
+  get computedClass(): string {
+    const classes: string[] = [];
+    if (this.size === 'sm') classes.push('p-confirmdialog-sm');
+    else if (this.size === 'lg') classes.push('p-confirmdialog-lg');
+    else if (this.size === 'xlg') classes.push('p-confirmdialog-xlg');
+
+    const severityMap: Record<ExtraConfirmDialogSeverity, string> = {
+      success: 'p-confirm-dialog-accept',
+      info: 'p-confirm-dialog-info',
+      warn: 'p-confirm-dialog-warn',
+      help: 'p-confirm-dialog-help',
+      danger: 'p-confirm-dialog-error',
+      default: '',
+    };
+    if (severityMap[this.severity]) classes.push(severityMap[this.severity]);
+
+    return classes.join(' ');
+  }
+}

src/lib/components/confirm-dialog/confirm-dialog.service.ts

@@ -0,0 +1,20 @@
+import { Injectable, Provider } from '@angular/core';
+import { Confirmation, ConfirmationService } from 'primeng/api';
+
+export type ConfirmDialogOptions = Pick<
+  Confirmation,
+  'key' | 'message' | 'header' | 'icon' | 'acceptLabel' | 'rejectLabel' | 'accept' | 'reject' | 'acceptButtonProps'
+>;
+
+export function provideConfirmDialog(): Provider[] {
+  return [ConfirmationService, ConfirmDialogService];
+}
+
+@Injectable()
+export class ConfirmDialogService {
+  constructor(private readonly confirmationService: ConfirmationService) {}
+
+  confirm(options: ConfirmDialogOptions): void {
+    this.confirmationService.confirm(options);
+  }
+}

src/lib/components/confirm-dialog/ng-package.json

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

src/lib/components/confirm-dialog/public_api.ts

@@ -0,0 +1,2 @@
+export * from './confirm-dialog.component';
+export * from './confirm-dialog.service';

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

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

src/lib/components/stepper/public_api.ts

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

src/lib/components/stepper/stepper.component.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Stepper } from 'primeng/stepper';
+import { StepList } from 'primeng/stepper';
+import { Step } from 'primeng/stepper';
+import { StepPanels } from 'primeng/stepper';
+import { StepPanel } from 'primeng/stepper';
+import { StepItem } from 'primeng/stepper';
+import { ExtraButtonComponent } from '../button/button.component';
+
+export interface ExtraStepperItem {
+  value: number | undefined;
+  label: string;
+  caption?: string;
+  content?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+}
+
+@Component({
+  selector: 'extra-stepper',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Stepper, StepList, Step, StepPanels, StepPanel, StepItem, ExtraButtonComponent, NgClass],
+  template: `
+    <p-stepper
+      [value]="value"
+      [linear]="linear"
+      (valueChange)="onValueChange($event)"
+    >
+      @if (orientation === 'horizontal') {
+        <p-step-list>
+          @for (step of steps; track step.value) {
+            <p-step
+              [value]="step.value"
+              [disabled]="step.disabled || false"
+              [ngClass]="{ 'step-invalid': step.invalid }"
+            >
+              {{ step.label }}
+              @if (step.caption) {
+                <div class="caption-secondary">{{ step.caption }}</div>
+              }
+            </p-step>
+          }
+        </p-step-list>
+      }
+      @if (orientation === 'horizontal' && showPanels) {
+        <p-step-panels>
+          @for (step of steps; track step.value; let i = $index; let first = $first; let last = $last) {
+            <p-step-panel [value]="step.value">
+              <ng-template #content let-activateCallback="activateCallback">
+                <p class="m-0">{{ step.content }}</p>
+                <div class="flex pt-4">
+                  @if (!first) {
+                    <extra-button label="Назад" variant="outlined" (click)="activateCallback(steps[i - 1].value)"></extra-button>
+                  }
+                  @if (!last) {
+                    <extra-button label="Вперёд" variant="secondary" class="ml-auto" [disabled]="!!step.invalid" (click)="activateCallback(steps[i + 1].value)"></extra-button>
+                  }
+                </div>
+              </ng-template>
+            </p-step-panel>
+          }
+        </p-step-panels>
+      }
+
+      @if (orientation === 'vertical') {
+        @for (step of steps; track step.value; let i = $index; let first = $first; let last = $last) {
+          <p-step-item [value]="step.value">
+            <p-step
+              [value]="step.value"
+              [disabled]="step.disabled || false"
+              [ngClass]="{ 'step-invalid': step.invalid }"
+            >
+              {{ step.label }}
+              @if (step.caption) {
+                <div class="caption-secondary">{{ step.caption }}</div>
+              }
+            </p-step>
+            @if (showPanels) {
+              <p-step-panel [value]="step.value">
+                <ng-template #content let-activateCallback="activateCallback">
+                  <p class="m-0">{{ step.content }}</p>
+                  <div class="flex gap-2 pt-4">
+                    @if (!first) {
+                      <extra-button label="Назад" variant="outlined" (click)="activateCallback(steps[i - 1].value)"></extra-button>
+                    }
+                    @if (!last) {
+                      <extra-button label="Вперёд" variant="secondary" [disabled]="!!step.invalid" (click)="activateCallback(steps[i + 1].value)"></extra-button>
+                    }
+                  </div>
+                </ng-template>
+              </p-step-panel>
+            }
+          </p-step-item>
+        }
+      }
+    </p-stepper>
+  `,
+})
+export class ExtraStepperComponent {
+  @Input() value: number | undefined = 1;
+  @Input() steps: ExtraStepperItem[] = [];
+  @Input() linear = false;
+  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+  @Input() showPanels = true;
+
+  @Output() valueChange = new EventEmitter<number | undefined>();
+
+  onValueChange(newValue: number | undefined): void {
+    this.value = newValue;
+    this.valueChange.emit(newValue);
+  }
+}