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

package/projects/tgo-canopy-ui/components/tooltip/tooltip-template.directive.ts

@@ -1,148 +0,0 @@
-import {
-  ComponentRef,
-  Directive,
-  ElementRef,
-  HostListener, Inject, Injector,
-  Input,
-  NgZone,
-  OnChanges,
-  OnDestroy,
-  TemplateRef
-} from '@angular/core';
-import {
-  ConnectedPosition,
-  Overlay,
-  OverlayPositionBuilder,
-  OverlayRef
-} from "@angular/cdk/overlay";
-import { ComponentPortal } from "@angular/cdk/portal";
-import { TooltipPositionType } from "./tooltip.model";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { FocusMonitor } from "@angular/cdk/a11y";
-
-@Directive({
-  selector: '[uiTooltipTemplate]',
-  standalone: true,
-})
-export class TooltipTemplateDirective implements OnChanges, OnDestroy {
-  @Input() tooltipPosition: TooltipPositionType = TooltipPositionType.RIGHT;
-  @Input() showTooltip = true;
-  @Input('uiTooltipTemplate') templateRef: TemplateRef<any>;
-
-  private _overlayRef: OverlayRef;
-
-  constructor(
-    private _overlay: Overlay,
-    private _overlayPositionBuilder: OverlayPositionBuilder,
-    private _elementRef: ElementRef,
-    private focusMonitor: FocusMonitor,
-    private ngZone: NgZone,
-    private injector: Injector,
-    @Inject('TooltipComponentToken') private tooltipComponentToken: any
-  ) {
-    if (this._elementRef.nativeElement) {
-      this.focusMonitor.monitor(this._elementRef.nativeElement).pipe(
-        takeUntilDestroyed()
-      ).subscribe(origin =>
-        this.ngZone.run(() => {
-          if (origin === 'keyboard') {
-            this.show();
-          } else {
-            this.hide();
-          }
-        }),
-      );
-    }
-  }
-
-  ngOnChanges(): void {
-    this.setPosition(this.tooltipPosition);
-  }
-
-  @HostListener('mouseenter')
-  show() {
-    if (!this.showTooltip) {
-      return;
-    }
-
-    if (this._overlayRef && !this._overlayRef.hasAttached()) {
-      const tooltipRef: ComponentRef<any> = this._overlayRef.attach(new ComponentPortal(this.tooltipComponentToken, null, this.injector));
-      tooltipRef.instance.templateRef = this.templateRef;
-      tooltipRef.instance.position = this.tooltipPosition;
-    }
-  }
-
-  @HostListener('mouseleave')
-  hide() {
-    this.closeToolTip();
-  }
-
-  ngOnDestroy() {
-    this.closeToolTip();
-  }
-
-  private closeToolTip() {
-    if (this._overlayRef) {
-      this._overlayRef.detach();
-    }
-  }
-
-  private setPosition(position: TooltipPositionType) {
-    const positions: Record<string, ConnectedPosition> = {
-      [TooltipPositionType.TOP]: {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetX: 0,
-        offsetY: -8,
-        panelClass: TooltipPositionType.TOP
-      },
-      [TooltipPositionType.BOTTOM]: {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 8,
-        panelClass: TooltipPositionType.BOTTOM
-      },
-      [TooltipPositionType.LEFT]: {
-        originX: 'start',
-        originY: 'center',
-        overlayX: 'end',
-        overlayY: 'center',
-        offsetX: -8,
-        offsetY: 0,
-        panelClass: TooltipPositionType.LEFT
-      },
-      [TooltipPositionType.RIGHT]: {
-        originX: 'end',
-        originY: 'center',
-        overlayX: 'start',
-        overlayY: 'center',
-        offsetX: 8,
-        offsetY: 0,
-        panelClass: TooltipPositionType.RIGHT
-      }
-    };
-
-    const fallbackPositions = {
-      [TooltipPositionType.TOP]: positions[TooltipPositionType.BOTTOM],
-      [TooltipPositionType.BOTTOM]: positions[TooltipPositionType.TOP],
-      [TooltipPositionType.LEFT]: positions[TooltipPositionType.RIGHT],
-      [TooltipPositionType.RIGHT]: positions[TooltipPositionType.BOTTOM]
-    };
-
-    const positionConfig = positions[position];
-
-    const fallbackPositionConfig = fallbackPositions[position];
-
-    const positionStrategy = this._overlayPositionBuilder
-      .flexibleConnectedTo(this._elementRef)
-      .withPositions([positionConfig, fallbackPositionConfig])
-      .withPush(true);
-
-    this._overlayRef = this._overlay.create({ positionStrategy });
-  }
-}

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

@@ -1,52 +0,0 @@
-@if (variant === 'definition') {
-  <div
-    [tabindex]="0"
-    class="definition-tooltip"
-    [attr.aria-label]="labelForDefinition + ', ' + ('TOOLTIP.DETAILS' | uiTranslate | async) + ':' +  message"
-    style="position: relative;"
-    [tooltipPosition]="position"
-    [uiTooltipTemplate]="dif"
-  >
-    <span
-      class="label-definition-outside"
-      [ngClass]="'tooltip-size-' + definitionTooltipSize"
-      uiEllipseText
-      (onChangeTextState)="isLabelEllipse = $event"
-    >
-      {{ labelForDefinition }}
-    </span>
-  </div>
-
-  <ng-template #dif>
-    <div [attr.aria-label]="labelForDefinition + ' ' + message"></div>
-    <div class="label-definition-inner" *ngIf="isLabelEllipse">
-      {{ labelForDefinition }}
-    </div>
-    <div class="text-definition">
-      {{ message }}
-    </div>
-  </ng-template>
-
-} @else {
-  <div
-    [matTooltip]="message"
-    [matTooltipDisabled]="disabled"
-    [matTooltipPosition]="matPosition"
-    [matTooltipClass]="applicationTheme"
-    [attr.aria-label]="message"
-    tabindex="0"
-    style="position: relative;"
-  >
-    <div
-      style="position: absolute; left: -9999px"
-      [attr.aria-live]="'polite'"
-    >{{ message }}
-    </div>
-    <ng-content></ng-content>
-    @if (templateRef) {
-      <div [class]="'template-tooltip'">
-        <ng-container *ngTemplateOutlet="templateRef"></ng-container>
-      </div>
-    }
-  </div>
-}

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

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TooltipComponent } from './tooltip.component';
-import { CommonModule } from "@angular/common";
-import { TooltipTemplateDirective } from "./tooltip-template.directive";
-import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [TooltipComponent],
-  imports: [MatTooltipModule, CommonModule, TooltipTemplateDirective, EllipseTextDirective, UiTranslatePipe],
-  exports: [TooltipComponent],
-  providers: [
-    { provide: 'TooltipComponentToken', useValue: TooltipComponent }
-  ]
-})
-export class TooltipComponentModule {}

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

@@ -1,53 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TooltipComponent } from './tooltip.component';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { TooltipPositionType } from './tooltip.model';
-
-describe('TooltipComponent', () => {
-  let fixture: ComponentFixture<TooltipComponent>;
-  let component: TooltipComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MatTooltipModule],
-      declarations: [TooltipComponent],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TooltipComponent);
-    component = fixture.componentInstance;
-
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy()
-  });
-
-  it('should be placed at top by default', () => {
-    expect(component.position).toContain(TooltipPositionType.TOP);
-  });
-
-  describe('when position is at the top', () => {
-    it('should have matPosition as "above"', () => {
-      fixture.detectChanges();
-      expect(component.position).toContain(TooltipPositionType.TOP);
-      expect(component.matPosition).toContain('above')
-    })
-  });
-
-  describe('when position is at the bottom', () => {
-    it('should have matPosition as "below"', () => {
-      component.position = TooltipPositionType.BOTTOM;
-      fixture.detectChanges();
-      expect(component.matPosition).toContain('below')
-    })
-  });
-  describe('when position is at the left', () => {
-    it('should have matPosition as "left"', () => {
-      component.position = TooltipPositionType.LEFT;
-      fixture.detectChanges();
-      expect(component.matPosition).toContain('left')
-    })
-  })
-});

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

@@ -1,296 +0,0 @@
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { TooltipComponent } from './tooltip.component';
-import { transformTheme } from '../../utils/transform-theme';
-import { FileUploadComponent } from '../file-upload/file-upload.component';
-import { TooltipTemplateDirective } from "./tooltip-template.directive";
-import { NgClass, NgIf, NgTemplateOutlet } from "@angular/common";
-import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { TooltipComponentModule } from "./tooltip.component.module";
-
-export default {
-  title: 'Tooltip',
-  component: TooltipComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [MatTooltipModule, MatButtonModule, MatIconModule, ButtonComponentModule, TooltipTemplateDirective, NgTemplateOutlet, NgClass, NgIf, EllipseTextDirective, UiTranslatePipe, TooltipComponentModule],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Styles = `
-  .example-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .example-container.left {
-    justify-content: flex-start;
-  }
-
-  .example-container a {
-    text-decoration: none;
-  }
-`;
-
-const Exclude = ['ngOnInit', 'matPosition', 'setPosition'];
-
-export const WithBottom: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container">
-      <ui-tooltip position="bottom" message="Message for bottom tooltip" applicationTheme="${_theme}">
-        <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        size="small"
-        matTooltipClass="${_theme}"
-        applicationTheme="${_theme}"
-      ></ui-button>
-      </ui-tooltip>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-WithBottom.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2852-4807&t=tr4FtpDPzRNxR0y1-0',
-  },
-};
-
-WithBottom.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-export const WithRight: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container">
-      <ui-tooltip position="right" message="Tooltip with right position" applicationTheme="${_theme}">
-      <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        size="small"
-        matTooltipClass="${_theme}"
-        applicationTheme="${_theme}"
-      ></ui-button>
-      </ui-tooltip>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    styles: [Styles],
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-    template: `
-  <div class="example-container">
-    <ui-tooltip [position]="position" [message]="message" applicationTheme="${_theme}">
-      <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        matTooltipClass="${_theme}"
-        applicationTheme="${_theme}"
-      ></ui-button>
-    </ui-tooltip>
-  </div>`,
-  };
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  message: 'Tooltip message for default tooltip',
-  position: 'top',
-} as Partial<TooltipComponent>;
-
-Default.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-export const WithLeft: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container">
-      <ui-tooltip position="left" message="Message for left tooltip" applicationTheme="${_theme}">
-        <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        size="small"
-        matTooltipClass="${_theme}"
-        applicationTheme="${_theme}"
-      ></ui-button>
-      </ui-tooltip>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-WithLeft.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-export const WithDirective: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    const linkColor = _theme === 'classic' ? '#46A997' : '#D410AA';
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container left">
-      <ui-button
-      type="primary"
-      iconName="Help"
-      iconPosition="left"
-      label="More Help"
-      matTooltip="Tooltip meessage for button"
-      matTooltipPosition="below"
-      matTooltipClass="${_theme}"
-      applicationTheme="${_theme}"
-      ></ui-button>
-    </div>
-    <div class="example-container">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie est ipsum, nec <a [style.color]="'${linkColor}'" matTooltipClass="${_theme}" href="#" matTooltipPosition="above" matTooltip="Tooltip for link">lobortis neque lacinia</a> ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur urna quis ultricies mattis. Cras quis euismod urna. Duis facilisis ac mauris in gravida.</p>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-WithDirective.parameters = {
-  docs: {
-    description: {
-      StoryFn: 'For using `tooltip` as directive use `mat-tooltip` properties: `matTooltip` and `matTooltipPosition`',
-    },
-  },
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-export const WithLongTextLeft: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container">
-      <ui-tooltip position="left" message="Lorem ipsum dolor sit amet, consectetu adipiscing elit." applicationTheme="${_theme}">
-        <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        size="small"
-        matTooltipClass="${_theme}"
-        applicationTheme="${_theme}"
-      ></ui-button>
-      </ui-tooltip>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-WithLongTextLeft.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-
-export const Templ: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div class="example-container">
-        <ui-button
-        type="secondary"
-        [justIcon]="true"
-        iconName="Help"
-        label="secondary"
-        size="small"
-        [uiTooltipTemplate]="template"
-        [tooltipPosition]="'right'"
-        applicationTheme="${_theme}">
-      </ui-button>
-
-      <ng-template #template>
-        <div style="display: flex; flex-direction: column;">
-         <ui-button [label]="'Test'"></ui-button>
-        </div>
-     </ng-template>
-    </div>
-  `,
-    };
-  },
-} as StoryFn;
-
-Templ.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-
-export const Definition: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      styles: [Styles],
-      template: `
-    <div><ui-tooltip [variant]="'definition'" labelForDefinition="Long label that should go to the tooltip message when it's get truncated. Just shrink the screen to see it in action" [message]="'Tooltip message'" [definitionTooltipSize]="'medium'"></ui-tooltip></div>
-  `,
-    };
-  },
-} as StoryFn;
-
-Definition.parameters = {
-  controls: {
-    exclude: Exclude,
-  },
-};
-
-

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

@@ -1,105 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  Input,
-  OnInit,
-  Optional,
-} from '@angular/core';
-import { TooltipDefinitionSize, TooltipPositionType, TooltipVariant } from './tooltip.model';
-import { TooltipPosition } from '@angular/material/tooltip';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-tooltip',
-  templateUrl: './tooltip.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TooltipComponent implements OnInit {
-  /**
-   * Allows the user to define the position of the tooltip relative to the parent element.
-   *
-   * @type {TooltipPositionType}
-   * @memberof TooltipComponent
-   */
-  @Input() position: TooltipPositionType = TooltipPositionType.TOP;
-
-  /**
-   * Disables the display of the tooltip.
-   *
-   * @type {boolean}
-   * @memberof TooltipComponent
-   */
-  @Input({ transform: booleanAttribute }) disabled = false;
-
-  /**
-   * The message to be displayed in the tooltip.
-   *
-   * @type {string}
-   * @memberof TooltipComponent
-   */
-  @Input() message = '';
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof TooltipComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * The label for definition variant
-   * @type {string}
-   * @memberof TooltipComponent
-   */
-  @Input() labelForDefinition = '';
-
-  /**
-   * Defines size for definition variant
-   * @type {string}
-   * @memberof TooltipComponent
-   */
-  @Input() definitionTooltipSize: TooltipDefinitionSize = 'medium'
-
-  /**
-   * Variant render tooltip
-   * @type {string}
-   * @memberof TooltipComponent
-   */
-  @Input() variant: TooltipVariant = 'basic'
-
-  isLabelEllipse = false;
-  templateRef: any;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  matPosition: TooltipPosition;
-
-  ngOnInit() {
-    this.setPosition();
-  }
-
-  //set position
-  setPosition(): void {
-    switch (this.position) {
-      case TooltipPositionType.TOP:
-        this.matPosition = 'above';
-        break;
-      case TooltipPositionType.BOTTOM:
-        this.matPosition = 'below';
-        break;
-      default:
-        this.matPosition = this.position;
-        break;
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-export enum TooltipPositionType {
-  TOP = 'top',
-  BOTTOM = 'bottom',
-  LEFT = 'left',
-  RIGHT = 'right'
-}
-
-export type TooltipVariant = 'basic' | 'definition';
-export type TooltipDefinitionSize = 'small' | 'medium' | 'large';