@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.service.spec.ts

@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ApplicationRef, Component, DebugElement, ViewChild, ViewContainerRef } from '@angular/core';
+import { SideSheetService } from './side-sheet.service';
+import { SideSheetConfig } from './side-sheet.model';
+import { of } from 'rxjs';
+import { By } from "@angular/platform-browser";
+@Component({
+  selector: 'app-test',
+  template: '<div>This is a test component</div>',
+})
+export class TestComponent2 {}
+
+@Component({
+  selector: 'app-test-component',
+  template: '<div></div>',
+})
+class TestComponent {
+  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
+
+  constructor(private sideSheetService: SideSheetService) {}
+
+  openSideSheet(config: SideSheetConfig): void {
+    this.sideSheetService.open(config);
+  }
+}
+
+jest.mock('./side-sheet.service');
+
+describe('SideSheetService', () => {
+  let service: jest.Mocked<SideSheetService>;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      providers: [SideSheetService]
+    }).compileComponents();
+
+    service = TestBed.inject(SideSheetService) as jest.Mocked<SideSheetService>;
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+
+  it('should open dynamic side sheet and emit config', (done: any) => {
+    const config: SideSheetConfig = {
+      componentRef: TestComponent2,
+      title: 'Test'
+    };
+
+    service.getComponentRef.mockReturnValue(of(config));
+
+    const subscription = service.getComponentRef().subscribe((emittedConfig) => {
+      expect(emittedConfig).toEqual(expect.objectContaining(config));
+      done();
+    });
+
+    fixture.componentInstance.openSideSheet(config);
+
+    subscription.unsubscribe();
+  });
+
+  it('should create the component when side sheet is opened', () => {
+    service.getComponentRef();
+
+  });
+
+  it('should open side sheet', () => {
+    const config: SideSheetConfig = {
+      componentRef: TestComponent2,
+      title: 'Test'
+    };
+
+    const serviceOpenSpy = jest.spyOn(service, 'open');
+    const serviceOpenResponse = service.open(config);
+    expect(serviceOpenSpy).toHaveBeenCalledTimes(1);
+    expect(serviceOpenResponse).toEqual(undefined);
+  });
+
+
+});

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.service.ts

@@ -0,0 +1,28 @@
+import { ApplicationRef, Injectable, ViewContainerRef } from '@angular/core';
+import { SideSheetConfig } from './side-sheet.model';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SideSheetService {
+  private componentRef$ = new Subject<SideSheetConfig | null>();
+
+  constructor(private applicationRef: ApplicationRef) {}
+
+  open<T>(config: SideSheetConfig): T {
+    const { componentRef, ...configFields } = config;
+    const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);
+    const componentReference = rootViewContainerRef.createComponent(config.componentRef);
+    this.componentRef$.next({ ...configFields, componentRef: componentReference });
+    return componentReference.instance as T;
+  }
+
+  close(): void {
+    this.componentRef$.next(null);
+  }
+
+  getComponentRef(): Observable<SideSheetConfig | null> {
+    return this.componentRef$.asObservable();
+  }
+}

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.component.html

@@ -0,0 +1,5 @@
+  <ui-side-sheet [position]="position" [applicationTheme]="applicationTheme">
+    <div style="display: flex; justify-content: center; align-items: center; height: 100%">
+      <ui-button [label]="'Open'" (buttonClickEvent)="open()"></ui-button>
+    </div>
+  </ui-side-sheet>

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display:flex;
+  justify-content: center;
+  flex-flow: column;
+  align-items: center;
+
+  ui-side-sheet {
+    min-height: 100vh;
+    min-width: 100vh;
+    width: 100%;
+    height: 100%;
+  }
+}
+

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideSheetDemoComponent } from './side-sheet-demo.component';
+import { SideSheetComponentModule } from '../side-sheet/side-sheet.component.module';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('SideSheetDemoComponent', () => {
+  let component: SideSheetDemoComponent;
+  let fixture: ComponentFixture<SideSheetDemoComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SideSheetDemoComponent],
+      imports: [SideSheetComponentModule, ButtonComponentModule, UiTranslatePipe, BrowserAnimationsModule]
+    });
+    fixture = TestBed.createComponent(SideSheetDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.component.stories.ts

@@ -0,0 +1,54 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { SideSheetDemoComponent } from './side-sheet-demo.component';
+import { SideSheetComponentModule } from '../side-sheet/side-sheet.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Side Sheet',
+  component: SideSheetDemoComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [SideSheetDemoComponent],
+      imports: [ButtonComponentModule, SideSheetComponentModule, UiTranslatePipe],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13382-66153&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const LeftSide = Template.bind({});
+LeftSide.args = {
+  position: 'start',
+};
+
+LeftSide.parameters = parameters;
+
+export const LongTitle = Template.bind({});
+LongTitle.args = {
+  title: 'Very long title that should be avoided, but edge cases are part of our life without us able to resist',
+};
+
+LongTitle.parameters = parameters;

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.component.ts

@@ -0,0 +1,98 @@
+import { Component, Input } from '@angular/core';
+import { SideSheetService } from '../side-sheet/side-sheet.service';
+import { SideSheetPosition } from '../side-sheet/side-sheet.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-test',
+  template: `<div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ornare suspendisse sed nisi lacus. Quis varius quam quisque id diam vel quam elementum. Tristique risus nec
+    feugiat in fermentum posuere. Porttitor rhoncus dolor purus non enim praesent elementum. Nec ultrices dui sapien
+    eget. Interdum velit laoreet id donec. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare.
+    Praesent semper feugiat nibh sed. Odio pellentesque diam volutpat commodo sed egestas. Bibendum ut tristique et
+    egestas quis ipsum suspendisse. Lectus arcu bibendum at varius. Pellentesque nec nam aliquam sem. Auctor eu augue ut
+    lectus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Morbi non arcu risus quis
+    varius. Consectetur lorem donec massa sapien. Sagittis purus sit amet volutpat consequat mauris. Eget nulla facilisi
+    etiam dignissim diam. In arcu cursus euismod quis viverra nibh. Semper feugiat nibh sed pulvinar. Mi quis hendrerit
+    dolor magna eget est lorem ipsum dolor. Ut tortor pretium viverra suspendisse potenti nullam. Sed tempus urna et
+    pharetra pharetra massa massa. Hendrerit dolor magna eget est. Malesuada proin libero nunc consequat interdum varius
+    sit. Faucibus purus in massa tempor nec. Porttitor eget dolor morbi non arcu risus. Dapibus ultrices in iaculis nunc
+    sed. Aliquam eleifend mi in nulla posuere sollicitudin. Magna etiam tempor orci eu lobortis elementum nibh tellus.
+    Pellentesque habitant morbi tristique senectus. Cursus vitae congue mauris rhoncus. Tellus in metus vulputate eu
+    scelerisque felis imperdiet. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. At lectus urna duis
+    convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Viverra aliquet eget sit amet tellus. Gravida quis
+    blandit turpis cursus in hac habitasse platea dictumst. Nisl purus in mollis nunc sed id. Sodales neque sodales ut
+    etiam sit amet nisl purus. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Risus pretium quam vulputate
+    dignissim suspendisse in. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Hac habitasse platea
+    dictumst quisque sagittis purus. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Quis lectus nulla at
+    volutpat diam ut venenatis tellus in. Amet mattis vulputate enim nulla aliquet porttitor lacus. Nascetur ridiculus
+    mus mauris vitae ultricies. Quam viverra orci sagittis eu volutpat. Placerat vestibulum lectus mauris ultrices eros
+    in cursus turpis massa. Eget gravida cum sociis natoque penatibus et magnis. Amet est placerat in egestas erat
+    imperdiet sed. Id nibh tortor id aliquet lectus proin. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae
+    congue. Massa eget egestas purus viverra accumsan in nisl. Nisl tincidunt eget nullam non nisi est sit amet
+    facilisis. Mattis rhoncus urna neque viverra. Feugiat nisl pretium fusce id velit ut tortor. Porttitor massa id
+    neque aliquam vestibulum morbi blandit cursus. Bibendum ut tristique et egestas quis ipsum suspendisse. Pretium
+    vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Sagittis aliquam malesuada bibendum arcu.
+    Pharetra pharetra massa massa ultricies. Dui ut ornare lectus sit amet est placerat in. Senectus et netus et
+    malesuada fames ac turpis egestas integer. Gravida arcu ac tortor dignissim convallis aenean et tortor. Vel orci
+    porta non pulvinar neque. Vitae tortor condimentum lacinia quis vel eros donec ac. Lobortis mattis aliquam faucibus
+    purus in massa tempor nec feugiat. Nisi lacus sed viverra tellus in hac. Massa placerat duis ultricies lacus.
+    Faucibus purus in massa tempor. Ut tellus elementum sagittis vitae et leo duis ut. Diam quam nulla porttitor massa
+    id. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipiscing
+    elit. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Quis vel eros donec ac. Hac habitasse platea
+    dictumst quisque sagittis. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Elit duis tristique
+    sollicitudin nibh sit amet commodo. Odio pellentesque diam volutpat commodo sed. Non quam lacus suspendisse faucibus
+    interdum. Sed id semper risus in hendrerit gravida rutrum quisque. Id cursus metus aliquam eleifend mi in. Ornare
+    arcu dui vivamus arcu felis bibendum ut. Nunc aliquet bibendum enim facilisis gravida neque convallis. Amet aliquam
+    id diam maecenas ultricies mi eget mauris. Porta non pulvinar neque laoreet suspendisse interdum. At in tellus
+    integer feugiat scelerisque varius morbi enim. Suspendisse interdum consectetur libero id faucibus nisl tincidunt.
+    Pharetra massa massa ultricies mi quis. Sed egestas egestas fringilla phasellus. Lacus viverra vitae congue eu
+    consequat. Vestibulum sed arcu non odio euismod. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae
+    semper. Amet nisl suscipit adipiscing bibendum est ultricies integer. Vulputate sapien nec sagittis aliquam
+    malesuada bibendum arcu vitae. Facilisi nullam vehicula ipsum a arcu cursus vitae. In iaculis nunc sed augue lacus.
+    Donec ac odio tempor orci dapibus. Libero nunc consequat interdum varius sit amet mattis. Diam maecenas sed enim ut.
+    Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Viverra adipiscing at in tellus integer feugiat
+    scelerisque. Turpis egestas maecenas pharetra convallis. Id nibh tortor id aliquet lectus proin nibh nisl
+    condimentum. Faucibus pulvinar elementum integer enim. Ullamcorper sit amet risus nullam. Consectetur adipiscing
+    elit ut aliquam purus sit amet luctus venenatis. Nibh venenatis cras sed felis. Ac ut consequat semper viverra nam.
+    Eros donec ac odio tempor. Faucibus pulvinar elementum integer enim neque. Vitae tempus quam pellentesque nec nam.
+    Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. At varius vel pharetra vel turpis nunc.
+    Tempor orci eu lobortis elementum nibh. Nisi vitae suscipit tellus mauris a diam. Adipiscing vitae proin sagittis
+    nisl rhoncus. Adipiscing elit ut aliquam purus. Id cursus metus aliquam eleifend mi in. Magna fermentum iaculis eu
+    non diam phasellus vestibulum lorem. Lorem sed risus ultricies tristique nulla aliquet enim. Dui nunc mattis enim ut
+    tellus elementum sagittis. Pulvinar pellentesque habitant morbi tristique senectus et. Magna fringilla urna
+    porttitor rhoncus dolor purus non enim. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Sed
+    odio morbi quis commodo. Est sit amet facilisis magna etiam tempor orci eu. Enim tortor at auctor urna nunc.
+    Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Auctor augue mauris augue neque gravida in
+    fermentum et. Id nibh tortor id aliquet lectus proin. Arcu risus quis varius quam quisque id diam vel quam. Lacus
+    suspendisse faucibus interdum posuere lorem ipsum. Id leo in vitae turpis massa. Eu volutpat odio facilisis mauris
+    sit amet massa vitae tortor. Risus quis varius quam quisque id diam vel quam. Nulla at volutpat diam ut venenatis
+    tellus. Scelerisque in dictum non consectetur. Purus semper eget duis at. Placerat duis ultricies lacus sed turpis
+    tincidunt. Massa ultricies mi quis hendrerit dolor. At tellus at urna condimentum mattis.
+  </div>`,
+})
+export class TestComponent {}
+
+@Component({
+  selector: 'ui-side-sheet-demo',
+  templateUrl: './side-sheet-demo.component.html',
+  styleUrls: ['./side-sheet-demo.component.scss'],
+})
+export class SideSheetDemoComponent {
+  position: SideSheetPosition = 'end';
+  title = 'Test Title';
+
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(private sideSheetService: SideSheetService) {}
+
+  open(): void {
+    this.sideSheetService.open({
+      componentRef: TestComponent,
+      title: this.title,
+      showBackButton: true,
+      showTitleTooltip: true,
+    });
+  }
+}

package/projects/tgo-canopy-ui/components/side-sheet-demo/side-sheet-demo.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SideSheetDemoComponent, TestComponent } from './side-sheet-demo.component';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { SideSheetComponentModule } from '../side-sheet/side-sheet.component.module';
+
+@NgModule({
+  declarations: [SideSheetDemoComponent, TestComponent],
+  imports: [CommonModule, ButtonComponentModule, SideSheetComponentModule],
+  exports: [SideSheetDemoComponent],
+})
+export class SideSheetDemoModule {}

package/projects/tgo-canopy-ui/components/skeleton/skeleton.component.html

@@ -0,0 +1,5 @@
+<ngx-skeleton-loader
+  [count]="count"
+  [theme]="currentTheme$ | async"
+  [appearance]="(appearance$ | async) || 'line'"
+></ngx-skeleton-loader>

package/projects/tgo-canopy-ui/components/skeleton/skeleton.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { NgxSkeletonLoaderModule, NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';
+import { SkeletonComponent } from './skeleton.component';
+import { Appearance } from './skeleton.model';
+
+describe('SkeletonComponent', () => {
+  let component: SkeletonComponent;
+  let fixture: ComponentFixture<SkeletonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, NgxSkeletonLoaderModule, SkeletonComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkeletonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set theme using theme input', () => {
+    const theme: NgxSkeletonLoaderConfigTheme = { color: 'blue' };
+    component.theme = theme;
+    //@ts-expect-error
+    component.theme$.subscribe(t => {
+      expect(t).toEqual(theme)
+    })
+  });
+
+  it('should set appearance using appearance input', () => {
+    const appearance: Appearance = 'circle';
+    component.appearance = appearance;
+    //@ts-expect-error
+    component.appearance$.subscribe(a => {
+      expect(a).toEqual(appearance)
+    })
+  });
+
+  it('should update current theme when theme or appearance changes', () => {
+    const theme: NgxSkeletonLoaderConfigTheme = { color: 'blue' };
+    const appearance: Appearance = 'circle';
+
+    component.theme = theme;
+    component.appearance = appearance;
+
+    const expectedTheme = {
+      ...theme,
+      height: theme['height'] || theme['width'] || '48px',
+      width: theme['width'] || theme['height'] || '48px',
+    };
+    //@ts-expect-error
+    component.currentTheme$.subscribe(ct => {
+      expect(ct).toEqual(expectedTheme)
+    })
+  });
+
+  it('should handle default values for appearance', () => {
+    const theme: NgxSkeletonLoaderConfigTheme = { color: 'blue' };
+    component.theme = theme;
+
+    const expectedTheme = {
+      ...theme,
+      height: '24px',
+    };
+    //@ts-expect-error
+    component.currentTheme$.subscribe(ct => {
+      expect(ct).toEqual(expectedTheme)
+    })
+  });
+});

package/projects/tgo-canopy-ui/components/skeleton/skeleton.component.stories.ts

@@ -0,0 +1,47 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { SkeletonComponent } from './skeleton.component';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { CommonModule } from '@angular/common';
+import { transformTheme } from "../../utils/transform-theme";
+
+export default {
+  title: 'Skeleton',
+  component: SkeletonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, NgxSkeletonLoaderModule, SkeletonComponent],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+export const Default = Template.bind({});
+Default.args = {
+  count: 4,
+};
+
+export const Circular = Template.bind({});
+Circular.args = {
+  count: 4,
+  appearance: 'circle',
+};
+
+export const CustomHeight = Template.bind({});
+CustomHeight.args = {
+  count: 4,
+  theme: { height: '100px' },
+};
+
+export const CustomHeightAndWidth = Template.bind({});
+CustomHeightAndWidth.args = {
+  count: 4,
+  theme: { height: '100px', width: '100px', margin: '30px' },
+};

package/projects/tgo-canopy-ui/components/skeleton/skeleton.component.ts

@@ -0,0 +1,66 @@
+import { Component, Inject, Input, Optional } from '@angular/core';
+import { NgxSkeletonLoaderConfigTheme, NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject, combineLatest, map } from 'rxjs';
+import { Appearance } from './skeleton.model';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-skeleton',
+  templateUrl: './skeleton.component.html',
+  styleUrls: ['./skeleton.component.scss'],
+  standalone: true,
+  imports: [CommonModule, NgxSkeletonLoaderModule],
+})
+export class SkeletonComponent {
+  @Input() count: number | string = '';
+  @Input() set theme(value: NgxSkeletonLoaderConfigTheme) {
+    this.theme$.next(value ?? {});
+  }
+  @Input() set appearance(value: Appearance) {
+    this.appearance$.next(value ?? 'line');
+  }
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SkeletonComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  protected readonly theme$ = new BehaviorSubject<NgxSkeletonLoaderConfigTheme>({});
+  protected readonly appearance$ = new BehaviorSubject<Appearance>('line');
+  protected readonly currentTheme$ = combineLatest([this.theme$, this.appearance$]).pipe(
+    map(([theme, appearance]) => this.getThemeWithDefaultValues(theme, appearance))
+  );
+
+  private getThemeWithDefaultValues(
+    theme: NgxSkeletonLoaderConfigTheme,
+    appearance: Appearance
+  ): NgxSkeletonLoaderConfigTheme {
+    if (theme && appearance === 'circle') {
+      return {
+        ...theme,
+        height: theme['height'] || theme['width'] || '48px',
+        width: theme['width'] || theme['height'] || '48px',
+      };
+    } else if (theme && appearance !== 'circle' && !theme['height']) {
+      return {
+        ...theme,
+        height: '24px',
+      };
+    } else {
+      return theme;
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/skeleton/skeleton.model.ts

@@ -0,0 +1,3 @@
+import { NgxSkeletonLoaderConfig } from 'ngx-skeleton-loader';
+
+export type Appearance = NgxSkeletonLoaderConfig['appearance'];

package/projects/tgo-canopy-ui/components/slider/slider.component.html

@@ -0,0 +1,75 @@
+<ng-container>
+  <div class="slider-container" [attr.theme]="applicationTheme" [ngClass]="{ disabled: disabled, error: hasError && touchedControlName }">
+    <div class="slider-label" *ngIf="label">{{ label }}</div>
+
+    <div class="slider">
+      <div class="min-value">{{ percentage ? min + '%' : min }}</div>
+      <mat-slider
+        [disableRipple]="applicationTheme !== 'classic'" #sliderElement discrete [disabled]="disabled" [max]="max" [min]="min" [step]="step" (mouseenter)="sliderElement.discrete = true" (mouseleave)="sliderElement.discrete = false">
+        <input
+          [disabled]="disabled"
+          (valueChange)="onValueChange()"
+          [(ngModel)]="sliderStart"
+          matSliderStartThumb
+        >
+        <input
+          [disabled]="disabled"
+          (valueChange)="onValueChange()"
+          [(ngModel)]="sliderEnd"
+          matSliderEndThumb
+        >
+      </mat-slider>
+      <div class="max-value">{{ percentage ? max + '%' : max }}</div>
+    </div>
+
+    <div class="slider-input" *ngIf="showInputs">
+      <mat-form-field [appearance]="'outline'">
+        <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf="percentage">%</span></mat-label>
+        <input
+          matInput
+          [type]="'number'"
+          [(ngModel)]="sliderStart"
+          [disabled]="disabled"
+          (focus)="onInputFocus()"
+          (blur)="onInputBlur('start')"
+          (keydown.enter)="onInputBlur('start')"
+        >
+      </mat-form-field>
+
+      <mat-form-field [appearance]="'outline'">
+        <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf="percentage">%</span></mat-label>
+        <input
+          matInput
+          [disabled]="disabled"
+          [type]="'number'"
+          [(ngModel)]="sliderEnd"
+          (focus)="onInputFocus()"
+          (blur)="onInputBlur('end')"
+          (keydown.enter)="onInputBlur('end')"
+        >
+      </mat-form-field>
+    </div>
+
+    <mat-error *ngIf="hasError && touchedControlName">
+      <div class="validation-error" *ngIf="touchedControlName === 'start' && sliderStart > sliderEnd">
+        <ui-icon [name]="'Info'"></ui-icon>
+        <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>
+      </div>
+
+      <div class="validation-error" *ngIf="touchedControlName === 'end' && sliderStart > sliderEnd">
+        <ui-icon [name]="'Info'"></ui-icon>
+        <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>
+      </div>
+
+      <div class="validation-error" *ngIf="sliderStart < min">
+        <ui-icon [name]="'Info'"></ui-icon>
+        <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>
+      </div>
+      <div class="validation-error" *ngIf="sliderEnd > max">
+        <ui-icon [name]="'Info'"></ui-icon>
+        <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>
+      </div>
+    </mat-error>
+  </div>
+</ng-container>
+

package/projects/tgo-canopy-ui/components/slider/slider.component.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SliderComponent } from './slider.component';
+import { MatSliderModule } from '@angular/material/slider';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [SliderComponent],
+  imports: [
+    CommonModule,
+    MatSliderModule,
+    FormsModule,
+    MatInputModule,
+    MatTooltipModule,
+    IconComponentModule,
+    UiTranslatePipe,
+  ],
+  exports: [SliderComponent],
+})
+export class SliderComponentModule {}