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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-{/* 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

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

@@ -1,124 +0,0 @@
-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);
-    }
-}