@flywheel-io/vision 2.0.0-beta-1 → 2.0.0-beta-3

package/src/components/paginator/paginator-advanced/paginator-advanced.component.spec.ts

@@ -1,32 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-
-import { FwIconModule } from '../../icon/icon.module';
-import { FwMenuModule } from '../../menu/menu.module';
-import { FwSelectMenuModule } from '../../select-menu/select-menu.module';
-import { FwPaginatorAdvancedComponent } from './paginator-advanced.component';
-
-describe('FwPaginatorAdvancedComponent', () => {
-  let component: FwPaginatorAdvancedComponent;
-  let fixture: ComponentFixture<FwPaginatorAdvancedComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwPaginatorAdvancedComponent],
-      imports: [
-        FormsModule,
-        FwIconModule,
-        FwMenuModule,
-        FwSelectMenuModule,
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwPaginatorAdvancedComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/paginator/paginator-advanced/paginator-advanced.component.ts

@@ -1,107 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { FwPaginatorEvent } from '../paginator.model';
-
-@Component({
-  selector: 'fw-paginator-advanced',
-  templateUrl: './paginator-advanced.component.html',
-  styleUrls: ['./paginator-advanced.component.scss'],
-})
-export class FwPaginatorAdvancedComponent {
-  @Input() disabled: boolean = false;
-  @Input() showNext: boolean = true;
-  @Input() showPrevious: boolean = true;
-  @Input() showFirst: boolean = false;
-  @Input() showLast: boolean = false;
-  @Input() pageIndex: number = 0;
-  @Input() pageSizeOptions: number[] = [10, 25, 50, 100];
-  @Input() length: number = 0;
-  @Input() alignment: 'start' | 'center' | 'end' = 'center';
-  @Input() selectorTitle: string = 'Items per page:';
-
-  @Input()
-  get pageSize(): number {
-    return this._pageSize;
-  }
-
-  set pageSize(newSize: number) {
-    this._pageSize = parseInt(newSize.toString());
-    this.pageIndex = 0;
-    const pageEvt = this.buildPageEvent(0);
-    this.page.emit(pageEvt);
-  }
-
-  private _pageSize: number = 10;
-  @Output() page: EventEmitter<FwPaginatorEvent> = new EventEmitter<FwPaginatorEvent>();
-
-  private buildPageEvent(pageIndex: number): FwPaginatorEvent {
-    return {
-      length: this.length,
-      pageSize: this.pageSize,
-      pageIndex: pageIndex,
-      previousPageIndex: this.pageIndex,
-      rowIndexStart: this.getRowIndexStart(pageIndex),
-      rowIndexEnd: this.getRowIndexEnd(pageIndex),
-    };
-  }
-
-  firstPage(): void {
-    const evt = this.buildPageEvent(1);
-    this.pageIndex = 0;
-    this.page.emit(evt);
-  }
-
-  lastPage(): void {
-    const evt = this.buildPageEvent(this.getNumberOfPages());
-    this.pageIndex = this.getNumberOfPages() - 1;
-    this.page.emit(evt);
-  }
-
-  nextPage(): void {
-    if (this.hasNextPage()) {
-      const evt = this.buildPageEvent(this.pageIndex + 1);
-      this.pageIndex++;
-      this.page.emit(evt);
-    }
-  }
-
-  previousPage(): void {
-    if (this.hasPreviousPage()) {
-      const evt = this.buildPageEvent(this.pageIndex - 1);
-      this.pageIndex--;
-      this.page.emit(evt);
-    }
-  }
-
-  setPage(pageNumber: number): void {
-    const evt = this.buildPageEvent(pageNumber);
-    this.pageIndex = pageNumber;
-    this.page.emit(evt);
-  }
-
-  getNumberOfPages(): number {
-    return Math.ceil(this.length / this.pageSize);
-  }
-
-  getRowIndexStart(pageIndex?: number): number {
-    const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
-    return index * this.pageSize;
-  }
-
-  getRowIndexEnd(pageIndex?: number): number {
-    const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
-    let indexEnd = (index * this.pageSize) + this.pageSize - 1;
-    if (indexEnd > this.length) {
-      indexEnd = this.length - 1;
-    }
-    return indexEnd;
-  }
-
-  hasNextPage(): boolean {
-    return (this.pageIndex !== this.getNumberOfPages() - 1);
-  }
-
-  hasPreviousPage(): boolean {
-    return (this.pageIndex > 0);
-  }
-}

package/src/components/paginator/paginator-advanced/paginator-advanced.stories.ts

@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwButtonModule } from '../../button/button.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwMenuModule } from '../../menu/menu.module';
-import { FwSelectMenuModule } from '../../select-menu/select-menu.module';
-import { FwPaginatorAdvancedComponent } from './paginator-advanced.component';
-
-export default {
-  title: 'Components/Paginator',
-  component: FwPaginatorAdvancedComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=7805%3A7304&mode=dev',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FormsModule,
-        FwButtonModule,
-        FwIconModule,
-        FwMenuModule,
-        FwSelectMenuModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwPaginatorAdvancedComponent>;
-
-export const Advanced: Story = {
-  args: {
-    disabled: false,
-    showNext: true,
-    showPrevious: true,
-    showFirst: false,
-    showLast: false,
-    pageIndex: 0,
-    pageSize: 10,
-    length: 150,
-    alignment: 'center',
-    selectorTitle: 'Items per page:',
-  },
-  parameters: {
-    controls: {
-      exclude: [
-        'selectedPageSize',
-        'ngOnChanges',
-        'buildPageEvent',
-      ],
-    },
-  },
-};

package/src/components/paginator/paginator.component.html

@@ -1,32 +0,0 @@
-<div [ngClass]="['paginator', variant, color, size, shape, alignment]">
-  <div class="pages-list">
-    <button
-      *ngIf="showFirst" class="page-item page-action page-first" [disabled]="!hasPreviousPage() ||  disabled"
-      (click)="firstPage()">
-      <fw-icon size="small" color="typography">arrow-back-collapse</fw-icon>
-    </button>
-    <button
-      *ngIf="showPrevious"
-      class="page-item page-action page-previous" [disabled]="!hasPreviousPage() || disabled" (click)="previousPage()">
-      <fw-icon size="small" color="typography">chevron-back</fw-icon>
-    </button>
-    <button
-      [ngClass]="['page-item', 'page-number', page.active ? 'page-active': '']"
-      [disabled]="disabled"
-      *ngFor="let page of getPages()"
-      (click)="setPage(page.pageIndex)"
-    >
-      <h4 class="vision-h4">{{ page.number }}</h4>
-    </button>
-    <button
-      *ngIf="showNext" class="page-item page-action page-next" [disabled]="!hasNextPage() || disabled"
-      (click)="nextPage()">
-      <fw-icon size="small" color="typography">chevron-forward</fw-icon>
-    </button>
-    <button
-      *ngIf="showLast" class="page-item page-action page-last" [disabled]="!hasNextPage() || disabled"
-      (click)="lastPage()">
-      <fw-icon size="small" color="typography">arrow-forward-collapse</fw-icon>
-    </button>
-  </div>
-</div>

package/src/components/paginator/paginator.component.scss

@@ -1,212 +0,0 @@
-:host {
-  .paginator {
-    display: flex;
-
-    button {
-      border: none;
-      background-color: transparent;
-    }
-
-    .page-item {
-      box-sizing: border-box;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 4px;
-
-      &:disabled {
-        color: var(--typography-muted);
-        cursor: not-allowed;
-
-        h4 {
-          opacity: .4;
-        }
-      }
-    }
-
-    .page-action {
-      &:disabled {
-        opacity: .4;
-      }
-    }
-
-    .pages-list {
-      box-sizing: border-box;
-      display: flex;
-      gap: 4px;
-
-      .page-number {
-        h4 {
-          margin: 0;
-          color: var(--typography-base);
-        }
-
-        &:disabled {
-          h4 {
-            color: var(--slate-base) !important;
-          }
-        }
-      }
-
-      .page-active {
-        background-color: var(--slate-focus);
-
-        &:disabled {
-          background-color: transparent;
-        }
-      }
-    }
-
-    &.start {
-      justify-content: flex-start;
-    }
-
-    &.center {
-      justify-content: center;
-    }
-
-    &.end {
-      justify-content: flex-end;
-    }
-
-    &.large {
-      .page-item {
-        width: 40px;
-        height: 40px;
-      }
-    }
-
-    &.medium {
-      .page-item {
-        width: 32px;
-        height: 32px;
-      }
-    }
-
-    &.small {
-      .page-item {
-        width: 26px;
-        height: 26px;
-      }
-    }
-
-    &.primary {
-      .page-active:not(:disabled) {
-        background-color: var(--primary-base) !important;
-
-        h4 {
-          color: var(--typography-contrast) !important;
-        }
-      }
-    }
-
-    &.secondary {
-      .page-active:not(:disabled) {
-        background-color: var(--secondary-base) !important;
-
-        h4 {
-          color: var(--typography-contrast) !important;
-        }
-      }
-    }
-
-    &.outline {
-      .page-item {
-        border: 1px solid var(--slate-border);
-      }
-
-      .page-number {
-        &:disabled {
-          border: 1px solid var(--slate-border) !important;
-          background-color: transparent !important;
-        }
-      }
-
-      &.primary {
-        .page-active {
-          background-color: var(--primary-hover) !important;
-          border-color: var(--primary-border) !important;
-
-          h4 {
-            color: var(--primary-base) !important;
-          }
-
-          &:disabled {
-            border: 1px solid var(--slate-border) !important;
-            background-color: transparent !important;
-          }
-        }
-      }
-
-      &.secondary {
-        .page-active {
-          background-color: var(--secondary-hover) !important;
-          border-color: var(--secondary-border) !important;
-
-          h4 {
-            color: var(--secondary-base) !important;
-          }
-
-          &:disabled {
-            border: 1px solid var(--slate-border) !important;
-            background-color: transparent !important;
-          }
-        }
-      }
-    }
-
-    &.solid {
-      .page-item {
-        border: 1px solid var(--slate-border);
-        background-color: var(--card-background);
-      }
-
-      .page-number {
-        &:disabled {
-          border: 1px solid var(--slate-border) !important;
-          background-color: var(--card-background) !important;
-          opacity: .4;
-
-          h4 {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &.circle {
-      .page-number {
-        border-radius: 999px !important;
-      }
-    }
-
-
-    .pages-selector {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 16px;
-
-      > div {
-        display: flex;
-        align-items: center;
-      }
-
-      fw-icon {
-        font-size: 22px;
-      }
-
-      .record-count {
-        min-width: 130px;
-        text-align: center;
-      }
-
-      p.disabled {
-        color: var(--typography-light);
-      }
-    }
-
-
-  }
-}

package/src/components/paginator/paginator.component.spec.ts

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

package/src/components/paginator/paginator.component.ts

@@ -1,115 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { FwPaginatorEvent } from './paginator.model';
-
-export interface PaginationPage {
-  pageIndex: number;
-  number: number;
-  active: boolean;
-}
-
-@Component({
-  selector: 'fw-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.scss'],
-})
-export class FwPaginatorComponent {
-  @Input() size: 'small' | 'medium' | 'large' = 'medium';
-  @Input() color: 'slate' | 'primary' | 'secondary' = 'slate';
-  @Input() shape: 'rounded' | 'circle' = 'rounded';
-  @Input() variant: 'ghost' | 'outline' | 'solid' = 'ghost';
-  @Input() disabled: boolean = false;
-  @Input() showNext: boolean = true;
-  @Input() showPrevious: boolean = true;
-  @Input() showFirst: boolean = false;
-  @Input() showLast: boolean = false;
-  @Input() pageIndex: number = 0;
-  @Input() pageSize: number = 10;
-  @Input() maxPagesShown: number = 10;
-  @Input() length: number = 0;
-  @Input() alignment: 'start' | 'center' | 'end' = 'center';
-  @Input() selectorTitle: string = 'Items per page:';
-  @Output() page: EventEmitter<FwPaginatorEvent> = new EventEmitter<FwPaginatorEvent>();
-
-  private buildPageEvent(pageIndex: number): FwPaginatorEvent {
-    return {
-      length: this.length,
-      pageSize: this.pageSize,
-      pageIndex: pageIndex,
-      previousPageIndex: this.pageIndex,
-      rowIndexStart: this.getRowIndexStart(pageIndex),
-      rowIndexEnd: this.getRowIndexEnd(pageIndex),
-    };
-  }
-
-  firstPage(): void {
-    const evt = this.buildPageEvent(0);
-    this.pageIndex = 0;
-    this.page.emit(evt);
-  }
-
-  lastPage(): void {
-    const evt = this.buildPageEvent(this.getNumberOfPages());
-    this.pageIndex = this.getNumberOfPages() - 1;
-    this.page.emit(evt);
-  }
-
-  nextPage(): void {
-    if (this.hasNextPage()) {
-      const evt = this.buildPageEvent(this.pageIndex + 1);
-      this.pageIndex++;
-      this.page.emit(evt);
-    }
-  }
-
-  previousPage(): void {
-    if (this.hasPreviousPage()) {
-      const evt = this.buildPageEvent(this.pageIndex - 1);
-      this.pageIndex--;
-      this.page.emit(evt);
-    }
-  }
-
-  setPage(pageIndex: number): void {
-    const evt = this.buildPageEvent(pageIndex);
-    this.pageIndex = pageIndex;
-    this.page.emit(evt);
-  }
-
-  getPages(): PaginationPage[] {
-    const pages: PaginationPage[] = [];
-    const currentSet = Math.ceil((this.pageIndex + 1) / this.maxPagesShown);
-    for (let i = 0; i < this.getNumberOfPages(); i++) {
-      if (currentSet === Math.ceil((i + 1) / this.maxPagesShown)) {
-        pages.push({ pageIndex: i, number: i + 1, active: this.pageIndex === i });
-      }
-    }
-    return pages;
-  }
-
-  getNumberOfPages(): number {
-    return Math.ceil(this.length / this.pageSize);
-  }
-
-  getRowIndexStart(pageIndex?: number): number {
-    const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
-    return index * this.pageSize;
-  }
-
-  getRowIndexEnd(pageIndex?: number): number {
-    const index = pageIndex !== undefined ? pageIndex : this.pageIndex;
-    let indexEnd = (index * this.pageSize) + this.pageSize - 1;
-    if (indexEnd >= this.length) {
-      indexEnd = this.length - 1;
-    }
-    return indexEnd;
-  }
-
-  hasNextPage(): boolean {
-    return (this.pageIndex !== this.getNumberOfPages() - 1);
-  }
-
-  hasPreviousPage(): boolean {
-    return (this.pageIndex > 0);
-  }
-}

package/src/components/paginator/paginator.mdx

@@ -1,55 +0,0 @@
-import {Canvas, Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
-
-import * as PaginatorStories from './paginator.stories';
-import * as PaginatorAdvancedStories from "./paginator-advanced/paginator-advanced.stories";
-
-<Meta of={PaginatorStories}/>
-<Title/>
-
-```ts
-import FwPaginatorModule from '@flywheel-io/vision';
-```
-
-<Subtitle/>
-<Description/>
-<Primary/>
-<Controls/>
-
-```html
-<!--yourcomponent.html -->
-
-<fw-paginator
-  shape="circle"
-  color="primary"
-  [length]="fullData.length"
-  [pageIndex]="currentPageIndex"
-  [pageSize]="pageSize"
-  [maxPagesShown]="10"
-  (page)="handlePageEvent($event)">
-</fw-paginator>
-
-<fw-paginator-advanced
-  alignment="end"
-  [length]="fullData.length"
-  [pageIndex]="currentPageIndex"
-  [pageSize]="pageSize"
-  (page)="handlePageEvent($event)">
-</fw-paginator-advanced>
-```
-
-```ts
-interface FwPaginatorEvent {
-  length: number;
-  pageSize: number;
-  pageIndex: number;
-  previousPageIndex: number;
-  rowIndexStart: number;
-  rowIndexEnd: number;
-}
-```
-
-<Stories/>
-
-### Advanced
-<Canvas of={PaginatorAdvancedStories.Advanced}/>
-

package/src/components/paginator/paginator.model.ts

@@ -1,8 +0,0 @@
-export interface FwPaginatorEvent {
-  length: number;
-  pageSize: number;
-  pageIndex: number;
-  previousPageIndex: number;
-  rowIndexStart: number;
-  rowIndexEnd: number;
-}

package/src/components/paginator/paginator.module.ts

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwMenuModule } from '../menu/menu.module';
-import { FwSelectMenuModule } from '../select-menu/select-menu.module';
-import { FwPaginatorComponent } from './paginator.component';
-import { FwPaginatorAdvancedComponent } from './paginator-advanced/paginator-advanced.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    FwIconButtonModule,
-    FwIconModule,
-    FwMenuModule,
-    FwSelectMenuModule,
-  ],
-  exports: [
-    FwPaginatorComponent,
-    FwPaginatorAdvancedComponent,
-  ],
-  declarations: [
-    FwPaginatorComponent,
-    FwPaginatorAdvancedComponent,
-  ],
-})
-export class FwPaginatorModule {
-}