galleria: стилизация

src/lib/components/galleria/galleria.component.ts

@@ -0,0 +1,95 @@
+import { Component, Input, Output, EventEmitter, ContentChildren, QueryList, ViewChild, AfterContentInit } from '@angular/core';
+import { Galleria, GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+
+export interface GalleriaItem {
+  itemImageSrc: string;
+  thumbnailImageSrc?: string;
+  alt?: string;
+  title?: string;
+  description?: string;
+}
+
+@Component({
+  selector: 'galleria',
+  standalone: true,
+  imports: [GalleriaModule],
+  host: { style: 'display: contents' },
+  template: `
+    <p-galleria
+      [value]="value"
+      [numVisible]="numVisible"
+      [showItemNavigators]="showItemNavigators"
+      [showItemNavigatorsOnHover]="showItemNavigatorsOnHover"
+      [showThumbnails]="showThumbnails"
+      [showThumbnailNavigators]="showThumbnailNavigators"
+      [showIndicators]="showIndicators"
+      [showIndicatorsOnItem]="showIndicatorsOnItem"
+      [circular]="circular"
+      [autoPlay]="autoPlay"
+      [transitionInterval]="transitionInterval"
+      [fullScreen]="fullScreen"
+      [visible]="visible"
+      [containerClass]="containerClass"
+      [containerStyle]="containerStyle"
+      [responsiveOptions]="responsiveOptions"
+      (activeIndexChange)="activeIndexChange.emit($event)"
+      (visibleChange)="visibleChange.emit($event)"
+    ></p-galleria>
+  `,
+})
+export class GalleriaComponent implements AfterContentInit {
+  @ViewChild(Galleria, { static: true }) private galleriaRef!: Galleria;
+  @ContentChildren(PrimeTemplate) private userTemplates!: QueryList<PrimeTemplate>;
+
+  @Input() value: GalleriaItem[] = [];
+  @Input() numVisible = 3;
+  @Input() showItemNavigators = false;
+  @Input() showItemNavigatorsOnHover = false;
+  @Input() showThumbnails = true;
+  @Input() showThumbnailNavigators = true;
+  @Input() showIndicators = false;
+  @Input() showIndicatorsOnItem = false;
+  @Input() circular = false;
+  @Input() autoPlay = false;
+  @Input() transitionInterval = 4000;
+  @Input() fullScreen = false;
+  @Input() visible = false;
+  @Input() containerClass: string | undefined = undefined;
+  @Input() containerStyle: Record<string, string> | undefined = undefined;
+  @Input() responsiveOptions: any[] | undefined = undefined;
+
+  @Output() activeIndexChange = new EventEmitter<number>();
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  ngAfterContentInit(): void {
+    this.syncTemplates();
+    this.userTemplates.changes.subscribe(() => this.syncTemplates());
+  }
+
+  private syncTemplates(): void {
+    const ref = this.galleriaRef as any;
+    this.userTemplates.forEach((tpl) => {
+      switch (tpl.getType()) {
+        case 'item':
+          ref._itemTemplate = tpl.template;
+          break;
+        case 'thumbnail':
+          ref._thumbnailTemplate = tpl.template;
+          break;
+        case 'caption':
+          ref.captionTemplate = tpl.template;
+          break;
+        case 'header':
+          ref.headerTemplate = tpl.template;
+          break;
+        case 'footer':
+          ref.footerTemplate = tpl.template;
+          break;
+        case 'indicator':
+          ref.indicatorTemplate = tpl.template;
+          break;
+      }
+    });
+  }
+}

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

@@ -21,6 +21,7 @@ import { megamenuCss } from './tokens/components/megamenu';
 import { selectCss } from './tokens/components/select';
 import { messageCss } from './tokens/components/message';
 import { inputotpCss } from './tokens/components/inputotp';
+import { galleriaCss } from './tokens/components/galleria';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -89,7 +90,11 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
     passwordCss: {
       ...(tokens.components.password as unknown as ComponentsDesignTokens['password']),
       css: passwordCss
-    }
+    },
+    galleria: {
+      ...(tokens.components.galleria as unknown as ComponentsDesignTokens['galleria']),
+      css: galleriaCss,
+    },
   } as ComponentsDesignTokens,
 };
 

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

@@ -0,0 +1,16 @@
+export const galleriaCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* ─── Подпись к изображению ─── */
+  .p-galleria .p-galleria-caption {
+    background: ${dt('galleria.caption.background')};
+    padding: ${dt('spacing.2x')};
+  }
+
+  /* ─── Кнопки навигации в полноэкранном режиме ─── */
+  .p-galleria-mask.p-overlay-mask .p-galleria-nav-button {
+    top: 0%;
+  }
+
+  .p-galleria-mask.p-overlay-mask .p-galleria-items .p-galleria-nav-button {
+    top: 50%;
+  }
+`;

src/stories/components/galleria/examples/galleria-autoplay.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+import { GALLERIA_IMAGES } from './galleria-default.component';
+
+@Component({
+  selector: 'app-galleria-autoplay',
+  standalone: true,
+  imports: [GalleriaModule, PrimeTemplate],
+  template: `
+    <p-galleria
+      [value]="images"
+      [numVisible]="4"
+      [showItemNavigators]="true"
+      [showIndicators]="true"
+      [showThumbnails]="false"
+      [circular]="true"
+      [autoPlay]="true"
+      [transitionInterval]="3000"
+      [containerStyle]="{ 'max-width': '800px' }"
+    >
+      <ng-template pTemplate="item" let-item>
+        <img [src]="item.itemImageSrc" [alt]="item.alt" style="width: 100%; display: block;" />
+      </ng-template>
+    </p-galleria>
+  `,
+})
+export class GalleriaAutoplayComponent {
+  readonly images = GALLERIA_IMAGES;
+}

src/stories/components/galleria/examples/galleria-caption.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+import { GALLERIA_IMAGES } from './galleria-default.component';
+
+@Component({
+  selector: 'app-galleria-caption',
+  standalone: true,
+  imports: [GalleriaModule, PrimeTemplate],
+  template: `
+    <p-galleria
+      [value]="images"
+      [numVisible]="4"
+      [showItemNavigators]="true"
+      [showThumbnails]="false"
+      [showIndicators]="true"
+      [circular]="true"
+      [containerStyle]="{ 'max-width': '800px' }"
+    >
+      <ng-template pTemplate="item" let-item>
+        <img [src]="item.itemImageSrc" [alt]="item.alt" style="width: 100%; display: block;" />
+      </ng-template>
+      <ng-template pTemplate="caption" let-item>
+        <div style="padding: 12px 16px;">
+          <h4 style="margin: 0 0 4px; color: inherit;">{{ item.title }}</h4>
+          <p style="margin: 0; opacity: 0.8; font-size: 0.875rem;">{{ item.description }}</p>
+        </div>
+      </ng-template>
+    </p-galleria>
+  `,
+})
+export class GalleriaCaptionComponent {
+  readonly images = GALLERIA_IMAGES;
+}

src/stories/components/galleria/examples/galleria-default.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+import { GalleriaItem } from '../../../../lib/components/galleria/galleria.component';
+
+export const GALLERIA_IMAGES: GalleriaItem[] = [
+  { itemImageSrc: '/assets/images/galleria/01.png', thumbnailImageSrc: '/assets/images/galleria/01.png', alt: 'СДЭК 1', title: 'Доставка', description: 'Надёжная доставка по всей России' },
+  { itemImageSrc: '/assets/images/galleria/02.png', thumbnailImageSrc: '/assets/images/galleria/02.png', alt: 'СДЭК 2', title: 'Логистика', description: 'Современные логистические решения' },
+  { itemImageSrc: '/assets/images/galleria/03.png', thumbnailImageSrc: '/assets/images/galleria/03.png', alt: 'СДЭК 3', title: 'Сервис', description: 'Качественный клиентский сервис' },
+  { itemImageSrc: '/assets/images/galleria/04.png', thumbnailImageSrc: '/assets/images/galleria/04.png', alt: 'СДЭК 4', title: 'Технологии', description: 'Инновационные технологии доставки' },
+];
+
+@Component({
+  selector: 'app-galleria-default',
+  standalone: true,
+  imports: [GalleriaModule, PrimeTemplate],
+  template: `
+    <p-galleria
+      [value]="images"
+      [numVisible]="4"
+      [showItemNavigators]="true"
+      [showIndicators]="true"
+      [showThumbnails]="false"
+      [circular]="true"
+      [containerStyle]="{ 'max-width': '800px' }"
+    >
+      <ng-template pTemplate="item" let-item>
+        <img [src]="item.itemImageSrc" [alt]="item.alt" style="width: 100%; display: block;" />
+      </ng-template>
+    </p-galleria>
+  `,
+})
+export class GalleriaDefaultComponent {
+  readonly images = GALLERIA_IMAGES;
+}

src/stories/components/galleria/examples/galleria-fullscreen.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+import { GALLERIA_IMAGES } from './galleria-default.component';
+
+@Component({
+  selector: 'app-galleria-fullscreen',
+  standalone: true,
+  imports: [GalleriaModule, PrimeTemplate],
+  template: `
+    <button label="Открыть галерею" (click)="visible = true"></button>
+
+    <p-galleria
+      [value]="images"
+      [numVisible]="4"
+      [showItemNavigators]="true"
+      [showThumbnails]="true"
+      [circular]="true"
+      [fullScreen]="true"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+    >
+      <ng-template pTemplate="item" let-item>
+        <img [src]="item.itemImageSrc" [alt]="item.alt" style="width: 100%; display: block;" />
+      </ng-template>
+      <ng-template pTemplate="thumbnail" let-item>
+        <img [src]="item.thumbnailImageSrc" [alt]="item.alt" style="display: block;" />
+      </ng-template>
+    </p-galleria>
+  `,
+})
+export class GalleriaFullscreenComponent {
+  readonly images = GALLERIA_IMAGES;
+  visible = false;
+}

src/stories/components/galleria/examples/galleria-thumbnails.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { GalleriaModule } from 'primeng/galleria';
+import { PrimeTemplate } from 'primeng/api';
+import { GALLERIA_IMAGES } from './galleria-default.component';
+
+@Component({
+  selector: 'app-galleria-thumbnails',
+  standalone: true,
+  imports: [GalleriaModule, PrimeTemplate],
+  template: `
+    <p-galleria
+      [value]="images"
+      [numVisible]="4"
+      [showItemNavigators]="true"
+      [showThumbnails]="true"
+      [showIndicators]="false"
+      [circular]="true"
+      [containerStyle]="{ 'max-width': '800px' }"
+    >
+      <ng-template pTemplate="item" let-item>
+        <img [src]="item.itemImageSrc" [alt]="item.alt" style="width: 100%; display: block;" />
+      </ng-template>
+      <ng-template pTemplate="thumbnail" let-item>
+        <img [src]="item.thumbnailImageSrc" [alt]="item.alt" style="display: block;" />
+      </ng-template>
+    </p-galleria>
+  `,
+})
+export class GalleriaThumbnailsComponent {
+  readonly images = GALLERIA_IMAGES;
+}