@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.scss

@@ -0,0 +1,35 @@
+:host {
+  position: absolute;
+  top: 1px;
+  left: 0;
+  width: calc(100% - 2.625em);
+
+  .input-wrapper {
+    border: none;
+    box-shadow: none;
+
+    &.expanded {
+      display: flex;
+
+      .input-group input.gds-field {
+        height: calc(100% - 2px);
+        width: 100%;
+        min-height: unset;
+        margin-left: 1px;
+        padding-left: 1rem;
+        padding-right: 1rem;
+
+        border: none;
+        box-shadow: none;
+      }
+    }
+
+    &.collapsed {
+      display: none;
+    }
+
+    .input-group {
+      width: 100%;
+    }
+  }
+}

package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.spec.ts

@@ -0,0 +1,177 @@
+import { CommonModule } from '@angular/common'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing'
+import { TranslocoModule } from '@jsverse/transloco'
+
+import { NggvI18nTestModule } from '@sebgroup/green-angular/src/v-angular/i18n'
+import { NggvDropdownComponent } from '../../../dropdown/dropdown.component'
+import { NggvInputComponent } from '../../../input/input.component'
+import { NggvTypeaheadInputComponent } from './typeahead-input.component'
+
+@Component({
+  template: '',
+
+  selector: 'nggv-dropdown',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [
+    'placeholder',
+    'options',
+    'scrollOffset',
+    'allowNullishOption',
+    'selectOnSingleOption',
+  ],
+  // eslint-disable-next-line @angular-eslint/no-outputs-metadata-property
+  outputs: ['expandedChange'],
+})
+export class DropdownStubComponent {
+  @Input() selectOnSingleOption?: boolean
+  @Output() expandedChange: EventEmitter<boolean> = new EventEmitter()
+}
+
+describe('[NggvCore]', () => {
+  // ----------------------------------------------------------------------------
+  // TypeaheadInput - constructor()
+  // ----------------------------------------------------------------------------
+  describe('TypeaheadInputComponent - constructor()', () => {
+    let component: NggvTypeaheadInputComponent
+    let fixture: ComponentFixture<NggvTypeaheadInputComponent>
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          NggvTypeaheadInputComponent,
+          DropdownStubComponent,
+          NggvInputComponent,
+        ],
+        imports: [CommonModule, TranslocoModule, NggvI18nTestModule],
+      })
+      fixture = TestBed.createComponent(NggvTypeaheadInputComponent)
+      component = fixture.componentInstance
+      component.hostComponent =
+        new DropdownStubComponent() as NggvDropdownComponent
+    }))
+
+    it('should create', () => {
+      fixture.detectChanges()
+      expect(component).toBeTruthy()
+    })
+
+    describe('handleExpandedChange', () => {
+      it('sets expanded to true when true is emitted', () => {
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(true)
+        expect(component.expanded).toEqual(true)
+      })
+
+      it('calls to set focus on input when expanded is true', fakeAsync(() => {
+        const spy = jest.spyOn(component, 'setFocus')
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(true)
+        tick(1)
+        expect(spy).toHaveBeenCalled()
+      }))
+
+      it('does not call to set focus on input when expanded is false', () => {
+        const spy = jest.spyOn(component, 'setFocus')
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(false)
+        expect(spy).not.toHaveBeenCalled()
+      })
+
+      it("calls set input with selected value when it's opened", () => {
+        const dummyValue = 'Dummy'
+        const formatterSpy = jest
+          .spyOn(component as any, 'formatSelected')
+          .mockReturnValue(dummyValue)
+        const setInputSpy = jest.spyOn(component as any, 'setInput')
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(true)
+        expect(formatterSpy).toHaveBeenCalled()
+        expect(setInputSpy).toHaveBeenCalledWith(dummyValue, false)
+      })
+
+      it("calls set input with empty string when it's closed", () => {
+        const setInputSpy = jest.spyOn(component as any, 'setInput')
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(false)
+        expect(setInputSpy).toHaveBeenCalledWith('', true)
+      })
+
+      it('sets expanded to false when false is emitted', () => {
+        fixture.detectChanges()
+        component.hostComponent.expandedChange.next(false)
+        expect(component.expanded).toEqual(false)
+      })
+    })
+
+    describe('formatSelected', () => {
+      it.each`
+        value                                        | expectedValue
+        ${undefined}                                 | ${''}
+        ${null}                                      | ${''}
+        ${{ key: null, label: 'Real string' }}       | ${''}
+        ${{ key: undefined, label: 'Real string' }}  | ${''}
+        ${{ key: 0, label: 'Real string' }}          | ${'Real string'}
+        ${{ key: '', label: 'Real string' }}         | ${'Real string'}
+        ${{ key: 'real key', label: 'Real string' }} | ${'Real string'}
+      `(
+        'return $expectedValue when value is $value',
+        ({ value, expectedValue }) => {
+          const res = (component as any).formatSelected(value)
+          expect(res).toStrictEqual(expectedValue)
+        },
+      )
+
+      it.each`
+        value                                                 | expectedValue
+        ${{ key: 'real key', label: 'Real string' }}          | ${'REAL STRING'}
+        ${{ key: 'real key', wrongLabelProp: 'Real string' }} | ${''}
+      `(
+        'return $expectedValue when value is $value',
+        ({ value, expectedValue }) => {
+          const formatterFunc = (v: { key: any; label: string }) =>
+            v.label?.toUpperCase()
+          component.selectedFormatter = formatterFunc
+          const res = (component as any).formatSelected(value)
+          expect(res).toStrictEqual(expectedValue)
+        },
+      )
+    })
+
+    describe('setInput', () => {
+      it('sets input but does not trigger filter', () => {
+        const dummyValue = 'Test123'
+        const onChangeSpy = jest.spyOn(component as any, 'onChange')
+        const inputChangeSpy = jest.spyOn(
+          (component as any).inputChange$,
+          'next',
+        )
+        ;(component as any).setInput(dummyValue, false)
+
+        expect(component.state).toEqual(dummyValue)
+        expect(onChangeSpy).not.toHaveBeenCalled()
+        expect(inputChangeSpy).not.toHaveBeenCalled()
+      })
+
+      it('sets input but and trigger filter', () => {
+        const dummyValue = 'Test789'
+        const onChangeSpy = jest.spyOn(component as any, 'onChange')
+        const inputChangeSpy = jest.spyOn(
+          (component as any).inputChange$,
+          'next',
+        )
+        ;(component as any).setInput(dummyValue, true)
+
+        expect(component.state).toEqual(dummyValue)
+        expect(onChangeSpy).toHaveBeenCalledWith(dummyValue)
+        expect(inputChangeSpy).toHaveBeenCalledWith(dummyValue)
+      })
+    })
+  })
+})

package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.ts

@@ -0,0 +1,160 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Renderer2,
+  Self,
+} from '@angular/core'
+import { NgControl } from '@angular/forms'
+import { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'
+import { takeUntil } from 'rxjs'
+
+import { OptionBase } from '@sebgroup/green-angular/src/v-angular/core'
+import { NggvInputComponent } from '@sebgroup/green-angular/src/v-angular/input'
+import { NggvDropdownComponent } from '../../dropdown.component'
+
+@Component({
+  selector: 'nggv-typeahead-input',
+  templateUrl: './typeahead-input.component.html',
+  styleUrls: ['./typeahead-input.component.scss'],
+})
+export class NggvTypeaheadInputComponent
+  extends NggvInputComponent
+  implements OnInit, OnDestroy
+{
+  /** Reference to the host dropdown */
+  @Input() hostComponent!: NggvDropdownComponent
+
+  /** Formats each item that is displayed as an option. Only applies format if the option if it implement Option interface. */
+  @Input() resultFormatter?: (option: OptionBase<any>) => string
+
+  /** Formats the selected item in the input when dropdown is opened. If no function is provided, it will display the value of the selected objects label property */
+  @Input() selectedFormatter?: (selected: OptionBase<any>) => string
+
+  get dropdownButton(): HTMLElement {
+    return this.hostComponent.inputRef?.nativeElement
+  }
+
+  /** Boolean to indicate wether the dropdown is expanded or not, to apply appropriate styling */
+  expanded = false
+
+  /** Used to determine the height of the inputin html */
+  buttonHeight?: number
+
+  /** @internal Used to determine wether the input has been moved or not */
+  inputMoved = false
+
+  constructor(
+    public element: ElementRef,
+    private renderer2: Renderer2,
+    @Self() @Optional() public ngControl: NgControl,
+    @Optional()
+    @Inject(TRANSLOCO_SCOPE)
+    protected translocoScope: TranslocoScope,
+    protected cdr: ChangeDetectorRef,
+  ) {
+    super(ngControl, translocoScope, cdr, element)
+    super.ngOnInit()
+  }
+
+  ngOnInit() {
+    this.autocomplete = 'off'
+    this.debounceTime = 0
+    this.hostComponent.selectOnSingleOption = false
+
+    this.handleExpandedChange()
+  }
+
+  /**
+   * @internal
+   * Allow space to be inputted as text
+   * @param event fired containing which key was released.
+   */
+  @HostListener('keyup', ['$event'])
+  onKeyUp(event: KeyboardEvent) {
+    if (event.code === 'Space' && this.expanded) {
+      event.preventDefault()
+    }
+  }
+
+  /**
+   * @internal
+   * First time the dropdown is expanded, move the input sp it becomes a child of the dropdown button
+   * to better reflect semantics and styling.
+   */
+  private moveInput() {
+    // Workaround to execute code in setTimeout due to hooks management etc.
+    setTimeout(() => {
+      // Only move if parent dropdown is found
+      if (this.dropdownButton) {
+        this.renderer2.appendChild(
+          this.dropdownButton.querySelector('button'),
+          this.element.nativeElement,
+        )
+        this.inputMoved = true
+      }
+    }, 0)
+  }
+
+  /**
+   * @internal
+   * When dropdown is expanded, focus on the input. If a value is selected, set it in the input.
+   * When the dropdown is collapsed, empty the input from text.
+   */
+  private handleExpandedChange() {
+    this.hostComponent.expandedChange
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((state) => {
+        this.expanded = state
+
+        // Calling this function from onInit caused issues when DOM has not fully been initialized because of
+        // different CSS used to hide (but not remove) from DOM
+        if (!this.inputMoved) this.moveInput()
+
+        // Get the height of the parent button so the input can be explicitly set to the same height since it's absolutely positioned
+        this.buttonHeight =
+          this.dropdownButton?.getBoundingClientRect().height || 32 // Default to 2em;
+
+        if (this.expanded) {
+          // Weird workaround for setting focus. Didn't set focus, but wrapping in setTimeout solved it.
+          // See suggestion here: https://github.com/ionic-team/stencil/issues/3772#issuecomment-1292599609
+          setTimeout(() => this.setFocus())
+          // Format and interpolate result since return type can be other than string from the formatter
+          const formattedValue = `${this.formatSelected(this.hostComponent.state)}`
+          this.setInput(formattedValue, false)
+        } else this.setInput('', true)
+      })
+  }
+
+  /**
+   * @internal Formats the selected option to display in the input. Interpolate the returned value
+   * since we don't know the return type or label type.
+   * @param value The selected value
+   * @returns The formatted value
+   */
+  private formatSelected(value: OptionBase<any>) {
+    if (value?.key == null) return ''
+    // If no formatter exists, return the label or empty string
+    if (!this.selectedFormatter) return value.label ?? ''
+    // If a formatter exists, use it
+    return this.selectedFormatter(value) ?? ''
+  }
+
+  /**
+   * Sets the input programmatically instead of native HTML input event.
+   * @param input
+   */
+  private setInput(input: string, triggerFilter: boolean) {
+    this.state = input
+    if (triggerFilter) {
+      this.onChange(this.state)
+      this.inputChange$.next(this.state)
+    }
+  }
+}

package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.stories.ts_

@@ -0,0 +1,175 @@
+import '../../core.globals';
+
+import { CommonModule } from '@angular/common';
+import { APP_INITIALIZER, importProvidersFrom } from '@angular/core';
+import { AbstractControl, ReactiveFormsModule, UntypedFormControl, Validators } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { delay, distinctUntilChanged, lastValueFrom, of } from 'rxjs';
+
+import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';
+import { TranslocoLoader, TranslocoService } from '@jsverse/transloco';
+import { NggvI18nModule } from '@sebgroup/nggv-i18n';
+import { NggvInputMaskModule } from '@sebgroup/nggv-input-mask';
+import { TooltipDirective } from '@sebgroup/nggv-tooltip';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+
+import { NggvButtonComponent } from '../../button/button.component';
+import { CharacterCountdownDirective } from '../../character-countdown/character-countdown.directive';
+import { NggvCheckboxComponent } from '../../checkbox/checkbox.component';
+import { DropdownUtils } from '../../core.utils';
+import { NggvDropdownListComponent } from '../../dropdown-list/dropdown-list.component';
+import { NggvDropdownComponent } from '../../dropdown/dropdown.component';
+import { ExternalLinkDirective } from '../../external-link/external-link.directive';
+import { NggvInfoCircleComponent } from '../../info-circle/info-circle.component';
+import { NggvTypeaheadDirective } from '../typeahead.directive';
+import { NggvTypeaheadInputComponent } from './typeahead-input.component';
+
+interface WithExtras {
+  notice: string;
+  tooltip?: string;
+  info?: string;
+  text?: string;
+  ngModel: string;
+}
+
+const en = {
+  'error.fieldinputmask': 'Invalid value pattern',
+  'error.fieldrequired': 'Field must have content',
+  'error.fieldmaxlength': 'Field content should not be longer than {{requiredLength}} characters',
+  'label.defaultlabel': 'Label',
+  'label.maxlength': 'characters left',
+  'label.optional': 'Optional',
+};
+
+const sv = {
+  'error.fieldinputmask': 'Icke giltigt tecken mönster',
+  'error.fieldrequired': 'Fältet får inte lämnas tomt',
+  'error.fieldmaxlength': 'Fältinnehållet måste vara längre än {{requiredLength}} tecken',
+  'label.maxlength': 'tecken kvar',
+};
+
+class TranslocoInlineLoader implements TranslocoLoader {
+  getTranslation(lang: string) {
+    if (lang === 'sv') {
+      return lastValueFrom(of(sv).pipe(delay(1500)));
+    }
+    return lastValueFrom(of(en).pipe(delay(500)));
+  }
+}
+
+let translocoServiceInstance: TranslocoService;
+
+function translocoStorybookInitializer(translocoService: TranslocoService) {
+  return () => {
+    translocoServiceInstance = translocoService;
+    translocoService.langChanges$.pipe(distinctUntilChanged()).subscribe();
+  };
+}
+
+const meta: Meta<NggvTypeaheadInputComponent> = {
+  title: 'Core/TypeaheadInput',
+  component: NggvTypeaheadInputComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(NggvI18nModule),
+        {
+          provide: APP_INITIALIZER,
+          useFactory: translocoStorybookInitializer, // our initializer hook
+          multi: true,
+          deps: [TranslocoService], // the dependencies that Angular passes as arguments to our hook
+        },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: (iconLibrary: FaIconLibrary) => {
+            return async () => iconLibrary.addIcons(faInfoCircle);
+          },
+          deps: [FaIconLibrary],
+          multi: true,
+        },
+        DropdownUtils,
+      ],
+    }),
+    moduleMetadata({
+      declarations: [
+        NggvButtonComponent,
+        NggvDropdownComponent,
+        NggvDropdownListComponent,
+        NggvCheckboxComponent,
+        TooltipDirective,
+        NggvInfoCircleComponent,
+        CharacterCountdownDirective,
+        ExternalLinkDirective,
+      ],
+      imports: [
+        NggvTypeaheadDirective,
+        CommonModule,
+        FontAwesomeModule,
+        NggvI18nModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        NggvInputMaskModule.forRoot({ inputSelector: 'input', isAsync: true }),
+      ],
+    }),
+  ],
+};
+export default meta;
+
+const Template: StoryFn<NggvTypeaheadInputComponent & WithExtras> = (args: NggvTypeaheadInputComponent & WithExtras) => ({
+  props: args,
+});
+
+const TemplateWithFormControl: StoryFn<NggvTypeaheadInputComponent & WithExtras & any> = (
+  args: NggvTypeaheadInputComponent & WithExtras,
+) => {
+  const ctrl = new UntypedFormControl(args.ngModel, [Validators.required, Validators.maxLength(12)]);
+  ctrl.valueChanges.subscribe((val) => {
+    console.log('input control value:', val);
+    console.log({ required: required() });
+  });
+  const toggleDisableField = () => {
+    if (!!ctrl.disabled) return ctrl.enable();
+    ctrl.disable();
+  };
+  const required = () => {
+    const error = ctrl.validator && ctrl.validator({} as AbstractControl);
+    return error && error.required;
+  };
+  return {
+    template: /*html*/ `
+    <nggv-input
+      [label]="label"
+      [formControl]="formControl">
+    </nggv-input>
+    <div style="margin-top: 1rem">
+      <button type="button" class="gds-button" (click)="disableFn()">Toggle disable control</button>
+    </div>
+    `,
+    props: {
+      ...args,
+      formControl: ctrl,
+    },
+  };
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'Field label',
+  ngModel: 'textual value',
+  description: 'This is a field description',
+  required: undefined,
+  optional: false,
+  disabled: false,
+  invalid: false,
+};
+
+export const WithFormControl = TemplateWithFormControl.bind({});
+WithFormControl.args = {
+  ...Primary.args,
+  invalid: undefined,
+  required: undefined,
+  optional: undefined,
+  valid: undefined,
+};