@mozaic-ds/angular 0.22.0-beta → 0.22.0

package/projects/kit/components/tabs/tab-selectors.ts

@@ -0,0 +1,2 @@
+export const TAB_SELECTORS = 'a,div,span';
+export const TABS_SELECTOR = 'moz-tabs';

package/projects/kit/components/tabs/tab.component.html

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

package/projects/kit/components/tabs/tab.component.scss

@@ -0,0 +1,16 @@
+@import 'settings-tools/_all-settings';
+
+@include import-font-families();
+
+@import 'components/_c.tabs';
+
+.mc-tabs__link {
+  font-weight: 400;
+  &:active,
+  &--selected {
+    font-weight: 400;
+  }
+  &:focus::after {
+    box-shadow: none;
+  }
+}

package/projects/kit/components/tabs/tab.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TabComponent } from './tab.component';
+
+describe('TabComponent', () => {
+  let component: TabComponent;
+  let fixture: ComponentFixture<TabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TabComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/kit/components/tabs/tab.component.ts

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Inject,
+  Input,
+  Optional,
+  ViewEncapsulation,
+} from '@angular/core';
+import { RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+
+@Component({
+  selector: `a[moz-tab],span[moz-tab],div[moz-tab]`,
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.mc-tabs__item]': 'true',
+    '[class.mc-tabs__link]': 'true',
+    '[class.mc-tabs__link--outline]': 'true',
+    '[class.mc-tabs__link--selected]': 'selected',
+    '[class.mc-tabs__link--disabled]': 'disabled',
+  },
+})
+export class TabComponent<T = any> {
+  @HostBinding('attr.tab-index')
+  public index: number = 0;
+
+  @Input() public disabled = false;
+
+  @Input() public data: T | null = null;
+
+  public selected = false;
+
+  constructor(
+    @Optional()
+    @Inject(RouterLinkActive)
+    public readonly routerLinkActive: RouterLinkActive | null,
+    @Optional()
+    @Inject(RouterLinkWithHref)
+    public readonly routerLink: RouterLinkWithHref | null
+  ) {}
+
+  public get isAvailableTabForSelection() {
+    return !this.selected && !this.disabled;
+  }
+
+  public get isActiveTab() {
+    return !!this.routerLinkActive?.isActive;
+  }
+
+  public get link() {
+    return this.routerLink?.href || null;
+  }
+}

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

@@ -0,0 +1 @@
+<ng-content select="[moz-tab]"></ng-content>

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

@@ -0,0 +1,9 @@
+@import 'settings-tools/_all-settings';
+
+@include import-font-families();
+
+@import 'components/_c.tabs';
+
+.mc-tab--hide-shadow::before {
+  box-shadow: none !important;
+}

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

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

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

@@ -0,0 +1,194 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Host,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Optional,
+  Output,
+  QueryList,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import {
+  combineLatest,
+  delay,
+  filter,
+  first,
+  fromEvent,
+  map,
+  merge,
+  of,
+  Subject,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs';
+import { TABS_SELECTOR, TAB_SELECTORS } from './tab-selectors';
+import { TabComponent } from './tab.component';
+
+@Component({
+  selector: TABS_SELECTOR,
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class.mc-tabs]': 'true',
+    '[class.mc-tabs--full]': 'viewFullWidth',
+    '[class.mc-tabs--full-centered]': 'fullWidthCenter',
+    '[class.mc-tab--hide-shadow]': 'hideShadow',
+  },
+})
+export class TabsComponent implements AfterViewInit, OnDestroy, OnChanges {
+  @Input() fullWidth = false;
+
+  @Input() fullWidthCenter = false;
+
+  @Input() hideShadow = false;
+
+  @Input() selectTabIndex: number | null = null;
+
+  @Output() selectedTabChange = new EventEmitter<TabComponent>();
+
+  @ContentChildren(TabComponent) tabs?: QueryList<TabComponent>;
+
+  private afterViewInit = new Subject<boolean>();
+
+  private viewDestroyed = new Subject<boolean>();
+
+  constructor(
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly cd: ChangeDetectorRef,
+    @Host()
+    @Optional()
+    private readonly router: Router | null
+  ) {
+    this.initBehaviorSelectForTab();
+  }
+
+  public get viewFullWidth(): boolean {
+    return this.fullWidth && !this.fullWidthCenter;
+  }
+
+  public ngAfterViewInit() {
+    this.afterViewInit.next(true);
+  }
+
+  public ngOnChanges({ selectTabIndex }: SimpleChanges) {
+    if (selectTabIndex && typeof selectTabIndex.currentValue === 'number') {
+      this.selectTabAtChanges(selectTabIndex.currentValue);
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.viewDestroyed.next(true);
+    this.viewDestroyed.complete();
+  }
+
+  private initBehaviorSelectForTab() {
+    const afterFullNavigateAndRender = this.getAfterFullNavigateAndRenderEvent();
+    const tabsAfterNavigate = afterFullNavigateAndRender.pipe(
+      map(() => this.tabs),
+      filter(Boolean)
+    );
+
+    tabsAfterNavigate
+      .pipe(
+        tap((tabs) => this.initTabIndex(tabs)),
+        tap((tabs) => this.initFirstSelectionTab(tabs)),
+        switchMap((tabs) => this.getAllTabEvents(tabs)),
+        tap((tab) => this.selectTab(this.tabs!, tab)),
+        takeUntil(this.viewDestroyed)
+      )
+      .subscribe();
+  }
+
+  private initTabIndex(tabs: QueryList<TabComponent>) {
+    tabs.forEach((tab, index) => (tab.index = index));
+    this.cd.markForCheck();
+  }
+
+  private initFirstSelectionTab(tabs: QueryList<TabComponent>) {
+    const activeTab = tabs.find((tab) => tab.isActiveTab);
+    const selectTabByIndex =
+      typeof this.selectTabIndex === 'number' && tabs.get(this.selectTabIndex);
+    const firstSelectedTab = selectTabByIndex || activeTab || tabs.first;
+    firstSelectedTab.selected = true;
+    this.tryNavigateToTab(firstSelectedTab);
+  }
+
+  private tryNavigateToTab(tab: TabComponent) {
+    if (!tab.link || tab.isActiveTab) return;
+    this.router?.navigate([tab.link]);
+  }
+
+  private selectTabAtChanges(selectTabIndex: number) {
+    const newSelectTab = this.tabs?.get(selectTabIndex);
+    if (!newSelectTab || !this.tabs) return;
+    this.selectTab(this.tabs, newSelectTab);
+    this.tryNavigateToTab(newSelectTab);
+  }
+
+  private getTabSelectionEvents(tabs: QueryList<TabComponent>) {
+    const indexClickedTab = this.getIndexClickedTab();
+    const clickedTab = indexClickedTab.pipe(map((tabIndex) => tabs.get(+tabIndex)));
+    return clickedTab.pipe(
+      filter(Boolean),
+      filter((tab) => tab.isAvailableTabForSelection)
+    );
+  }
+
+  private getTabActiveEvents(tabs: QueryList<TabComponent>) {
+    const tabWithLink = tabs.filter(({ routerLinkActive }) => !!routerLinkActive);
+    const tabsActiveEvent = tabWithLink.map((tab) => {
+      return tab.routerLinkActive!.isActiveChange.pipe(
+        filter(Boolean),
+        map(() => tab)
+      );
+    });
+
+    return merge(...tabsActiveEvent);
+  }
+
+  private getAfterFullNavigateAndRenderEvent() {
+    const eventNavigationEnd =
+      this.router?.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+        first()
+      ) || of(true);
+
+    return combineLatest([eventNavigationEnd, this.afterViewInit]).pipe(delay(0));
+  }
+
+  private getIndexClickedTab() {
+    return fromEvent<PointerEvent>(this.elementRef.nativeElement, 'click').pipe(
+      map((event) => event.target as HTMLElement),
+      filter(this.filterTabsElement.bind(this)),
+      map((targetElement) => targetElement.closest(TAB_SELECTORS)),
+      filter((tabElement): tabElement is HTMLAnchorElement => !!tabElement),
+      map((tabElement) => tabElement.getAttribute('tab-index') as string)
+    );
+  }
+
+  private getAllTabEvents(tabs: QueryList<TabComponent>) {
+    return merge(this.getTabSelectionEvents(tabs), this.getTabActiveEvents(tabs));
+  }
+
+  private filterTabsElement({ nodeName }: HTMLElement) {
+    return nodeName.toLowerCase() !== TABS_SELECTOR;
+  }
+
+  private selectTab(tabs: QueryList<TabComponent>, clickedTab: TabComponent) {
+    tabs.forEach((tab) => (tab.selected = tab === clickedTab));
+    this.selectedTabChange.emit(clickedTab);
+    this.cd.markForCheck();
+  }
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TabComponent } from './tab.component';
+import { TabsComponent } from './tabs.component';
+
+@NgModule({
+  declarations: [TabsComponent, TabComponent],
+  imports: [CommonModule],
+  exports: [TabsComponent, TabComponent],
+})
+export class TabsModule {}

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

@@ -0,0 +1,40 @@
+// import { RouterTestingModule } from '@angular/router/testing';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TabsComponent } from './tabs.component';
+import { TabsModule } from './tabs.module';
+
+export default {
+  component: TabsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TabsModule],
+    }),
+  ],
+  title: 'Tabs',
+  argTypes: {
+    fullWidth: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    fullWidthCenter: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    selectTabIndex: { defaultValue: 0, control: { type: 'number' } },
+  },
+} as Meta;
+
+const Template: Story = ({ fullWidth, fullWidthCenter, selectTabIndex }) => ({
+  props: {
+    fullWidth,
+    fullWidthCenter,
+    selectTabIndex,
+  },
+  template: `
+  <moz-tabs 
+  [fullWidth]="fullWidth"
+  [fullWidthCenter]="fullWidthCenter"
+  [selectTabIndex]="selectTabIndex"
+  >
+  <div moz-tab>Tab 1</div>
+  <div moz-tab >Tab 2</div>
+  <div moz-tab>Tab 3</div>
+    </moz-tabs>
+  `,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,29 @@
+<ng-template #labelTemplate>
+  <span [ngClass]="labelCssClass">
+    <ng-content></ng-content>
+  </span>
+</ng-template>
+
+<ng-container [ngSwitch]="type">
+  <ng-container *ngSwitchCase="'selectable'">
+    <input
+      class="mc-tag-selectable__input"
+      type="checkbox"
+      id="selectable"
+      [ngModel]="select"
+      (ngModelChange)="emitSelectChanges($event)"
+    />
+    <label class="mc-tag-selectable__pill" for="selectable">
+      <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+    </label>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'removable'">
+    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+    <button class="mc-tag-removable__remove" (click)="emitRemove()"></button>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+  </ng-container>
+</ng-container>

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

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

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

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { TagType } from './tag-type';
+
+@Component({
+  selector: 'moz-tag, a[moz-tag]',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TagComponent {
+  @Input() type: TagType;
+
+  @Input() size: 's' | 'm' = 'm';
+
+  @Input() select = false;
+
+  @Output() selectChange = new EventEmitter<boolean>();
+
+  @Output() clickOnRemove = new EventEmitter<void>();
+
+  constructor(private elementRef: ElementRef<HTMLElement>) {
+    this.type = this.getDefaultType();
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    return `${this.tagCssClass} ${this.sizeCssClass}`;
+  }
+
+  public get labelCssClass(): string {
+    return `${this.tagCssClass}__label`;
+  }
+
+  private get tagName(): string {
+    return this.elementRef?.nativeElement.tagName.toLowerCase();
+  }
+
+  private get hostIsLink(): boolean {
+    return this.tagName === 'a';
+  }
+
+  private get tagCssClass() {
+    return `mc-tag-${this.type}`;
+  }
+
+  private get sizeCssClass() {
+    return `${this.tagCssClass}--${this.size}`;
+  }
+
+  private getDefaultType(): TagType {
+    return this.hostIsLink ? 'link' : 'text';
+  }
+
+  public emitRemove() {
+    this.clickOnRemove.emit();
+  }
+
+  public emitSelectChanges($event: boolean) {
+    this.selectChange.emit($event);
+  }
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TagComponent } from './tag.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [TagComponent],
+  exports: [TagComponent],
+})
+export class TagModule {}

package/projects/kit/components/tag/text-area.stories.ts

@@ -0,0 +1,49 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TagComponent } from './tag.component';
+import { TagModule } from './tag.module';
+
+export default {
+  component: TagComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TagModule, FormsModule],
+    }),
+  ],
+  title: 'Tag',
+  argTypes: {
+    size: {
+      defaultValue: 'm',
+      control: { type: 'select', options: ['s', 'm'] },
+    },
+  },
+} as Meta;
+
+const Template: Story = ({ size }: any = {}) => {
+  const select = true;
+  const removeLogger = () => console.log('click on log');
+
+  return {
+    props: { size, select, removeLogger },
+    template: `
+      <style>
+        .container{
+          display:flex;
+          gap:0.5rem;
+          margin-bottom:1rem;
+        }
+      </style>
+      <div class="container">
+        <moz-tag [size]="size">text</moz-tag>
+        <a moz-tag href="#" [size]="size">text</a>
+        <moz-tag type="selectable" [size]="size" [(select)]="select">selectable</moz-tag>
+        <moz-tag type="removable" [size]="size" (clickOnRemove)="removeLogger()">removable</moz-tag>
+      </div>
+
+      Select binging value: {{select}}
+
+    `,
+  };
+};
+
+export const Default = Template.bind({});

package/projects/kit/components/text-area/text-area.component.scss

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

package/projects/kit/components/text-area/text-area.component.ts

@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { castBooleanProperty } from '../../common';
+
+@Component({
+  selector: 'textarea[moz-text-area]',
+  template: '',
+  styleUrls: ['./text-area.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TextAreaComponent {
+  private _invalid = false;
+
+  private _valid = false;
+
+  public get invalid(): boolean {
+    return this._invalid || false;
+  }
+
+  public get valid(): boolean {
+    const valid = this._valid || false;
+    return !this.invalid && valid;
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const staticClasses = 'mc-textarea';
+    const validClass = this.valid ? 'is-valid' : '';
+    const invalidClass = this.invalid ? 'is-invalid' : '';
+    const dynamicClasses = `${validClass} ${invalidClass}`;
+    return `${staticClasses} ${dynamicClasses}`;
+  }
+
+  @Input() public set invalid(val: boolean) {
+    this._invalid = castBooleanProperty(val);
+  }
+
+  @Input() public set valid(val: boolean) {
+    this._valid = castBooleanProperty(val);
+  }
+}

package/projects/kit/components/text-area/text-area.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { TextAreaComponent } from './text-area.component';
+
+@NgModule({
+  declarations: [TextAreaComponent],
+  exports: [TextAreaComponent],
+})
+export class TextAreaModule {}

package/projects/kit/components/text-area/text-area.stories.ts

@@ -0,0 +1,33 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TextAreaComponent } from './text-area.component';
+import { TextAreaModule } from './text-area.module';
+
+export default {
+  component: TextAreaComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TextAreaModule, FormsModule],
+    }),
+  ],
+  title: 'TextArea',
+  argTypes: {
+    placeholder: {
+      type: 'string',
+      defaultValue: 'Text area placeholder',
+      control: { type: 'text' },
+    },
+    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    valid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+  },
+} as Meta;
+
+const Template: Story = ({ disabled, placeholder, invalid, valid }: any = {}) => ({
+  props: { disabled, placeholder, invalid, valid },
+  template: `
+    <textarea moz-text-area [valid]="valid" [invalid]="invalid" [placeholder]="placeholder" [disabled]="disabled"></textarea>
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/text-input/text-input.component.scss

@@ -0,0 +1,15 @@
+@import 'settings-tools/_all-settings';
+
+@import 'components/_c.text-input';
+
+@import 'components/c.radio';
+
+@import 'components/_c.checkbox';
+
+.mc-text-input--m {
+  height: 3rem;
+}
+
+.mc-text-input--s {
+  height: 2rem;
+}