@mozaic-ds/angular 0.23.0 → 0.23.1

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

@@ -0,0 +1,196 @@
+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;
+    if (firstSelectedTab) {
+      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: 'Navigation/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-type.ts

@@ -0,0 +1,5 @@
+export type TagType = 'text' | 'selectable' | 'removable' | 'link';
+export interface TagItem {
+  id: string;
+  label: string;
+}

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/tag.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: 'Data/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/taglist/components/taglist-layer-content/taglist-layer-content.component.html

@@ -0,0 +1,12 @@
+<div class="mc-taglist__body">
+  <div class="mc-taglist">
+    <moz-tag
+      type="removable"
+      *ngFor="let tagItem of tagItems"
+      [size]="tagSize"
+      (clickOnRemove)="removeTagEvent(tagItem)"
+    >
+      {{ tagItem.label }}
+    </moz-tag>
+  </div>
+</div>

package/projects/kit/components/taglist/components/taglist-layer-content/taglist-layer-content.component.scss

@@ -0,0 +1,14 @@
+.mc-taglist {
+  &__footer {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  &__manage {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 1rem 0;
+  }
+}

package/projects/kit/components/taglist/components/taglist-layer-content/taglist-layer-content.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
+import { TagItem } from '../../../tag/tag-type';
+import { LAYER_DATA, LAYER_REF } from '../../../layer/tokens';
+import { LayerRef } from '../../../layer/interfaces/layer-ref';
+
+@Component({
+  selector: 'moz-taglist-layer-content',
+  templateUrl: './taglist-layer-content.component.html',
+  styleUrls: ['./taglist-layer-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { '[class.mc-taglist__manage]': 'true' },
+})
+export class TaglistLayerContentComponent {
+  public tagItems: TagItem[] = [];
+  public tagSize: 's' | 'm' = 's';
+  private _removedTagFromLayer$;
+
+  constructor(
+    @Inject(LAYER_DATA) public readonly data: any,
+    @Inject(LAYER_REF) public readonly layerRef: LayerRef
+  ) {
+    this.tagItems = data.tags;
+    this.tagSize = data.size;
+    this._removedTagFromLayer$ = data.subject;
+    this.layerRef.config$.subscribe((config) => {
+      this.tagItems = config.data.tags;
+    });
+  }
+
+  public removeTagEvent(tagItem: TagItem): void {
+    this._removedTagFromLayer$.next(tagItem);
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './taglist.module';
+export * from './taglist.component';
+export * from './components/taglist-layer-content/taglist-layer-content.component';

package/projects/kit/components/taglist/public-api.ts

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

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

@@ -0,0 +1,22 @@
+<div class="mc-taglist">
+  <ng-container *ngFor="let tagItem of tagItems; let i = index">
+    <moz-tag
+      class="tag-selected"
+      *ngIf="i < max || showAll"
+      type="removable"
+      [size]="tagSize"
+      (clickOnRemove)="removeTagEvent(tagItem)"
+    >
+      {{ tagItem.label }}
+    </moz-tag>
+  </ng-container>
+  <ng-container *ngIf="!showAll && tagItems.length > max">
+    <a
+      moz-tag
+      [size]="tagSize"
+      class="tag-selected mc-taglist__showhide"
+      (click)="showAllEvent()"
+      >{{ showAllTitle }}</a
+    >
+  </ng-container>
+</div>

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

@@ -0,0 +1,12 @@
+@import 'settings-tools/all-settings';
+
+.mc-taglist {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: $mu100;
+
+  &__showhide {
+    cursor: pointer;
+  }
+}

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

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

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

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { TagItem } from '../tag/tag-type';
+import { LayerService } from '../layer/layer.service';
+import { TaglistLayerContentComponent } from './components/taglist-layer-content/taglist-layer-content.component';
+import { Subject, takeUntil } from 'rxjs';
+import { LayerRef } from '../layer/interfaces/layer-ref';
+
+@Component({
+  selector: 'moz-taglist',
+  templateUrl: './taglist.component.html',
+  styleUrls: ['./taglist.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TaglistComponent implements OnDestroy {
+  @Input() tagItems: TagItem[] = [];
+  @Input() tagSize: 's' | 'm' = 's';
+  @Input() showAllTitle: string = 'Show all';
+  @Input() showAll: boolean = false;
+  @Input() layerTagsTitle?: string = 'Tags';
+  @Input() layerTagsIcon?: string = 'Navigation_Display_Setting_24px';
+  @Input() max: number = 5;
+  @Output() removeTag = new EventEmitter<TagItem>();
+
+  private _removedTagFromLayer$ = new Subject<TagItem>();
+  private destroyed = new Subject();
+  private taglistLayerRef!: LayerRef<TaglistLayerContentComponent>;
+
+  constructor(private layerService: LayerService) {}
+
+  public showAllEvent(): void {
+    this.taglistLayerRef = this.layerService.open(TaglistLayerContentComponent, {
+      title: this.layerTagsTitle || 'Settings',
+      icon: this.layerTagsIcon || 'Navigation_Display_Setting_24px',
+      data: {
+        tags: this.tagItems,
+        size: this.tagSize,
+        subject: this._removedTagFromLayer$,
+      },
+    });
+
+    this._removedTagFromLayer$
+      .pipe(takeUntil(this.destroyed))
+      .subscribe((tagItem) => this.removeTagEvent(tagItem));
+  }
+
+  public removeTagEvent(tagItem: TagItem) {
+    this.removeTag.emit(tagItem);
+  }
+
+  public updateTaglistLayerConfig(tagItems: TagItem[]): void {
+    this.taglistLayerRef.updateConfig({
+      data: {
+        tags: tagItems,
+      },
+    });
+  }
+
+  public closeTaglistLayer(): void {
+    this.taglistLayerRef.close();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed.next(null);
+    this.destroyed.complete();
+  }
+}

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

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TaglistComponent } from './taglist.component';
+import { TagModule } from '../tag/tag.module';
+import { TaglistLayerContentComponent } from './components/taglist-layer-content/taglist-layer-content.component';
+import { ButtonModule } from '../button/button.module';
+
+@NgModule({
+  declarations: [TaglistComponent, TaglistLayerContentComponent],
+  imports: [CommonModule, TagModule, ButtonModule],
+  exports: [TaglistComponent, TaglistLayerContentComponent],
+})
+export class TaglistModule {}