@mozaic-ds/angular 0.21.0 → 0.22.0

package/projects/kit/components/field/directives/input-icon.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, InjectionToken } from '@angular/core';
+
+export const MOZ_INPUT_ICON = new InjectionToken<InputIconDirective>('MozInputIcon');
+
+@Directive({
+  selector: '[mozInputIcon]',
+  providers: [{ provide: MOZ_INPUT_ICON, useExisting: InputIconDirective }],
+})
+export class InputIconDirective {}

package/projects/kit/components/field/field-error.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/kit/components/field/field-error.component.scss

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

package/projects/kit/components/field/field-error.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'moz-field-error',
+  templateUrl: './field-error.component.html',
+  styleUrls: ['./field-error.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.mc-field__error-message]': 'true',
+  },
+})
+export class FieldErrorComponent {}

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

@@ -0,0 +1,30 @@
+<label class="mc-field__label" *ngIf="viewLabel">
+  {{ label }}
+  <span *ngIf="requirementText" [attr.aria-hidden]="requirementText" class="mc-field__requirement">
+    {{ requirementText }}
+  </span>
+  <span *ngIf="helpText" id="helptext" class="mc-field__help">
+    {{ helpText }}
+  </span>
+</label>
+
+<ng-content></ng-content>
+
+<ng-template #inputIconTemplate>
+  <ng-content select="[mozInputIcon]"></ng-content>
+</ng-template>
+
+<ng-template #inputTemplate>
+  <ng-content select="[moz-input]"></ng-content>
+</ng-template>
+
+<div class="mc-left-icon-input" *ngIf="hasInputIcon | async; else withoutIcon">
+  <ng-container [ngTemplateOutlet]="inputIconTemplate"></ng-container>
+  <ng-container [ngTemplateOutlet]="inputTemplate"></ng-container>
+</div>
+
+<ng-template #withoutIcon>
+  <ng-container [ngTemplateOutlet]="inputTemplate"></ng-container>
+</ng-template>
+
+<ng-content select="moz-field-error"></ng-content>

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

@@ -0,0 +1,30 @@
+@import 'settings-tools/all-settings';
+
+@import 'components/_c.fields';
+
+@import 'components/_c.left-icon-input';
+
+.mc-field {
+  display: block;
+}
+
+.mc-field__label {
+  margin-bottom: 0.5rem;
+  display: inline-block;
+}
+
+.mc-left-icon-input [mozInputIcon] {
+  left: 0.75rem;
+  top: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  position: absolute;
+  z-index: 1;
+  transform: translateY(-50%);
+  fill: #666;
+  pointer-events: none;
+}
+
+.mc-left-icon-input [moz-input] {
+  padding-left: 2.9375rem;
+}

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

@@ -0,0 +1,49 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+  ViewEncapsulation,
+} from '@angular/core';
+import { map, startWith } from 'rxjs';
+import { InputIconDirective, MOZ_INPUT_ICON } from './directives/input-icon.directive';
+
+@Component({
+  selector: 'moz-field',
+  templateUrl: './field.component.html',
+  styleUrls: ['./field.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class.mc-field]': 'true',
+  },
+})
+export class FieldComponent {
+  @Input() public label = '';
+
+  @Input() public requirementText = '';
+
+  @Input() public helpText = '';
+
+  @ContentChildren(MOZ_INPUT_ICON, { descendants: true })
+  InputIconDirective?: QueryList<InputIconDirective>;
+
+  public get viewLabel() {
+    return !!(this.label || this.requirementText || this.helpText);
+  }
+
+  public get hasInputIcon() {
+    return this.InputIconDirective?.changes.pipe(
+      startWith(!!this.InputIconDirective?.length),
+      map(() => !!this.InputIconDirective?.length)
+    );
+  }
+
+  constructor(private readonly cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+}

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { InputIconDirective } from './directives/input-icon.directive';
+import { FieldErrorComponent } from './field-error.component';
+import { FieldComponent } from './field.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [FieldComponent, FieldErrorComponent, InputIconDirective],
+  exports: [FieldComponent, FieldErrorComponent, InputIconDirective],
+})
+export class FieldModule {}

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

@@ -0,0 +1,48 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { IconModule, TextInputModule } from '../public-api';
+import { FieldComponent } from './field.component';
+import { FieldModule } from './field.module';
+
+export default {
+  component: FieldComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FieldModule, TextInputModule, IconModule],
+    }),
+  ],
+  argTypes: {
+    label: { type: 'string', defaultValue: 'Label', control: { type: 'text' } },
+    requirementText: { type: 'string', defaultValue: 'optional', control: { type: 'text' } },
+    helpText: {
+      type: 'string',
+      defaultValue: 'A help text to accompany the user in his input',
+      control: { type: 'text' },
+    },
+    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    errorMessage: {
+      type: 'string',
+      defaultValue: 'Your custom error',
+      control: { type: 'text' },
+    },
+  },
+  title: 'Field',
+} as Meta;
+
+const Template: Story = ({ label, requirementText, helpText, invalid, errorMessage }: any = {}) => {
+  return {
+    props: { label, requirementText, helpText, invalid, errorMessage },
+    template: `
+      <moz-field
+        [label]="label"
+        [requirementText]="requirementText"
+        [helpText]="helpText"
+      >
+        <moz-icon mozInputIcon iconName="Media_View360_24px"></moz-icon>
+        <input moz-input placeholder="Some text" [invalid]="invalid" />
+        <moz-field-error *ngIf="invalid">{{errorMessage}}</moz-field-error>
+      </moz-field>
+      `,
+  };
+};
+
+export const Default = Template.bind({});

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

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

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

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { FlagComponent } from './flag.component';
+
+describe('FlagComponent', () => {
+  let component: FlagComponent;
+  let fixture: ComponentFixture<FlagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FlagComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should pass the correct class', () => {
+    component.type = 'solid';
+    expect(fixture.debugElement.query(By.css('.mc-flag--solid')));
+    component.type = 'bordered';
+    expect(fixture.debugElement.query(By.css('.mc-flag--bordered')));
+    component.type = 'solid-primary-02';
+    expect(fixture.debugElement.query(By.css('.mc-flag--solid-primary-02')));
+    component.type = 'bordered-primary-02';
+    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-primary-02')));
+    component.type = 'solid-dark';
+    expect(fixture.debugElement.query(By.css('.mc-flag--solid-dark')));
+    component.type = 'bordered-dark';
+    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-dark')));
+    component.type = 'solid-light';
+    expect(fixture.debugElement.query(By.css('.mc-flag--solid-light')));
+    component.type = 'bordered-light';
+    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-light')));
+    component.type = 'solid-danger';
+    expect(fixture.debugElement.query(By.css('.mc-flag--solid-danger')));
+    component.type = 'bordered-danger';
+    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-danger')));
+  });
+});

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

@@ -0,0 +1,26 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { FlagType, FlagTypeCssClass, FLAG_TYPE } from './flag';
+
+@Component({
+  selector: '[moz-flag]',
+  templateUrl: './flag.component.html',
+  styleUrls: ['./flag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class.mc-flag]': 'true',
+  },
+})
+export class FlagComponent {
+  @HostBinding('class') public flagClasses: FlagTypeCssClass = 'mc-flag--solid';
+
+  @Input() set type(type: FlagType) {
+    this.flagClasses = `mc-flag--${type}`;
+  }
+}

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

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

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

@@ -0,0 +1,33 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { FLAG_TYPE } from './flag';
+import { FlagComponent } from './flag.component';
+import { FlagModule } from './flag.module';
+
+export default {
+  component: FlagComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [FlagModule],
+    }),
+  ],
+  argTypes: {
+    type: {
+      options: FLAG_TYPE,
+      control: { type: 'radio', defaultValue: 'solid' },
+    },
+    textFlag: { defaultValue: 'Flag', control: { type: 'text' } },
+  },
+  title: 'Flag',
+} as Meta;
+
+const Template: Story = ({ type, textFlag }: any = {}) => ({
+  props: {
+    type,
+  },
+  template: `<div moz-flag [type]="type">
+    ${textFlag}
+    </div>
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/flag/flag.ts

@@ -0,0 +1,24 @@
+export type FlagType =
+  | 'solid'
+  | 'bordered'
+  | 'solid-primary-02'
+  | 'bordered-primary-02'
+  | 'solid-dark'
+  | 'bordered-dark'
+  | 'solid-light'
+  | 'bordered-light'
+  | 'solid-danger'
+  | 'bordered-danger';
+export type FlagTypeCssClass = `mc-flag--${FlagType}`;
+export const FLAG_TYPE = [
+  'solid',
+  'bordered',
+  'solid-primary-02',
+  'bordered-primary-02',
+  'solid-dark',
+  'bordered-dark',
+  'solid-light',
+  'bordered-light',
+  'solid-danger',
+  'bordered-danger',
+];

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

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

package/projects/kit/components/icon/icon-size.ts

@@ -0,0 +1,6 @@
+export enum IconSize {
+  S = '16px',
+  M = '24px',
+  L = '32px',
+  XL = '48px',
+}

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

@@ -0,0 +1,20 @@
+.icon {
+  display: inline-flex;
+}
+
+.icons-size-s {
+  height: 1rem;
+  width: 1rem;
+}
+.icons-size-m {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.icons-size-l {
+  height: 2rem;
+  width: 2rem;
+}
+.icons-size-xl {
+  height: 3rem;
+  width: 3rem;
+}

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

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

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

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

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

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

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

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

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

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

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

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