@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/filter-button/filter-button.component.ts

@@ -0,0 +1,243 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  EventEmitter,
+  HostBinding,
+  Inject,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  QueryList,
+  signal,
+  SimpleChanges,
+  ViewChild,
+  ViewChildren,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { FilterButtonOption } from './filter-button.model';
+import { IconName } from '../icon/icon.model';
+import { ButtonIconPosition } from '../button/button.model';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { IKeyboardEvent } from '../../models/keyboard-events.model';
+
+@Component({
+  selector: 'ui-filter-button',
+  templateUrl: './filter-button.component.html',
+  styleUrls: ['./filter-button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterButtonComponent implements OnChanges {
+  @HostBinding() class = 'ui-filter-button';
+
+  /**
+   * The button label when no value is selected.
+   *
+   * @type {string}
+   * @memberof FilterButtonComponent
+   */
+  @Input() label = '';
+
+  /**
+   * Optional message to display on the overflow bottom.
+   *
+   * @type {string}
+   * @memberof FilterButtonComponent
+   */
+  @Input() message? = '';
+
+  /**
+   * List of selected values.
+   *
+   * @type {string[]}
+   * @memberof FilterButtonComponent
+   */
+  @Input() value: string[] = [];
+
+  /**
+   * Whether the component is disabled.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof FilterButtonComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * List of options.
+   *
+   * @type {OptionType}
+   * @memberof FilterButtonComponent
+   */
+  @Input() options: FilterButtonOption[] = [];
+
+  /**
+   * Whether the user should be allowed to clear the values.
+   * Default: true.
+   *
+   * @type {boolean}
+   * @memberof FilterButtonComponent
+   */
+  @Input() allowClear = true;
+
+  /**
+   * Whether the user should be allowed to select single or multiple values.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof FilterButtonComponent
+   */
+  @Input() singleSelection? = false;
+
+  /**
+   * The icon name to display.
+   *
+   * @type {string}
+   * @memberof FilterButtonComponent
+   *
+   **/
+
+  @Input() iconName?: IconName;
+
+  /**
+   * The position of the icon.
+   * Default: 'right'.
+   *
+   * @type {ButtonIconPosition}
+   * @memberof FilterButtonComponent
+   */
+  @Input() iconPosition?: ButtonIconPosition = 'right';
+
+  /**
+   * Emits the list of selected values when the selection changes.
+   *
+   * @type {EventEmitter<string[]>}
+   * @memberof FilterButtonComponent
+   */
+  @Output() changed = new EventEmitter<string[]>();
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof FilterButtonComponent
+   */
+  @HostBinding('attr.theme')
+  @Input()
+  applicationTheme: ApplicationTheme = 'light';
+
+  @ViewChild('overlayContainer') overlayContainer: any;
+  @ViewChildren('filterOption') filterOptions: QueryList<any>;
+
+  isOpen = signal<boolean>(false);
+  displayedLabel = signal<string>('');
+  tooltip = signal<string>('');
+  search = signal<string>('');
+  showTooltip: { [key: string]: boolean } = {};
+  displayedOptions = computed(() => {
+    let lastSectionTitle: string;
+    return this.options
+      .map(option => {
+        lastSectionTitle = option.sectionTitle || lastSectionTitle;
+        return { ...option, sectionTitle: lastSectionTitle };
+      })
+      .filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));
+  });
+  readonly MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
+  protected keyManager: FocusKeyManager<HTMLElement>;
+  protected translationContext = 'FILTER_BUTTON.';
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    if (this.defaultAppTheme) {
+      this.applicationTheme = this.defaultAppTheme;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // eslint-disable-next-line dot-notation
+    if (changes['value']) {
+      this.updateLabel();
+    }
+  }
+
+  clearValue(): void {
+    this.value = [];
+    this.updateLabel();
+    this.changed.emit(this.value);
+  }
+
+  outsideClick() {
+    window.setTimeout(() => {
+      this.isOpen.set(false);
+    });
+  }
+
+  toggle(): void {
+    this.isOpen.set(!this.isOpen());
+    if (this.isOpen()) {
+      this.keyManager = new FocusKeyManager(this.filterOptions).withWrap();
+      this.keyManager.setActiveItem(0);
+    }
+    this.cdr.markForCheck();
+  }
+
+  isSelected(value?: string) {
+    return this.value?.includes(value || '');
+  }
+
+  optionChanged(selected: boolean, option: FilterButtonOption) {
+    this.value = this.value || [];
+    if (this.singleSelection) {
+      this.value = selected ? [option.value] : [];
+    } else {
+      if (selected) {
+        this.value.push(option.value);
+      } else {
+        this.value.splice(this.value.indexOf(option.value), 1);
+      }
+    }
+    this.changed.emit(this.value);
+    this.updateLabel();
+  }
+
+  keyDownHandler(ev: any) {
+    if (ev.key === IKeyboardEvent.ARROW_DOWN) {
+      ev.preventDefault();
+      this.keyManager.setNextItemActive();
+    } else if (ev.key === IKeyboardEvent.ARROW_UP) {
+      ev.preventDefault();
+      this.keyManager.setPreviousItemActive();
+    } else if (ev.key === IKeyboardEvent.ESCAPE) {
+      this.isOpen.set(false);
+    }
+  }
+
+  onLabelEllipsisChange(isEllipsis: boolean, value: string): void {
+    this.showTooltip[value] = isEllipsis;
+  }
+
+  private updateLabel() {
+    this.value = this.value || [];
+    let displayedLabel = '';
+    let tooltip = '';
+    const sortedLabels = this.options.filter(option => this.value.includes(option.value)).map(item => item?.label || '');
+
+    if (sortedLabels.length > 0) {
+      displayedLabel = this.options.find(option => option.value === this.value[0])?.label || '';
+      tooltip = `${this.label}${sortedLabels.map(value => `\n • ${value}`).join('')}`;
+    }
+
+    if (this.value.length > 1) {
+      displayedLabel += ` (+${this.value.length - 1})`;
+    }
+    this.displayedLabel.set(displayedLabel);
+    this.tooltip.set(tooltip);
+    this.cdr.markForCheck();
+  }
+}

package/projects/tgo-canopy-ui/components/filter-button/filter-button.model.ts

@@ -0,0 +1,9 @@
+import { IconName } from "../icon/icon.model";
+
+export interface FilterButtonOption {
+  value: string;
+  label: string;
+  labelNumber?: number;
+  icon?: IconName;
+  sectionTitle?: string;
+}

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

@@ -0,0 +1,45 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { CheckboxComponentModule } from '../checkbox/checkbox.component.module';
+import { DropdownComponentModule } from '../dropdown/dropdown.component.module';
+import { FieldComponentModule } from '../field/field.component.module';
+import { RadioButtonComponentModule } from '../radio-button/radio-button.component.module';
+import { FormDemoComponent } from './form-demo.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { AutocompleteComponentModule } from '../autocomplete/autocomplete.component.module';
+import { SliderComponentModule } from '../slider/slider.component.module';
+import { PhoneInputComponentModule } from '../phone-input/phone-input.component.module';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { MultiInputComponentModule } from '../multi-input/multi-input.component.module';
+import { DigitsOnlyDirective } from '../../directives/digits-only.directive';
+
+export default {
+  title: 'Forms/Demo',
+  component: FormDemoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        MatRadioModule,
+        ReactiveFormsModule,
+        FormsModule,
+        ButtonComponentModule,
+        CheckboxComponentModule,
+        DropdownComponentModule,
+        FieldComponentModule,
+        RadioButtonComponentModule,
+        AutocompleteComponentModule,
+        SliderComponentModule,
+        PhoneInputComponentModule,
+        MultiInputComponentModule,
+        DigitsOnlyDirective,
+      ],
+      declarations: [FormDemoComponent],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = args => ({
+  props: args,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,220 @@
+<form [formGroup]="formDemo">
+  <h2>UI-Field</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Value text: </strong>{{ formDemo.controls['text'].value }}</caption>
+      <ui-field
+        label="Input text label"
+        formControlName="text"
+        placeholder="Input text"
+        type="text"
+      ></ui-field>
+    </div>
+    <div class="field">
+      <caption><strong>Value password: </strong>{{ formDemo.controls['password'].value }}</caption>
+      <ui-field
+        label="Input password label"
+        formControlName="password"
+        placeholder="Input password"
+        type="password"
+      ></ui-field>
+    </div>
+    <div class="field">
+      <caption><strong>Value search: </strong>{{ formDemo.controls['search'].value }}</caption>
+      <ui-field
+        label="Input search label"
+        formControlName="search"
+        placeholder="Input search"
+        type="search"
+      ></ui-field>
+    </div>
+    <div class="field">
+      <caption><strong>Value email: </strong>{{ formDemo.controls['email'].value }}</caption>
+      <ui-field
+        label="Input email label"
+        formControlName="email"
+        placeholder="Input email"
+        type="email"
+      ></ui-field>
+    </div>
+    <div class="field">
+      <caption><strong>Value number: </strong>{{ formDemo.controls['numberField'].value }}</caption>
+      <ui-field
+        label="Input number label"
+        formControlName="numberField"
+        placeholder="Input number"
+        type="number"
+      ></ui-field>
+    </div>
+    <div class="field">
+      <caption><strong>Value tel: </strong>{{ formDemo.controls['tel'].value }}</caption>
+      <ui-field
+        label="Input tel label"
+        formControlName="tel"
+        placeholder="Input tel"
+        type="tel"
+      ></ui-field>
+    </div>
+  </div>
+  <h2>UI-Dropdown</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Value dropdown: </strong>{{ formDemo.controls['dropdown'].value }}</caption>
+      <ui-dropdown
+        label="Dropdown label"
+        formControlName="dropdown"
+        placeholder="Dropdown"
+        [valueList]="dropDownList"
+      ></ui-dropdown>
+    </div>
+    <div>
+      <caption><strong>Value dropdownMultiple: </strong>{{ formDemo.controls['dropdownMultiple'].value }}</caption>
+      <ui-dropdown
+        label="Dropdown multiple label"
+        formControlName="dropdownMultiple"
+        placeholder="Dropdown multiple"
+        [valueList]="dropDownList"
+        [allowMultipleSelection]="true"
+      ></ui-dropdown>
+    </div>
+  </div>
+  <h2>UI-Checkbox</h2>
+  <div class="checkbox-list">
+    <div class="field checkbox">
+      <caption><strong>Value checkbox: </strong>{{ formDemo.controls['checkField'].value }}</caption>
+      <ui-checkbox
+        formControlName="checkField"
+        label="Checkbox simple"
+        [checked]="false"
+      ></ui-checkbox>
+    </div>
+    <div class="field checkbox">
+      <caption><strong>Value checkbox indeterminate: </strong>{{ formDemo.controls['checkFieldIndeterminate'].value }}</caption>
+      <ui-checkbox
+        formControlName="checkFieldIndeterminate"
+        label="Checkbox indeterminate"
+        [indeterminate]="true"
+        [checked]="true"
+      ></ui-checkbox>
+    </div>
+    <div class="field checkbox">
+      <caption><strong>Value checkbox multi: </strong>{{ formDemo.controls['checkFieldMulti'].value }}</caption>
+      <ui-checkbox
+        [multiple]="true"
+        formControlName="checkFieldMulti"
+        label="Checkbox with multiple style"
+        [checked]="true"
+      ></ui-checkbox>
+    </div>
+  </div>
+  <h2>UI-Radio-button</h2>
+  <div class="checkbox-list radio">
+    <caption><strong>Value radio buttons simple: </strong>{{ formDemo.controls['radio'].value }}</caption>
+    <mat-radio-group
+      formControlName="radio">
+      <div class="field radio" *ngFor="let radio of radioButtonValues">
+        <ui-radio-button
+          [label]="radio.label"
+          [value]="radio.value"
+          [name]="radio.name"
+          [selected]="radio.checked"
+          (changeRadio)="onChangeRadio($event)"
+        ></ui-radio-button>
+      </div>
+    </mat-radio-group>
+  </div>
+  <div class="checkbox-list radio">
+    <caption><strong>Value radio buttons multiple: </strong>{{ formDemo.controls['radioMulti'].value }}</caption>
+    <mat-radio-group
+      formControlName="radioMulti">
+      <div class="field radio" *ngFor="let radio of radioButtonMultiValues">
+        <ui-radio-button
+          [label]="radio.label"
+          [value]="radio.value"
+          [multiple]="true"
+          [name]="radio.name"
+          [selected]="radio.checked"
+          [allowUnselect]="true"
+          (changeRadio)="onChangeRadioMulti($event)"
+        ></ui-radio-button>
+      </div>
+    </mat-radio-group>
+  </div>
+  <h2>Input Autocomplete (Not form control):</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Primitive Autocomplete Single: </strong>{{ singleAutocompleteValuePrimitive }}</caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [itemValue]="singleAutocompleteValuePrimitive" (selectionChange)="singleAutocompleteValuePrimitive = $event" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST' [suggestionsList]='MOCK_SUGGESTIONS'></ui-autocomplete>
+      </div>
+    </div>
+
+    <div class="field">
+      <caption><strong>Objects Autocomplete Single: </strong>{{ singleAutocompleteValueObject | json }}</caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [textField]="'name'" [valueField]="'id'" [itemValue]="singleAutocompleteValueObject" (selectionChange)="singleAutocompleteValueObject = $event" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
+      </div>
+    </div>
+  </div>
+
+  <h2>Input Autocomplete (Form control):</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Value Autocomplete Predefined single: </strong>{{ formDemo.controls['inputAutocompleteSinglePredefined'].value }}</caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [type]="'single'" [itemValue]="MOCK_ITEMS_LIST[0]" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST' [suggestionsList]='MOCK_SUGGESTIONS' [formControlName]="'inputAutocompleteSinglePredefined'"></ui-autocomplete>
+      </div>
+    </div>
+
+    <div class="field">
+      <caption><strong>Value Autocomplete multiple: </strong><div *ngFor="let item of multiAutocompleteValue">{{item | json}}</div></caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" label="test" (selectionChange)="multiAutocompleteValue = $event" [itemValue]="multiAutocompleteValue" [textField]="'name'" [valueField]="'id'" [type]="'multi'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
+      </div>
+    </div>
+
+    <div class="field">
+      <caption><strong>Value Autocomplete Predefined Multi: </strong><div *ngFor="let item of formDemo.controls['inputAutocompleteMultiPredefined'].value">{{item | json}}</div></caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [textField]="'name'" [valueField]="'id'" placeholder="test2" [type]="'multi'" [formControlName]="'inputAutocompleteMultiPredefined'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
+      </div>
+    </div>
+
+    <div class="field">
+      <caption><strong>Value Autocomplete Predefined Large: </strong><div *ngFor="let item of formDemo.controls['multiLargeAutocompleteValue'].value">{{item | json}}</div></caption>
+      <div>
+        <ui-autocomplete [variant]="DropdownVariation.AUTOCOMPLETE" [textField]="'name'" [valueField]="'id'" [type]="'large'" [formControlName]="'multiLargeAutocompleteValue'" [allowAdd]='true' [itemsList]='MOCK_ITEMS_LIST_OBJECTS' [suggestionsList]='MOCK_SUGGESTIONS_OBJECTS'></ui-autocomplete>
+      </div>
+    </div>
+  </div>
+
+  <h2>Slider:</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Value Slider: </strong>{{ formDemo.controls['slider'].value | json}}</caption>
+      <div>
+        <ui-slider [formControlName]="'slider'"></ui-slider>
+      </div>
+    </div>
+  </div>
+
+  <h2>Phone Number:</h2>
+  <div>
+    <div class="field">
+      <caption><strong>Value Phone Number: </strong>{{ formDemo.controls['phoneNumber'].value}}</caption>
+      <div>
+        <ui-phone-input [formControlName]="'phoneNumber'" [countryList]="countryList"></ui-phone-input>
+      </div>
+    </div>
+  </div>
+
+  <h2>Multi input:</h2>
+  <div style="margin-bottom: 150px">
+    <div class="field">
+      <caption><strong>Value Multi Input: </strong>{{ formDemo.controls['multiInput'].value | json }}</caption>
+      <div>
+        <ui-multi-input [maxCharacters]="10" [formControlName]="'multiInput'" [itemsList]="currenciesList" [itemValueField]="'currency_code'" [itemTextField]="'label'"></ui-multi-input>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { ButtonComponentModule } from '../../components/button/button.component.module';
+import { CheckboxComponentModule } from '../../components/checkbox/checkbox.component.module';
+import { DropdownComponentModule } from '../../components/dropdown/dropdown.component.module';
+import { FieldComponentModule } from '../../components/field/field.component.module';
+import { RadioButtonComponentModule } from '../../components/radio-button/radio-button.component.module';
+import { FormDemoComponent } from './form-demo.component';
+import { AutocompleteComponentModule } from '../autocomplete/autocomplete.component.module';
+import { SliderComponentModule } from '../slider/slider.component.module';
+import { PhoneInputComponentModule } from '../phone-input/phone-input.component.module';
+import { MultiInputComponentModule } from '../multi-input/multi-input.component.module';
+
+@NgModule({
+  declarations: [FormDemoComponent],
+  imports: [
+    CommonModule,
+    FieldComponentModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ButtonComponentModule,
+    CheckboxComponentModule,
+    DropdownComponentModule,
+    RadioButtonComponentModule,
+    MatRadioModule,
+    AutocompleteComponentModule,
+    SliderComponentModule,
+    PhoneInputComponentModule,
+    MultiInputComponentModule,
+  ],
+  exports: [FormDemoComponent],
+  providers: [],
+})
+export class FormDemoComponentModule {}

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

@@ -0,0 +1,59 @@
+:host {
+  display:flex;
+  justify-content: center;
+  flex-flow: column;
+  align-items: center;
+
+  caption { margin-bottom: 15px;}
+
+  form div.checkbox-list,
+  mat-radio-group {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 20px;
+    row-gap: 20px;
+    margin-bottom: 30px;
+
+    &.radio {
+      margin-bottom: 0;
+    }
+
+    .field.checkbox {
+      display: flex;
+      align-items: center;
+      width: 310px;
+      flex-flow: column;
+      align-items: flex-start;
+    }
+
+    .field.radio {
+      display: flex;
+      align-items: center;
+      width: 30%;
+
+      ui-radio-button {
+        width: 100%;
+      }
+    }
+  }
+
+  form {
+    width: 700px;
+  }
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  .form-value {
+    font-size: 12px;
+    margin-bottom: 20px;
+
+    p {
+      margin: 5px 0;
+    }
+  }
+}