@mozaic-ds/angular 0.22.0 → 0.23.0

package/projects/kit/components/notification/notification-message.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  template: '<ng-content></ng-content>',
-  selector: '[mozNotificationMessage]',
-  styleUrls: ['./notification.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.mc-notification__message]': 'true' },
-})
-export class NotificationMessageComponent {}

package/projects/kit/components/notification/notification-title.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  template: '<ng-content></ng-content>',
-  selector: '[mozNotificationTitle]',
-  styleUrls: ['./notification.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.mc-notification__title]': 'true' },
-})
-export class NotificationTitleComponent {}

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

@@ -1,5 +0,0 @@
-<div class="mc-notification__content">
-  <ng-content select="[mozNotificationTitle]"></ng-content>
-  <ng-content select="[mozNotificationMessage]"></ng-content>
-  <ng-content select="[mozNotificationFooter]"></ng-content>
-</div>

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

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

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

@@ -1,30 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { NotificationSize, NotificationType } from './notification';
-
-@Component({
-  selector: 'moz-notification',
-  templateUrl: './notification.component.html',
-  styleUrls: ['./notification.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.mc-notification]': 'true' },
-})
-export class NotificationComponent {
-  @Input() type?: NotificationType = 'information';
-  @Input() size: NotificationSize = 'm';
-
-  @HostBinding('class')
-  public get hostCssClasses() {
-    const staticClasses = 'mc-notification';
-    const sizeCssClass = `mc-notification--${this.size}`;
-    const typeCssClass = `mc-notification--${this.type}`;
-    const dynamicClasses = `${sizeCssClass} ${typeCssClass}`;
-    return `${staticClasses} ${dynamicClasses}`;
-  }
-}

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

@@ -1,48 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { NotificationConfig, NotificationConfigFactory, NOTIFICATION_CONFIG } from './notification';
-import { NotificationContainerComponent } from './notification-container.component';
-import { NotificationFooterComponent } from './notification-footer';
-import { NotificationMessageComponent } from './notification-message';
-import { NotificationTitleComponent } from './notification-title';
-import { NotificationComponent } from './notification.component';
-import { NotificationService } from './notification.service';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [
-    NotificationComponent,
-    NotificationTitleComponent,
-    NotificationMessageComponent,
-    NotificationFooterComponent,
-    NotificationContainerComponent,
-  ],
-  providers: [
-    NotificationService,
-    {
-      provide: NOTIFICATION_CONFIG,
-      useValue: NotificationConfigFactory.create(),
-    },
-  ],
-  exports: [
-    NotificationComponent,
-    NotificationTitleComponent,
-    NotificationMessageComponent,
-    NotificationFooterComponent,
-  ],
-})
-export class NotificationModule {
-  static forRoot(
-    config: Partial<NotificationConfig> = {}
-  ): ModuleWithProviders<NotificationModule> {
-    return {
-      ngModule: NotificationModule,
-      providers: [
-        {
-          provide: NOTIFICATION_CONFIG,
-          useValue: NotificationConfigFactory.create(config),
-        },
-      ],
-    };
-  }
-}

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

@@ -1,50 +0,0 @@
-import { DOCUMENT } from '@angular/common';
-import {
-  ApplicationRef,
-  ComponentFactoryResolver,
-  ComponentRef,
-  EmbeddedViewRef,
-  Inject,
-  Injectable,
-  Injector,
-} from '@angular/core';
-import { Notification } from './notification';
-import { NotificationContainerComponent } from './notification-container.component';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class NotificationService {
-  private readonly container!: ComponentRef<NotificationContainerComponent>;
-
-  constructor(
-    private readonly applicationRef: ApplicationRef,
-    private readonly componentFactoryResolver: ComponentFactoryResolver,
-    private readonly injector: Injector,
-    @Inject(DOCUMENT) private readonly document: Document
-  ) {
-    this.container = this.createContainer();
-    this.appendNotificationContainerToBody(this.container);
-  }
-
-  public add(notification: Notification) {
-    this.container.instance.add(notification);
-  }
-
-  private createContainer(): ComponentRef<NotificationContainerComponent> {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      NotificationContainerComponent
-    );
-    const componentRef = componentFactory.create(this.injector);
-    return componentRef;
-  }
-
-  private appendNotificationContainerToBody(
-    componentRef: ComponentRef<NotificationContainerComponent>
-  ): void {
-    const componentHostView = componentRef.hostView as EmbeddedViewRef<unknown>;
-    const componentHtmlElement = componentHostView.rootNodes[0] as HTMLElement;
-    this.applicationRef.attachView(componentHostView);
-    this.document.body.appendChild(componentHtmlElement);
-  }
-}

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

@@ -1,52 +0,0 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { ButtonModule } from '../button';
-import { NotificationExampleComponent } from './notification-example.component';
-import { NotificationComponent } from './notification.component';
-import { NotificationModule } from './notification.module';
-
-export default {
-  component: NotificationComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [NotificationModule.forRoot(), ButtonModule, BrowserAnimationsModule],
-      declarations: [NotificationExampleComponent],
-    }),
-  ],
-  argTypes: {
-    type: {
-      options: ['information', 'success', 'warning', 'danger'],
-      control: { type: 'radio', defaultValue: 'information' },
-    },
-    size: {
-      options: ['s', 'm'],
-      control: { type: 'radio', defaultValue: 'm' },
-    },
-  },
-  title: 'Notification',
-} as Meta;
-
-const Template: Story = ({ type, size }: any = {}) => {
-  return {
-    props: {
-      type,
-      size,
-    },
-    template: `
-    <moz-notification [size]="size" [type]="type">
-      <h3 mozNotificationTitle>Information notification</h3>
-      <p mozNotificationMessage>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-      ligula eget dolor. Aenean massa.
-      </p>
-      <div mozNotificationFooter>
-        <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
-      </div>
-    </moz-notification>
-    <br>
-    <moz-notification-example></moz-notification-example>
-      `,
-  };
-};
-
-export const Default = Template.bind({});

package/projects/kit/components/notification/notification.ts

@@ -1,21 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export type NotificationType = 'information' | 'success' | 'warning' | 'danger';
-
-export type NotificationSize = 'm' | 's';
-
-export type Notification = {
-  type?: NotificationType;
-  title?: string;
-  message: string;
-};
-
-export type NotificationConfig = { duration: number };
-
-export const NOTIFICATION_CONFIG = new InjectionToken<NotificationConfig>('NOTIFICATION_CONFIG');
-
-export class NotificationConfigFactory {
-  static create(config: Partial<NotificationConfig> = {}): NotificationConfig {
-    return { duration: 3000, ...config };
-  }
-}

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

@@ -1,37 +0,0 @@
-<nav class="mc-pagination" role="navigation" aria-label="pagination">
-  <button
-    moz-button
-    theme="neutral"
-    class="mc-pagination__button"
-    [disabled]="isFirstPage"
-    [onlyIcon]="true"
-    (click)="previousPage()"
-    *ngIf="leftIconName | async; let icon"
-  >
-    <moz-icon [iconName]="icon"></moz-icon>
-  </button>
-  <div *ngIf="viewSelect">
-    <select
-      moz-select
-      [ngModel]="currentPage"
-      (ngModelChange)="writeValue($event)"
-      [compareWith]="compareWithPages"
-      [size]="(selectSize | async)!"
-      [disabled]="disabledSelect"
-    >
-      <option *ngFor="let page of pages" [ngValue]="page.value">{{ page.title }}</option>
-    </select>
-  </div>
-
-  <button
-    moz-button
-    theme="neutral"
-    class="mc-pagination__button"
-    [disabled]="isLastPage"
-    (click)="nextPage()"
-    [onlyIcon]="true"
-    *ngIf="rightIconName | async; let icon"
-  >
-    <moz-icon [iconName]="icon"></moz-icon>
-  </button>
-</nav>

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

@@ -1,7 +0,0 @@
-@import 'settings-tools/all-settings';
-
-@import 'components/c.pagination';
-
-.mc-pagination {
-  gap: 1rem;
-}

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

@@ -1,196 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Input,
-  SimpleChanges,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { debounceTime, map, Observable, shareReplay, startWith } from 'rxjs';
-import { GlobalEventsService } from '../../common';
-import { IconSize } from '../icon/icon-size';
-import { SelectSize, SELECT_SIZE } from '../select/select-size';
-import {
-  Page,
-  PAGINATION_FIRST_PAGE,
-  PAGINATION_MIN_NUMBER_OF_PAGES,
-  PAGINATION_PAGE_STEP,
-} from './pagination';
-
-export const PAGINATION_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => PaginationComponent),
-  multi: true,
-};
-
-@Component({
-  selector: 'moz-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrls: ['./pagination.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [PAGINATION_CONTROL_VALUE_ACCESSOR],
-})
-export class PaginationComponent implements ControlValueAccessor {
-  @Input() numberOfPages = PAGINATION_MIN_NUMBER_OF_PAGES;
-
-  @Input() light = false;
-
-  @Input() pageTitleMask = (page: number, numberOfPages: number) =>
-    `Page ${page} of ${numberOfPages}`;
-
-  public onChange: any = () => {};
-
-  public onTouch: any = () => {};
-
-  public currentPage = PAGINATION_FIRST_PAGE;
-
-  public pages: Page[] = [];
-
-  public rightIconName!: Observable<string>;
-
-  public leftIconName!: Observable<string>;
-
-  public selectSize: Observable<SelectSize>;
-
-  private readonly smallResolution = 1024;
-
-  constructor(
-    private readonly globalEventService: GlobalEventsService,
-    private readonly cd: ChangeDetectorRef
-  ) {
-    const isSmall = this.displayIsSmall().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
-    this.initializeIcons(isSmall);
-    this.selectSize = isSmall.pipe(map((isSmall) => this.chooseSelectSize(isSmall)));
-  }
-
-  ngAfterViewInit() {
-    this.reinitializeNumberOfPagesAtInvalidValue();
-    if (this.viewSelect) {
-      this.pages = this.initializePages(this.numberOfPages);
-    }
-    this.reinitializeCurrentPageAtOverflow();
-    this.cd.detectChanges();
-  }
-
-  ngOnChanges({ numberOfPages, pageTitleMask }: SimpleChanges) {
-    if (
-      this.needRenderPages(
-        this.viewSelect,
-        numberOfPages?.currentValue,
-        numberOfPages?.previousValue,
-        pageTitleMask?.currentValue,
-        pageTitleMask?.previousValue
-      )
-    ) {
-      this.reinitializeNumberOfPagesAtInvalidValue();
-      this.pages = this.initializePages(this.numberOfPages);
-    }
-    this.reinitializeCurrentPageAtOverflow();
-  }
-
-  public get viewSelect() {
-    return !this.light;
-  }
-
-  public get isFirstPage(): boolean {
-    return this.currentPage <= PAGINATION_FIRST_PAGE;
-  }
-
-  public get isLastPage(): boolean {
-    return this.currentPage >= this.numberOfPages;
-  }
-
-  public get disabledSelect() {
-    return this.numberOfPages <= PAGINATION_MIN_NUMBER_OF_PAGES;
-  }
-
-  public writeValue(value: any) {
-    if (!value || value === this.currentPage || value > this.numberOfPages) return;
-    this.currentPage = value;
-    this.onChange(value);
-  }
-
-  public registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any) {
-    this.onTouch = fn;
-  }
-
-  public nextPage() {
-    this.writeValue(this.currentPage + PAGINATION_PAGE_STEP);
-  }
-
-  public previousPage() {
-    this.writeValue(this.currentPage - PAGINATION_PAGE_STEP);
-  }
-
-  public compareWithPages(page: number, currentPage?: number): boolean {
-    return page === currentPage;
-  }
-
-  private initializePages(numberOfPages: number): Page[] {
-    return new Array(numberOfPages).fill(null).map((_, index) => ({
-      title: this.pageTitleMask(index + 1, numberOfPages),
-      value: index + 1,
-    }));
-  }
-
-  private initializeIcons(isSmall: Observable<boolean>) {
-    const iconSize = isSmall.pipe(
-      map((isSmall) => this.chooseIconSize(isSmall)),
-      shareReplay({ refCount: true, bufferSize: 1 })
-    );
-
-    this.leftIconName = iconSize.pipe(
-      map((iconSize) => `Navigation_Arrow_Arrow--Left_${iconSize}`)
-    );
-
-    this.rightIconName = iconSize.pipe(
-      map((iconSize) => `Navigation_Arrow_Arrow--Right_${iconSize}`)
-    );
-  }
-
-  private displayIsSmall(): Observable<boolean> {
-    const resizeEvent = this.globalEventService.getWindowEvent('resize').pipe(debounceTime(100));
-    const displayWidth = resizeEvent.pipe(
-      map((event) => (event?.target as Window)?.innerWidth),
-      startWith(this.globalEventService.window.innerWidth)
-    );
-    return displayWidth.pipe(map((width) => width < this.smallResolution));
-  }
-
-  private reinitializeCurrentPageAtOverflow() {
-    if (this.numberOfPages < this.currentPage) {
-      this.writeValue(PAGINATION_FIRST_PAGE);
-    }
-  }
-
-  private reinitializeNumberOfPagesAtInvalidValue() {
-    if (!this.numberOfPages || this.numberOfPages < PAGINATION_MIN_NUMBER_OF_PAGES) {
-      this.numberOfPages = PAGINATION_MIN_NUMBER_OF_PAGES;
-    }
-  }
-
-  private chooseIconSize(isSmall: boolean): IconSize {
-    return isSmall ? IconSize.L : IconSize.M;
-  }
-
-  private chooseSelectSize(isSmall: boolean): SelectSize {
-    return isSmall ? SELECT_SIZE.M : SELECT_SIZE.S;
-  }
-
-  private needRenderPages(
-    viewSelect: boolean,
-    numberOfPagesPrevious?: number,
-    numberOfPagesCurrent?: number,
-    pageTitleMaskPrevious?: unknown,
-    pageTitleMaskCurrent?: unknown
-  ): boolean {
-    const numberOfPageHasChanges = numberOfPagesPrevious !== numberOfPagesCurrent;
-    const maskHasChanges = pageTitleMaskPrevious !== pageTitleMaskCurrent;
-    return viewSelect && (numberOfPageHasChanges || maskHasChanges);
-  }
-}

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

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { GlobalEventsModule } from '../../common';
-import { ButtonModule } from '../button';
-import { IconModule } from '../icon/public-api';
-import { SelectModule } from '../select/public-api';
-import { PaginationComponent } from './pagination.component';
-
-@NgModule({
-  imports: [CommonModule, FormsModule, ButtonModule, SelectModule, IconModule, GlobalEventsModule],
-  declarations: [PaginationComponent],
-  exports: [PaginationComponent],
-})
-export class PaginationModule {}

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

@@ -1,28 +0,0 @@
-import { FormsModule } from '@angular/forms';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { PaginationComponent } from './pagination.component';
-import { PaginationModule } from './pagination.module';
-
-export default {
-  component: PaginationComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [PaginationModule, FormsModule],
-    }),
-  ],
-  argTypes: {
-    light: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    numberOfPages: { type: 'number', defaultValue: 10, control: { type: 'number' } },
-    value: { type: 'number', defaultValue: 2, control: { type: 'number' } },
-  },
-  title: 'Pagination',
-} as Meta;
-
-const Template: Story = ({ light, value, numberOfPages }: any = {}) => ({
-  props: { light, value, numberOfPages },
-  template: `
-   <moz-pagination [light]="light" [(ngModel)]="value" [numberOfPages]="numberOfPages"></moz-pagination>
-    `,
-});
-
-export const Default = Template.bind({});

package/projects/kit/components/pagination/pagination.ts

@@ -1,7 +0,0 @@
-export type Page = { title: string; value: number };
-
-export const PAGINATION_FIRST_PAGE = 1;
-
-export const PAGINATION_MIN_NUMBER_OF_PAGES = 1;
-
-export const PAGINATION_PAGE_STEP = 1;

package/projects/kit/components/progress-bar/progress-bar.component.html

@@ -1,9 +0,0 @@
-<div
-  class="mc-progressbar__indicator"
-  role="progressbar"
-  [attr.aria-valuenow]="percent"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  [ngStyle]="indicatorWidth"
-></div>
-<div *ngIf="text" class="mc-progressbar__percentage">{{ text }}</div>

package/projects/kit/components/progress-bar/progress-bar.component.scss

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

package/projects/kit/components/progress-bar/progress-bar.component.ts

@@ -1,38 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ProgressBarSize } from './progress-bar-size';
-import { ProgressBarTheme } from './progress-bar-theme';
-
-@Component({
-  selector: 'moz-progress-bar',
-  templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class ProgressBarComponent {
-  @Input() public size: ProgressBarSize = 'm';
-
-  @Input() public theme: ProgressBarTheme = 'default';
-
-  @Input() public percent = 0;
-
-  @Input() public text = '';
-
-  public get indicatorWidth() {
-    return { width: `${this.percent}%` };
-  }
-
-  @HostBinding('class')
-  public get hostCssClasses() {
-    const sizeClass = `mc-progressbar--${this.size}`;
-    const themeClass = `mc-progressbar--${this.theme}`;
-    const textClass = !!this.text ? `mc-progressbar--percent` : '';
-    return `mc-progressbar ${sizeClass} ${themeClass} ${textClass}`;
-  }
-}

package/projects/kit/components/progress-bar/progress-bar.module.ts

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

package/projects/kit/components/progress-bar/progress-bar.stories.ts

@@ -1,39 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { ProgressBarComponent } from './progress-bar.component';
-import { ProgressBarModule } from './progress-bar.module';
-
-export default {
-  component: ProgressBarComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ProgressBarModule],
-    }),
-  ],
-  argTypes: {
-    size: {
-      defaultValue: 'm',
-      control: { type: 'select', options: ['xs', 's', 'm'] },
-    },
-    percent: { type: 'number', defaultValue: 10, control: { type: 'number' } },
-    text: { type: 'string', defaultValue: '', control: { type: 'text' } },
-    theme: {
-      defaultValue: 'default',
-      control: { type: 'select', options: ['default', 'branded'] },
-    },
-  },
-  title: 'Progress bar',
-} as Meta;
-
-const Template: Story = ({ size, percent, text, theme }: any = {}) => ({
-  props: {
-    size,
-    percent,
-    text,
-    theme,
-  },
-  template: `
-    <moz-progress-bar [size]="size" [percent]="percent" [text]="text" [theme]="theme"></moz-progress-bar>
-    `,
-});
-
-export const Default = Template.bind({});

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

@@ -1,6 +0,0 @@
-export enum SELECT_SIZE {
-  S = 's',
-  M = 'm',
-}
-
-export type SelectSize = 's' | 'm';

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

@@ -1 +0,0 @@
-<ng-content select="option"></ng-content>

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

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