@mozaic-ds/angular 0.22.0 → 0.23.0

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

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { CheckboxComponent } from './checkbox.component';
-
-@NgModule({
-  declarations: [CheckboxComponent],
-  imports: [CommonModule],
-  exports: [CheckboxComponent],
-})
-/**
- * @deprecated remove in 0.21 version
- */
-export class CheckboxModule {}

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

@@ -1,47 +0,0 @@
-import { FormsModule } from '@angular/forms';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { CheckboxComponent } from './checkbox.component';
-import { CheckboxModule } from './checkbox.module';
-
-export default {
-  component: CheckboxComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CheckboxModule, FormsModule],
-    }),
-  ],
-  argTypes: {
-    title: {
-      defaultValue: 'label',
-      control: { type: 'text' },
-    },
-    checked: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    indeterminate: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-  },
-  title: 'Checkbox',
-} as Meta;
-
-const Template: Story = ({ disabled, indeterminate, invalid, title, checked }: any = {}) => ({
-  props: {
-    disabled,
-    indeterminate,
-    invalid,
-    checked,
-  },
-  template: `
-  <moz-checkbox 
-    [disabled]="disabled"
-    [indeterminate]="indeterminate"
-    [invalid]="invalid"
-    [(ngModel)]="checked"
-   >
-    ${title}
-   </moz-checkbox>
-   
-   {{checked}}
-    `,
-});
-
-export const Default = Template.bind({});

package/projects/kit/components/dialog/classes/dialog-config.ts

@@ -1,13 +0,0 @@
-import { DialogConfig } from '../interfaces';
-
-export class DialogConfigModel implements DialogConfig {
-  title: string = '';
-  hasCross: boolean = true;
-  data?: unknown;
-  layerIndex?: number;
-  minHeight: number = 65;
-
-  constructor(config: DialogConfig) {
-    Object.assign(this, config);
-  }
-}

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

@@ -1,34 +0,0 @@
-import { Injector } from '@angular/core';
-import { DialogDIParams, DialogRef } from '../interfaces';
-import { DIALOG_CONFIG, DIALOG_DATA, DIALOG_REF } from '../tokens';
-
-export class DialogInjector implements Injector {
-  private readonly parentInjector: Injector;
-  private readonly dialogRef: DialogRef;
-  private additionalTokens!: WeakMap<object, unknown>;
-
-  constructor({ injector, dialogRef }: DialogDIParams) {
-    this.parentInjector = injector;
-    this.dialogRef = dialogRef;
-
-    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(DIALOG_REF, this.dialogRef);
-    this.additionalTokens.set(DIALOG_CONFIG, this.dialogRef.config);
-    this.additionalTokens.set(DIALOG_DATA, this.dialogRef.config.data);
-  }
-}

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

@@ -1,66 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { getRandomNumber } from '../../../common';
-import { DialogComponent } from '../dialog.component';
-import { DialogConfig, DialogRef } from '../interfaces';
-
-export class DialogRefModel implements DialogRef {
-  private readonly _config$ = new BehaviorSubject<DialogConfig>({});
-  private readonly _afterClosed$ = new Subject<unknown>();
-
-  private readonly _id = String(getRandomNumber(1, 100000));
-  private _dialogElement!: HTMLElement;
-  private _componentRef!: ComponentRef<DialogComponent>;
-
-  constructor(public dialogConfig: DialogConfig) {
-    this.init(dialogConfig);
-  }
-  public get afterClosed$(): Observable<unknown> {
-    return this._afterClosed$.asObservable();
-  }
-
-  public get config$(): Observable<DialogConfig> {
-    return this._config$.asObservable();
-  }
-
-  public get config(): DialogConfig {
-    return this._config$.getValue();
-  }
-
-  public get id(): string {
-    return this._id;
-  }
-
-  public get dialogElement(): HTMLElement {
-    return this._dialogElement;
-  }
-
-  public get componentRef(): ComponentRef<DialogComponent> {
-    return this._componentRef;
-  }
-
-  public init(config: DialogConfig): void {
-    this.updateConfig(config);
-  }
-
-  public updateConfig(config: DialogConfig): void {
-    this._config$.next({ ...this.config, ...config });
-  }
-
-  public close<T = unknown>(result?: T): void {
-    this._afterClosed$.next(result);
-  }
-
-  public setDialogElement(element: HTMLElement): void {
-    this._dialogElement = element;
-  }
-
-  public setComponentRef(componentRef: ComponentRef<DialogComponent>): void {
-    this._componentRef = componentRef;
-  }
-
-  public destroy(): void {
-    this._config$.complete();
-    this._afterClosed$.complete();
-  }
-}

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

@@ -1,24 +0,0 @@
-import { animate, group, query, style, transition, trigger } from '@angular/animations';
-
-export const dialogAnimation = trigger('dialogAnimation', [
-  transition(
-    ':enter',
-    group([
-      query(':self', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
-      query('.mc-modal', [
-        style({ opacity: 0, transform: 'scale(0.7)' }),
-        animate(200, style({ opacity: 1, transform: 'scale(1)' })),
-      ]),
-    ])
-  ),
-  transition(
-    ':leave',
-    group([
-      query(':self', [animate(200, style({ opacity: 0 }))]),
-      query('.mc-modal', [
-        style({ opacity: 1, transform: 'scale(1)' }),
-        animate(200, style({ opacity: 0, transform: 'scale(0.1)' })),
-      ]),
-    ])
-  ),
-]);

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

@@ -1,27 +0,0 @@
-<div
-  tabindex="-1"
-  role="dialog"
-  aria-labelledby="modal_title"
-  class="mc-modal"
-  [style.zIndex]="dialogContainerIndex"
->
-  <div role="document" class="mc-modal__dialog is-open" [style.minHeight]="minHeight">
-    <header class="mc-modal__header mc-divider-bottom mc-divider-bottom--light">
-      <h2 class="mc-modal__title" id="modalTitle">{{ title }}</h2>
-      <button class="mc-modal__close" type="button" (click)="close()" *ngIf="hasCross">
-        <span class="mc-modal__close-text">Close</span>
-      </button>
-    </header>
-    <main class="mc-modal__body">
-      <article class="mc-modal__content">
-        <ng-template #content></ng-template>
-      </article>
-    </main>
-  </div>
-</div>
-<div
-  tabindex="-1"
-  role="dialog"
-  class="mc-modal-overlay is-visible"
-  [style.zIndex]="layerIndex"
-></div>

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

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

package/projects/kit/components/dialog/dialog.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DialogComponent } from './dialog.component';
-
-describe('DialogComponent', () => {
-  let component: DialogComponent;
-  let fixture: ComponentFixture<DialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DialogComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,75 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ComponentRef,
-  Inject,
-  Input,
-  OnDestroy,
-  Type,
-  ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { dialogAnimation } from './dialog-animation';
-import { DialogConfig, DialogRef } from './interfaces';
-import { DIALOG_CONFIG } from './tokens';
-
-@Component({
-  selector: 'moz-dialog',
-  templateUrl: './dialog.component.html',
-  styleUrls: ['./dialog.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  animations: [dialogAnimation],
-  host: { '[@dialogAnimation]': 'true' },
-})
-export class DialogComponent implements AfterViewInit, OnDestroy {
-  @Input() public dialogRef!: DialogRef;
-  @Input() public childComponentType!: Type<any>;
-  @ViewChild('content', { read: ViewContainerRef, static: true })
-  private readonly contentViewRef!: ViewContainerRef;
-
-  public childComponentRef?: ComponentRef<any>;
-
-  constructor(@Inject(DIALOG_CONFIG) private config: DialogConfig, private cd: ChangeDetectorRef) {}
-
-  public get title(): string {
-    return this.config.title!;
-  }
-
-  public get hasCross(): boolean {
-    return this.config.hasCross!;
-  }
-
-  public get minHeight(): string {
-    return `${this.config.minHeight}px`;
-  }
-
-  public get layerIndex(): number {
-    return this.config.layerIndex!;
-  }
-
-  public get dialogContainerIndex(): number {
-    return this.layerIndex + 1;
-  }
-
-  public ngAfterViewInit() {
-    this.initChildComponent(this.childComponentType);
-  }
-
-  public ngOnDestroy(): void {
-    this.dialogRef.destroy();
-    // this.childComponentRef?.destroy();
-  }
-
-  public close() {
-    this.dialogRef.close();
-  }
-
-  private initChildComponent(componentType: Type<any>): void {
-    this.childComponentRef = this.contentViewRef.createComponent(componentType);
-    this.cd.detectChanges();
-  }
-}

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

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

package/projects/kit/components/dialog/dialog.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { DialogService } from './dialog.service';
-
-describe('DialogService', () => {
-  let service: DialogService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(DialogService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

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

@@ -1,88 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import {
-  ApplicationRef,
-  ComponentFactoryResolver,
-  ComponentRef,
-  EmbeddedViewRef,
-  Inject,
-  Injectable,
-  Injector,
-  Type,
-} from '@angular/core';
-import { delay } from 'rxjs/operators';
-import { DialogInjector } from './classes';
-import { DialogConfigModel } from './classes/dialog-config';
-import { DialogRefModel } from './classes/dialog-ref';
-import { DialogComponent } from './dialog.component';
-import { DialogConfig, DialogRef } from './interfaces';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class DialogService {
-  private _layer: number = 100;
-
-  constructor(
-    private readonly componentFactoryResolver: ComponentFactoryResolver,
-    private readonly injector: Injector,
-    private readonly applicationRef: ApplicationRef,
-    @Inject(DOCUMENT) private readonly document: Document
-  ) {}
-
-  public open(component: Type<any>, config: DialogConfig = {}): DialogRef {
-    this.addLayer();
-    const dialogRef = this.createDialog({ ...config, layerIndex: this._layer });
-    this.applyDataForCreatedDialogInstance({ component, dialogRef });
-
-    return dialogRef;
-  }
-
-  private createDialog(config: DialogConfig) {
-    const dialogRef: DialogRef = new DialogRefModel(new DialogConfigModel(config));
-    const dialogInjector = new DialogInjector({ injector: this.injector, dialogRef });
-    const componentRef = this.createComponentRef(dialogInjector);
-
-    dialogRef.setComponentRef(componentRef);
-    this.initDialogRefAfterClosedObserver(dialogRef, componentRef);
-    this.appendDialogComponentToBody(componentRef);
-
-    return dialogRef;
-  }
-
-  private createComponentRef(dialogInjector: DialogInjector): ComponentRef<DialogComponent> {
-    return this.componentFactoryResolver
-      .resolveComponentFactory(DialogComponent)
-      .create(dialogInjector);
-  }
-
-  private initDialogRefAfterClosedObserver(
-    dialogRef: DialogRef,
-    componentRef: ComponentRef<DialogComponent>
-  ): void {
-    const destroyDelayInMs = 50;
-    dialogRef.afterClosed$.pipe(delay(destroyDelayInMs)).subscribe(() => componentRef.destroy());
-  }
-
-  private appendDialogComponentToBody(componentRef: ComponentRef<DialogComponent>): 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 applyDataForCreatedDialogInstance({
-    dialogRef,
-    component,
-  }: {
-    dialogRef: DialogRef;
-    component: Type<any>;
-  }): void {
-    const { instance: dialogInstance } = dialogRef.componentRef;
-    dialogInstance.childComponentType = component;
-    dialogInstance.dialogRef = dialogRef;
-  }
-
-  private addLayer() {
-    this._layer += 1;
-  }
-}

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

@@ -1,23 +0,0 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { DialogExampleModule } from './examples/dialog-example/dialog-example.module';
-
-export default {
-  decorators: [
-    moduleMetadata({
-      imports: [DialogExampleModule, BrowserAnimationsModule],
-    }),
-  ],
-  title: 'Dialog',
-} as Meta;
-
-const Template: Story = (args) => ({
-  props: {
-    ...args,
-  },
-  template: `
-  <moz-dialog-container-example></moz-dialog-container-example>
-  `,
-});
-
-export const Default = Template.bind({});

package/projects/kit/components/dialog/examples/dialog-example/dialog-container-example.component.html

@@ -1,3 +0,0 @@
-<button moz-button (click)="openDialog()">
-  <span label>Open dialog</span>
-</button>

package/projects/kit/components/dialog/examples/dialog-example/dialog-container-example.component.ts

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DialogService } from '../../dialog.service';
-import { DialogExampleComponent } from './dialog-example.component';
-
-@Component({
-  selector: 'moz-dialog-container-example',
-  templateUrl: './dialog-container-example.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DialogContainerExampleComponent {
-  constructor(private dialogService: DialogService) {}
-
-  openDialog() {
-    this.dialogService
-      .open(DialogExampleComponent, { data: 'Input data', title: 'Custom title' })
-      .afterClosed$.subscribe(console.log);
-  }
-}

package/projects/kit/components/dialog/examples/dialog-example/dialog-example.component.html

@@ -1,10 +0,0 @@
-<p>{{ data }}</p>
-<div class="container-action-btn">
-  <button moz-button (click)="openNestedDialog()">
-    <span label>OPEN NESTED</span>
-  </button>
-
-  <button moz-button (click)="close()">
-    <span label>CLOSE</span>
-  </button>
-</div>

package/projects/kit/components/dialog/examples/dialog-example/dialog-example.component.scss

@@ -1,7 +0,0 @@
-.container-action-btn {
-  margin: 8px;
-  display: inline-flex;
-  justify-content: center;
-  width: 100%;
-  gap: 8px;
-}

package/projects/kit/components/dialog/examples/dialog-example/dialog-example.component.ts

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { DialogService } from '../../dialog.service';
-import { DialogRef } from '../../interfaces';
-import { DIALOG_DATA } from '../../tokens/dialog-data.token';
-import { DIALOG_REF } from '../../tokens/dialog-ref.token';
-import { DialogNestedExampleComponent } from './dialog-nested-example.component';
-
-@Component({
-  selector: 'moz-dialog-example',
-  templateUrl: './dialog-example.component.html',
-  styleUrls: ['./dialog-example.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DialogExampleComponent {
-  constructor(
-    @Inject(DIALOG_REF) private dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) public data: string,
-    private dialogService: DialogService
-  ) {}
-
-  openNestedDialog() {
-    this.dialogService.open(DialogNestedExampleComponent, { hasCross: false });
-  }
-
-  close() {
-    this.dialogRef.close('result text');
-  }
-}

package/projects/kit/components/dialog/examples/dialog-example/dialog-example.module.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ButtonModule } from 'projects/kit/components/button';
-import { DialogModule } from '../..';
-import { DialogContainerExampleComponent } from './dialog-container-example.component';
-import { DialogExampleComponent } from './dialog-example.component';
-import { DialogNestedExampleComponent } from './dialog-nested-example.component';
-
-@NgModule({
-  declarations: [
-    DialogExampleComponent,
-    DialogContainerExampleComponent,
-    DialogNestedExampleComponent,
-  ],
-  imports: [CommonModule, ButtonModule, DialogModule],
-  entryComponents: [DialogExampleComponent, DialogNestedExampleComponent],
-  exports: [DialogContainerExampleComponent],
-})
-export class DialogExampleModule {}

package/projects/kit/components/dialog/examples/dialog-example/dialog-nested-example.component.html

@@ -1,6 +0,0 @@
-<p class="text">This is nested dialog</p>
-<div class="container-action-btn">
-  <button moz-button (click)="close()">
-    <span label>CLOSE</span>
-  </button>
-</div>

package/projects/kit/components/dialog/examples/dialog-example/dialog-nested-example.component.scss

@@ -1,11 +0,0 @@
-.text {
-  display: flex;
-  justify-content: center;
-  margin: 8px;
-}
-
-.container-action-btn {
-  display: flex;
-  justify-content: center;
-  margin: 16px;
-}

package/projects/kit/components/dialog/examples/dialog-example/dialog-nested-example.component.ts

@@ -1,16 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { DialogRef } from '../../interfaces';
-import { DIALOG_REF } from '../../tokens/dialog-ref.token';
-
-@Component({
-  selector: 'app-dialog-nested-example',
-  templateUrl: './dialog-nested-example.component.html',
-  styleUrls: ['./dialog-nested-example.component.scss'],
-})
-export class DialogNestedExampleComponent {
-  constructor(@Inject(DIALOG_REF) private dialogRef: DialogRef) {}
-
-  close() {
-    this.dialogRef.close();
-  }
-}

package/projects/kit/components/dialog/index.ts

@@ -1 +0,0 @@
-export * from './dialog.module';

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

@@ -1,7 +0,0 @@
-export interface DialogConfig<T = unknown> {
-  title?: string;
-  hasCross?: boolean;
-  data?: T;
-  layerIndex?: number;
-  minHeight?: number;
-}

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

@@ -1,7 +0,0 @@
-import { Injector } from '@angular/core';
-import { DialogRef } from './dialog-ref';
-
-export interface DialogDIParams {
-  injector: Injector;
-  dialogRef: DialogRef;
-}

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

@@ -1,20 +0,0 @@
-import { ComponentRef } from '@angular/core';
-import { Observable } from 'rxjs';
-import { DialogConfig } from '.';
-import { DialogComponent } from '../dialog.component';
-
-export interface DialogRef {
-  afterClosed$: Observable<unknown>;
-  config$: Observable<DialogConfig>;
-  config: DialogConfig;
-  id: string;
-  dialogElement: HTMLElement;
-  componentRef: ComponentRef<DialogComponent>;
-
-  init(config: DialogConfig): void;
-  updateConfig(config: DialogConfig): void;
-  close<T = unknown>(result?: T): void;
-  setDialogElement(element: HTMLElement): void;
-  setComponentRef(componentRef: ComponentRef<DialogComponent>): void;
-  destroy(): void;
-}

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

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

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

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

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

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