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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+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 {
+}