@mozaic-ds/angular 0.23.1 → 0.23.2-beta.0

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

@@ -1,50 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

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

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

@@ -1,199 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

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

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

@@ -1,38 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/segmented-control/public-api.ts

@@ -1,3 +0,0 @@
-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

@@ -1,4 +0,0 @@
-<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

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

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

@@ -1,89 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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;
-}

package/projects/kit/components/segmented-control/segmented-control-size.ts

@@ -1,2 +0,0 @@
-export type SegmentedControlSize = 's' | 'm';
-export const segmentedControlSizeDefault: SegmentedControlSize = 's';

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

@@ -1,6 +0,0 @@
-<div class="mc-segmented-control"
-     [class.mc-segmented-control--m]="size ==='m'"
-     [class.mc-segmented-control--full]="full"
-     [class.mc-segmented-control--nowrap]="nowrap">
-    <ng-content></ng-content>
-</div>