@flywheel-io/vision 2.0.0 → 2.1.0-beta.0

package/src/components/number-input/number-input.component.scss

@@ -0,0 +1,184 @@
+// general structural styles
+@use "../../scss/config/typography.scss";
+
+.full-container {
+  &.disabled {
+    cursor: not-allowed;
+
+    fw-icon {
+      cursor: not-allowed !important;
+    }
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  // helps with centering everything
+  line-height: 21px;
+
+  .input-container {
+    box-sizing: border-box;
+    color: var(--typography-light);
+    background: var(--page-light);
+    display: flex;
+    padding: 8px;
+    align-items: center;
+    gap: 5px;
+    border-radius: 6px;
+    border: 1px solid var(--separations-input);
+    font-family: Inter, sans-serif;
+
+    &:focus-within {
+      border: 1px solid var(--primary-base);
+    }
+
+    input {
+      min-width: 0;
+      font-size: 14px;
+      flex-grow: 1;
+      color: var(--typography-base);
+      background: var(--page-light);
+      border: none;
+
+      &:focus {
+        outline: none;
+        border: none;
+      }
+
+      &.native {
+        &[type="number"]::-webkit-inner-spin-button,
+        &[type="number"]::-webkit-outer-spin-button {
+          opacity: 1;
+          filter: brightness(1.1);
+        }
+      }
+
+      &.none, &.plus-minus {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          appearance: none;
+          margin: 0;
+        }
+
+        &[type="number"] {
+          appearance: textfield;
+        }
+      }
+    }
+
+    input::placeholder {
+      color: var(--typography-light);
+    }
+
+    .context {
+      color: var(--typography-light);
+    }
+
+    button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      aspect-ratio: 1;
+    }
+  }
+
+  .error-icon {
+    display: none;
+  }
+
+  .helper-text {
+    margin-top: 4px;
+    color: var(--typography-light);
+    line-height: 13px;
+    margin-left: 6px;
+    margin-bottom: 0;
+  }
+
+  .error-text {
+    @extend .helper-text;
+
+    text-align: left;
+    color: var(--red-base);
+    display: none;
+  }
+}
+
+fw-icon {
+  &.actionable {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--primary-base);
+      background-color: var(--primary-hover);
+      border-radius: 50%;
+    }
+  }
+}
+
+
+// sizes
+.small {
+  height: 30px;
+
+  & > fw-icon {
+    font-size: 18px;
+    min-width: 18px;
+    width: 18px;
+  }
+}
+
+.medium {
+  height: 36px;
+
+  & > fw-icon {
+    font-size: 20px;
+    min-width: 20px;
+    width: 20px;
+  }
+}
+
+.large {
+  height: 40px;
+
+  & > fw-icon {
+    font-size: 24px;
+    min-width: 24px;
+    width: 24px;
+  }
+}
+
+// states
+:host.errored, :host.ng-touched.ng-invalid {
+  .input-container {
+    border: 1px solid var(--red-base);
+  }
+
+  .error-icon {
+    color: var(--red-base);
+    display: inline !important;
+  }
+
+  .helper-text {
+    display: none;
+  }
+
+  .error-text {
+    display: block !important;
+  }
+}
+
+:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.disabled {
+  .actionable {
+    &:hover {
+      color: var(--typography-light);
+      background-color: transparent;
+    }
+  }
+}

package/src/components/number-input/number-input.component.spec.ts

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

package/src/components/number-input/number-input.component.ts

@@ -0,0 +1,96 @@
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-number-input',
+  templateUrl: './number-input.component.html',
+  styleUrls: ['./number-input.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: FwNumberInputComponent,
+    multi: true,
+  }],
+})
+export class FwNumberInputComponent implements ControlValueAccessor {
+
+  @Input() disabled?: boolean = false;
+  @Input() useActionableIcons?: boolean = false;
+  @Input() leftIcon?: IconType;
+  @Output() leftIconAction?: EventEmitter<void> = new EventEmitter<void>();
+  @Input() rightIcon?: string;
+  @Output() rightIconAction?: EventEmitter<void> = new EventEmitter<void>();
+  @Input() prefix?: string;
+  @Input() context?: string;
+  @Input() placeholder?: string;
+  @Input() readOnly?: boolean;
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() min?: number;
+  @Input() max?: number;
+  @Input() step?: number;
+  @Input() arrows?: 'native' | 'plus-minus' | 'none';
+  @Input() numberType?: 'integer' | 'float';
+  @Input() autofocus?: boolean;
+  @Input() autocomplete?: boolean;
+  @ViewChild('numberInput') numberInput;
+  // we bind this to host because that's where angular form apis put the error classes
+  @HostBinding('class.errored') @Input() error?: boolean = false;
+
+  @Input() value: number;
+  externalControl: FormControl = null;
+
+  public onTouch = (): void => {
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onChange = (value: number): void => {
+  };
+
+  writeValue(obj: number): void {
+    this.value = obj;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  changeHandler(event: KeyboardEvent): void {
+    if (this.numberType === 'float') {
+      this.value = parseFloat((event.target as HTMLInputElement).value);
+    } else {
+      this.value = parseInt((event.target as HTMLInputElement).value);
+    }
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  blurHandler(): void {
+    this.onTouch();
+  }
+
+  onLeftIconClick(): void {
+    this.leftIconAction.emit();
+  }
+
+  onRightIconClick(): void {
+    this.rightIconAction.emit();
+  }
+
+  handleDecrement(): void {
+    this.numberInput.nativeElement.stepDown();
+  }
+
+  handleIncrement(): void {
+    this.numberInput.nativeElement.stepUp();
+  }
+}

package/src/components/number-input/number-input.mdx

@@ -0,0 +1,25 @@
+{/* DocumentationTemplate.mdx */}
+
+
+import {Controls, Meta, Primary, Stories, Title} from '@storybook/blocks';
+import * as NumberInputStories from './number-input.stories.ts';
+
+<Meta of={NumberInputStories}/>
+
+<Title/>
+```ts
+import { FwNumberInputModule } from '@flywheel-io/vision'
+```
+
+## Using with formControl
+
+This component implements [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor). So it will work with Angular's reactive forms and template-driven forms. Simply use it as you would any other form element, for example:
+```html
+  <fw-number-input [formControl]="myControl">
+```
+
+## Playground
+<Primary/>
+<Controls/>
+
+<Stories/>

package/src/components/number-input/number-input.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwNumberInputComponent } from './number-input.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwIconModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    FwNumberInputComponent,
+  ],
+  declarations: [
+    FwNumberInputComponent,
+  ],
+})
+export class FwNumberInputModule {
+}

package/src/components/number-input/number-input.stories.ts

@@ -0,0 +1,87 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwNumberInputComponent } from './number-input.component';
+import { FwNumberInputModule } from './number-input.module';
+
+export default {
+  title: 'Form Controls/Number Input',
+  component: FwNumberInputComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73655&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwNumberInputModule,
+        FwWrappedInputModule,
+        ReactiveFormsModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwNumberInputComponent>;
+
+export const Overview: Story = {
+  decorators: [],
+  args: {
+    size: 'medium',
+    leftIcon: 'barcode-serial',
+    placeholder: 'Barcode Number...',
+    value: 421000052640,
+    error: false,
+    disabled: false,
+  },
+};
+
+export const NativeArrows: Story = {
+  args: {
+    size: 'medium',
+    value: 456,
+    arrows: 'native',
+  },
+};
+
+export const PlusMinusArrows: Story = {
+  args: {
+    size: 'medium',
+    value: 50,
+    step: 5,
+    min: 0,
+    max: 100,
+    arrows: 'plus-minus',
+  },
+};
+
+export const Errored: Story = {
+  args: {
+    size: 'medium',
+    value: 0,
+    error: true,
+  },
+};
+
+export const Context: Story = {
+  args: {
+    placeholder: 'Measurement',
+    context: 'mm',
+  },
+};
+
+export const Prefix: Story = {
+  args: {
+    prefix: '$',
+    value: 12.99,
+    numberType: 'float',
+  },
+};
+

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

@@ -0,0 +1,45 @@
+<div [ngClass]="['paginator', alignment]">
+  <div class="pages-selector">
+    <div>
+      <p class="vision-p2" [ngClass]="disabled?'disabled':''">{{ selectorTitle }}</p>
+      &nbsp;
+      <fw-select
+        [disabled]="disabled" width="80px" placeholder="Size"
+        [(ngModel)]="pageSize">
+        <fw-menu-item
+          *ngFor="let size of pageSizeOptions"
+          [value]="size.toString()"
+          [title]="size.toString()"
+          [selected]="pageSize.toString()===size.toString()"
+          [disabled]="disabled"
+        ></fw-menu-item>
+      </fw-select>
+    </div>
+    <p class="vision-p2 record-count" [ngClass]="disabled?'disabled':''">
+      {{ getRowIndexStart() + 1 }}-{{ getRowIndexEnd() + 1 }}
+      of {{ length }}</p>
+    <div>
+      <button
+        *ngIf="showFirst"
+        class="page-item page-action page-first" [disabled]="!hasPreviousPage() ||  disabled" (click)="firstPage()">
+        <fw-icon>arrow-back-collapse</fw-icon>
+      </button>
+      <button
+        *ngIf="showPrevious"
+        class="page-item page-action page-previous" [disabled]="!hasPreviousPage() || disabled"
+        (click)="previousPage()">
+        <fw-icon>chevron-back</fw-icon>
+      </button>
+      <button
+        *ngIf="showNext" class="page-item page-action page-next" [disabled]="!hasNextPage() || disabled"
+        (click)="nextPage()">
+        <fw-icon>chevron-forward</fw-icon>
+      </button>
+      <button
+        *ngIf="showLast" class="page-item page-action page-last" [disabled]="!hasNextPage() || disabled"
+        (click)="lastPage()">
+        <fw-icon>arrow-forward-collapse</fw-icon>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,217 @@
+: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 {
+      fw-icon {
+        font-size: 22px;
+        color: var(--typography-base);
+      }
+
+      &: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);
+      }
+    }
+
+
+  }
+}