@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,159 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { EmptyStateComponent } from './empty-state.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'Empty State',
-  component: EmptyStateComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [IconComponentModule, UiTranslatePipe, ButtonComponentModule],
-      declarations: [EmptyStateComponent],
-    }),
-  ],
-} 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=12793-9858&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const Default = Template.bind({});
-Default.args = {};
-
-Default.parameters = parameters;
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  icon: 'Test',
-};
-
-WithIcon.parameters = parameters;
-
-export const WithIllustration = Template.bind({});
-WithIllustration.args = {
-  showIllustration: true,
-};
-
-WithIllustration.parameters = parameters;
-
-export const WithBodyText = Template.bind({});
-WithBodyText.args = {
-  bodyText: 'Try a different filter or search.',
-  showIllustration: true,
-};
-
-WithBodyText.parameters = parameters;
-
-export const WithCommandButton: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page">
-    </ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-export const WithCommandButtonBlackColour: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page" primaryButtonVariant="black">
-    </ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-export const WithCommandButtonGhost: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state applicationTheme="${_theme}" icon="Upgrade" bodyText="Try a different filter or search." primaryButtonText="Back to main page" primaryButtonVariant="ghost">
-    </ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-WithCommandButton.parameters = parameters;
-
-export const WithExtraCommandButtons: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state
-      applicationTheme="${_theme}"
-      icon="Upgrade"
-      bodyText="Try a different filter or search."
-      primaryButtonText="Back to main page"
-      secondaryButtonText="Back to main page"
-      tertiaryButtonText="Back to main page"
-    ></ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-WithExtraCommandButtons.parameters = parameters;
-
-export const MobileVariant: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state
-      applicationTheme="${_theme}"
-      emptyStateVariant="mobile"
-      icon="Upgrade"
-      bodyText="Try a different filter or search."
-      primaryButtonText="Back to main page"
-    ></ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-MobileVariant.parameters = parameters;
-
-export const MobileVariantWithIllustration: Story = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ui-empty-state
-      applicationTheme="${_theme}"
-      showIllustration="true"
-      illustrationVariant="Disconnected"
-      emptyStateVariant="mobile"
-      bodyText="Try a different filter or search."
-      primaryButtonText="Back to main page"
-      primaryButtonVariant="black"
-    ></ui-empty-state>
-  `,
-    };
-  },
-} as Story;
-
-MobileVariantWithIllustration.parameters = parameters;

package/projects/tgo-canopy-ui/components/empty-state/empty-state.component.ts

@@ -1,174 +0,0 @@
-import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { IconName } from '../icon/icon.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { ButtonVariant, EmptyStateVariant, IllustrationVariant } from './empty-state.model';
-
-@Component({
-  selector: 'ui-empty-state',
-  templateUrl: './empty-state.component.html',
-  styleUrls: ['./empty-state.component.scss'],
-})
-export class EmptyStateComponent {
-  /**
-   * @description If the default image should be displayed.
-   * @type {boolean}
-   * @memberof EmptyStateComponent
-   */
-  @Input() showIllustration = false;
-  /**
-   * @description If the default image should be displayed.
-   * @type {IllustrationVariant}
-   * @memberof EmptyStateComponent
-   */
-  @Input() illustrationVariant: IllustrationVariant = 'Empty-search';
-  /**
-   * @description The icon to be displayed in the empty state.
-   * @type {IconName}
-   * @memberof EmptyStateComponent
-   */
-  @Input() icon: IconName = '';
-
-  /**
-   * @description The empty state variant.
-   * @type {EmptyStateVariant}
-   * @memberof EmptyStateComponent
-   */
-  @Input() emptyStateVariant: EmptyStateVariant = 'desktop';
-
-  /**
-   * @description The title of the empty state.
-   * @type {string}
-   * @memberof EmptyStateComponent
-   */
-  @Input() title = '';
-
-  /**
-   * @description The body text or description of the empty state.
-   * @type {string}
-   * @memberof EmptyStateComponent
-   */
-  @Input() bodyText = '';
-
-  /**
-   * @description Displays primary button if passed.
-   * @type {string}
-   * @memberof EmptyStateComponent
-   */
-  @Input() primaryButtonText = '';
-
-  /**
-   * Primary button variant - only for new theme.
-   * @type {ButtonVariant}
-   * @memberof EmptyStateComponent
-   */
-  @Input() primaryButtonVariant: ButtonVariant = 'pink';
-
-  /**
-   * @description Displays secondary button if passed.
-   * @type {string}
-   * @memberof EmptyStateComponent
-   */
-  @Input() secondaryButtonText = '';
-
-  /**
-   * Secondary button variant - only for new theme.
-   * @type {ButtonVariant}
-   * @memberof EmptyStateComponent
-   */
-  @Input() secondaryButtonVariant: ButtonVariant = 'black';
-
-  /**
-   * @description Displays tertiary button if passed.
-   * @type {string}
-   * @memberof EmptyStateComponent
-   */
-  @Input() tertiaryButtonText = '';
-
-  /**
-   * Tertiary button variant - only for new theme.
-   * @type {ButtonVariant}
-   * @memberof EmptyStateComponent
-   */
-  @Input() tertiaryButtonVariant: ButtonVariant = 'ghost';
-
-  /**
-   * The language to be used
-   * @type {Language}
-   * @memberof EmptyStateComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof EmptyStateComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Event triggered when the primary button is clicked.
-   * @type {Event}
-   * @event
-   * @memberof TagComponent
-   */
-  @Output() primaryButtonClick = new EventEmitter<Event>();
-
-  /**
-   * Event triggered when the secondary button is clicked.
-   * @type {Event}
-   * @event
-   * @memberof TagComponent
-   */
-  @Output() secondaryButtonClick = new EventEmitter<Event>();
-
-  /**
-   * Event triggered when the tertiary button is clicked.
-   * @type {Event}
-   * @event
-   * @memberof TagComponent
-   */
-  @Output() tertiaryButtonClick = new EventEmitter<Event>();
-
-  buttonApplicationTheme: ApplicationTheme;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnInit() {
-    if (this.applicationTheme !== 'classic') {
-      this.buttonApplicationTheme = this.applicationTheme;
-    }
-  }
-
-  onPrimaryButtonClick(event: Event): void {
-    this.primaryButtonClick.emit(event);
-  }
-
-  onSecondaryButtonClick(event: Event): void {
-    this.secondaryButtonClick.emit(event);
-  }
-
-  onTertiaryButtonClick(event: Event): void {
-    this.tertiaryButtonClick.emit(event);
-  }
-
-  getVariant(variant: ButtonVariant) {
-    if (variant === 'pink') {
-      return 'primary';
-    } else if (variant === 'black') {
-      this.buttonApplicationTheme = 'light';
-      return 'secondary';
-    } else {
-      this.buttonApplicationTheme = 'light';
-      return 'ghost';
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/field/__snapshots__/field.component.spec.ts.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FieldComponent should render correctly 1`] = `
-<ui-field
-  allowOnlyDigits="false"
-  applicationTheme={[Function String]}
-  ariaRequired="false"
-  cdr={[Function ViewRef$1]}
-  class={[Function String]}
-  currentType={[Function String]}
-  defaultAppTheme="null"
-  domSanitizer={[Function _DomSanitizerImpl]}
-  fieldBlur={[Function EventEmitter_]}
-  hideBuiltInErrors="false"
-  hideLabelInErrors="false"
-  hintMessage=""
-  id=""
-  isActiveField="false"
-  isActiveHover="false"
-  isValid="false"
-  label=""
-  language={[Function String]}
-  loading="false"
-  matIconRegistry={[Function _MatIconRegistry]}
-  maxCharacters={[Function Number]}
-  maxRows="0"
-  ngControl="null"
-  onChange={[Function Function]}
-  onTouch={[Function Function]}
-  placeholder=""
-  showBottomContent={[Function Boolean]}
-  showClose="false"
-  trackByFn={[Function Function]}
-  translationContext={[Function String]}
-  trimOnBlur="false"
-  trimOnSubmit="false"
-  type={[Function String]}
-  updateOnBlur="false"
-  validateEvent={[Function EventEmitter_]}
-  value=""
->
-  <mat-form-field
-    appearance="outline"
-    aria-required="false"
-  >
-    <input
-      digitsonly=""
-      matinput=""
-      name="undefined"
-      placeholder=""
-      type="text"
-    />
-  </mat-form-field>
-</ui-field>
-`;

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

@@ -1,105 +0,0 @@
-<ng-container>
-  <mat-form-field
-    (click)="onFieldClick($event)"
-    #uiField
-    appearance="outline"
-    [color]="(errorsLength || (ngControl?.errors && ngControl?.touched ))  ? 'warn' : 'accent'"
-    [ngClass]="{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line' }"
-    (mouseenter)="onActive(true, 'hover')"
-    (mouseleave)="onActive(false, 'hover')"
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-required]="ariaRequired"
-  >
-    <mat-label *ngIf="label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))">{{ label }} <span *ngIf="required">*</span></mat-label>
-    <mat-icon *ngIf="type === 'search' || type === 'collapsed-search'" matIconPrefix class="search-icon" [svgIcon]="'Search'"></mat-icon>
-    <input
-      *ngIf="type !== 'textarea' && type !== 'multi-line'; else textarea"
-      matInput
-      (blur)="onTouch(); onActive(false, 'focus'); onBlur()"
-      (input)="onInput($event)"
-      [id]="id!"
-      (keyup)="onChangeInputSearch()"
-      [placeholder]="placeholder!"
-      [value]="value"
-      [disabled]="disabled || loading"
-      [type]="currentType"
-      (keyup.enter)="onSubmit()"
-      [name]="fieldName!"
-      digitsOnly
-      [allowOnlyDigits]="allowOnlyDigits"
-      (focusin)="onActive(true, 'focus')"
-    />
-
-    <ng-template #textarea>
-      <textarea
-        matInput
-        (blur)="onTouch(); onActive(false, 'focus'); onBlur()"
-        (input)="onInput($event)"
-        [id]="id!"
-        (keyup)="onChangeInputSearch()"
-        (keyup.enter)="onSubmit()"
-        [placeholder]="placeholder!"
-        [value]="value"
-        [disabled]="disabled"
-        [type]="currentType"
-        [name]="fieldName!"
-        cdkTextareaAutosize
-        [cdkAutosizeMinRows]="type === 'multi-line' ? 1 : 5"
-        [cdkAutosizeMaxRows]="type === 'multi-line' ? maxRows : 5 "
-        (focusin)="onActive(true, 'focus')"
-      ></textarea>
-    </ng-template>
-
-    <div class="options" *ngIf="type === 'search' || type === 'password' || type === 'validation-text'">
-      <div class="options-container">
-        <ui-button
-          *ngIf="showClose"
-          variant="secondary"
-          [justIcon]="true"
-          class="close"
-          iconName="Close"
-          [label]="('COMMON.CLEAR') | uiTranslate : language"
-          (buttonClickEvent)="clearValue()"
-          [ariaLabel]="ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language"
-        ></ui-button>
-        <ui-icon
-          [size]="'24'"
-          class="password"
-          *ngIf="type === 'password'"
-          [name]="getPasswordIcon"
-          [applicationTheme]="applicationTheme"
-          (click)="showPasswordClick()"
-        ></ui-icon>
-
-        <ng-container
-          *ngIf="type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length"
-        >
-          <ui-button
-            *ngIf="!isValid"
-            class="validation"
-            [variant]="'text'"
-            [applicationTheme]="'light'"
-            [label]="'Validate'"
-            [loading]="loading"
-            (click)="validate()"
-            [disabled]="disabled"
-            [size]="'small'"
-          ></ui-button>
-          <ui-icon class="valid" [color]="'white'" applicationTheme="light" [name]="'Check'" *ngIf="isValid"></ui-icon>
-        </ng-container>
-      </div>
-    </div>
-    <mat-hint class="info" *ngIf="type === 'textarea' && !_errors">{{ value.length }} / {{ maxCharacters }}</mat-hint>
-    <mat-hint class="info" *ngIf="hintMessage && !_errors && type !== 'textarea'">{{ hintMessage }}</mat-hint>
-    <mat-hint class="error" *ngIf="errorsLength || (ngControl?.errors | hasValidationError)">
-      <ng-template [ngIf]="errorsLength">
-        <div class="errors" *ngFor="let error of _errors; trackBy: trackByFn">
-          <ui-icon [applicationTheme]="applicationTheme" [name]="'Error'"></ui-icon>
-          <span [innerHTML]="error"></span>
-        </div>
-      </ng-template>
-
-      <ui-validation-error *ngIf="ngControl && !hideBuiltInErrors" [ngControl]="ngControl" [label]="hideLabelInErrors ? null : label" [language]="language"></ui-validation-error>
-    </mat-hint>
-  </mat-form-field>
-</ng-container>

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

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { ButtonComponentModule } from '../../components/button/button.component.module';
-import { IconComponentModule } from '../../components/icon/icon.component.module';
-import { DigitsOnlyDirective } from '../../directives/digits-only.directive';
-import { FieldComponent } from './field.component';
-import { MatIconModule } from '@angular/material/icon';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { ValidationErrorModule } from '../validation-error/validation-error.module';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-
-@NgModule({
-  declarations: [FieldComponent, DigitsOnlyDirective],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    IconComponentModule,
-    FormsModule,
-    ReactiveFormsModule,
-    ButtonComponentModule,
-    MatIconModule,
-    UiTranslatePipe,
-    ValidationErrorModule,
-    HasValidationErrorPipe,
-  ],
-  exports: [FieldComponent],
-})
-export class FieldComponentModule {}