Add image carousel component

projects/elonkit/src/public-api.ts

@@ -5,5 +5,6 @@ export * from './ui/inline-form-field';
 export * from './ui/paginator';
 export * from './ui/timepicker';
 export * from './ui/action-heading';
+export * from './ui/image-carousel';
 
 export * from './ui/locale';

projects/elonkit/src/ui/image-carousel/__specs__/image-carousel.spec.ts

@@ -0,0 +1,108 @@
+import { render } from '@testing-library/angular';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+
+import { ESImageCarouselComponent } from '../image-carousel.component';
+import { ESImageCarouselModule } from '../image-carousel.module';
+import { filesFixture } from '../fixtures/files.fixture';
+import { ESLocaleService, en, ru } from '../../locale';
+
+describe('Image Carousel', () => {
+  beforeEach(() => {
+    spyOn(ESImageCarouselComponent.prototype, 'elementIsInView').and.returnValue(true);
+  });
+
+  it('Should render all images', async () => {
+    const component = await render(ESImageCarouselComponent, {
+      componentProperties: {
+        files: filesFixture
+      },
+      imports: [ESImageCarouselModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByTestId('image')).toHaveLength(filesFixture.length);
+  });
+
+  it('Should render all buttons', async () => {
+    const component = await render(ESImageCarouselComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canView: true,
+        canRemove: true
+      },
+      imports: [ESImageCarouselModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+
+    expect(component.getAllByLabelText(en.imageCarousel.labelRemove)).toHaveLength(
+      filesFixture.length
+    );
+    expect(component.getAllByLabelText(en.imageCarousel.labelView)).toHaveLength(
+      filesFixture.length
+    );
+    expect(component.getByLabelText(en.imageCarousel.labelSlideLeft)).toBeInTheDocument();
+    expect(component.getByLabelText(en.imageCarousel.labelSlideRight)).toBeInTheDocument();
+  });
+
+  it('Should change locale', async () => {
+    const localeService = new ESLocaleService();
+    localeService.register('ru', ru);
+    localeService.use('ru');
+
+    const component = await render(ESImageCarouselComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canView: true,
+        canRemove: true
+      },
+      imports: [ESImageCarouselModule, MatIconTestingModule],
+      providers: [{ provide: ESLocaleService, useValue: localeService }],
+      excludeComponentDeclaration: true
+    });
+    expect(component.getAllByLabelText(ru.imageCarousel.labelRemove)).toHaveLength(
+      filesFixture.length
+    );
+    expect(component.getAllByLabelText(ru.imageCarousel.labelView)).toHaveLength(
+      filesFixture.length
+    );
+    expect(component.getByLabelText(ru.imageCarousel.labelSlideLeft)).toBeInTheDocument();
+    expect(component.getByLabelText(ru.imageCarousel.labelSlideRight)).toBeInTheDocument();
+  });
+
+  it('Should emit view on view button click', async () => {
+    const onView = jest.fn();
+    const component = await render(ESImageCarouselComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canView: true,
+        view: {
+          emit: onView
+        } as any
+      },
+      imports: [ESImageCarouselModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    component.getAllByLabelText(en.imageCarousel.labelView).forEach((btn) => {
+      component.click(btn);
+    });
+    expect(onView).toHaveBeenCalledTimes(filesFixture.length);
+  });
+
+  it('Should emit remove on remove button click', async () => {
+    const onRemove = jest.fn();
+    const component = await render(ESImageCarouselComponent, {
+      componentProperties: {
+        files: filesFixture,
+        canRemove: true,
+        remove: {
+          emit: onRemove
+        } as any
+      },
+      imports: [ESImageCarouselModule, MatIconTestingModule],
+      excludeComponentDeclaration: true
+    });
+    component.getAllByLabelText(en.imageCarousel.labelRemove).forEach((btn) => {
+      component.click(btn);
+    });
+    expect(onRemove).toHaveBeenCalledTimes(filesFixture.length);
+  });
+});

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/image-carousel-story-basic.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+  <es-image-carousel
+    [imageHeight]="imageHeight"
+    [imageWidth]="imageWidth"
+    [gap]="gap"
+    [canView]="canView"
+    [canRemove]="canRemove"
+    [imageTypes]="imageTypes"
+    [files]="files"
+    (view)="onView($event)"
+    (remove)="onRemove($event)"
+  ></es-image-carousel>
+</div>

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/image-carousel-story-basic.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 600px;
+}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/image-carousel-story-basic.component.ts

@@ -0,0 +1,26 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { ESImageCarouselFile } from '../../image-carousel.types';
+import { filesFixture } from '../../fixtures/files.fixture';
+
+@Component({
+  selector: 'es-image-carousel-basic',
+  templateUrl: './image-carousel-story-basic.component.html',
+  styleUrls: ['./image-carousel-story-basic.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImageCarouselStoryBasicComponent {
+  @Input()
+  public imageHeight: number;
+  @Input()
+  public imageWidth: number;
+  @Input()
+  public gap: number;
+  @Input()
+  public canView: boolean;
+  @Input()
+  public canRemove: boolean;
+  @Input()
+  public imageTypes: string;
+
+  public files: ESImageCarouselFile[] = filesFixture;
+}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/image-carousel-story-basic.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ImageCarouselStoryBasicComponent } from './image-carousel-story-basic.component';
+import { ESImageCarouselModule } from '../../image-carousel.module';
+
+@NgModule({
+  declarations: [ImageCarouselStoryBasicComponent],
+  imports: [CommonModule, ESImageCarouselModule],
+  exports: [ImageCarouselStoryBasicComponent]
+})
+export class ImageCarouselStoryBasicModule {}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/image-carousel-story-basic.source.ts

@@ -0,0 +1,46 @@
+export const IMAGE_CAROUSEL_STORY_BASIC_SOURCE = {
+  ts: `
+  @Component({
+    ...
+  })
+  export class AppComponent {
+    public files = [{
+      id: 1,
+      type: 'image/jpg',
+      file: 'https://dummyimage.com/400x400/405ed6/fff.jpg&text=ES1',
+      name: 'FileName1.jpg',
+      size: 45678,
+      content: null
+    },
+    ...
+    {
+      id: 7,
+      type: 'image/jpg',
+      file: 'https://dummyimage.com/400x400/28B463/fff.jpg&text=ES7',
+      name: 'FileName7.jpg',
+      size: 456789,
+      content: null
+    }]
+  }
+  `,
+  scss: `
+  .container {
+    max-width: 600px;
+  }
+  `,
+  html: `
+  <div class="container">
+    <es-image-carousel
+      [imageHeight]="imageHeight"
+      [imageWidth]="imageWidth"
+      [gap]="gap"
+      [canView]="canView"
+      [canRemove]="canRemove"
+      [imageTypes]="imageTypes"
+      [files]="files"
+      (view)="onView($event)"
+      (remove)="onRemove($event)"
+    ></es-image-carousel>
+  </div>
+  `
+};

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-basic/index.ts

@@ -0,0 +1,3 @@
+export { ImageCarouselStoryBasicComponent } from './image-carousel-story-basic.component';
+export { ImageCarouselStoryBasicModule } from './image-carousel-story-basic.module';
+export { IMAGE_CAROUSEL_STORY_BASIC_SOURCE } from './image-carousel-story-basic.source';

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/image-carousel-story-custom-icon.component.html

@@ -0,0 +1,13 @@
+<div class="container">
+  <es-image-carousel
+    [imageHeight]="imageHeight"
+    [imageWidth]="imageWidth"
+    [gap]="gap"
+    [canView]="canView"
+    [canRemove]="canRemove"
+    [imageTypes]="imageTypes"
+    [files]="files"
+    viewSvgIcon="magnify"
+    removeSvgIcon="trash-can"
+  ></es-image-carousel>
+</div>

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/image-carousel-story-custom-icon.component.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 600px;
+}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/image-carousel-story-custom-icon.component.ts

@@ -0,0 +1,40 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { ESImageCarouselFile } from '../../image-carousel.types';
+import { filesFixture } from '../../fixtures/files.fixture';
+
+@Component({
+  selector: 'es-image-carousel-custom-icon',
+  templateUrl: './image-carousel-story-custom-icon.component.html',
+  styleUrls: ['./image-carousel-story-custom-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ImageCarouselStoryCustomIconComponent {
+  @Input()
+  public imageHeight: number;
+  @Input()
+  public imageWidth: number;
+  @Input()
+  public gap: number;
+  @Input()
+  public canView: boolean;
+  @Input()
+  public canRemove: boolean;
+  @Input()
+  public imageTypes: string;
+
+  public files: ESImageCarouselFile[] = filesFixture;
+
+  constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIcon(
+      'magnify',
+      sanitizer.bypassSecurityTrustResourceUrl('/icons/image-carousel/magnify.svg')
+    );
+    iconRegistry.addSvgIcon(
+      'trash-can',
+      sanitizer.bypassSecurityTrustResourceUrl('/icons/image-carousel/trash-can.svg')
+    );
+  }
+}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/image-carousel-story-custom-icon.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ImageCarouselStoryCustomIconComponent } from './image-carousel-story-custom-icon.component';
+import { ESImageCarouselModule } from '../../image-carousel.module';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  declarations: [ImageCarouselStoryCustomIconComponent],
+  imports: [CommonModule, ESImageCarouselModule, HttpClientModule],
+  exports: [ImageCarouselStoryCustomIconComponent]
+})
+export class ImageCarouselStoryCustomIconModule {}

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/image-carousel-story-custom-icon.source.ts

@@ -0,0 +1,30 @@
+export const IMAGE_CAROUSEL_STORY_CUSTOM_ICON_SOURCE = {
+  ts: `
+  @Component({
+    ...
+  })
+  export class AppComponent {
+    constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
+      iconRegistry.addSvgIcon(
+        'magnify',
+        sanitizer.bypassSecurityTrustResourceUrl('/icons/magnify.svg')
+      );
+      iconRegistry.addSvgIcon(
+        'trash-can',
+        sanitizer.bypassSecurityTrustResourceUrl('/icons/image-carousel/trash-can.svg')
+      );
+    }
+  }
+
+  @NgModule({
+    ...
+    imports: [CommonModule, ESImageCarouselModule, HttpClientModule],
+    ...
+  })
+  `,
+  html: `
+  <div class="container">
+    <es-image-carousel viewSvgIcon="magnify" removeSvgIcon="trash-can" [files]="files"></es-image-carousel>
+  </div>
+  `
+};

projects/elonkit/src/ui/image-carousel/__stories__/image-carousel-story-custom-icon/index.ts

@@ -0,0 +1,3 @@
+export { ImageCarouselStoryCustomIconComponent } from './image-carousel-story-custom-icon.component';
+export { ImageCarouselStoryCustomIconModule } from './image-carousel-story-custom-icon.module';
+export { IMAGE_CAROUSEL_STORY_CUSTOM_ICON_SOURCE } from './image-carousel-story-custom-icon.source';