@mozaic-ds/angular 0.22.0 → 0.23.0-beta

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

@@ -1,59 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core';
-import { first } from 'rxjs';
-import { IconSize } from './icon-size';
-import { IconService } from './icon.service';
-
-@Component({
-  selector: 'moz-icon',
-  templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.icon]': 'true' },
-})
-export class IconComponent implements OnChanges {
-  @Input() public iconName: string = '';
-
-  constructor(private readonly iconService: IconService, private readonly elementRef: ElementRef) {}
-
-  ngOnChanges({ iconName }: SimpleChanges) {
-    this.needRenderIcon(iconName?.currentValue, iconName?.previousValue) &&
-      this.drawIcon(iconName?.currentValue, iconName?.previousValue);
-  }
-
-  private needRenderIcon(currentIconName?: string, previousIconName?: string): boolean {
-    return !!currentIconName && currentIconName !== previousIconName;
-  }
-
-  private getSizeClass(name: string) {
-    const [size] = name.match(/\d\dpx/) || [];
-    const strategy = {
-      [IconSize.S]: 'icons-size-s',
-      [IconSize.M]: 'icons-size-m',
-      [IconSize.L]: 'icons-size-l',
-      [IconSize.XL]: 'icons-size-xl',
-    };
-
-    return strategy[(size as IconSize) || null] || strategy[IconSize.S];
-  }
-
-  private drawIcon(iconName: string, previousIconName?: string) {
-    this.iconService
-      .getIcon(iconName)
-      .pipe(first())
-      .subscribe((svg) => {
-        this.elementRef.nativeElement.innerHTML = svg;
-        previousIconName &&
-          this.elementRef.nativeElement.classList.remove(this.getSizeClass(previousIconName));
-        this.elementRef.nativeElement.classList.add(this.getSizeClass(iconName));
-      });
-  }
-}

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

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

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

@@ -1,42 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Host, Injectable } from '@angular/core';
-import { catchError, finalize, Observable, of, shareReplay, tap, throwError } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class IconService {
-  private cachedIcons = new Map<string, string>();
-  private cachedRequests = new Map<string, Observable<string>>();
-
-  constructor(@Host() private http: HttpClient) {}
-
-  public getIcon(name: string): Observable<string> {
-    const cacheIcon = this.cachedIcons.get(name);
-    const cachedRequest = this.cachedRequests.get(name);
-    if (cacheIcon) {
-      return of(cacheIcon);
-    }
-    if (cachedRequest) {
-      return cachedRequest;
-    }
-    const url = `/assets/moz-icons/${name}.svg`;
-    const request = this.http.get(url, { responseType: 'text' }).pipe(
-      tap((svg) => this.cachedIcons.set(name, svg)),
-      catchError(() => throwError(() => this.getNotFoundError(name))),
-      finalize(() => this.cachedRequests.delete(name)),
-      shareReplay({ refCount: true, bufferSize: 1 })
-    );
-    this.cachedRequests.set(name, request);
-    return request;
-  }
-
-  private getNotFoundError(name: string): Error {
-    return Error(
-      `
-       The icon (${name}) you are trying to display does not exist.
-       Maybe the name is incorrect.
-       => (See all available icons: http://mozaic.adeo.cloud/Foundations/Icons/catalog/)`
-    );
-  }
-}

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

@@ -1,24 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { IconComponent } from './icon.component';
-import { IconModule } from './icon.module';
-
-export default {
-  component: IconComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [IconModule],
-    }),
-  ],
-  title: 'Icon',
-} as Meta;
-
-const Template: Story = (args) => ({
-  props: {
-    ...args,
-  },
-  template: `
-  <moz-icon [iconName]="'Media_View360_48px'"></moz-icon>
-  `,
-});
-
-export const Default = Template.bind({});

package/projects/kit/components/layer/classes/layer-injector.ts

@@ -1,35 +0,0 @@
-import { Injector } from '@angular/core';
-import { LayerDIParams } from '../interfaces/layer-di-params';
-import { LayerRef } from '../interfaces/layer-ref';
-import { LAYER_CONFIG, LAYER_DATA, LAYER_REF } from '../tokens';
-
-export class LayerInjector implements Injector {
-  private readonly parentInjector: Injector;
-  private readonly layerRef: LayerRef;
-  private additionalTokens!: WeakMap<object, unknown>;
-
-  constructor({ injector, layerRef }: LayerDIParams) {
-    this.parentInjector = injector;
-    this.layerRef = layerRef;
-
-    this.initAdditionalTokens();
-  }
-
-  public get(token: unknown, notFoundValue?: unknown, flags?: unknown): any;
-  public get(token: any, notFoundValue?: any): any {
-    const value = this.additionalTokens.get(token);
-
-    if (value) {
-      return value;
-    }
-
-    return this.parentInjector.get<any>(token, notFoundValue);
-  }
-
-  private initAdditionalTokens(): void {
-    this.additionalTokens = new WeakMap();
-    this.additionalTokens.set(LAYER_REF, this.layerRef);
-    this.additionalTokens.set(LAYER_CONFIG, this.layerRef.config);
-    this.additionalTokens.set(LAYER_DATA, this.layerRef.config.data);
-  }
-}

package/projects/kit/components/layer/classes/layer-ref.ts

@@ -1,54 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { BehaviorSubject, first, Observable, Subject } from 'rxjs';
-import { LayerConfig } from '../interfaces';
-import { LayerRef } from '../interfaces/layer-ref';
-import { LayerComponent } from '../layer.component';
-
-export class LayerRefModel<R = unknown> implements LayerRef<R> {
-  private readonly _config$ = new BehaviorSubject<LayerConfig>({});
-
-  private _componentRef!: ComponentRef<LayerComponent>;
-
-  private _afterClosed$ = new Subject<R | undefined>();
-
-  public get afterClosed$(): Observable<R | undefined> {
-    return this._afterClosed$.pipe(first());
-  }
-
-  public get config$() {
-    return this._config$.asObservable();
-  }
-
-  public get config() {
-    return this._config$.getValue();
-  }
-
-  public get componentRef(): ComponentRef<LayerComponent> {
-    return this._componentRef;
-  }
-
-  constructor(public layerConfig: LayerConfig) {
-    this.init(layerConfig);
-  }
-
-  public init(config: LayerConfig): void {
-    this.updateConfig(config);
-  }
-
-  public updateConfig(config: LayerConfig): void {
-    this._config$.next({ ...this.config, ...config });
-  }
-
-  close(result?: R): void {
-    this._afterClosed$.next(result);
-  }
-
-  setComponentRef(componentRef: ComponentRef<LayerComponent>): void {
-    this._componentRef = componentRef;
-  }
-
-  destroy(): void {
-    this._config$.complete();
-    this._afterClosed$.complete();
-  }
-}

package/projects/kit/components/layer/interfaces/layer-config.ts

@@ -1,4 +0,0 @@
-export type LayerConfig<T = any> = {
-  title?: string;
-  data?: T;
-};

package/projects/kit/components/layer/interfaces/layer-di-params.ts

@@ -1,7 +0,0 @@
-import { Injector } from '@angular/core';
-import { LayerRef } from './layer-ref';
-
-export interface LayerDIParams {
-  injector: Injector;
-  layerRef: LayerRef;
-}

package/projects/kit/components/layer/interfaces/layer-ref.ts

@@ -1,17 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { Observable } from 'rxjs';
-import { LayerComponent } from '../layer.component';
-import { LayerConfig } from './layer-config';
-
-export interface LayerRef<R = unknown> {
-  afterClosed$: Observable<unknown>;
-  config$: Observable<LayerConfig>;
-  config: LayerConfig;
-  componentRef: ComponentRef<LayerComponent>;
-
-  init(config: LayerConfig): void;
-  updateConfig(config: LayerConfig): void;
-  close(result?: R): void;
-  setComponentRef(componentRef: ComponentRef<LayerComponent>): void;
-  destroy(): void;
-}

package/projects/kit/components/layer/layer-animation.ts

@@ -1,24 +0,0 @@
-import { animate, group, query, style, transition, trigger } from '@angular/animations';
-
-export const layerAnimation = trigger('layerAnimation', [
-  transition(
-    ':enter',
-    group([
-      query(':self', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
-      query('.mc-layer', [
-        style({ transform: 'translateX(250px)' }),
-        animate(200, style({ transform: 'translateX(0)' })),
-      ]),
-    ])
-  ),
-  transition(
-    ':leave',
-    group([
-      query(':self', [animate(200, style({ opacity: 0 }))]),
-      query('.mc-layer', [
-        style({ transform: 'translateX(0)' }),
-        animate(200, style({ transform: 'translateX(250px)' })),
-      ]),
-    ])
-  ),
-]);

package/projects/kit/components/layer/layer-example.component.ts

@@ -1,43 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
-import { LayerRef } from './interfaces/layer-ref';
-import { LayerService } from './layer.service';
-import { LAYER_DATA, LAYER_REF } from './tokens';
-
-@Component({
-  selector: 'moz-layer-content-example',
-  template: `
-    <span>Content another component data:{{ data }}</span>
-    <br />
-    <button moz-button (click)="close()">close</button>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class LayerContentExampleComponent {
-  constructor(
-    @Inject(LAYER_DATA) public readonly data: string,
-    @Inject(LAYER_REF) public readonly layerRef: LayerRef
-  ) {}
-
-  close() {
-    this.layerRef.close('CLOSE DATA FROM LAYER');
-  }
-}
-
-@Component({
-  selector: 'moz-layer-example',
-  template: '<button moz-button (click)="open()">Open layer</button>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class LayerExampleComponent {
-  constructor(private readonly layerService: LayerService) {}
-
-  open() {
-    const layerRef = this.layerService.open(LayerContentExampleComponent, {
-      title: 'My custom title',
-      data: 'Your data',
-    });
-    layerRef.afterClosed$.subscribe((result) => console.log(result));
-  }
-}

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

@@ -1,21 +0,0 @@
-<div
-  class="mc-layer"
-  role="dialog"
-  aria-labelledby="layerTitle"
-  aria-modal="true"
-  aria-hidden="true"
-  tabindex="-1"
->
-  <div class="mc-layer__dialog is-open" role="document">
-    <div class="mc-layer__header">
-      <h2 class="mc-layer__title" id="layerTitle">{{ title }}</h2>
-      <button class="mc-layer__close" type="button" (click)="close()">
-        <span class="mc-layer__close-text">Close</span>
-      </button>
-    </div>
-    <div class="mc-layer__body">
-      <ng-template #content></ng-template>
-    </div>
-  </div>
-</div>
-<div class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></div>

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

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

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

@@ -1,55 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ComponentRef,
-  Inject,
-  Type,
-  ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { LayerConfig } from './interfaces';
-import { LayerRef } from './interfaces/layer-ref';
-import { layerAnimation } from './layer-animation';
-import { LAYER_CONFIG, LAYER_REF } from './tokens';
-
-@Component({
-  selector: 'moz-layer',
-  templateUrl: './layer.component.html',
-  styleUrls: ['./layer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  animations: [layerAnimation],
-  host: { '[@layerAnimation]': 'true' },
-})
-export class LayerComponent implements AfterViewInit {
-  @ViewChild('content', { read: ViewContainerRef, static: true })
-  private readonly contentViewRef!: ViewContainerRef;
-  public childComponentRef?: ComponentRef<any>;
-  public childComponentType!: Type<any>;
-
-  public get title(): string {
-    return this.config.title || 'Layer title';
-  }
-
-  constructor(
-    @Inject(LAYER_REF) private readonly layerRef: LayerRef,
-    @Inject(LAYER_CONFIG) private readonly config: LayerConfig,
-    private readonly cd: ChangeDetectorRef
-  ) {}
-
-  ngAfterViewInit(): void {
-    this.initChildComponent(this.childComponentType);
-  }
-
-  private initChildComponent(componentType: Type<any>): void {
-    this.childComponentRef = this.contentViewRef.createComponent(componentType);
-    this.cd.detectChanges();
-  }
-
-  public close() {
-    this.layerRef.close();
-  }
-}

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

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { IconModule } from '../public-api';
-import { LayerComponent } from './layer.component';
-import { LayerService } from './layer.service';
-
-@NgModule({
-  imports: [CommonModule, IconModule],
-  providers: [LayerService],
-  declarations: [LayerComponent],
-  exports: [LayerComponent],
-})
-export class LayerModule {}

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

@@ -1,73 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import {
-  ApplicationRef,
-  ComponentFactoryResolver,
-  ComponentRef,
-  EmbeddedViewRef,
-  Inject,
-  Injectable,
-  Injector,
-  Type,
-} from '@angular/core';
-import { LayerInjector } from './classes/layer-injector';
-import { LayerRefModel } from './classes/layer-ref';
-import { LayerConfig } from './interfaces';
-import { LayerRef } from './interfaces/layer-ref';
-import { LayerComponent } from './layer.component';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class LayerService {
-  constructor(
-    private readonly componentFactoryResolver: ComponentFactoryResolver,
-    private readonly injector: Injector,
-    private readonly applicationRef: ApplicationRef,
-    @Inject(DOCUMENT) private readonly document: Document
-  ) {}
-
-  public open<T, K>(component: Type<T>, config: LayerConfig<K> = {}) {
-    const layerRef = this.createLayer(config);
-    this.applyChildComponent({ component, layerRef });
-    return layerRef;
-  }
-
-  private createLayer<T>(config: LayerConfig<T>) {
-    const layerRef = new LayerRefModel(config);
-    const layerInjector = new LayerInjector({ injector: this.injector, layerRef });
-    const componentRef = this.createComponentRef(layerInjector);
-    layerRef.setComponentRef(componentRef);
-    this.appendLayerComponentToBody(componentRef);
-    this.initDialogRefAfterClosedObserver(layerRef, componentRef);
-    return layerRef;
-  }
-
-  private initDialogRefAfterClosedObserver(
-    layerRef: LayerRef,
-    componentRef: ComponentRef<LayerComponent>
-  ): void {
-    layerRef.afterClosed$.subscribe(() => componentRef.destroy());
-  }
-
-  private createComponentRef(injector: LayerInjector): ComponentRef<LayerComponent> {
-    return this.componentFactoryResolver.resolveComponentFactory(LayerComponent).create(injector);
-  }
-
-  private appendLayerComponentToBody(componentRef: ComponentRef<LayerComponent>): void {
-    const componentHostView = componentRef.hostView as EmbeddedViewRef<unknown>;
-    const componentHtmlElement = componentHostView.rootNodes[0] as HTMLElement;
-    this.applicationRef.attachView(componentHostView);
-    this.document.body.appendChild(componentHtmlElement);
-  }
-
-  private applyChildComponent<T>({
-    layerRef,
-    component,
-  }: {
-    layerRef: LayerRefModel;
-    component: Type<T>;
-  }): void {
-    const { instance } = layerRef.componentRef;
-    instance.childComponentType = component;
-  }
-}

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

@@ -1,29 +0,0 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { ButtonModule } from '../button';
-import { LayerContentExampleComponent, LayerExampleComponent } from './layer-example.component';
-import { LayerComponent } from './layer.component';
-import { LayerModule } from './layer.module';
-
-export default {
-  component: LayerComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [LayerModule, ButtonModule, BrowserAnimationsModule],
-      declarations: [LayerExampleComponent, LayerContentExampleComponent],
-      entryComponents: [LayerContentExampleComponent],
-    }),
-  ],
-  title: 'Layer',
-} as Meta;
-
-const Template: Story = ({}: any = {}) => {
-  return {
-    template: `
-    <moz-layer-example></moz-layer-example>
-
-    `,
-  };
-};
-
-export const Default = Template.bind({});

package/projects/kit/components/layer/tokens/layer-config.token.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const LAYER_CONFIG = new InjectionToken('LAYER_CONFIG_TOKEN');

package/projects/kit/components/layer/tokens/layer-data.token.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const LAYER_DATA = new InjectionToken('LAYER_DATA_TOKEN');

package/projects/kit/components/layer/tokens/layer-ref.token.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const LAYER_REF = new InjectionToken('LAYER_DATA_TOKEN');

package/projects/kit/components/loader/loader-run-example.component.ts

@@ -1,20 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { LoaderService } from './loader.service';
-
-@Component({
-  selector: 'moz-loader-run-example',
-  template: '<button moz-button (click)="openOverlayLoader()">Open overlay loader</button>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LoaderRunExampleComponent {
-  @Input() text = '';
-
-  constructor(private readonly loaderService: LoaderService) {}
-
-  public openOverlayLoader() {
-    this.loaderService.startLoad({ text: this.text });
-    setTimeout(() => {
-      this.loaderService.stopLoad();
-    }, 2000);
-  }
-}

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

@@ -1,15 +0,0 @@
-<ng-template #loader>
-  <div [ngClass]="loaderCssClasses">
-    <span class="mc-loader__spinner">
-      <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBoxSize">
-        <circle class="mc-loader__path" cx="50%" cy="50%" [attr.r]="radius" />
-      </svg>
-    </span>
-
-    <span class="mc-loader__text" *ngIf="viewText">{{ text }}</span>
-  </div>
-</ng-template>
-
-<div [ngClass]="overlayCssClasses" tabindex="-1" role="dialog" *ngIf="isOverlay; else loader">
-  <ng-container [ngTemplateOutlet]="loader"></ng-container>
-</div>

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

@@ -1,7 +0,0 @@
-@import 'settings-tools/all-settings';
-@import 'components/c.overlay';
-@import 'components/c.loader';
-
-.loader {
-  display: inline-flex;
-}

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

@@ -1,57 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { CIRCLE_RADIUSES, CIRCLE_VIEW_BOX_SIZES, LoaderSize, LoaderTheme } from './loader';
-
-@Component({
-  selector: 'moz-loader',
-  templateUrl: './loader.component.html',
-  styleUrls: ['./loader.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.loader]': '!isOverlay' },
-})
-export class LoaderComponent {
-  @Input() size: LoaderSize = 'm';
-
-  @Input() theme: LoaderTheme = 'primary';
-
-  public isOverlay = false;
-
-  public hideOverlay = true;
-
-  public text = '';
-
-  public get viewText(): boolean {
-    return this.isOverlay && !!this.text;
-  }
-
-  public get overlayCssClasses() {
-    return {
-      'mc-overlay-loader': true,
-      'is-visible': !this.hideOverlay,
-    };
-  }
-
-  public get loaderCssClasses() {
-    return {
-      'mc-loader': true,
-      [`mc-loader--${this.size}`]: true,
-      [`mc-loader--${this.theme}`]: this.theme !== 'primary',
-    };
-  }
-
-  public get viewBoxSize(): string {
-    return CIRCLE_VIEW_BOX_SIZES[this.size];
-  }
-
-  public get radius(): number {
-    return CIRCLE_RADIUSES[this.size];
-  }
-
-  constructor(public readonly cd: ChangeDetectorRef) {}
-}

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

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { LoaderComponent } from './loader.component';
-import { LoaderService } from './loader.service';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [LoaderComponent],
-  providers: [LoaderService],
-  exports: [LoaderComponent],
-})
-export class LoaderModule {}