@mozaic-ds/angular 0.21.0 → 0.22.0

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

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  template: '<ng-content></ng-content>',
+  selector: '[mozNotificationMessage]',
+  styleUrls: ['./notification.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { '[class.mc-notification__message]': 'true' },
+})
+export class NotificationMessageComponent {}

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

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  template: '<ng-content></ng-content>',
+  selector: '[mozNotificationTitle]',
+  styleUrls: ['./notification.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { '[class.mc-notification__title]': 'true' },
+})
+export class NotificationTitleComponent {}

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

@@ -0,0 +1,5 @@
+<div class="mc-notification__content">
+  <ng-content select="[mozNotificationTitle]"></ng-content>
+  <ng-content select="[mozNotificationMessage]"></ng-content>
+  <ng-content select="[mozNotificationFooter]"></ng-content>
+</div>

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

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

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

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NotificationSize, NotificationType } from './notification';
+
+@Component({
+  selector: 'moz-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { '[class.mc-notification]': 'true' },
+})
+export class NotificationComponent {
+  @Input() type?: NotificationType = 'information';
+  @Input() size: NotificationSize = 'm';
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const staticClasses = 'mc-notification';
+    const sizeCssClass = `mc-notification--${this.size}`;
+    const typeCssClass = `mc-notification--${this.type}`;
+    const dynamicClasses = `${sizeCssClass} ${typeCssClass}`;
+    return `${staticClasses} ${dynamicClasses}`;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NotificationConfig, NotificationConfigFactory, NOTIFICATION_CONFIG } from './notification';
+import { NotificationContainerComponent } from './notification-container.component';
+import { NotificationFooterComponent } from './notification-footer';
+import { NotificationMessageComponent } from './notification-message';
+import { NotificationTitleComponent } from './notification-title';
+import { NotificationComponent } from './notification.component';
+import { NotificationService } from './notification.service';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [
+    NotificationComponent,
+    NotificationTitleComponent,
+    NotificationMessageComponent,
+    NotificationFooterComponent,
+    NotificationContainerComponent,
+  ],
+  providers: [
+    NotificationService,
+    {
+      provide: NOTIFICATION_CONFIG,
+      useValue: NotificationConfigFactory.create(),
+    },
+  ],
+  exports: [
+    NotificationComponent,
+    NotificationTitleComponent,
+    NotificationMessageComponent,
+    NotificationFooterComponent,
+  ],
+})
+export class NotificationModule {
+  static forRoot(
+    config: Partial<NotificationConfig> = {}
+  ): ModuleWithProviders<NotificationModule> {
+    return {
+      ngModule: NotificationModule,
+      providers: [
+        {
+          provide: NOTIFICATION_CONFIG,
+          useValue: NotificationConfigFactory.create(config),
+        },
+      ],
+    };
+  }
+}

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: '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,37 @@
+<nav class="mc-pagination" role="navigation" aria-label="pagination">
+  <button
+    moz-button
+    theme="neutral"
+    class="mc-pagination__button"
+    [disabled]="isFirstPage"
+    [onlyIcon]="true"
+    (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()"
+    [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,196 @@
+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 { SelectSize, SELECT_SIZE } 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() pageTitleMask = (page: number, numberOfPages: number) =>
+    `Page ${page} of ${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.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: '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: '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/select/select-size.ts

@@ -0,0 +1,6 @@
+export enum SELECT_SIZE {
+  S = 's',
+  M = 'm',
+}
+
+export type SelectSize = 's' | 'm';

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

@@ -0,0 +1 @@
+<ng-content select="option"></ng-content>

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

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