npm - @testgorilla/tgo-ui - Versions diffs - 2.31.1 → 2.31.3-beta.0 - Mend

@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1254) hide show

package/projects/tgo-canopy-ui/components/tabs/tabs.component.scss DELETED Viewed

@@ -1,264 +0,0 @@
-@use "../../theme/variables" as *;
-@use "../../theme/breakpoints-mixin" as *;
-:host {
-  ::ng-deep .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-    --mdc-tab-indicator-active-indicator-color: var(--color);
-    --mat-tab-header-active-label-text-color: var(--color);
-    --mat-tab-header-active-ripple-color: transparent;
-    --mat-tab-header-inactive-ripple-color: var(--color);
-    --mat-tab-header-active-focus-label-text-color: var(--color);
-    --mat-tab-header-active-focus-indicator-color: var(--color);
-  }
-  ::ng-deep.tabs-type-filled mat-tab-header {
-    border-bottom: unset !important;
-    border-right: 1px solid $grayscale-30;
-  }
-  ::ng-deep mat-tab-group {
-    width: 100%;
-    height: 100%;
-    .mat-mdc-tab-label-container {
-      padding: 4px;
-    }
-    .mdc-tab {
-      &.cdk-keyboard-focused {
-        position: relative;
-        &:after {
-          content: "";
-          position: absolute;
-          top: -2px;
-          left: -2px;
-          right: -2px;
-          bottom: -2px;
-          z-index: 10;
-          border-radius: 4px;
-          outline: 2px solid $black;
-          animation: focus-ring-animation-main 0.4s forwards;
-        }
-      }
-    }
-  }
-}
-::ng-deep .tabs-container {
-  .mdc-tab-indicator__content {
-    border-color: $tgo-petrol-default!important;
-  }
-  .tab-name {
-    text-decoration: none!important;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    color: $tgo-black;
-    outline: unset;
-    font-size: 16px;
-    line-height: 24px;
-    width: 100%;
-    .left-icon {
-      margin-right: 8px;
-    }
-    .right-icon {
-      margin-left: 8px;
-    }
-    .left-icon:focus, .right-icon:focus {
-      height: 24px;
-      outline: 1px dashed $tgo-dark;
-    }
-  }
-  ::ng-deep .mdc-tab {
-    min-width: 0;
-    padding: 0;
-    &:hover {
-      background: $tgo-light;
-    }
-  }
-  &.tabs-type-underlined {
-    .tab-name {
-      padding: 16px 24px;
-    }
-    .mdc-tab--active .tab-name .label {
-      text-shadow: -0.5px 0 black, 0.5px 0 black;
-    }
-    ::ng-deep.mat-mdc-tab-header {
-      padding: 0 var(--header-content-padding);
-    }
-    ::ng-deep.mdc-tab {
-      height: 64px !important;
-      flex-grow: 0!important;
-      margin-left: 1px;
-    }
-  }
-  &.tabs-type-filled {
-    .mdc-tab--active {
-      background-color: $tgo-petrol-90w !important;
-      .tab-name .label{
-        text-shadow: -0.5px 0 black, 0.5px 0 black;
-      }
-    }
-    --mat-tab-header-active-ripple-color: var(--color);
-    display: flex;
-    flex-direction: row;
-    ::ng-deep.mat-mdc-tab-header {
-      padding: var(--header-content-padding) 0;
-    }
-    ::ng-deep.mat-mdc-tab-label-container {
-      overflow: auto!important;
-    }
-    ::ng-deep.mat-mdc-tab-labels {
-      flex-direction: column;
-      padding-top: 2px;
-    }
-    ::ng-deep.mdc-tab {
-      &__content, &__text-label {
-        width: 100%;
-      }
-      &__text-label {
-        margin: -1px 1px 1px 1px;
-      }
-      flex-grow: 0 !important;
-      &--active {
-        ::ng-deep.mdc-tab-indicator:after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 8px;
-          width: 4px;
-          height: 32px;
-          border-radius: 0 8px 8px 0;
-          background: $tgo-petrol-default;
-        }
-      }
-    }
-    ::ng-deep.mdc-tab-indicator {
-      &__content {
-        display: none;
-      }
-    }
-    .tab-name {
-      padding: 12px var(--header-content-padding);
-    }
-    ::ng-deep.mdc-tab {
-      position: relative;
-      height: 48px !important;
-      min-height: 48px !important;
-    }
-  }
-  ::ng-deep.mat-mdc-tab-body-wrapper {
-    width: 100%;
-  }
-  ::ng-deep.mat-mdc-tab-body {
-    padding: var(--header-content-padding);
-  }
-  @include screen('medium') {
-    ::ng-deep.mat-mdc-tab-body {
-      padding: 24px;
-    }
-    ::ng-deep.mat-mdc-tab-header {
-      position: relative;
-      padding: 0 !important;
-      .mat-mdc-tab-header-pagination-disabled {
-        visibility: hidden !important;
-      }
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background: $grayscale-30;
-      }
-    }
-    &.tabs-type-filled {
-      ::ng-deep.mat-mdc-tab-header {
-        padding: 24px 0;
-      }
-    }
-  }
-}
-::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled) {
-  &[theme="light"], &[theme="dark"] {
-    --mat-tab-header-inactive-ripple-color: none !important;
-    .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
-      border-color: $brand-50 !important;;
-    }
-    .mdc-tab:hover {
-      background: none !important;
-      border-bottom: 2px solid $black;
-      .mdc-tab-indicator {
-        display: none;
-      }
-    }
-  }
-}
-::ng-deep .mat-mdc-tab-group.tabs-type-filled {
-  --mat-tab-header-active-ripple-color: unset !important;
-  .tab-name {
-    color: $black;
-  }
-  &[theme="light"], &[theme="dark"] {
-    --mat-tab-header-inactive-ripple-color: none !important;
-    .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
-      border-color: $brand-50 !important;;
-    }
-    .mdc-tab--active {
-      background-color: $grayscale-10 !important;
-      .mdc-tab-indicator:after {
-        background-color: $brand-50 !important;
-      }
-    }
-    .mdc-tab:hover {
-      background: $brand-10 !important;
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/tabs/tabs.component.spec.ts DELETED Viewed

@@ -1,308 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { Component, Input } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { MatTabsModule } from '@angular/material/tabs';
-import { TabsComponent } from './tabs.component';
-import { TabsType } from './tabs.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
-import { of } from 'rxjs';
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { ENTER } from "@angular/cdk/keycodes";
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-type Tab = any;
-@Component({
-  selector: 'app-tab',
-  template: '<div></div>',
-})
-class MockTabComponent {
-  @Input() tabData: Tab;
-}
-@Component({
-  template: `
-    <ui-tabs
-      [companyColor]="companyColor"
-      [type]="type"
-      [animationDuration]="animationDuration"
-      [headerContentPadding]="headerContentPadding"
-      [dynamicHeight]="dynamicHeight"
-      [applicationTheme]="applicationTheme"
-      (selectedTabIndex)="onTabChange($event)"
-      (selectedTab)="onSelectedTab($event)"
-    ></ui-tabs>
-  `
-})
-class TestHostComponent {
-  companyColor: string | null = '#46A997';
-  type: TabsType = 'underlined';
-  animationDuration = 300;
-  headerContentPadding = 32;
-  dynamicHeight = true;
-  applicationTheme: ApplicationTheme = 'light';
-  onTabChange(index: number) {}
-  onSelectedTab(tab: Tab) {}
-}
-describe('TabsComponent', () => {
-  let component: TabsComponent & { tabs: any[] };
-  let hostComponent: TestHostComponent;
-  let fixture: ComponentFixture<TestHostComponent>;
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TabsComponent, TestHostComponent, MockTabComponent],
-      imports: [MatTabsModule, BrowserAnimationsModule, UiTranslatePipe],
-      providers: [
-        { provide: IS_MOBILE_TOKEN, useValue: of(false) },
-        { provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME', useValue: 'light' }
-      ]
-    }).compileComponents();
-  });
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TestHostComponent);
-    hostComponent = fixture.componentInstance;
-    component = fixture.debugElement.query(By.directive(TabsComponent)).componentInstance;
-    fixture.detectChanges();
-  });
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-  it('should apply input properties', () => {
-    expect(component.companyColor).toBe('#46A997');
-    expect(component.type).toBe('underlined');
-    expect(component.animationDuration).toBe(300);
-    expect(component.headerContentPadding).toBe('32px');
-    expect(component.dynamicHeight).toBe(true);
-    expect(component.applicationTheme).toBe('light');
-  });
-  it('should set the correct companyColor using HostBinding', () => {
-    component.companyColor = '#123456';
-    fixture.detectChanges();
-    const hostElement = fixture.nativeElement as HTMLElement;
-    expect(hostElement.style.getPropertyValue('--color')).toBe('');
-  });
-  it('should have default values for various inputs', () => {
-    expect(component.type).toBe('underlined');
-    expect(component.animationDuration).toBe(300);
-    expect(component.headerContentPadding).toBe('32px');
-    expect(component.dynamicHeight).toBe(true);
-  });
-  it('should set type based on input', () => {
-    const testType: any = 'boxed';
-    component.type = testType;
-    fixture.detectChanges();
-    expect(component.type).toBe(testType);
-  });
-  it('should add a tab', () => {
-    const testTab: Tab = { tabName: 'Test Tab', tabLabel: 'Tab Content' };
-    component.addTab(testTab);
-    expect(component.tabs.length).toBe(1);
-    expect(component.tabs[0]).toBe(testTab);
-  });
-  it('should remove a tab', () => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    expect(component.tabs.length).toBe(2);
-    component.removeTab('Tab 1');
-    expect(component.tabs.length).toBe(1);
-    expect(component.tabs[0]).toEqual(tab2);
-    // @ts-ignore
-    expect(component.tabIndexMap['Tab 1']).toBeUndefined();
-  });
-  it('should handle tab changes', fakeAsync(() => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    jest.spyOn(hostComponent, 'onTabChange');
-    jest.spyOn(hostComponent, 'onSelectedTab');
-    // @ts-ignore
-    component.onTabChange({ index: 1, tab: null });
-    tick();
-    expect(hostComponent.onTabChange).toHaveBeenCalledWith(1);
-    expect(hostComponent.onSelectedTab).toHaveBeenCalledWith(tab2);
-  }));
-  it('should select a tab by name', () => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    jest.spyOn(component.selectedTabIndex, 'emit');
-    jest.spyOn(component.selectedTab, 'emit');
-    component.selectTab('Tab 2');
-    expect(component.tabIndex()).toBe(1);
-    expect(component.selectedTabIndex.emit).toHaveBeenCalledWith(1);
-    expect(component.selectedTab.emit).toHaveBeenCalledWith(tab2);
-  });
-  it('should set dynamic height based on booleanAttribute transform', () => {
-    component.dynamicHeight = false;
-    fixture.detectChanges();
-    expect(component.dynamicHeight).toBe(false);
-  });
-  it('should set headerContentPadding with HostBinding', () => {
-    component.headerContentPadding = '16px';
-    fixture.detectChanges();
-    const hostElement = fixture.nativeElement as HTMLElement;
-    expect(hostElement.style.getPropertyValue('--header-content-padding')).toBe('');
-  });
-  it('should override tab header keydown handling', fakeAsync(() => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1', canLeave: jest.fn().mockResolvedValue(true) };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    // Simulate ngAfterViewInit
-    component.ngAfterViewInit();
-    tick(); // Let the setTimeout callback execute
-    const tabHeader = (component.tabGroup as any)._tabHeader;
-    // Spy on _handleKeydown method to ensure it's called
-    jest.spyOn(tabHeader, '_handleKeydown');
-    // Simulate ENTER keydown event
-    const keydownEvent = new KeyboardEvent('keydown', { keyCode: ENTER });
-    tabHeader._handleKeydown(keydownEvent);
-    tick(); // Wait for async canLeave
-    expect(tabHeader._handleKeydown).toHaveBeenCalled();
-    expect(tabHeader.focusIndex).toBe(0);
-    expect(component.tabGroup.selectedIndex).toBe(0);
-  }));
-  it('should add a tab and update tabIndexMap', () => {
-    const testTab: Tab = { tabName: 'Test Tab', tabLabel: 'Tab Content' };
-    component.addTab(testTab);
-    expect(component.tabs.length).toBe(1);
-    expect(component.tabs[0]).toBe(testTab);
-    // @ts-ignore
-    expect(component.tabIndexMap['Test Tab']).toBe(0);
-  });
-  it('should remove a tab and update tabIndexMap', () => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    expect(component.tabs.length).toBe(2);
-    component.removeTab('Tab 1');
-    expect(component.tabs.length).toBe(1);
-    expect(component.tabs[0]).toEqual(tab2);
-    // @ts-ignore
-    expect(component.tabIndexMap['Tab 1']).toBeUndefined();
-    // @ts-ignore
-    expect(component.tabIndexMap['Tab 2']).toBe(0);
-  });
-  it('should update a tab', () => {
-    const tab: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    component.addTab(tab);
-    component.updateTab('Tab 1', { tabLabel: 'Updated Label' });
-    expect(component.tabs[0].tabLabel).toBe('Updated Label');
-  });
-  it('should select a tab by name', () => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    jest.spyOn(component.selectedTabIndex, 'emit');
-    jest.spyOn(component.selectedTab, 'emit');
-    component.selectTab('Tab 2');
-    expect(component.tabIndex()).toBe(1);
-    expect(component.selectedTabIndex.emit).toHaveBeenCalledWith(1);
-    expect(component.selectedTab.emit).toHaveBeenCalledWith(tab2);
-  });
-  it('should handle tab changes', fakeAsync(() => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1' };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    jest.spyOn(hostComponent, 'onTabChange');
-    jest.spyOn(hostComponent, 'onSelectedTab');
-    // @ts-ignore
-    component.onTabChange({ index: 1, tab: null });
-    tick();
-    expect(hostComponent.onTabChange).toHaveBeenCalledWith(1);
-    expect(hostComponent.onSelectedTab).toHaveBeenCalledWith(tab2);
-  }));
-  it('should set dynamic height based on booleanAttribute transform', () => {
-    component.dynamicHeight = false;
-    fixture.detectChanges();
-    expect(component.dynamicHeight).toBe(false);
-  });
-  it('should set headerContentPadding with HostBinding', () => {
-    component.headerContentPadding = '';
-    fixture.detectChanges();
-    const hostElement = fixture.nativeElement as HTMLElement;
-    expect(hostElement.style.getPropertyValue('--header-content-padding')).toBe('');
-  });
-  it('should override tab header keydown handling', fakeAsync(() => {
-    const tab1: Tab = { tabName: 'Tab 1', tabLabel: 'Label 1', canLeave: jest.fn().mockResolvedValue(true) };
-    const tab2: Tab = { tabName: 'Tab 2', tabLabel: 'Label 2' };
-    component.addTab(tab1);
-    component.addTab(tab2);
-    fixture.detectChanges();
-    component.ngAfterViewInit();
-    tick();
-    const tabHeader = (component.tabGroup as any)._tabHeader;
-    jest.spyOn(tabHeader, '_handleKeydown');
-    const keydownEvent = new KeyboardEvent('keydown', { keyCode: ENTER });
-    tabHeader._handleKeydown(keydownEvent);
-    tick();
-    expect(tabHeader._handleKeydown).toHaveBeenCalled();
-    expect(tabHeader.focusIndex).toBe(0);
-    expect(component.tabGroup.selectedIndex).toBe(0);
-  }));
-});

package/projects/tgo-canopy-ui/components/tabs/tabs.component.stories.ts DELETED Viewed

@@ -1,73 +0,0 @@
-import { MatTabsModule } from '@angular/material/tabs';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { transformTheme } from '../../utils/transform-theme';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { TabDirective } from './tab.directive';
-import { TabsComponent } from './tabs.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-export default {
-  title: 'Tabs',
-  component: TabsComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [TabsComponent],
-      imports: [IconComponentModule, MatTabsModule, TabDirective, UiTranslatePipe],
-    }),
-  ],
-} as Meta;
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=14118-66284&mode=design&t=p37dwlxYi7siWreq-4',
-  },
-};
-const Template: StoryFn = (args: any, { globals: { theme } }: any) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-Template.args = {};
-export const Default: StoryFn = {
-  render: (args: any, { globals: { theme } }: any) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-tabs type="${args.type ? args.type : 'underlined'}" applicationTheme="${_theme}">
-      <ng-template uiTab [tabLabel]="'Tab 1'" [tabName]="'1'" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.
-      Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa
-      </ng-template>
-      <ng-template uiTab [tabLabel]="'Tab 2'" [tabName]="'2'">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>
-      <ng-template uiTab [tabLabel]="'Tab 3'" [tabName]="'3'" [iconLeft]="'Level'" [iconRight]="'Test'">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>
-    </ui-tabs>
-   `,
-    };
-  },
-} as StoryFn;
-Default.parameters = parameters;
-export const Filled: StoryFn = {
-  render: (args: any, { globals: { theme } }: any) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-tabs type="${args.type ? args.type : 'filled'}" applicationTheme="${_theme}">
-      <ng-template uiTab [tabLabel]="'Tab 1'" [tabName]="'1'" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.
-      Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa
-      </ng-template>
-      <ng-template uiTab [tabLabel]="'Tab 2'" [tabName]="'2'">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>
-      <ng-template uiTab [tabLabel]="'Tab 3'" [tabName]="'3'" [iconLeft]="'Level'" [iconRight]="'Test'">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>
-    </ui-tabs>
-   `,
-    };
-  },
-} as StoryFn;
-Filled.parameters = parameters;