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

package/src/components/popover/popover.stories.ts

@@ -1,176 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAppIconModule } from '../app-icon/app-icon.module';
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwLayoutsModule } from '../layouts/layouts.module';
-import { FwMenuModule } from '../menu/menu.module';
-import { FwPopoverComponent } from './popover.component';
-import { FwPopoverModule } from './popover.module';
-
-const meta: Meta = {
-  title: 'Components/Popover',
-  component: FwPopoverComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=2649%3A84177&mode=dev',
-    },
-  },
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAppIconModule,
-        FwButtonModule,
-        FwPopoverModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-        FwMenuModule,
-        FwAvatarModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwPopoverComponent>;
-
-export const Popover: Story = {
-  args: {
-    isOpen: false,
-    position: 'above',
-    action: 'mouseenter',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
-            <fw-popover [trigger]="trigger" [position]="position" [action]="action" [isOpen]="isOpen">
-                <fw-layout-context
-                  iconColor="secondary" icon="apply-copy-duplicate"
-                  title="Swap this Component"
-                  description="This is just a placeholder component.">
-                </fw-layout-context>
-            </fw-popover>
-
-            <button #trigger>
-                open popover
-            </button>
-        </div>
-        `,
-  }),
-};
-
-export const PopoverExamples: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex; align-items: flex-end; min-height: 400px; flex: 1;">
-            <div style="display: flex; justify-content: center; align-items: center; flex: 1; gap: 16px">
-
-              <div>
-                <fw-popover [trigger]="menuTrigger" position="below">
-                  <fw-menu-container showFilter="true" border="none" shadow="none">
-                    <fw-menu>
-                      <fw-menu-item title="Jane Doe" description="name@email.io">
-                        <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                        </fw-avatar>
-                      </fw-menu-item>
-                      <fw-menu-item title="Jane Doe" description="name@email.io" selected="true">
-                        <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                        </fw-avatar>
-                      </fw-menu-item>
-                      <fw-menu-item title="Jane Doe" description="name@email.io">
-                        <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                        </fw-avatar>
-                      </fw-menu-item>
-                      <fw-menu-item title="Jane Doe" description="name@email.io">
-                        <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                        </fw-avatar>
-                      </fw-menu-item>
-                    </fw-menu>
-                  </fw-menu-container>
-                </fw-popover>
-
-                <div #menuTrigger>
-                  <fw-menu-item title="Jane Doe">
-                      <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                      </fw-avatar>
-                  </fw-menu-item>
-                </div>
-              </div>
-
-               <div>
-                <fw-popover [trigger]="iconTrigger">
-                    <div style="padding: 16px; gap: 16px; display: flex; flex-direction: column">
-                        <h4 style="margin: 0;">This project is unlocked</h4>
-                        <fw-button variant="outline" color="primary" fullWidth="true">
-                            Change in Settings
-                        </fw-button>
-                    </div>
-                </fw-popover>
-
-                <div #iconTrigger>
-                <fw-icon style="font-size: 32px">
-                    setting-gear
-                </fw-icon>
-                </div>
-              </div>
-
-              <div>
-                <fw-popover [trigger]="buttonTrigger" action="click" position="above-right">
-                    <div style="padding: 8px">
-                      <fw-menu-item title="Jane Doe" description="janedoe@flywheel.io">
-                        <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                        </fw-avatar>
-                      </fw-menu-item>
-                      <fw-menu-item title="Large Compute" description="8 CPU, 32GB RAM, 1 GPU" icon="setting-gear" focused="true">
-                      </fw-menu-item>
-                    </div>
-                </fw-popover>
-
-                <div #buttonTrigger>
-                  <fw-button color="primary" variant="solid">
-                      Click for Details
-                  </fw-button>
-                </div>
-              </div>
-
-               <div>
-                <fw-popover [trigger]="iconButtonTrigger" action="click" position="right">
-                  <div style="margin: 12px; width:fit-content; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
-                    <fw-app-icon icon="flywheel-mark-logo" size="medium" variant="focused" color="light" title="Core" [animated]="true"></fw-app-icon>
-                    <fw-app-icon icon="server-databases-connect" size="medium" title="Exchange" badge="1" [animated]="true"></fw-app-icon>
-                    <fw-app-icon icon="user-profile-group-discovery" size="medium" title="Discovery" variant="static" [locked]="true"></fw-app-icon>
-                    <fw-app-icon icon="folder-group" size="medium" title="My Data" [animated]="true"></fw-app-icon>
-                    <fw-app-icon icon="setting-gear" size="medium" title="Admin" [animated]="true"></fw-app-icon>
-                    <fw-app-icon icon="add-new-create" size="medium" title="Add Apps" [animated]="true"></fw-app-icon>
-                  </div>
-                </fw-popover>
-
-                <div #iconButtonTrigger>
-                    <fw-icon-button icon="grid-layout"></fw-icon-button>
-                </div>
-              </div>
-
-            </div>
-        </div>
-        `,
-  }),
-};

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

@@ -1,18 +0,0 @@
-<div class="progress-wrapper">
-  <div class="progress-buffer" aria-hidden="true">
-    <div
-      class="progress-buffer-bar"
-      [style.flex-basis]="_getBufferBarFlexBasis()"></div>
-    <div class="progress-buffer-dots" *ngIf="mode === 'buffer'"></div>
-  </div>
-  <div
-    class="progress-bar progress-primary-bar"
-    aria-hidden="true"
-    [style.transform]="_getPrimaryBarTransform()">
-    <span class="progress-bar-inner {{color}}"></span>
-  </div>
-  <div class="progress-bar progress-secondary-bar" aria-hidden="true">
-    <span class="progress-bar-inner {{color}}"></span>
-  </div>
-</div>
-<p [ngClass]="['progress-label', 'mode-'+mode]" *ngIf="showValue">{{ value }}%</p>

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

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

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

@@ -1,98 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-
-/** Based on [mat-progress-bar](https://material.angular.io/components/progress-bar/) */
-@Component({
-  selector: 'fw-progress-bar',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    'role': 'progressbar',
-    'class': 'fw-progress-bar progress progress-animation-ready',
-    'tabindex': '-1',
-    '[class.progress-indeterminate]': 'mode === "indeterminate"',
-    '[class.progress-show-value]': 'this.showValue',
-    '[attr.aria-valuemin]': '0',
-    '[attr.aria-valuemax]': '100',
-    '[attr.aria-valuenow]': '_isIndeterminate() ? null : value',
-    '[attr.mode]': 'mode',
-  },
-  templateUrl: './bar.component.html',
-  styleUrls: ['./bar.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwProgressBarComponent {
-  /** The element of the determinate spinner. */
-  @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
-
-  constructor(
-    readonly _elementRef: ElementRef<HTMLElement>,
-    private _changeDetectorRef: ChangeDetectorRef,
-  ) {
-  }
-
-  /** Mode of the progress bar. **/
-  @Input() mode: 'determinate' | 'indeterminate' | 'buffer' = 'indeterminate';
-
-  /** Color of the progress bar. **/
-  @Input() color: 'primary' | 'secondary' | 'orange' | 'red' | 'green' = 'primary';
-
-  /** Whether to show the value percentage label on the progress bar. **/
-  @Input() showValue: boolean = false;
-
-  /** Value of the progress bar. 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 = clamp(v || 0);
-    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
-    this._changeDetectorRef.markForCheck();
-  }
-
-  private _value: number = 0;
-
-  /** Buffer value of the progress bar. Defaults to zero. */
-  @Input()
-  get bufferValue(): number {
-    return this._bufferValue || 0;
-  }
-
-  set bufferValue(v: number) {
-    this._bufferValue = clamp(v || 0);
-    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
-    this._changeDetectorRef.markForCheck();
-  }
-
-  private _bufferValue = 0;
-
-  /** Gets the transform style that should be applied to the primary bar. */
-  _getPrimaryBarTransform(): string {
-    return `scaleX(${this._isIndeterminate() ? 1 : this.value / 100})`;
-  }
-
-  /** Gets the `flex-basis` value that should be applied to the buffer bar. */
-  _getBufferBarFlexBasis(): string {
-    return `${this.mode === 'buffer' ? this.bufferValue : 100}%`;
-  }
-
-  /** Returns whether the progress bar is indeterminate. */
-  _isIndeterminate(): boolean {
-    return this.mode === 'indeterminate';
-  }
-}
-
-/** Clamps a value to be between two numbers, by default 0 and 100. */
-function clamp(v: number, min = 0, max = 100): number {
-  return Math.max(min, Math.min(max, v));
-}

package/src/components/progress/bar/bar.mdx

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

package/src/components/progress/bar/bar.scss

@@ -1,313 +0,0 @@
-@use '@angular/cdk';
-
-.fw-progress-bar {
-  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
-  display: block;
-
-  // Explicitly set a `text-align` so that the content isn't affected by the parent (see #27613).
-  text-align: start;
-
-  // Inverts the progress bar horizontally in `query` mode.
-  &[mode='query'] {
-    transform: scaleX(-1);
-  }
-}
-
-.progress {
-  position: relative;
-  width: 100%;
-
-  &.progress-show-value {
-    display: flex;
-    align-items: center;
-    height: 14px;
-
-    .progress-label {
-      font-size: 12px;
-      color: var(--typography-muted);
-      margin: 0 0 0 8px;
-    }
-  }
-}
-
-.progress-wrapper {
-  position: relative;
-  width: 100%;
-  transform: translateZ(0);
-  outline: 1px solid transparent;
-  overflow-x: hidden;
-  transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  height: 4px;
-  border-radius: 4px;
-}
-
-.progress-bar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  width: 100%;
-  animation: none;
-  transform-origin: top left;
-  transition: transform 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-
-  .progress-indeterminate & {
-    transition: none;
-  }
-
-  [dir='rtl'] & {
-    right: 0;
-    transform-origin: center right;
-  }
-}
-
-.progress-bar-inner {
-  display: inline-block;
-  position: absolute;
-  width: 100%;
-  animation: none;
-  border-top-style: solid;
-  border-top-width: 4px;
-  border-radius: 4px;
-
-  &.primary {
-    border-color: var(--primary-base);
-  }
-
-  &.secondary {
-    border-color: var(--secondary-base);
-  }
-
-  &.orange {
-    border-color: var(--orange-base);
-  }
-
-  &.red {
-    border-color: var(--red-base);
-  }
-
-  &.green {
-    border-color: var(--green-base);
-  }
-}
-
-.progress-buffer {
-  display: flex;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  width: 100%;
-  overflow: hidden;
-  height: 4px;
-  border-radius: 4px;
-}
-
-.progress-buffer-dots {
-  $mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 10 4' xml:space='preserve' viewBox='0 0 10 4' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/svg%3E";
-
-  mask-image: url($mask);
-  background-repeat: repeat-x;
-  flex: auto;
-  transform: rotate(180deg);
-  animation: progress-buffering 250ms infinite linear;
-  background-color: var(--separations-divider);
-
-  [dir='rtl'] & {
-    animation: progress-buffering-reverse 250ms infinite linear;
-    transform: rotate(0);
-  }
-}
-
-.progress-buffer-bar {
-  flex: 0 1 100%;
-  transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  background-color: var(--separations-divider);
-  border-radius: 4px;
-}
-
-.progress-primary-bar {
-  transform: scaleX(0);
-
-  .progress-indeterminate & {
-    left: -145.1666%;
-  }
-
-  .progress-indeterminate.progress-animation-ready & {
-    animation: progress-primary-indeterminate-translate 2s infinite linear;
-
-    > .progress-bar-inner {
-      animation: progress-primary-indeterminate-scale 2s infinite linear;
-    }
-  }
-
-  [dir='rtl'] .progress.progress-animation-ready & {
-    animation-name: progress-primary-indeterminate-translate-reverse;
-  }
-
-  [dir='rtl'] .progress.progress-indeterminate & {
-    right: -145.1666%;
-    left: auto;
-  }
-}
-
-.progress-secondary-bar {
-  display: none;
-
-  .progress-indeterminate & {
-    left: -54.8889%;
-    display: block;
-  }
-
-  .progress-indeterminate.progress-animation-ready & {
-    animation: progress-secondary-indeterminate-translate 2s infinite linear;
-
-    > .progress-bar-inner {
-      animation: progress-secondary-indeterminate-scale 2s infinite linear;
-    }
-  }
-
-  [dir='rtl'] .progress.progress-animation-ready & {
-    animation-name: progress-secondary-indeterminate-translate-reverse;
-  }
-
-  [dir='rtl'] .progress.progress-indeterminate & {
-    right: -54.8889%;
-    left: auto;
-  }
-}
-
-@keyframes progress-buffering {
-  from {
-    transform: rotate(180deg) translateX(-10px);
-  }
-}
-
-@keyframes progress-primary-indeterminate-translate {
-  0% {
-    transform: translateX(0);
-  }
-
-  20% {
-    animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
-    transform: translateX(0);
-  }
-
-  59.15% {
-    animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);
-    transform: translateX(83.6714%);
-  }
-
-  100% {
-    transform: translateX(200.6110%);
-  }
-}
-
-@keyframes progress-primary-indeterminate-scale {
-  0% {
-    transform: scaleX(0.08);
-  }
-
-  36.65% {
-    animation-timing-function: cubic-bezier(0.3347, 0.1248, 0.7858, 1);
-    transform: scaleX(0.08);
-  }
-
-  69.15% {
-    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-    transform: scaleX(0.6614);
-  }
-
-  100% {
-    transform: scaleX(0.08);
-  }
-}
-
-@keyframes progress-secondary-indeterminate-translate {
-  0% {
-    animation-timing-function: cubic-bezier(0.15, 0, 0.5150, 0.4096);
-    transform: translateX(0);
-  }
-
-  25% {
-    animation-timing-function: cubic-bezier(0.310, 0.2840, 0.8, 0.7337);
-    transform: translateX(37.6519%);
-  }
-
-  48.35% {
-    animation-timing-function: cubic-bezier(0.4, 0.6270, 0.6, 0.9020);
-    transform: translateX(84.3862%);
-  }
-
-  100% {
-    transform: translateX(160.2778%);
-  }
-}
-
-@keyframes progress-secondary-indeterminate-scale {
-  0% {
-    animation-timing-function: cubic-bezier(0.2050, 0.0571, 0.5766, 0.4539);
-    transform: scaleX(0.08);
-  }
-
-  19.15% {
-    animation-timing-function: cubic-bezier(0.1523, 0.1964, 0.6483, 1.0043);
-    transform: scaleX(0.4571);
-  }
-
-  44.15% {
-    animation-timing-function: cubic-bezier(0.2578, -0.0032, 0.2118, 1.3818);
-    transform: scaleX(0.7279);
-  }
-
-  100% {
-    transform: scaleX(0.08);
-  }
-}
-
-@keyframes progress-primary-indeterminate-translate-reverse {
-  0% {
-    transform: translateX(0);
-  }
-
-  20% {
-    animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
-    transform: translateX(0);
-  }
-
-  59.15% {
-    animation-timing-function: cubic-bezier(0.3024, 0.3814, 0.55, 0.9563);
-    transform: translateX(-83.6714%);
-  }
-
-  100% {
-    transform: translateX(-200.6110%);
-  }
-}
-
-@keyframes progress-secondary-indeterminate-translate-reverse {
-  0% {
-    animation-timing-function: cubic-bezier(0.15, 0, 0.5150, 0.4096);
-    transform: translateX(0);
-  }
-
-  25% {
-    animation-timing-function: cubic-bezier(0.3103, 0.2840, 0.8, 0.7337);
-    transform: translateX(-37.6519%);
-  }
-
-  48.35% {
-    animation-timing-function: cubic-bezier(0.4, 0.6270, 0.6, 0.9020);
-    transform: translateX(-84.3861%);
-  }
-
-  100% {
-    transform: translateX(-160.2778%);
-  }
-}
-
-@keyframes progress-buffering-reverse {
-  from {
-    transform: translateX(-10px);
-  }
-}