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

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

@@ -1,248 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { DropdownComponent } from './dropdown.component';
-import { OptionType } from './dropdown.model';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from "../../utils/transform-theme";
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-
-export default {
-  title: 'Forms/Dropdown',
-  component: DropdownComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        BrowserAnimationsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        FormsModule,
-        ReactiveFormsModule,
-        IconComponentModule,
-        ButtonComponentModule,
-        MatSelectModule,
-        MatIconModule,
-        UiTranslatePipe,
-        HasValidationErrorPipe,
-      ],
-      declarations: [DropdownComponent],
-    }),
-  ],
-} as Meta;
-
-const OptionsWithSection: OptionType[] = [
-  {
-    sectionTitle: 'Item Section',
-  },
-  {
-    value: 'Item 1',
-  },
-  {
-    value: 'Item 2',
-  },
-  {
-    value: 'Item 3',
-  },
-  {
-    value: 'Item 4',
-  },
-  {
-    value: 'Item 5',
-  },
-];
-
-const Options: OptionType[] = [
-  {
-    value: 'Item 1',
-  },
-  {
-    value: 'Item 2',
-  },
-  {
-    value: 'Item 3',
-  },
-  {
-    value: 'Item 4',
-  },
-  {
-    value: 'Item 5',
-  },
-];
-
-const OptionsWithDisplayValue: OptionType[] = [
-  {
-    value: 'Item 1',
-    displayValue: 'Display Item 1'
-  },
-  {
-    value: 'Item 2',
-    displayValue: 'Display Item 2'
-  },
-  {
-    value: 'Item 3',
-    displayValue: 'Display Item 3'
-  },
-  {
-    value: 'Item 4',
-    displayValue: 'Display Item 4'
-  },
-  {
-    value: 'Item 5',
-    displayValue: 'Display Item 5'
-  },
-];
-
-
-const OPTIONS_CUSTOM_FIELDS: OptionType[] = [
-  {
-    myName: 'Item 1',
-    myValue: 'Display Item 1'
-  },
-  {
-    myName: 'Item 2',
-    myValue: 'Display Item 2'
-  },
-  {
-    myName: 'Item 3',
-    myValue: 'Display Item 3'
-  },
-  {
-    myName: 'Item 4',
-    myValue: 'Display Item 4'
-  },
-  {
-    myName: 'Item 5',
-    myValue: 'Display Item 5'
-  },
-];
-
-const excludeParameter = {
-  controls: {
-    exclude: [
-      'floatLabel',
-      'class',
-      'errorsLength',
-      'clearValue',
-      'classError',
-      'disableIcon',
-      'ngOnInit',
-      'inputChange',
-      'showCheck',
-      'setErrorsLength',
-      'onChange',
-      'onChangeOption',
-      'registerOnChange',
-      'registerOnTouched',
-      'setDisabledState',
-      'writeValue',
-    ],
-  },
-};
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: Options,
-  allowMultipleSelection: false,
-};
-
-Default.parameters = excludeParameter;
-
-export const WithOptionSection = Template.bind({});
-WithOptionSection.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: OptionsWithSection,
-  floatingLabel: false,
-  allowMultipleSelection: false,
-};
-
-WithOptionSection.parameters = excludeParameter;
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: Options,
-  disabled: true,
-};
-
-Disabled.parameters = excludeParameter;
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: Options,
-  allowMultipleSelection: true,
-};
-
-Multiple.parameters = excludeParameter;
-
-export const MultipleWithErrors = Template.bind({});
-MultipleWithErrors.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: Options,
-  allowMultipleSelection: true,
-  errors: ['Helper text'],
-};
-
-MultipleWithErrors.parameters = excludeParameter;
-
-export const WithErrors = Template.bind({});
-WithErrors.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  valueList: Options,
-  errors: ['Helper text'],
-};
-
-WithErrors.parameters = excludeParameter;
-
-export const WithoutLabel = Template.bind({});
-WithoutLabel.args = {
-  placeholder: 'Label',
-  valueList: Options,
-  errors: ['Helper text'],
-};
-
-WithoutLabel.parameters = excludeParameter;
-
-
-export const WithDisplayValue = Template.bind({});
-WithDisplayValue.args = {
-  placeholder: 'Label',
-  label: 'Label',
-  valueList: OptionsWithDisplayValue,
-};
-
-WithDisplayValue.parameters = excludeParameter;
-
-export const WithCustomField = Template.bind({});
-WithCustomField.args = {
-  placeholder: 'Label',
-  label: 'Label',
-  textField: 'myName',
-  valueField: 'myValue',
-  valueList: OPTIONS_CUSTOM_FIELDS,
-};
-
-WithCustomField.parameters = excludeParameter;

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

@@ -1,381 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DestroyRef,
-  DoCheck,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  NgZone,
-  OnChanges,
-  OnInit,
-  Optional,
-  Output,
-  Renderer2,
-  Self,
-  signal,
-  SimpleChanges,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { FloatLabelType } from '@angular/material/form-field';
-import { OptionType } from './dropdown.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { adjustLightness } from "../../utils/color-contrast";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { FocusMonitor } from "@angular/cdk/a11y";
-import { MatSelect } from "@angular/material/select";
-import { IKeyboardEvent } from "../../models/keyboard-events.model";
-
-@Component({
-  selector: 'ui-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DropdownComponent implements OnInit, ControlValueAccessor, DoCheck, OnChanges {
-  @HostBinding() class = 'ui-dropdown';
-
-  /**
-   * Text content will be applied to the input element if present.
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() label? = '';
-
-  /**
-   * Input name attribute
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() name: string;
-  /**
-   * Placeholder to be shown if no value has been selected.
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() placeholder: string;
-
-  /**
-   * Unique id of the element.
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() id? = '';
-
-  /**
-   * Input value
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() value?: string;
-
-  /**
-   * Whether the component is in an error state.
-   *
-   * @type {string[]}
-   * @memberof DropdownComponent
-   */
-  @Input() errors?: string[];
-
-  /**
-   * Whether the component is disabled.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof DropdownComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * List of options.
-   *
-   * @type {OptionType}
-   * @memberof DropdownComponent
-   */
-  @Input() valueList: OptionType[] = [];
-
-  /**
-   * Whether the user should be allowed to clear the values.
-   * Default: true.
-   *
-   * @type {boolean}
-   * @memberof DropdownComponent
-   */
-  @Input() allowClear = true;
-
-  /**
-   * This will allow the user to select multiple values at once.
-   * Default: true.
-   *
-   * @type {boolean}
-   * @memberof DropdownComponent
-   */
-  @Input() allowMultipleSelection? = false;
-
-  /**
-   * Whether the component is required.
-   * Default: false.
-   *
-   * @type {boolean}
-   * @memberof DropdownComponent
-   */
-  @Input() required = false;
-
-  /**
-   * Show reserved content below form field
-   * @property showBottomContent
-   * @type {boolean}
-   * @memberof DropdownComponent
-   */
-  @Input() showBottomContent = true;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DropdownComponent
-   */
-  @HostBinding('attr.theme')
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Hide in build errors for Reactive Forms
-   *
-   * @type {number}
-   * @memberof DropdownComponent
-   */
-  @Input() hideBuiltInErrors = false;
-
-  /**
-   * Hide label in errors
-   *
-   * @type {number}
-   * @memberof DropdownComponent
-   */
-  @Input() hideLabelInErrors = false;
-
-  /**
-   * @property textField
-   * @description The field to be used as the display text in the dropdown.
-   * @memberof DropdownComponent
-   */
-  @Input() textField = '';
-
-  /**
-   * @property valueField
-   * @description The field to be used as the value in the dropdown.
-   * @memberof DropdownComponent
-   */
-  @Input() valueField = '';
-
-  @Input() hasError = false;
-
-  /**
-   * Color of the option hover.
-   * Defaults to Test Gorilla primary color.
-   *
-   * @type {string}
-   * @memberof DropdownComponent
-   */
-  @Input() companyColor: string = ''
-
-  @Output() closed = new EventEmitter<void>();
-  @Output() opened = new EventEmitter<void>();
-
-  @ViewChild('matSelect') matSelect: MatSelect;
-
-  @HostListener('keydown.tab', ['$event'])
-  onTabPress(): void {
-    this.matSelect?.close();
-  }
-
-  /**
-   * @ignore
-   */
-  onChange = (_: any) => {};
-
-  /**
-   * @ignore
-   */
-  onTouch = () => {};
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private readonly cdr: ChangeDetectorRef,
-    @Optional() @Self() public ngControl: NgControl,
-    private readonly renderer2: Renderer2,
-    private readonly focusMonitor: FocusMonitor,
-    private readonly destroyRef: DestroyRef,
-    private readonly ngZone: NgZone,
-  ) {
-
-    this.errors = [];
-    this.valueList = [];
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  floatLabel: FloatLabelType;
-  classError: string;
-  errorsLength: boolean;
-  showCheck: boolean;
-  optionSelected: any;
-  keyboardFocused = signal<boolean>(false);
-  isOpen = signal(false);
-
-  /**
-   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
-   * to display validation errors that might happen (e.g. required)
-   */
-  ngDoCheck(): void {
-    if (this.ngControl?.touched || this.ngControl?.errors) {
-      this.cdr.markForCheck();
-    }
-  }
-
-  ngOnInit(): void {
-    this.errorsLength = this.setErrorsLength();
-    this.setStyleVariable();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['companyColor']) {
-      this.setStyleVariable();
-    }
-  }
-
-
-  ngAfterViewInit(): void {
-    if (this.matSelect._elementRef) {
-      this.focusMonitor.monitor(this.matSelect._elementRef).pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe(origin => this.ngZone.run(() => {
-          this.keyboardFocused.set(origin === 'keyboard')
-        }));
-    }
-
-    this.matSelect._handleKeydown = this.onKeydown.bind(this);
-  }
-
-  clearValue(event: Event): void {
-    event?.stopPropagation();
-    this.value = '';
-    this.optionSelected = null;
-    this.matSelect.value = null;
-    this.onChange(this.value);
-  }
-
-  //Save select value
-  onChangeOption(event: any) {
-    this.value = event.value;
-    this.errorsLength = this.setErrorsLength();
-    this.onTouch();
-    this.onChange(this.value);
-  }
-
-  //Set errors length for validation
-  setErrorsLength(): boolean {
-    if (!!this.errors) {
-      return this.errors.length > 0 ? true : false;
-    }
-    return false;
-  }
-
-  writeValue(value?: any): void {
-    if (value) {
-      this.value = value || '';
-    } else {
-      this.value = '';
-    }
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-
-  onClosed(): void {
-    this.onTouch();
-    this.closed.emit();
-    this.isOpen.set(false);
-  }
-
-  onOpened(): void {
-    this.opened.emit();
-    this.isOpen.set(true);
-  }
-
-  setStyleVariable() {
-    const active = this.companyColor ? adjustLightness(this.companyColor, 'pressed') : '#FFE6FA'
-    const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';
-    this.renderer2.setAttribute(document.body, 'style', `
-    --dropdown-color-option-active: ${active};
-    --dropdown-color-option-hover: ${hover}`);
-  }
-
-  onKeydown($event: KeyboardEvent) {
-    if ($event.key === IKeyboardEvent.ARROW_DOWN || $event.key === IKeyboardEvent.ARROW_UP) {
-      if (!this.matSelect.panelOpen) {
-        this.matSelect.open();
-      } else {
-        const selectedItem = this.optionSelected || this.matSelect.options.first;
-        const index = this.matSelect.options.toArray().indexOf(selectedItem);
-        const nextIndex = $event.key === IKeyboardEvent.ARROW_DOWN ? (index + 1) > this.matSelect.options.length - 1 ? index : (index + 1) : index - 1;
-        this.optionSelected = this.matSelect.options.toArray()[nextIndex];
-
-        if (this.optionSelected) {
-          this.matSelect._keyManager.setActiveItem(this.optionSelected);
-        }
-      }
-    } else if (($event.key === IKeyboardEvent.SPACE || $event.key === IKeyboardEvent.ENTER)) {
-      if (this.isOpen()) {
-        if (this.optionSelected) {
-          if (!this.allowMultipleSelection) {
-            this.matSelect.value = this.optionSelected.value;
-            this.matSelect.close();
-          } else {
-            if (this.matSelect.value) {
-              this.matSelect.value = this.matSelect.value.includes(this.optionSelected.value) ? this.matSelect.value.filter((value: any) => value !== this.optionSelected.value) : [...this.matSelect.value, this.optionSelected.value];
-            } else {
-              this.matSelect.value = [this.optionSelected.value];
-            }
-          }
-        } else {
-          this.matSelect.value = this.matSelect.options.first.value;
-        }
-        this.onChange(this.matSelect.value);
-      } else {
-        this.matSelect.open();
-      }
-    } else if ($event.key === IKeyboardEvent.HOME) {
-      this.matSelect._keyManager.setFirstItemActive();
-    } else if ($event.key === IKeyboardEvent.END) {
-      this.matSelect._keyManager.setLastItemActive();
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-export type OptionType = {
-  value?: string;
-  displayValue?: string;
-  sectionTitle?: string;
-} & Record<string, any>;

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.component.html

@@ -1,3 +0,0 @@
-<div class="elevation-shadow" [ngClass]="elevationType" [attr.theme]="applicationTheme">
-    <ng-content></ng-content>
-</div>

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ElevationShadowComponent } from './elevation-shadow.component';
-
-@NgModule({
-  declarations: [ElevationShadowComponent],
-  imports: [CommonModule],
-  exports: [ElevationShadowComponent],
-})
-export class ElevationShadowComponentModule {}

package/projects/tgo-canopy-ui/components/elevation-shadow/elevation-shadow.component.scss

@@ -1,41 +0,0 @@
-@use "../../theme/variables" as *;
-
-$border-radius: 8px;
-$rebrand-border-radius: 10px;
-
-.elevation-shadow {
-  &.modal {
-    border: 2px solid $tgo-medium;
-    box-shadow: 2px 24px 48px 8px $box-shadow;
-    border-radius: $border-radius
-  };
-
-  &.default {
-    border: 2px solid $tgo-medium;
-    box-shadow: 0 8px 24px 4px $box-shadow;
-    border-radius: $border-radius
-  }
-
-  &[theme='dark'], &[theme='light'] {
-    &.hover-state, &.default {
-      box-shadow: 0 4px 16px 0 $box-shadow-hover-state;
-      border: 2px solid $black;
-      border-radius: $rebrand-border-radius
-    }
-
-    &.notification {
-      box-shadow: $box-shadow-notification;
-      border-radius: $rebrand-border-radius;
-    }
-
-    &.page-card {
-      box-shadow: $box-shadow-page-card;
-      border-radius: $rebrand-border-radius;
-    }
-
-    &.modal {
-      box-shadow: $box-shadow-modal;
-      border-radius: $rebrand-border-radius;
-    }
-  }
-}