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

package/src/components/progress/bar/bar.stories.ts

@@ -0,0 +1,52 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwProgressModule } from '../progress.module';
+import { FwProgressBarComponent } from './bar.component';
+
+export default {
+  title: 'Components/Progress Bar',
+  component: FwProgressBarComponent,
+  parameters: {
+    controls: {
+      exclude: ['renderClass', 'ngOnChanges', 'badgeStyle'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH?type=design%27&node-id=5:27',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, FwProgressModule],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwProgressBarComponent>;
+
+export const ProgressBar: Story = {
+  args: {
+    mode: 'indeterminate',
+    value: 0,
+    showValue: false,
+  },
+};
+
+export const Determinate: Story = {
+  args: {
+    mode: 'determinate',
+    value: 80,
+    showValue: true,
+  },
+};
+
+export const Buffer: Story = {
+  args: {
+    mode: 'buffer',
+    value: 55,
+    bufferValue: 66,
+    showValue: false,
+  },
+};

package/src/components/progress/progress.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwProgressBarComponent } from './bar/bar.component';
+import { FwProgressSpinnerComponent } from './spinner/spinner.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    FwProgressBarComponent,
+    FwProgressSpinnerComponent,
+  ],
+  declarations: [
+    FwProgressBarComponent,
+    FwProgressSpinnerComponent,
+  ],
+})
+export class FwProgressModule {
+}

package/src/components/progress/spinner/spinner.component.html

@@ -0,0 +1,53 @@
+<ng-template #circle>
+  <svg
+    [attr.viewBox]="_viewBox()"
+    [ngClass]="['progress-indeterminate-circle-graphic', color]"
+    xmlns="http://www.w3.org/2000/svg" focusable="false">
+    <circle
+      [attr.r]="_circleRadius()"
+      [style.stroke-dasharray.px]="_strokeCircumference()"
+      [style.stroke-dashoffset.px]="_strokeDashOffset()"
+      [style.stroke-width.%]="_circleStrokeWidth()"
+      class="progress-indeterminate-track"
+      cx="50%" cy="50%"/>
+    <circle
+      [attr.r]="_circleRadius()"
+      [style.stroke-dasharray.px]="_strokeCircumference()"
+      [style.stroke-dashoffset.px]="_strokeCircumference() / 2"
+      [style.stroke-width.%]="_circleStrokeWidth()"
+      cx="50%" cy="50%"/>
+  </svg>
+</ng-template>
+
+<div class="progress-determinate-container" aria-hidden="true" #determinateSpinner>
+  <svg
+    [attr.viewBox]="_viewBox()"
+    [ngClass]="['progress-determinate-circle-graphic', color]"
+    xmlns="http://www.w3.org/2000/svg" focusable="false">
+    <circle
+      [attr.r]="_circleRadius()"
+      [style.stroke-dasharray.px]="_strokeCircumference()"
+      [style.stroke-dashoffset.px]="_strokeDashOffset()"
+      [style.stroke-width.%]="_circleStrokeWidth()"
+      class="progress-determinate-track"
+      cx="50%" cy="50%"/>
+    <circle
+      [attr.r]="_circleRadius()"
+      [style.stroke-dasharray.px]="_strokeCircumference()"
+      [style.stroke-dashoffset.px]="_strokeDashOffset()"
+      [style.stroke-width.%]="_circleStrokeWidth()"
+      class="progress-determinate-circle"
+      cx="50%" cy="50%"/>
+  </svg>
+</div>
+<div class="progress-indeterminate-container" aria-hidden="true">
+  <div class="progress-spinner-layer">
+    <div class="progress-circle-clipper progress-circle-left">
+      <ng-container [ngTemplateOutlet]="circle"></ng-container>
+    </div>
+    <div class="progress-circle-clipper progress-circle-right">
+      <ng-container [ngTemplateOutlet]="circle"></ng-container>
+    </div>
+  </div>
+</div>
+<p [ngClass]="['progress-label','size-'+size, 'mode-'+mode]" *ngIf="showValue">{{ value }}%</p>

package/src/components/progress/spinner/spinner.component.scss

@@ -0,0 +1,225 @@
+@use '@angular/cdk';
+
+.fw-progress-spinner {
+  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
+  display: block;
+
+  // Prevents the spinning of the inner element from affecting layout outside of the spinner.
+  overflow: hidden;
+
+  // Spinners with a diameter less than half the existing line-height will become distorted.
+  // Explicitly set the line-height to 0px to avoid this issue.
+  line-height: 0;
+  position: relative;
+  direction: ltr;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.6, 1);
+
+  &.progress-small {
+    &.progress-show-value {
+      overflow: visible;
+    }
+  }
+}
+
+.progress-determinate-container,
+.progress-indeterminate-circle-graphic,
+.progress-indeterminate-container,
+.progress-spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.progress-determinate-container {
+  transform: rotate(-90deg);
+
+  .progress-indeterminate & {
+    opacity: 0;
+  }
+}
+
+.progress-indeterminate-container {
+  font-size: 0;
+  letter-spacing: 0;
+  white-space: nowrap;
+  opacity: 0;
+
+  .progress-indeterminate & {
+    opacity: 1;
+    animation: progress-container-rotate 1568.2353ms linear infinite;
+  }
+}
+
+.progress-determinate-circle-graphic,
+.progress-indeterminate-circle-graphic {
+  fill: transparent;
+  stroke: var(--primary-base);
+  stroke-linecap: round;
+
+  &.secondary {
+    stroke: var(--secondary-base);
+  }
+
+  &.red {
+    stroke: var(--red-base);
+  }
+
+  &.slate {
+    stroke: var(--slate-base);
+  }
+
+  &.orange {
+    stroke: var(--orange-base);
+  }
+
+  &.green {
+    stroke: var(--green-base);
+  }
+}
+
+.progress-determinate-circle {
+  transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.progress-determinate-track, .progress-indeterminate-track, {
+  fill: transparent;
+  stroke: var(--separations-divider);
+  stroke-dasharray: 100px !important;
+  stroke-dashoffset: 0 !important;
+  transition: none;
+}
+
+.progress-indeterminate-circle-graphic {
+  .progress-gap-patch & {
+    left: -900%;
+    width: 2000%;
+    transform: rotate(180deg);
+  }
+
+  .progress-circle-clipper & {
+    width: 200%;
+  }
+
+  .progress-circle-right & {
+    left: -100%;
+  }
+
+  .progress-indeterminate .progress-circle-left & {
+    animation: progress-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  }
+
+  .progress-indeterminate .progress-circle-right & {
+    animation: progress-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  }
+}
+
+.progress-circle-clipper {
+  display: inline-flex;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.progress-spinner-layer {
+  .progress-indeterminate & {
+    animation: progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  }
+}
+
+.progress-label {
+  margin: 0;
+  font-size: 8px;
+  line-height: 120%;
+  font-weight: 500;
+  width: 24px;
+  color: var(--typography-muted);
+  position: absolute;
+  top: calc(50% - 4px);
+  right: calc(50% - 12px);
+  text-align: center;
+
+  &.size-small {
+    right: -24px;
+  }
+
+  &.size-large {
+    font-size: 12px;
+    top: calc(50% - 6px);
+  }
+
+  &.size-extra-large {
+    font-size: 16px;
+    width: 40px;
+    top: calc(50% - 8px);
+    right: calc(50% - 20px);
+  }
+}
+
+@keyframes progress-container-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress-spinner-layer-rotate {
+  12.5% {
+    transform: rotate(135deg);
+  }
+
+  25% {
+    transform: rotate(270deg);
+  }
+
+  37.5% {
+    transform: rotate(405deg);
+  }
+
+  50% {
+    transform: rotate(540deg);
+  }
+
+  62.5% {
+    transform: rotate(675deg);
+  }
+
+  75% {
+    transform: rotate(810deg);
+  }
+
+  87.5% {
+    transform: rotate(945deg);
+  }
+
+  100% {
+    transform: rotate(1080deg);
+  }
+}
+
+@keyframes progress-left-spin {
+  0% {
+    transform: rotate(260deg);
+  }
+
+  50% {
+    transform: rotate(130deg);
+  }
+
+  100% {
+    transform: rotate(260deg);
+  }
+}
+
+@keyframes progress-right-spin {
+  0% {
+    transform: rotate(-260deg);
+  }
+
+  50% {
+    transform: rotate(-130deg);
+  }
+
+  100% {
+    transform: rotate(-260deg);
+  }
+}

package/src/components/progress/spinner/spinner.component.spec.ts

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

package/src/components/progress/spinner/spinner.component.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+
+/** Based on [mat-progress-spinner](https://material.angular.io/components/progress-spinner/) */
+@Component({
+  selector: 'fw-progress-spinner',
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: {
+    'role': 'progressbar',
+    'class': 'fw-progress-spinner',
+    'tabindex': '-1',
+    '[class.progress-indeterminate]': 'mode === "indeterminate"',
+    '[class.progress-small]': 'size === "small"',
+    '[class.progress-show-value]': 'this.showValue',
+    '[style.width.px]': 'diameter',
+    '[style.height.px]': 'diameter',
+    // '[style.--progress-size]': 'diameter + "px"',
+    // '[style.--progress-active-indicator-width]': 'diameter + "px"',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': '100',
+    '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
+    '[attr.mode]': 'mode',
+  },
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class FwProgressSpinnerComponent {
+  /** The element of the determinate spinner. */
+  @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
+
+  constructor(
+    readonly _elementRef: ElementRef<HTMLElement>,
+  ) {
+  }
+
+  /** Mode of the progress spinner. **/
+  @Input() mode: 'determinate' | 'indeterminate' = 'indeterminate';
+
+  /** Size of the progress spinner. **/
+  @Input() size: 'small' | 'medium' = 'medium';
+
+  /** Color of the progress spinner. **/
+  @Input() color?: 'primary' | 'secondary' | 'red' | 'slate' | 'orange' | 'green' = 'primary';
+
+  /** Whether to show the value percentage label on the progress spinner. **/
+  @Input() showValue: boolean = false;
+
+  /** Value of the progress spinner. Defaults to zero. Mirrored to aria-valuenow. **/
+  @Input()
+  get value(): number {
+    // return this.mode === 'determinate' ? this._value : 0;
+    return this._value;
+  }
+
+  set value(v: number) {
+    this._value = Math.max(0, Math.min(100, v || 0));
+  }
+
+  private _value: number = 0;
+  private _diameter = 20;
+  private _strokeWidth: number = 3;
+
+  /** The diameter of the progress spinner (will set width and height of svg). */
+  get diameter(): number {
+    switch (this.size) {
+      case 'small':
+        this._diameter = 20;
+        this._strokeWidth = 3;
+        break;
+      case 'medium':
+        this._diameter = 36;
+        this._strokeWidth = 4;
+        break;
+    }
+    return this._diameter;
+  }
+
+  /** The radius of the spinner, adjusted for stroke width. */
+  _circleRadius(): number {
+    return (this.diameter - 10) / 2;
+  }
+
+  /** The view box of the spinner's svg element. */
+  _viewBox(): string {
+    const viewBox = this._circleRadius() * 2 + this._strokeWidth;
+    return `0 0 ${viewBox} ${viewBox}`;
+  }
+
+  /** The stroke circumference of the svg circle. */
+  _strokeCircumference(): number {
+    return 2 * Math.PI * this._circleRadius();
+  }
+
+  /** The dash offset of the svg circle. */
+  _strokeDashOffset(): number {
+    if (this.mode === 'determinate') {
+      return (this._strokeCircumference() * (100 - this._value)) / 100;
+    }
+    return null;
+  }
+
+  /** Stroke width of the circle in percent. */
+  _circleStrokeWidth(): number {
+    return (this._strokeWidth / this.diameter) * 100;
+  }
+}

package/src/components/progress/spinner/spinner.mdx

@@ -0,0 +1,21 @@
+{/* DocumentationTemplate.mdx */}
+
+
+
+
+
+import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+import * as ProgressSpinnerStories from './spinner.stories.ts';
+
+<Meta of={ProgressSpinnerStories}/>
+
+<Title/>
+ ```ts
+    import FwProgressModule from '@flywheel-io/vision';
+    ```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>

package/src/components/progress/spinner/spinner.stories.ts

@@ -0,0 +1,70 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwProgressModule } from '../progress.module';
+import { FwProgressSpinnerComponent } from './spinner.component';
+
+export default {
+  title: 'Components/Progress Spinner',
+  component: FwProgressSpinnerComponent,
+  parameters: {
+    controls: {
+      exclude: ['renderClass', 'ngOnChanges', 'badgeStyle'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH?type=design%27&node-id=5:27',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, FwProgressModule],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwProgressSpinnerComponent>;
+
+export const ProgressSpinner: Story = {
+  args: {
+    mode: 'indeterminate',
+    size: 'medium',
+    value: 0,
+    showValue: false,
+  },
+};
+
+export const Determinate: Story = {
+  args: {
+    mode: 'determinate',
+    size: 'medium',
+    value: 80,
+    showValue: true,
+  },
+};
+
+export const Variations: Story = {
+  args: {},
+  render: (args) => {
+    return ({
+      props: args,
+      controls: { disabled: false },
+      template: `
+       <div style="width: 400px; display: grid; gap: 36px; grid-template-columns: 1fr 1fr 1fr 1fr">
+            <fw-progress-spinner mode="determinate" value="80" [showValue]="true" size="small"></fw-progress-spinner>
+            <fw-progress-spinner mode="determinate" value="80" [showValue]="true" size="medium"></fw-progress-spinner>
+
+            <fw-progress-spinner mode="determinate" value="80" size="small"></fw-progress-spinner>
+            <fw-progress-spinner mode="determinate" value="80" size="medium"></fw-progress-spinner>
+
+            <fw-progress-spinner size="small"></fw-progress-spinner>
+            <fw-progress-spinner size="medium"></fw-progress-spinner>
+
+            <fw-progress-spinner size="small" value="80" [showValue]="true"></fw-progress-spinner>
+            <fw-progress-spinner size="medium" value="80" [showValue]="true"></fw-progress-spinner>
+       </div>
+    `,
+    });
+  },
+};

package/src/components/radio/radio-group.component.ts

@@ -0,0 +1,124 @@
+import {
+    AfterContentInit,
+    Component,
+    ContentChildren,
+    EventEmitter,
+    HostBinding,
+    Input,
+    OnChanges,
+    OnDestroy,
+    Output,
+    QueryList,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { Subscription } from 'rxjs';
+
+import { FwRadioComponent } from './radio.component';
+
+@Component({
+    selector: 'fw-radio-group',
+    styleUrls: [],
+    template: '<ng-content select="fw-radio-button"></ng-content>',
+    providers: [{
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: FwRadioGroupComponent,
+        multi: true,
+    }],
+})
+export class FwRadioGroupComponent implements ControlValueAccessor, OnChanges, OnDestroy, AfterContentInit {
+    @Input() value: string;
+    @Input() group: string;
+    @Input() color?: 'primary' | 'secondary' | 'default';
+    @Input() size?: 'medium' | 'compact';
+    @Input() disabled?: boolean;
+    @Input() direction?: 'horizontal' | 'vertical' = 'horizontal';
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    @Output() change = new EventEmitter<string>();
+    @ContentChildren(FwRadioComponent) radioButtons: QueryList<FwRadioComponent>;
+
+    @HostBinding('style') get style(): SafeStyle {
+        let direction: string = 'row';
+        if (this.direction === 'vertical') {
+            direction = 'column';
+        }
+        return this.sanitizer.bypassSecurityTrustStyle(`
+      display: flex;
+      flex-direction: ${direction};
+  `);
+    }
+
+    private subscriptions: Subscription[] = [];
+
+    constructor(private sanitizer: DomSanitizer) {
+    }
+
+
+    ngOnChanges(): void {
+        this.updateLayout();
+    }
+
+    ngOnDestroy(): void {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
+    }
+
+    ngAfterContentInit(): void {
+        if (this.radioButtons) {
+            this.radioButtons.forEach(rb => {
+                const sub = rb.change.subscribe((value: string) => this.handleChange(value));
+                this.subscriptions.push(sub);
+            });
+        }
+        this.updateLayout();
+    }
+
+    updateLayout(): void {
+        if (this.radioButtons) {
+            this.radioButtons.forEach(rb => {
+                rb.group = this.group;
+                rb.checked = rb.value === this.value;
+                if (this.color) {
+                    rb.color = this.color;
+                }
+                if (this.size) {
+                    rb.size = this.size;
+                }
+                if (this.disabled !== undefined) {
+                    rb.disabled = this.disabled;
+                }
+            });
+        }
+    }
+
+    public onTouch = (): void => {
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public onChange = (value: string): void => {
+    };
+
+    writeValue(value: string): void {
+        this.value = value;
+    }
+
+    // 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;
+    }
+
+    handleChange(value: string): void {
+        this.value = value;
+        this.onChange(value);
+        this.change.emit(this.value);
+    }
+}