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

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: 'Indicator/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');

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

@@ -1,78 +0,0 @@
-<div
-  class="mc-dropdown mc-dropdown--clearable"
-  [ngClass]="{ 'mc-dropdown--multi': multiple }"
-  [ngStyle]="{
-    '--dropdown-tag-width':
-      !showSelectedTags && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',
-    '--dropdown-width': '100%'
-  }"
->
-  <div class="mc-dropdown__main">
-    <moz-tag
-      *ngIf="!showSelectedTags && multiple && getSelectedListboxItems().length > 0"
-      class="mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag"
-      type="removable"
-      [size]="'s'"
-      (clickOnRemove)="clearFieldEvent()"
-    >
-      {{ getSelectedListboxItems().length }}</moz-tag
-    >
-
-    <button
-      type="button"
-      id="trigger"
-      class="mc-select mc-dropdown__trigger mc-button--{{ size }}"
-      [ngClass]="{ 'is-open': openState, 'is-valid': valid, 'is-invalid': invalid }"
-      aria-haspopup="listbox"
-      title="Dropdown menu options"
-      [disabled]="disabled"
-      aria-expanded="false"
-      (click)="openListbox()"
-    >
-      <ng-container *ngIf="multiple; else monoSelection">{{
-        getLabelFromMultipleSelection()
-      }}</ng-container>
-      <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>
-    </button>
-
-    <div class="mc-dropdown__tools">
-      <div class="mc-dropdown__loader mc-loader mc-loader--s" *ngIf="loading">
-        <span class="mc-loader__spinner">
-          <moz-loader class="mc-loader__icon" [size]="size"></moz-loader>
-        </span>
-      </div>
-      <button
-        class="mc-dropdown__clear"
-        type="button"
-        *ngIf="canClearField()"
-        (click)="clearFieldEvent()"
-      >
-        <moz-icon
-          class="mc-dropdown__clear-icon"
-          [iconName]="'Navigation_Control_Tag--Cross_24px'"
-        ></moz-icon>
-        <span class="mc-autocomplete__clear-text">Clear</span>
-      </button>
-    </div>
-  </div>
-  <moz-listbox
-    *ngIf="openState"
-    #listbox
-    [listboxItems]="listboxItems"
-    [isOpen]="openState"
-    [multiple]="multiple"
-    [selectedItems]="selectedItems"
-    (itemsSelected)="itemsSelectedListboxEvent($event)"
-  ></moz-listbox>
-</div>
-<div class="mc-dropdow__taglist">
-  <moz-taglist
-    #taglist
-    *ngIf="showSelectedTags && multiple"
-    (removeTag)="removeTagEvent($event)"
-    [tagItems]="getTagItemsFromSelectedItems()"
-    [max]="maxShowingSelectedTags"
-    [layerTagsTitle]="layerTagsTitle"
-    [layerTagsIcon]="layerTagsIcon"
-  ></moz-taglist>
-</div>

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

@@ -1,10 +0,0 @@
-@import 'settings-tools/all-settings';
-@import '_c.select';
-@import '_c.listbox';
-@import '_c.loader';
-@import '_c.dropdown';
-@import '_c.button';
-
-.mc-dropdow__taglist {
-  margin-top: 1rem;
-}

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

@@ -1,215 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  OnDestroy,
-  ViewChild,
-  forwardRef,
-} from '@angular/core';
-import { ListboxItem } from '../listbox/model/listbox-item';
-import { Subject, fromEvent, takeUntil } from 'rxjs';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TagItem } from '../tag/tag-type';
-import { TaglistComponent } from '../taglist/taglist.component';
-import { ButtonSizes } from '../button/button';
-
-@Component({
-  selector: 'moz-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DropdownComponent),
-      multi: true,
-    },
-  ],
-})
-export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
-  @Input() public listboxItems: ListboxItem[] = [];
-  @Input() public multiple: boolean = false;
-  @Input() public placeholder: string = 'Placeholder';
-  @Input() public disabled: boolean = false;
-  @Input() public loading: boolean = false;
-  @Input() public clearfield: boolean = false;
-  @Input() public valid: boolean = false;
-  @Input() public invalid: boolean = false;
-  @Input() public showSelectedTags: boolean = false;
-  @Input() public maxShowingSelectedTags: number = 5;
-  @Input() public size: ButtonSizes = 'm';
-  @Input() public layerTagsTitle: string = 'Dropdown tags';
-  @Input() public layerTagsIcon: string = 'Navigation_Display_Setting_24px';
-
-  @ViewChild('taglist', { static: false }) taglistComponent!: TaglistComponent;
-  @ViewChild('listbox', { read: ElementRef }) listboxElementRef!: ElementRef;
-
-  public openState: boolean = false;
-  public selectedItems: ListboxItem[] | ListboxItem | undefined;
-  public originalListboxParent?: HTMLElement | null;
-  public destroyed = new Subject();
-
-  public onChange: any = () => {};
-
-  public onTouch: any = () => {};
-
-  constructor(private eRef: ElementRef, private cd: ChangeDetectorRef) {}
-
-  writeValue(value: ListboxItem[] | ListboxItem | undefined): void {
-    this.selectedItems = value;
-    this.onChange(value);
-  }
-
-  public registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any) {
-    this.onTouch = fn;
-  }
-
-  ngOnDestroy(): void {
-    if (this.listboxElementRef) {
-      const mozListbox = this.listboxElementRef.nativeElement;
-      if (mozListbox && mozListbox.parentNode) {
-        mozListbox.parentNode.removeChild(mozListbox);
-      }
-    }
-    this.destroyed.next(null);
-    this.destroyed.complete();
-  }
-
-  ngAfterViewInit(): void {
-    fromEvent(window, 'resize')
-      .pipe(takeUntil(this.destroyed))
-      .subscribe(() => {
-        this.closeListbox();
-        this.cd.detectChanges();
-      });
-    fromEvent(window, 'scroll')
-      .pipe(takeUntil(this.destroyed))
-      .subscribe(() => {
-        this.closeListbox();
-        this.cd.detectChanges();
-      });
-  }
-
-  @HostListener('document:click', ['$event'])
-  clickout(event: Event) {
-    const listboxHtmlElementContainsClickTarget =
-      this.listboxElementRef && this.listboxElementRef.nativeElement.contains(event.target);
-    const dropdownInputContainsClickTarget = this.eRef.nativeElement.contains(event.target);
-    if (!listboxHtmlElementContainsClickTarget && !dropdownInputContainsClickTarget) {
-      this.closeListbox();
-    }
-  }
-
-  public openListbox(): void {
-    if (this.openState) {
-      this.closeListbox();
-    } else {
-      this.openState = true;
-      setTimeout(() => {
-        const mozListbox = this.listboxElementRef.nativeElement;
-        const inputElement = this.eRef.nativeElement.firstChild;
-        const inputRect = inputElement.getBoundingClientRect();
-        mozListbox.style.position = 'absolute';
-        mozListbox.style.top = inputRect.bottom + window.scrollY + 'px';
-        mozListbox.style.left = inputRect.left + window.scrollX + 'px';
-        mozListbox.style.width = inputRect.width + 'px';
-        this.originalListboxParent = mozListbox.parentElement;
-        document.body.appendChild(mozListbox);
-      }, 10);
-    }
-  }
-
-  public closeListbox(): void {
-    this.openState = false;
-    if (this.originalListboxParent && this.listboxElementRef) {
-      this.originalListboxParent.appendChild(this.listboxElementRef.nativeElement);
-      this.originalListboxParent = null;
-    }
-  }
-
-  public itemsSelectedListboxEvent(listboxItemSelected: ListboxItem[] | ListboxItem): void {
-    this.writeValue(listboxItemSelected);
-    if (!this.multiple) {
-      this.closeListbox();
-    }
-  }
-
-  public clearFieldEvent(): void {
-    if (!this.disabled) {
-      this.selectedItems = undefined;
-      this.openState = false;
-      this.writeValue(this.selectedItems);
-    }
-  }
-
-  public getMultiSelectedLabel(): string {
-    if (this.multiple) {
-      return (this.selectedItems as ListboxItem[])
-        .map((selectedItem) => selectedItem.label)
-        .join(', ');
-    }
-    return '';
-  }
-
-  public getSelectedListboxItems(): ListboxItem[] {
-    if (this.multiple && this.selectedItems) {
-      return this.selectedItems as ListboxItem[];
-    }
-    return [];
-  }
-
-  public getSelectedListboxItem(): ListboxItem | undefined {
-    if (!this.multiple && this.selectedItems) {
-      return this.selectedItems as ListboxItem;
-    }
-    return undefined;
-  }
-
-  public getLabelFromMultipleSelection(): string {
-    return this.getSelectedListboxItems().length > 0
-      ? this.getMultiSelectedLabel()
-      : this.placeholder;
-  }
-
-  public getLabelFromMonoSelection(): string {
-    return this.getSelectedListboxItem()?.label || this.placeholder;
-  }
-
-  public canClearField(): boolean {
-    if (this.multiple) {
-      return !this.disabled && this.clearfield && this.getSelectedListboxItems().length > 0;
-    } else {
-      return !this.disabled && this.clearfield && this.getSelectedListboxItem() != null;
-    }
-  }
-
-  public getTagItemsFromSelectedItems(): TagItem[] {
-    if (!this.selectedItems) {
-      return [];
-    }
-    return (this.selectedItems as ListboxItem[]).map(
-      (selectedItem) => ({ id: selectedItem.value, label: selectedItem.label } as TagItem)
-    );
-  }
-
-  public removeTagEvent($event: TagItem): void {
-    this.writeValue(
-      (this.selectedItems as ListboxItem[]).filter(
-        (selectedItem) => selectedItem.value !== $event.id
-      )
-    );
-    this.taglistComponent.updateTaglistLayerConfig(this.getTagItemsFromSelectedItems());
-    if (this.getTagItemsFromSelectedItems().length === 0) {
-      this.taglistComponent.closeTaglistLayer();
-    }
-    this.cd.detectChanges();
-  }
-}

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

@@ -1,25 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { DropdownComponent } from './dropdown.component';
-import { ListboxModule } from '../listbox/listbox.module';
-import { LoaderModule } from '../loader/loader.module';
-import { IconModule } from '../icon/icon.module';
-import { TagModule } from '../tag/tag.module';
-import { FormsModule } from '@angular/forms';
-import { TaglistModule } from '../taglist/taglist.module';
-import { ButtonModule } from '../button/button.module';
-
-@NgModule({
-  declarations: [DropdownComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ListboxModule,
-    LoaderModule,
-    IconModule,
-    TagModule,
-    TaglistModule,
-  ],
-  exports: [DropdownComponent],
-})
-export class DropdownModule {}