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

package/src/components/tooltip/tooltip.stories.ts

@@ -1,111 +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 { FwMenuModule } from '../menu/menu.module';
-import { FwPopoverModule } from '../popover/popover.module';
-import { FwTooltipComponent } from './tooltip.component';
-import { FwTooltipModule } from './tooltip.module';
-
-const meta: Meta = {
-  title: 'Components/Tooltip',
-  component: FwTooltipComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73659&mode=dev',
-    },
-  },
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAppIconModule,
-        FwButtonModule,
-        FwPopoverModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwMenuModule,
-        FwAvatarModule,
-        FwTooltipModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwTooltipComponent>;
-
-export const Tooltip: Story = {
-  args: {
-    title: 'My Tooltip',
-    color: 'light',
-    position: 'above',
-    maxWidth: 444,
-    isOpen: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="padding: 30px; display: flex; justify-content: center">
-          <fw-tooltip [title]="title" [color]="color" [position]="position" [maxWidth]="maxWidth" [isOpen]="isOpen">
-            <button>some item</button>
-          </fw-tooltip>
-        </div>
-      `,
-  }),
-};
-
-export const TooltipExamples: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex; align-items: center; min-height: 100px; flex: 1; gap: 16px">
-                <fw-tooltip title="Jane Doe">
-                  <fw-menu-item title="Jane Doe">
-                      <fw-avatar variant="circular" content="initial" initial="JD" size="medium">
-                      </fw-avatar>
-                  </fw-menu-item>
-                </fw-tooltip>
-
-                <fw-tooltip title="Locked Project" position="below">
-                  <fw-icon-button icon="setting-gear">
-                  </fw-icon-button>
-                </fw-tooltip>
-
-
-                <fw-tooltip title="This button is magic" position="none" color="dark">
-                  <fw-button color="primary" variant="solid">
-                      Magic Button
-                  </fw-button>
-                </fw-tooltip>
-
-                <fw-tooltip title="unwieldly_class_text_max_width_300: lorem.impsum._dolor.consecteturadipiscingelitseddoeiusmodtemporincididunt ut labore et doloremagnaaliqua. " maxWidth="300" position="below">
-                  <fw-button variant="outline">
-                      Unwieldy Text
-                  </fw-button>
-                </fw-tooltip>
-
-
-                <fw-tooltip title="This tooltip has more content to show how we only support a max of 200px on a tooltip until the text wraps." position="right">
-                    <fw-icon-button icon="grid-layout"></fw-icon-button>
-                </fw-tooltip>
-        </div>
-        `,
-  }),
-};

package/src/components/typography-sample/typography-sample.component.html

@@ -1,25 +0,0 @@
-<div>
-  <h1 class="vision-h1">Heading 1</h1>
-  <p class="vision-p1">Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
-    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
-    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
-  <h2 class="vision-h2">Heading 2</h2>
-  <p class="vision-p2">Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
-    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
-    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
-  <h3 class="vision-h3">Heading 3</h3>
-  <p class="vision-p3">Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
-    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
-    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
-  <h4 class="vision-h4">Heading 4</h4>
-  <p class="vision-p4">Paragraph 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bibendum odio pellentesque
-    pellentesque arcu ut ut tortor turpis. Bibendum duis duis ipsum sapien orci aenean lectus magna. Integer elementum
-    consectetur ac at. Aliquet pellentesque dolor at magna nibh.</p>
-  <h5 class="vision-h5">Heading 5</h5>
-  <h2 class="vision-h2">Hyperlinks</h2>
-  <p class="vision-p2">
-    This is a standard <a href="http://flywheel.io" target="_blank" class="vision-link">vision-link</a>,
-    a <a href="http://flywheel.io" target="_blank" class="vision-link-inherited">vision-link-inherited</a>,
-    and a <a href="http://flywheel.io" target="_blank" class="vision-link-no-visited">vision-link-no-visited</a>
-  </p>
-</div>

package/src/components/typography-sample/typography-sample.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'fw-typography',
-  templateUrl: './typography-sample.component.html',
-})
-export class TypographySampleComponent {
-  
-  constructor() { }
-}

package/src/components/typography-sample/typography-sample.module.ts

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { TypographySampleComponent } from './typography-sample.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  declarations: [
-    TypographySampleComponent,
-  ],
-  exports: [
-    TypographySampleComponent,
-  ],
-})
-export class TypographySampleModule {}

package/src/components/typography-sample/typography-sample.stories.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { TypographySampleComponent } from './typography-sample.component';
-import { TypographySampleModule } from './typography-sample.module';
-
-const meta: Meta<TypographySampleComponent> = {
-  title: 'Tokens/Typography',
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=1649-60060&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  argTypes: {},
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        TypographySampleModule,
-      ],
-    }),
-  ],
-};
-
-export default meta;
-export const Overview: StoryObj<TypographySampleModule> = {
-  args: {},
-  render: () => ({
-    template: `
-      <fw-typography></fw-typography>
-    `,
-  }),
-};

package/src/components/typography-sample/typography.mdx

@@ -1,41 +0,0 @@
-import {Meta, Story} from '@storybook/addon-docs';
-import * as TypographyStories from './typography-sample.stories'
-
-<Meta title="Docs/Typography" name="MDX"/>
-
-# Typography
-
-Typography falls into two categories in vision, heading and paragraph.
-These categories are additionally further divided by number, 1-5 for headings and 1-4 for paragraphs. Examples of these styles below.
-
-<Story of={TypographyStories.Overview}></Story>
-
-
-## Installation
-
-By importing vision you will automatically have typography mixins and classes available
-
-You can **additionally** register typography styles in the global scope by adding the following to your global stylesheet.
-
-```css
-@use '@flywheel-io/vision' as vision;
-@include vision.global-typography;
-```
-
-When adding the global styles the `<p>` tag is defaulted to the `vision-p2` typography styles, `<h1>`-`<h5>` are set to `vision-h1`-`vision-h5` respectively, and the `<a>` to `link`.
-
-## Usage
-
-The mixins can be used as such, they are just named after their tag "h1, p1, etc..."
-```css
-@include h1;
-@include p2;
-@include link;
-```
-
-the classes are named `vision-tag` and can be used as such
-```html
-<div class="vision-h1"></div>
-<p class="vision-p2"></p>
-<a class="vision-link"></a>
-```

package/src/components/wrapped-input/wrapped-input.component.html

@@ -1,10 +0,0 @@
-<label>
-  <fw-form-heading *ngIf="title" [title]="title" [description]="description"></fw-form-heading>
-  <ng-content select="fw-form-heading"></ng-content>
-</label>
-<div class="input-wrapper">
-  <ng-content
-    select="fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox"></ng-content>
-</div>
-<p class="vision-p4 helper-text" *ngIf="!!helperText && !errorText">{{ helperText }}</p>
-<p class="vision-p4 error-text" *ngIf="!!errorText">{{ errorText }}</p>

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

@@ -1,32 +0,0 @@
-.fw-wrapped-input {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .input-wrapper {
-    max-width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    gap: 16px;
-
-    > * {
-      flex: 1;
-    }
-  }
-
-  .helper-text {
-    margin-top: 4px;
-    color: var(--typography-light);
-    line-height: 13px;
-    margin-left: 6px;
-    margin-bottom: 0;
-    text-align: left;
-  }
-
-  .error-text {
-    @extend .helper-text;
-
-    color: var(--red-base);
-  }
-}

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

@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwCheckboxModule } from '../checkbox/checkbox.module';
-import { FwSwitchModule } from '../switch/switch.module';
-import { FwWrappedInputComponent } from './wrapped-input.component';
-
-describe('FwWrappedInputComponent', () => {
-  let component: FwWrappedInputComponent;
-  let fixture: ComponentFixture<FwWrappedInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        FwSwitchModule,
-        FwCheckboxModule,
-        FwAvatarModule,
-      ],
-      declarations: [
-        FwWrappedInputComponent,
-      ],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FwWrappedInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,18 +0,0 @@
-import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-wrapped-input',
-  templateUrl: './wrapped-input.component.html',
-  styleUrls: ['./wrapped-input.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwWrappedInputComponent {
-  @Input() title: string;
-  @Input() description?: string;
-  @Input() helperText?: string;
-  @Input() errorText?: string;
-
-  @HostBinding('class.fw-wrapped-input') class = true;
-}
-
-

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

@@ -1,26 +0,0 @@
-import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
-
-import * as WrappedInputStories from './wrapped-input.stories';
-
-<Meta of={WrappedInputStories}/>
-<Title/>
-
-```ts
-import FwWappedInputModule from '@flywheel-io/vision';
-```
-
-## Basic Usage
-
-This component creates a simple wrap of **input** type form controls with a [Form Heading](/docs/form-controls-form-heading--docs).
-For Switch and Checkbox please use a [Contained Input](/docs/form-controls-contained-input--docs)
-```html
-<fw-wrapped-input title="Title" description="Lorem ipsum dolor sit amet consectetur.">
-  <fw-text-input placeholder="Text Input"></fw-text-input>
-</fw-wrapped-input>
-```
-
-<Subtitle/>
-<Description/>
-<Primary/>
-<Controls/>
-<Stories/>

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

@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwFormHeadingModule } from '../form-heading/form-heading.module';
-import { FwWrappedInputComponent } from './wrapped-input.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwFormHeadingModule,
-  ],
-  exports: [
-    FwWrappedInputComponent,
-  ],
-  declarations: [
-    FwWrappedInputComponent,
-  ],
-})
-export class FwWrappedInputModule {
-}

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

@@ -1,195 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } 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 { FwButtonToggleModule } from '../button-toggle/button-toggle.module';
-import { FwChipModule } from '../chip/chip.module';
-import { FwDateInputModule } from '../date-input/date-input.module';
-import { FwFormHeadingModule } from '../form-heading/form-heading.module';
-import { FwValidators } from '../forms/validators';
-import { FwIconModule } from '../icon/icon.module';
-import { FwLayoutsModule } from '../layouts/layouts.module';
-import { FwMenuModule } from '../menu/menu.module';
-import { FwPhoneInputModule } from '../phone-input/phone-input.module';
-import { FwSelectMenuModule } from '../select-menu/select-menu.module';
-import { FwSwitchModule } from '../switch/switch.module';
-import { FwTextInputModule } from '../text-input/text-input.module';
-import { FwTextAreaInputModule } from '../textarea-input/textarea-input.module';
-import { FwTooltipModule } from '../tooltip/tooltip.module';
-import { FwWrappedInputComponent } from './wrapped-input.component';
-
-
-export default {
-  title: 'Form Controls/Wrapped Input',
-  component: FwWrappedInputComponent,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=11206-25402&m=dev',
-    },
-  },
-  argTypes: {},
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FormsModule,
-        FwButtonToggleModule,
-        FwChipModule,
-        FwDateInputModule,
-        FwFormHeadingModule,
-        FwIconModule,
-        FwLayoutsModule,
-        FwMenuModule,
-        FwPhoneInputModule,
-        FwSelectMenuModule,
-        FwSwitchModule,
-        FwTextAreaInputModule,
-        FwTextInputModule,
-        FwTooltipModule,
-        OverlayModule,
-        ReactiveFormsModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-      ],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwWrappedInputComponent>;
-
-export const Overview: Story = {
-  args: {
-    title: 'Title',
-    description: 'Lorem ipsum dolor sit amet consectetur.',
-    helperText: 'A simple place to maybe add instructions or relevant information.',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <fw-wrapped-input [title]="title" [description]="description" [helperText]="helperText" [errorText]="errorText">
-        <fw-text-input placeholder="Text Input"></fw-text-input>
-      </fw-wrapped-input>
-  `,
-  }),
-};
-
-export const Errored: Story = {
-  args: {
-    title: 'Title',
-    errorText: 'Something went wrong.',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <fw-wrapped-input [title]="title" [description]="description" [helperText]="helperText" [errorText]="errorText">
-        <fw-text-input placeholder="Text Input" error="true"></fw-text-input>
-      </fw-wrapped-input>
-  `,
-  }),
-};
-
-export const Variations: Story = {
-  args: {
-    title: 'Full Name',
-    description: 'include both your first and last name',
-  },
-  render: (args) => {
-    const formGroup = new FormGroup({
-      firstName: new FormControl('James', Validators.required),
-      lastName: new FormControl('Holden', Validators.required),
-      phone: new FormControl('+18005551212', [FwValidators.phone]),
-      birthdate: new FormControl('1901-01-01', Validators.required),
-      contactType: new FormControl('personal', Validators.required),
-      tags: new FormControl(['Data Manager'], Validators.required),
-      notes: new FormControl('', Validators.required),
-    });
-    formGroup['toJSON'] = () => null;
-    const tagOptions = [
-      { value: 'Contributor', title: 'Contributor' },
-      { value: 'Data Manager', title: 'Data Manager' },
-      { value: 'Data Scientist', title: 'Data Scientist' },
-      { value: 'ML Engineer', title: 'ML Engineer' },
-      { value: 'Principle Investigator', title: 'Principle Investigator' },
-      { value: 'Radiologist', title: 'Radiologist' },
-      { value: 'Research Coordinator', title: 'Research Coordinator' },
-      { value: 'Site Administrator', title: 'Site Administrator, IT' },
-      { value: 'Other', title: 'Other' },
-    ];
-    return ({
-      props: {
-        ...args,
-        form: formGroup,
-        tagOptions: tagOptions,
-      },
-      controls: { disabled: true },
-      template: `
-        <form [formGroup]="form">
-          <fw-grid>
-            <fw-grid-item [cols]="12">
-              <fw-wrapped-input [title]="title" [description]="description">
-                <fw-text-input placeholder="First" formControlName="firstName"></fw-text-input>
-                <fw-text-input placeholder="Last" formControlName="lastName"></fw-text-input>
-              </fw-wrapped-input>
-            </fw-grid-item>
-            <fw-grid-item [cols]="6">
-              <fw-wrapped-input helperText="Primary">
-                <fw-form-heading title="Phone">
-                    <fw-chip title="Work"></fw-chip>
-                </fw-form-heading>
-                <fw-phone-input [placeholder]="'Phone Number'" formControlName="phone"></fw-phone-input>
-              </fw-wrapped-input>
-            </fw-grid-item>
-            <fw-grid-item [cols]="6">
-              <fw-wrapped-input helperText="Secondary">
-                <fw-form-heading title="Phone">
-                    <fw-chip title="Home"></fw-chip>
-                </fw-form-heading>
-                <fw-phone-input [placeholder]="'Phone Number'" formControlName="phone"></fw-phone-input>
-              </fw-wrapped-input>
-            </fw-grid-item>
-            <fw-grid-item [cols]="12">
-               <fw-wrapped-input title="Birthdate" errorText="Date is too early">
-                <fw-date-input formControlName="birthdate" [error]="true"></fw-date-input>
-              </fw-wrapped-input>
-            </fw-grid-item>
-            <fw-grid-item [cols]="6">
-               <fw-wrapped-input title="Type" helperText="The type of relationship">
-                <fw-select formControlName="contactType" placeholder="Contact Type" width="100%">
-                    <fw-menu-item value="personal" title="Personal"></fw-menu-item>
-                    <fw-menu-item value="work" title="Work"></fw-menu-item>
-                </fw-select>
-              </fw-wrapped-input>
-            </fw-grid-item>
-             <fw-grid-item [cols]="6">
-               <fw-wrapped-input title="Position" helperText="You can select more than one">
-                <fw-multi-select formControlName="tags" placeholder="Tags" [options]="tagOptions" width="100%">
-                </fw-multi-select>
-              </fw-wrapped-input>
-            </fw-grid-item>
-            <fw-grid-item [cols]="12">
-              <fw-wrapped-input [errorText]="">
-                <fw-form-heading title="Notes" description="Please avoid anything private">
-                  <fw-tooltip title="This is where we pass on info to other salespeople" position="right">
-                    <fw-icon color="muted">information-circle</fw-icon>
-                  </fw-tooltip>
-                </fw-form-heading>
-                <fw-textarea-input [minRows]="5" placeholder="Add Notes..." formControlName="notes"></fw-textarea-input>
-              </fw-wrapped-input>
-            </fw-grid-item>
-          </fw-grid>
-        </form>
-      `,
-    });
-  },
-};

package/src/directives/menu-register.directive.ts

@@ -1,25 +0,0 @@
-import { CdkMenuTrigger } from '@angular/cdk/menu';
-import { Directive, Host, HostListener, OnDestroy, OnInit, Optional } from '@angular/core';
-
-import { MenuManagerService } from '../components/shared/services/menu-manager.service';
-
-@Directive({
-    selector: '[fwMenuRegister]',
-    standalone: true,
-})
-export class MenuRegisterDirective implements OnInit, OnDestroy {
-    constructor(@Optional() @Host() private trigger: CdkMenuTrigger, @Optional()private menuManager: MenuManagerService) {}
-
-    @HostListener('click')
-    private onClick(): void {
-        this.menuManager?.closeAllExcept(this.trigger);
-    }
-
-    ngOnInit(): void {
-        this.menuManager?.register(this.trigger);
-    }
-
-    ngOnDestroy(): void {
-        this.menuManager?.unregister(this.trigger);
-    }
-}

package/src/index.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>Project Vision</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-</head>
-
-<body class="vision-light-theme">
-  <app-root></app-root>
-</body>
-
-</html>

package/src/storybook.helper.ts

@@ -1,35 +0,0 @@
-/* eslint-disable */
-import { InputSignalWithTransform, InputSignal, EventEmitter } from '@angular/core';
-import { useEffect } from 'react';
-
-/**
- * Helper function for getting storybook to recognize singal inputs
- * @see https://stackoverflow.com/questions/78379300/how-do-i-use-angular-input-signals-with-storybook
- * @param argOverrides args you want to manually pass to the story
- * @returns
- */
-export function toArgs<Component>(
-    argOverrides: Partial<TransformSignalInputType<TransformEventType<Component>>> = {},
-): TransformEventType<Component> {
-    return argOverrides as unknown as TransformEventType<Component>;
-}
-
-/** Convert event emitter to callback for storybook */
-type TransformEventType<T> = {
-    [K in keyof T]: T[K] extends EventEmitter<infer E> ? (e: E) => void : T[K];
-};
-
-/** Convert any input signal into the held type of the signal */
-type TransformSignalInputType<T> = {
-    [K in keyof T]: TransformInputType<T[K]>;
-};
-
-
-// Type to extract the type from InputSignal or InputSignalWithTransform
-type TransformInputType<T> =
-    T extends InputSignalWithTransform<infer U, any>
-        ? U
-        : T extends InputSignal<infer U>
-          ? U
-          : T;
-/* eslint-enable */