@mozaic-ds/angular 0.23.0 → 0.23.1

package/projects/kit/components/notification/notification.service.ts

@@ -0,0 +1,50 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Inject,
+  Injectable,
+  Injector,
+} from '@angular/core';
+import { Notification } from './notification';
+import { NotificationContainerComponent } from './notification-container.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  private readonly container!: ComponentRef<NotificationContainerComponent>;
+
+  constructor(
+    private readonly applicationRef: ApplicationRef,
+    private readonly componentFactoryResolver: ComponentFactoryResolver,
+    private readonly injector: Injector,
+    @Inject(DOCUMENT) private readonly document: Document
+  ) {
+    this.container = this.createContainer();
+    this.appendNotificationContainerToBody(this.container);
+  }
+
+  public add(notification: Notification) {
+    this.container.instance.add(notification);
+  }
+
+  private createContainer(): ComponentRef<NotificationContainerComponent> {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      NotificationContainerComponent
+    );
+    const componentRef = componentFactory.create(this.injector);
+    return componentRef;
+  }
+
+  private appendNotificationContainerToBody(
+    componentRef: ComponentRef<NotificationContainerComponent>
+  ): void {
+    const componentHostView = componentRef.hostView as EmbeddedViewRef<unknown>;
+    const componentHtmlElement = componentHostView.rootNodes[0] as HTMLElement;
+    this.applicationRef.attachView(componentHostView);
+    this.document.body.appendChild(componentHtmlElement);
+  }
+}

package/projects/kit/components/notification/notification.stories.ts

@@ -0,0 +1,52 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonModule } from '../button';
+import { NotificationExampleComponent } from './notification-example.component';
+import { NotificationComponent } from './notification.component';
+import { NotificationModule } from './notification.module';
+
+export default {
+  component: NotificationComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NotificationModule.forRoot(), ButtonModule, BrowserAnimationsModule],
+      declarations: [NotificationExampleComponent],
+    }),
+  ],
+  argTypes: {
+    type: {
+      options: ['information', 'success', 'warning', 'danger'],
+      control: { type: 'radio', defaultValue: 'information' },
+    },
+    size: {
+      options: ['s', 'm'],
+      control: { type: 'radio', defaultValue: 'm' },
+    },
+  },
+  title: 'Indicator/Notification',
+} as Meta;
+
+const Template: Story = ({ type, size }: any = {}) => {
+  return {
+    props: {
+      type,
+      size,
+    },
+    template: `
+    <moz-notification [size]="size" [type]="type">
+      <h3 mozNotificationTitle>Information notification</h3>
+      <p mozNotificationMessage>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa.
+      </p>
+      <div mozNotificationFooter>
+        <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
+      </div>
+    </moz-notification>
+    <br>
+    <moz-notification-example></moz-notification-example>
+      `,
+  };
+};
+
+export const Default = Template.bind({});

package/projects/kit/components/notification/notification.ts

@@ -0,0 +1,21 @@
+import { InjectionToken } from '@angular/core';
+
+export type NotificationType = 'information' | 'success' | 'warning' | 'danger';
+
+export type NotificationSize = 'm' | 's';
+
+export type Notification = {
+  type?: NotificationType;
+  title?: string;
+  message: string;
+};
+
+export type NotificationConfig = { duration: number };
+
+export const NOTIFICATION_CONFIG = new InjectionToken<NotificationConfig>('NOTIFICATION_CONFIG');
+
+export class NotificationConfigFactory {
+  static create(config: Partial<NotificationConfig> = {}): NotificationConfig {
+    return { duration: 3000, ...config };
+  }
+}

package/projects/kit/components/pagination/pagination.component.html

@@ -0,0 +1,39 @@
+<nav class="mc-pagination" role="navigation" aria-label="pagination">
+  <button
+    moz-button
+    theme="neutral"
+    class="mc-pagination__button"
+    [disabled]="isFirstPage"
+    [onlyIcon]="true"
+    [size]="(selectSize | async)!"
+    (click)="previousPage()"
+    *ngIf="leftIconName | async; let icon"
+  >
+    <moz-icon [iconName]="icon"></moz-icon>
+  </button>
+  <div *ngIf="viewSelect">
+    <select
+      moz-select
+      [ngModel]="currentPage"
+      (ngModelChange)="writeValue($event)"
+      [compareWith]="compareWithPages"
+      [size]="(selectSize | async)!"
+      [disabled]="disabledSelect"
+    >
+      <option *ngFor="let page of pages" [ngValue]="page.value">{{ page.title }}</option>
+    </select>
+  </div>
+
+  <button
+    moz-button
+    theme="neutral"
+    class="mc-pagination__button"
+    [disabled]="isLastPage"
+    (click)="nextPage()"
+    [size]="(selectSize | async)!"
+    [onlyIcon]="true"
+    *ngIf="rightIconName | async; let icon"
+  >
+    <moz-icon [iconName]="icon"></moz-icon>
+  </button>
+</nav>

package/projects/kit/components/pagination/pagination.component.scss

@@ -0,0 +1,7 @@
+@import 'settings-tools/all-settings';
+
+@import 'components/c.pagination';
+
+.mc-pagination {
+  gap: 1rem;
+}

package/projects/kit/components/pagination/pagination.component.ts

@@ -0,0 +1,199 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+  SimpleChanges,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { debounceTime, map, Observable, shareReplay, startWith } from 'rxjs';
+import { GlobalEventsService } from '../../common';
+import { IconSize } from '../icon/icon-size';
+import { SELECT_SIZE, SelectSize } from '../select/select-size';
+import {
+  Page,
+  PAGINATION_FIRST_PAGE,
+  PAGINATION_MIN_NUMBER_OF_PAGES,
+  PAGINATION_PAGE_STEP,
+} from './pagination';
+
+export const PAGINATION_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => PaginationComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'moz-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [PAGINATION_CONTROL_VALUE_ACCESSOR],
+})
+export class PaginationComponent implements ControlValueAccessor {
+  @Input() numberOfPages = PAGINATION_MIN_NUMBER_OF_PAGES;
+
+  @Input() light = false;
+  @Input() pageLabel = 'Page';
+  @Input() pageOfLabel = 'of';
+
+  @Input() pageTitleMask = (page: number, numberOfPages: number) =>
+    `${this.pageLabel} ${page} ${this.pageOfLabel} ${numberOfPages}`;
+
+  public onChange: any = () => {};
+
+  public onTouch: any = () => {};
+
+  public currentPage = PAGINATION_FIRST_PAGE;
+
+  public pages: Page[] = [];
+
+  public rightIconName!: Observable<string>;
+
+  public leftIconName!: Observable<string>;
+
+  public selectSize: Observable<SelectSize>;
+
+  private readonly smallResolution = 1024;
+
+  constructor(
+    private readonly globalEventService: GlobalEventsService,
+    private readonly cd: ChangeDetectorRef
+  ) {
+    const isSmall = this.displayIsSmall().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+    this.initializeIcons(isSmall);
+    this.selectSize = isSmall.pipe(map((isSmall) => this.chooseSelectSize(isSmall)));
+  }
+
+  ngAfterViewInit() {
+    this.reinitializeNumberOfPagesAtInvalidValue();
+    if (this.viewSelect) {
+      this.pages = this.initializePages(this.numberOfPages);
+    }
+    this.reinitializeCurrentPageAtOverflow();
+    this.cd.detectChanges();
+  }
+
+  ngOnChanges({ numberOfPages, pageTitleMask }: SimpleChanges) {
+    if (
+      this.needRenderPages(
+        this.viewSelect,
+        numberOfPages?.currentValue,
+        numberOfPages?.previousValue,
+        pageTitleMask?.currentValue,
+        pageTitleMask?.previousValue
+      )
+    ) {
+      this.reinitializeNumberOfPagesAtInvalidValue();
+      this.pages = this.initializePages(this.numberOfPages);
+    }
+    this.reinitializeCurrentPageAtOverflow();
+  }
+
+  public get viewSelect() {
+    return !this.light;
+  }
+
+  public get isFirstPage(): boolean {
+    return this.currentPage <= PAGINATION_FIRST_PAGE;
+  }
+
+  public get isLastPage(): boolean {
+    return this.currentPage >= this.numberOfPages;
+  }
+
+  public get disabledSelect() {
+    return this.numberOfPages <= PAGINATION_MIN_NUMBER_OF_PAGES;
+  }
+
+  public writeValue(value: any) {
+    if (!value || value === this.currentPage || value > this.numberOfPages) return;
+    this.currentPage = value;
+    this.cd.markForCheck();
+    this.onChange(value);
+  }
+
+  public registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any) {
+    this.onTouch = fn;
+  }
+
+  public nextPage() {
+    this.writeValue(this.currentPage + PAGINATION_PAGE_STEP);
+  }
+
+  public previousPage() {
+    this.writeValue(this.currentPage - PAGINATION_PAGE_STEP);
+  }
+
+  public compareWithPages(page: number, currentPage?: number): boolean {
+    return page === currentPage;
+  }
+
+  private initializePages(numberOfPages: number): Page[] {
+    return new Array(numberOfPages).fill(null).map((_, index) => ({
+      title: this.pageTitleMask(index + 1, numberOfPages),
+      value: index + 1,
+    }));
+  }
+
+  private initializeIcons(isSmall: Observable<boolean>) {
+    const iconSize = isSmall.pipe(
+      map((isSmall) => this.chooseIconSize(isSmall)),
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
+
+    this.leftIconName = iconSize.pipe(
+      map((iconSize) => `Navigation_Arrow_Arrow--Left_${iconSize}`)
+    );
+
+    this.rightIconName = iconSize.pipe(
+      map((iconSize) => `Navigation_Arrow_Arrow--Right_${iconSize}`)
+    );
+  }
+
+  private displayIsSmall(): Observable<boolean> {
+    const resizeEvent = this.globalEventService.getWindowEvent('resize').pipe(debounceTime(100));
+    const displayWidth = resizeEvent.pipe(
+      map((event) => (event?.target as Window)?.innerWidth),
+      startWith(this.globalEventService.window.innerWidth)
+    );
+    return displayWidth.pipe(map((width) => width < this.smallResolution));
+  }
+
+  private reinitializeCurrentPageAtOverflow() {
+    if (this.numberOfPages < this.currentPage) {
+      this.writeValue(PAGINATION_FIRST_PAGE);
+    }
+  }
+
+  private reinitializeNumberOfPagesAtInvalidValue() {
+    if (!this.numberOfPages || this.numberOfPages < PAGINATION_MIN_NUMBER_OF_PAGES) {
+      this.numberOfPages = PAGINATION_MIN_NUMBER_OF_PAGES;
+    }
+  }
+
+  private chooseIconSize(isSmall: boolean): IconSize {
+    return isSmall ? IconSize.L : IconSize.M;
+  }
+
+  private chooseSelectSize(isSmall: boolean): SelectSize {
+    return isSmall ? SELECT_SIZE.M : SELECT_SIZE.S;
+  }
+
+  private needRenderPages(
+    viewSelect: boolean,
+    numberOfPagesPrevious?: number,
+    numberOfPagesCurrent?: number,
+    pageTitleMaskPrevious?: unknown,
+    pageTitleMaskCurrent?: unknown
+  ): boolean {
+    const numberOfPageHasChanges = numberOfPagesPrevious !== numberOfPagesCurrent;
+    const maskHasChanges = pageTitleMaskPrevious !== pageTitleMaskCurrent;
+    return viewSelect && (numberOfPageHasChanges || maskHasChanges);
+  }
+}

package/projects/kit/components/pagination/pagination.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { GlobalEventsModule } from '../../common';
+import { ButtonModule } from '../button';
+import { IconModule } from '../icon/public-api';
+import { SelectModule } from '../select/public-api';
+import { PaginationComponent } from './pagination.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, ButtonModule, SelectModule, IconModule, GlobalEventsModule],
+  declarations: [PaginationComponent],
+  exports: [PaginationComponent],
+})
+export class PaginationModule {}

package/projects/kit/components/pagination/pagination.stories.ts

@@ -0,0 +1,28 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { PaginationComponent } from './pagination.component';
+import { PaginationModule } from './pagination.module';
+
+export default {
+  component: PaginationComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [PaginationModule, FormsModule],
+    }),
+  ],
+  argTypes: {
+    light: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    numberOfPages: { type: 'number', defaultValue: 10, control: { type: 'number' } },
+    value: { type: 'number', defaultValue: 2, control: { type: 'number' } },
+  },
+  title: 'Navigation/Pagination',
+} as Meta;
+
+const Template: Story = ({ light, value, numberOfPages }: any = {}) => ({
+  props: { light, value, numberOfPages },
+  template: `
+   <moz-pagination [light]="light" [(ngModel)]="value" [numberOfPages]="numberOfPages"></moz-pagination>
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/pagination/pagination.ts

@@ -0,0 +1,7 @@
+export type Page = { title: string; value: number };
+
+export const PAGINATION_FIRST_PAGE = 1;
+
+export const PAGINATION_MIN_NUMBER_OF_PAGES = 1;
+
+export const PAGINATION_PAGE_STEP = 1;

package/projects/kit/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,9 @@
+<div
+  class="mc-progressbar__indicator"
+  role="progressbar"
+  [attr.aria-valuenow]="percent"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  [ngStyle]="indicatorWidth"
+></div>
+<div *ngIf="text" class="mc-progressbar__percentage">{{ text }}</div>

package/projects/kit/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,2 @@
+@import 'settings-tools/all-settings';
+@import 'components/_c.progressbar';

package/projects/kit/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ProgressBarSize } from './progress-bar-size';
+import { ProgressBarTheme } from './progress-bar-theme';
+
+@Component({
+  selector: 'moz-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ProgressBarComponent {
+  @Input() public size: ProgressBarSize = 'm';
+
+  @Input() public theme: ProgressBarTheme = 'default';
+
+  @Input() public percent = 0;
+
+  @Input() public text = '';
+
+  public get indicatorWidth() {
+    return { width: `${this.percent}%` };
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const sizeClass = `mc-progressbar--${this.size}`;
+    const themeClass = `mc-progressbar--${this.theme}`;
+    const textClass = !!this.text ? `mc-progressbar--percent` : '';
+    return `mc-progressbar ${sizeClass} ${themeClass} ${textClass}`;
+  }
+}

package/projects/kit/components/progress-bar/progress-bar.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ProgressBarComponent],
+  exports: [ProgressBarComponent],
+})
+export class ProgressBarModule {}

package/projects/kit/components/progress-bar/progress-bar.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarModule } from './progress-bar.module';
+
+export default {
+  component: ProgressBarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ProgressBarModule],
+    }),
+  ],
+  argTypes: {
+    size: {
+      defaultValue: 'm',
+      control: { type: 'select', options: ['xs', 's', 'm'] },
+    },
+    percent: { type: 'number', defaultValue: 10, control: { type: 'number' } },
+    text: { type: 'string', defaultValue: '', control: { type: 'text' } },
+    theme: {
+      defaultValue: 'default',
+      control: { type: 'select', options: ['default', 'branded'] },
+    },
+  },
+  title: 'Indicator/Progress bar',
+} as Meta;
+
+const Template: Story = ({ size, percent, text, theme }: any = {}) => ({
+  props: {
+    size,
+    percent,
+    text,
+    theme,
+  },
+  template: `
+    <moz-progress-bar [size]="size" [percent]="percent" [text]="text" [theme]="theme"></moz-progress-bar>
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/public-api.ts

@@ -0,0 +1,25 @@
+export * from './badge';
+export * from './button/index';
+export * from './checkbox/public-api';
+export * from './dialog/public-api';
+export * from './field/public-api';
+export * from './icon/public-api';
+export * from './layer/public-api';
+export * from './loader/public-api';
+export * from './notification/public-api';
+export * from './pagination/public-api';
+export * from './progress-bar/public-api';
+export * from './select/public-api';
+export * from './stepper/public-api';
+export * from './tabs/public-api';
+export * from './tag/public-api';
+export * from './text-area/public-api';
+export * from './text-input/public-api';
+export * from './toggle/public-api';
+export * from './tooltip/public-api';
+export * from './datatable/public-api';
+export * from './taglist/public-api';
+export * from './listbox/public-api';
+export * from './dropdown/public-api';
+export * from './datatable-management/public-api';
+export * from './autocomplete/public-api';

package/projects/kit/components/segmented-control/public-api.ts

@@ -0,0 +1,3 @@
+export * from './segmented-control.component';
+export * from './segmented-control-button/segmented-control-button.component';
+export * from './segmented-control.module';

package/projects/kit/components/segmented-control/segmented-control-button/segmented-control-button.component.html

@@ -0,0 +1,4 @@
+<span class="mc-segmented-control__content">
+    <span class="mc-segmented-control__icon"></span>
+    <span class="mc-segmented-control__label"><ng-content></ng-content></span>
+</span>

package/projects/kit/components/segmented-control/segmented-control-button/segmented-control-button.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}

package/projects/kit/components/segmented-control/segmented-control-button/segmented-control-button.component.spec.ts

@@ -0,0 +1,89 @@
+import { DummyComponent } from '../../../common/mocks/dummy.component.mock';
+import { SegmentedControlComponent } from '../segmented-control.component';
+
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { SegmentedControlButtonComponent } from './segmented-control-button.component';
+
+@Component({
+  selector: 'app-wrapper',
+  template: `
+    <moz-segmented-control>
+      <moz-segmented-control-button
+        *ngFor="let item of items"
+        [routerLink]="item.uri"
+        [queryParams]="{ bu: 3569 }"
+        routerLinkActive="is-active"
+      >
+        item.label
+      </moz-segmented-control-button>
+    </moz-segmented-control>
+  `,
+})
+export class WrapperComponent {
+  items = [
+    {
+      uri: '/dashboard',
+      label: 'dashboard',
+    },
+    {
+      uri: '/management',
+      label: 'management',
+    },
+    {
+      uri: '/upload-file',
+      label: 'upload file',
+    },
+  ];
+}
+
+describe('SegmentedControlButtonComponent', () => {
+  let component: WrapperComponent;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let router: Router;
+  let segments: DebugElement[];
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [WrapperComponent, SegmentedControlComponent, SegmentedControlButtonComponent],
+      imports: [
+        RouterTestingModule.withRoutes([
+          { path: 'dashboard', component: DummyComponent },
+          { path: 'management', component: DummyComponent },
+        ]),
+      ],
+    });
+    fixture = TestBed.createComponent(WrapperComponent);
+    component = fixture.componentInstance;
+    router = TestBed.inject(Router);
+    await router.navigate(['/dashboard']);
+    fixture.detectChanges();
+    segments = fixture.debugElement.queryAll(By.css('moz-segmented-control-button'));
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('before initialisation', () => {
+    it('current route is dashboard', () => {
+      expect(router.url).toEqual('/dashboard');
+    });
+    it('segmented control button must have mc-segmented-control__segment class', () => {
+      expect(segments[0].classes['mc-segmented-control__segment']).toBeTruthy();
+    });
+  });
+
+  describe('change route for [management] with query params', () => {
+    beforeEach(async () => {
+      segments[1].nativeElement.click();
+    });
+    it('current route is [management?bu=3569]', () => {
+      expect(router.url).toEqual('/management?bu=3569');
+    });
+  });
+});

package/projects/kit/components/segmented-control/segmented-control-button/segmented-control-button.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'moz-segmented-control-button',
+  templateUrl: './segmented-control-button.component.html',
+  styleUrls: ['./segmented-control-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SegmentedControlButtonComponent {
+  @HostBinding('class') segment = 'mc-segmented-control__segment';
+  @HostBinding('attr.tabindex') tabIndex = 0;
+}