@flywheel-io/vision 1.17.0 → 2.0.0-beta-1

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

@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+import { TypographySampleComponent } from './typography-sample.component';
+import { TypographySampleModule } from './typography-sample.module';
+
+export default {
+  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,
+      ],
+    }),
+  ],
+} as Meta;
+
+const TypographySampleTemplate: Story = (args: TypographySampleComponent) => ({
+  props: args,
+  template: `
+    <fw-typography></fw-typography>
+  `,
+});
+
+export const Overview = TypographySampleTemplate.bind({});

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

@@ -0,0 +1,41 @@
+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}/>
+
+
+## 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

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

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

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

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

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

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

@@ -0,0 +1,195 @@
+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/global.scss

@@ -0,0 +1,5 @@
+@use './public-api' as vision;
+
+@include vision.global-typography;
+@include vision.icons;
+@include vision.overlay;

package/src/index.html

@@ -0,0 +1,16 @@
+<!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/polyfills.ts

@@ -0,0 +1,64 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+import 'document-register-element';

package/src/public-api.scss

@@ -0,0 +1,6 @@
+@forward './scss/config/colors';
+@forward './scss/config/overlay';
+@forward './scss/config/typography';
+@forward './scss/config/shadows';
+@forward './scss/icons/icons';
+@forward './scss/atoms/scrollbar.scss';

package/src/public-api.ts

@@ -0,0 +1,125 @@
+export * from './components/alert/alert.component';
+export * from './components/alert/alert.module';
+export * from './components/app-icon/app-icon.component';
+export * from './components/app-icon/app-icon.module';
+export * from './components/avatar/avatar.component';
+export * from './components/avatar/avatar.module';
+export * from './components/badge/badge.component';
+export * from './components/badge/badge.module';
+export * from './components/breadcrumbs/breadcrumbs.component';
+export * from './components/breadcrumbs/breadcrumbs.module';
+export * from './components/breadcrumbs/crumb.component';
+export * from './components/button/button.component';
+export * from './components/button/button.directives';
+export * from './components/button/button.module';
+export * from './components/button-group/button-group.component';
+export * from './components/button-group/button-group.module';
+export * from './components/button-toggle/button-toggle.component';
+export * from './components/button-toggle/button-toggle.module';
+export * from './components/button-toggle/button-toggle-item/button-toggle-item.component';
+export * from './components/card/card.component';
+export * from './components/card/card.module';
+export * from './components/card/card-attribute/card-attribute.component';
+export * from './components/card/card-author/card-author.component';
+export * from './components/card/card-content/card-content.component';
+export * from './components/card/card-footer/card-footer.component';
+export * from './components/card/card-header/card-header.component';
+export * from './components/checkbox/checkbox.component';
+export * from './components/checkbox/checkbox.module';
+export * from './components/chip/chip.component';
+export * from './components/chip/chip.module';
+export * from './components/contained-input/contained-input.component';
+export * from './components/contained-input/contained-input.module';
+export * from './components/date-input/date-input.component';
+export * from './components/date-input/date-input.module';
+export * from './components/dialog/dialog.component';
+export * from './components/dialog/dialog.service';
+export * from './components/dialog/dialog-actions.component';
+export * from './components/dialog/dialog-confirm.component';
+export * from './components/dialog/dialog-content.component';
+export * from './components/dialog/dialog-header.component';
+export * from './components/dialog/dialog-simple.component';
+export * from './components/dialog/dialogs.module';
+export * from './components/form-heading/form-heading.component';
+export * from './components/form-heading/form-heading.module';
+export * from './components/forms/validators';
+export * from './components/icon/icon.component';
+export * from './components/icon/icon.module';
+export * from './components/icon/icon.types';
+export * from './components/icon-button/icon-button.component';
+export * from './components/icon-button/icon-button.module';
+export * from './components/layouts/context/context.component';
+export * from './components/layouts/grid/grid.component';
+export * from './components/layouts/layout-group.component';
+export * from './components/layouts/layouts.module';
+export * from './components/layouts/panel/panel.component';
+export * from './components/layouts/sidebar/sidebar.component';
+export * from './components/layouts/toolbar/toolbar.component';
+export * from './components/menu/menu.component';
+export * from './components/menu/menu.module';
+export * from './components/menu/menu-close-triggers.directive';
+export * from './components/menu/menu-container/menu-container.component';
+export * from './components/menu/menu-header/menu-header.component';
+export * from './components/menu/menu-item/menu-item.component';
+export * from './components/menu/menu-item-group/menu-item-group.component';
+export * from './components/menu/menu-separator/menu-separator.component';
+export * from './components/menu/menu-sub-item/menu-sub-item.component';
+export * from './components/navbar/navbar.component';
+export * from './components/navbar/navbar.module';
+export * from './components/navbar/navbar-header/navbar-header.component';
+export * from './components/navbar/navbar-item/navbar-item.component';
+export * from './components/navbar/navbar-sub-item/navbar-sub-item.component';
+export * from './components/number-input/number-input.component';
+export * from './components/number-input/number-input.module';
+export * from './components/paginator/paginator.component';
+export * from './components/paginator/paginator.module';
+export * from './components/paginator/paginator-advanced/paginator-advanced.component';
+export * from './components/phone-input/phone-input.component';
+export * from './components/phone-input/phone-input.module';
+export * from './components/popover/popover.component';
+export * from './components/popover/popover.module';
+export * from './components/popover/popover-panel/popover-panel.component';
+export * from './components/progress/bar/bar.component';
+export * from './components/progress/progress.module';
+export * from './components/progress/spinner/spinner.component';
+export * from './components/radio/radio.component';
+export * from './components/radio/radio.module';
+export * from './components/radio/radio-group.component';
+export * from './components/section-heading/back-button/back-button.component';
+export * from './components/section-heading/section-heading.component';
+export * from './components/section-heading/section-heading.module';
+export * from './components/section-heading/subsection-heading/subsection-heading.component';
+export * from './components/section-heading/subsection-heading/subsection-heading.component';
+export * from './components/select-menu/multi-select-menu/multi-select-menu.component';
+export * from './components/select-menu/select-menu.component';
+export * from './components/select-menu/select-menu.module';
+export * from './components/shared/translation.service';
+export * from './components/snackbar/snackbar.module';
+export * from './components/snackbar/snackbar.service';
+export * from './components/snackbar/snackbar/snackbar.component';
+export * from './components/snackbar/snackbar-container/snackbar-container.component';
+export * from './components/snackbar/snackbar-message.model';
+export * from './components/stepper/step.component';
+export * from './components/stepper/stepper.component';
+export * from './components/stepper/stepper.module';
+export * from './components/switch/switch.component';
+export * from './components/switch/switch.module';
+export * from './components/table/cell';
+export * from './components/table/row';
+export * from './components/table/table.component';
+export * from './components/table/table.module';
+export * from './components/table/table-dense.component';
+export * from './components/tabs/tab/tab.component';
+export * from './components/tabs/tab-panel/tab-panel.component';
+export * from './components/tabs/tabs.component';
+export * from './components/tabs/tabs.module';
+export * from './components/text-input/text-input.component';
+export * from './components/text-input/text-input.module';
+export * from './components/textarea-input/textarea-input.component';
+export * from './components/textarea-input/textarea-input.module';
+export * from './components/tooltip/tooltip.component';
+export * from './components/tooltip/tooltip.module';
+export * from './components/tooltip/tooltip-panel/tooltip-panel.component';
+export * from './components/wrapped-input/wrapped-input.component';
+export * from './components/wrapped-input/wrapped-input.module';
+export { CdkTableModule } from '@angular/cdk/table';

package/src/scss/atoms/scrollbar.scss

@@ -0,0 +1,10 @@
+@mixin scrollbar() {
+  scrollbar-width: thin;
+  scrollbar-color: var(--typography-light) var(--slate-hover);
+};
+
+@mixin global-scrollbar() {
+  * {
+    @include scrollbar;
+  }
+}