@WidgetComponent

nm-autocomplete

File

src/app/shared/widgets/autocomplete/autocomplete.component.ts

Extends

SelectWidgetComponent

Implements

OnInit

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`nm-autocomplete`
styleUrls	`.select/select.component.scss, autocomplete.component.scss`
templateUrl	`./autocomplete.component.html`

Index

Constructor

constructor(_widgetframeService: WidgetframeService, dialog: DialogService, translateService: TranslateService, localStorageService: LocalStorageService, _changeDetectorRef: ChangeDetectorRef, _progressbarService: ProgressbarService)

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:35

Parameters :

Name	Type	Optional
_widgetframeService	`WidgetframeService`	no
dialog	`DialogService`	no
translateService	`TranslateService`	no
localStorageService	`LocalStorageService`	no
_changeDetectorRef	`ChangeDetectorRef`	no
_progressbarService	`ProgressbarService`	no

Methods

closePanel

closePanel()

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:96

Returns : void

formatDisplay

formatDisplay(selectedValue?: any)

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:68

Parameters :

Name	Type	Optional
selectedValue	`any`	yes

Returns : string | [] | undefined

ngOnInit

ngOnInit()

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:55

Returns : void

Private addOptions

addOptions(data: any, configuration: WidgetConfig)

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:751

Parameters :

Name	Type	Optional
data	`any`	no
configuration	`WidgetConfig`	no

Returns : void

clearCustomValue

clearCustomValue()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1059

Returns : void

clearMultiCustomValues

clearMultiCustomValues(selection: any)

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1069

Parameters :

Name	Type	Optional
selection	`any`	no

Returns : void

Protected configureWidget

configureWidget(configuration: WidgetConfig)

Decorators : WidgetConfigure

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:492

Parameters :

Name	Type	Optional
configuration	`WidgetConfig<SelectConfiguration>`	no

Returns : void

Private extract

extract(value: any, property: string)

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:883

Parameters :

Name	Type	Optional
value	`any`	no
property	`string`	no

Returns : string

filterOptions

filterOptions(event?: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:893

Parameters :

Name	Optional
event	yes

Returns : void

groupFilterOptions

groupFilterOptions(event?: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:929

Parameters :

Name	Optional
event	yes

Returns : void

ngAfterViewInit

ngAfterViewInit()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1022

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1115

Returns : void

onChange

onChange()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:342

Returns : void

onCloseSelect

onCloseSelect()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1013

Returns : void

onOpen

onOpen(open: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:436

Parameters :

Name	Optional
open	no

Returns : void

onOpenedChange

onOpenedChange(open: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:432

Parameters :

Name	Optional
open	no

Returns : void

onSelectionChange

onSelectionChange(event: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:335

Parameters :

Name	Optional
event	no

Returns : void

Private selectDefault

selectDefault()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:864

Returns : void

selectedOptionType

selectedOptionType(optionType: string)

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1108

Parameters :

Name	Type	Optional
optionType	`string`	no

Returns : void

selectGroupIdentifier

selectGroupIdentifier(event: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:487

Parameters :

Name	Optional
event	no

Returns : void

sendGroupedSelection

sendGroupedSelection(groupIdentifier: )

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:973

Parameters :

Name	Optional
groupIdentifier	no

Returns : void

setDefaultCustomValue

setDefaultCustomValue(defaultSelection: any)

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:1084

Parameters :

Name	Type	Optional
defaultSelection	`any`	no

Returns : void

storeAndSend

storeAndSend()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:440

Returns : void

Properties

autoComplete

autoComplete:     MatAutocompleteTrigger

Type : MatAutocompleteTrigger

Decorators : ViewChild

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:33

Public displayWithFn

displayWithFn:

Default value : this.formatDisplay.bind(this)

Defined in src/app/shared/widgets/autocomplete/autocomplete.component.ts:35

Public _id

_id:

Decorators : WidgetId

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:193

Public addAllOption

addAllOption:     boolean

Type : boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:306

Public addEmptyOption

addEmptyOption:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:297

Public addLabel

addLabel:     boolean

Type : boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:310

Private addOptionFiltered

addOptionFiltered:     boolean

Type : boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:307

Public allOption

allOption:     object

Type : object

Default value : { value: "ALL", prompt: "All" }

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:311

Public autofocus

autofocus:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:290

Private clearOptionsOnReset

clearOptionsOnReset:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:319

Public configuration

configuration:     WidgetConfig<SelectConfiguration>

Type : WidgetConfig<SelectConfiguration>

Decorators : WidgetConfiguration

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:196

Public cssClass

cssClass:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:314

Public customValueMode

customValueMode:     boolean

Type : boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:316

Public customValueObject

customValueObject:     object

Type : object

Default value : { value: "", prompt: "" }

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:318

Public dataFromStream

dataFromStream:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:303

Private defaultSelection

defaultSelection:     Subject<any>

Type : Subject<any>

Default value : new ReplaySubject<any>(1)

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:233

Set the current selection to the inputted value when triggered

Public dialog

dialog:     DialogService

Type : DialogService

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:328

Public disabled

disabled:     Subject<any>

Type : Subject<any>

Default value : new BehaviorSubject<boolean>(false)

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:245

Disable the selection

Public enableGroupSelection

enableGroupSelection:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:324

Public enableSelectSearch

enableSelectSearch:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:322

Public filterCtrl

filterCtrl:     FormControl

Type : FormControl

Default value : new FormControl()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:301

Public floatLabel

floatLabel:     string

Type : string

Default value : ""

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:291

Public grouped

grouped:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:304

Public groupFilterCtrl

groupFilterCtrl:     FormControl

Type : FormControl

Default value : new FormControl()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:305

Public hideSelect

hideSelect:     boolean

Type : boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:308

Public initialOptions

initialOptions:     any[]

Type : any[]

Default value : []

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:299

Public isMandatory

isMandatory:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:295

Public labelName

labelName:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:309

matSelect

matSelect:     MatSelect

Type : MatSelect

Decorators : ViewChild

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:284

Public multi

multi:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:286

Public needsConfirmation

needsConfirmation:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:296

Private newSelection

newSelection:     any

Type : any

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:315

Public options

options:     any[]

Type : any[]

Default value : []

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:298

Private optionsInput

optionsInput:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:251

Alternative to uri input for options

Public payload

payload:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:215

Takes a value as input that, if not null, will trigger a confirmation dialog on change before the changes are emitted

Public placeholder

placeholder:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:288

Public priorSelection

priorSelection:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:292

Public required

required:     boolean

Type : boolean

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:320

Private requiredChannel

requiredChannel:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:281

Updates required status of select

Private resetChannel

resetChannel:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:227

Trigger the current selection to reset when triggered

Private resetToDefault

resetToDefault:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:263

Reset selection to default value

Public searchPlaceholder

searchPlaceholder:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:317

Public searchString

searchString:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:300

Public selectedArray

selectedArray:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetOutput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:275

Outputs selection when panel is closed, used mainly for multi-select

Private selectedDefault

selectedDefault:     any

Type : any

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:312

Public selectedObject

selectedObject:     Subject<any>

Type : Subject<any>

Default value : new BehaviorSubject<any>(null)

Decorators : WidgetOutput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:208

Outputs the selected objects, whenever it changes. This will emit a single object, or an array (if in multi mode). The content is the whole option

Public selectedRow

selectedRow:     any

Type : any

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:313

Public selectedUiLocale

selectedUiLocale:     Subject<any>

Type : Subject<any>

Default value : new ReplaySubject<any>(1)

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:221

Takes the current locale as input. This is needed to reload the options if the language changes

Public selectedValue

selectedValue:     Subject<any>

Type : Subject<any>

Default value : new ReplaySubject<any>(1)

Decorators : WidgetOutput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:202

Outputs the selected value, whenever it changes. This will emit a single object, or an array (if in multi mode). The content is the property value of the options

Private selectedValueType

selectedValueType:     Subject<any>

Type : Subject<any>

Default value : new ReplaySubject<any>(1)

Decorators : WidgetOutput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:269

Outputs selected value type only if enableGroupSelection configuration is set to true

Private selectHide

selectHide:     Subject<boolean>

Type : Subject<boolean>

Default value : new Subject<boolean>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:257

Hide the selection

Public selection

selection:     any

Type : any

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:287

Private selectionEntry

selectionEntry:     LocalStorageEntry

Type : LocalStorageEntry

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:293

Private selectionTypeEntry

selectionTypeEntry:     LocalStorageEntry

Type : LocalStorageEntry

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:294

selectSearch

selectSearch:     MatSelectSearchComponent

Type : MatSelectSearchComponent

Decorators : ViewChild

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:283

Public selectWidth

selectWidth:     string

Type : string

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:321

Public shouldLabelFloat

shouldLabelFloat:     Boolean

Type : Boolean

Default value : false

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:289

Private subscription

subscription:     Subscription

Type : Subscription

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:325

Public translateService

translateService:     TranslateService

Type : TranslateService

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:329

Public unsubscribe

unsubscribe:

Default value : NgUnsubscribe.create()

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:302

Private uri

uri:     Subject<any>

Type : Subject<any>

Default value : new Subject<any>()

Decorators : WidgetInput

Inherited from SelectWidgetComponent

Defined in SelectWidgetComponent:239

The uri to fetch the options from

import { SelectWidgetComponent } from "../select/select.component";
import { WidgetComponent, WidgetInput, WidgetOutput } from "../widget.metadata";
import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  ViewChild,
  OnInit,
} from "@angular/core";
import { WidgetframeService } from "../widgetframe/widgetframe.service";
import { TranslateService } from "@ngx-translate/core";
import { LocalStorageService } from "../../components/local-storage/local-storage.service";
import { ProgressbarService } from "../../components/progressbar/progressbar.service";

import { MatAutocompleteTrigger } from "@angular/material/autocomplete";
import { deepCopy } from "../../components/util";
import { DialogService } from "../../components/dialog/dialog.service";

@WidgetComponent("nm-autocomplete")
@Component({
  selector: "nm-autocomplete",
  templateUrl: "./autocomplete.component.html",
  styleUrls: [
    "../select/select.component.scss",
    "./autocomplete.component.scss",
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AutoCompleteComponentWidget
  extends SelectWidgetComponent
  implements OnInit {
  @ViewChild("inputField", { read: MatAutocompleteTrigger })
  autoComplete: MatAutocompleteTrigger;

  public displayWithFn = this.formatDisplay.bind(this);

  constructor(
    _widgetframeService: WidgetframeService,
    dialog: DialogService,
    translateService: TranslateService,
    localStorageService: LocalStorageService,
    _changeDetectorRef: ChangeDetectorRef,
    _progressbarService: ProgressbarService
  ) {
    super(
      _widgetframeService,
      dialog,
      translateService,
      localStorageService,
      _changeDetectorRef,
      _progressbarService
    );
  }

  ngOnInit() {
    this.selectedUiLocale.asObservable().subscribe((val) => {
      if (this.selection) {
        let selectionCopy = deepCopy(this.selection);
        this.selection = "";
        setTimeout(() => {
          this.selection = selectionCopy;
          this._changeDetectorRef.detectChanges();
        }, 2);
      }
    });
  }

  formatDisplay(selectedValue?: any): string | any[] | undefined {
    if (selectedValue) {
      if (this.addAllOption && selectedValue === this.allOption.value) {
        return this.allOption.prompt;
      }
      let selected;
      if (this.grouped) {
        for (let item of this.options) {
          if (
            this.enableGroupSelection &&
            item.groupIdentifier === selectedValue
          ) {
            return item.groupName;
          }
          selected = item.groupValues.find(
            (option) => option.value === selectedValue
          );
          if (selected) break;
        }
      } else {
        selected = this.options.find(
          (option) => option.value === selectedValue
        );
      }
      return selected && selected.prompt ? selected.prompt : selectedValue;
    }
  }

  closePanel() {
    this.autoComplete.closePanel();
  }
}

<div
  *ngIf="!hideSelect"
  class="nm-select"
  [ngClass]="{ 'adjust-padding': addLabel }"
>
  <div *ngIf="addLabel" class="select-label">
    <nm-ellipsis [content]="labelName | translate"></nm-ellipsis>
  </div>
  <mat-form-field
    [ngClass]="{ 'adjust-dropdown-width': addLabel }"
    *ngIf="!grouped; else groupedSelect"
  >
    <input
      type="text"
      matInput
      style="width: 100%"
      [disabled]="(disabled | async) ? (disabled | async) : false"
      [placeholder]="placeholder | translate"
      [matAutocomplete]="auto"
      [name]="configuration.configuration['name']"
      [id]="configuration.configuration['name']"
      [ngModel]="selection | translate"
      #model="ngModel"
      (focus)="filterOptions()"
      (ngModelChange)="selection = $event; filterOptions($event)"
      (change)="onChange()"
      #inputField
      (keydown.enter)="options.length == 0 ? inputField.blur() : ''"
      shouldLabelFloat="shouldLabelFloat"
    />
    <mat-icon
      matSuffix
      class="arrow-dropdown"
      style="color: rgba(0, 0, 0, 0.54)"
      >arrow_drop_down</mat-icon
    >

    <mat-autocomplete
      #auto="matAutocomplete"
      [displayWith]="displayWithFn"
      class="table-autocomplete"
      (opened)="onOpen($event)"
      (closed)="onCloseSelect(); inputField.blur()"
      (optionSelected)="onChange()"
    >
      <mat-option *ngIf="addEmptyOption" (click)="model.reset()"></mat-option>
      <mat-option *ngIf="addAllOption" [value]="allOption.value">
        {{ allOption.prompt | translate }}
      </mat-option>
      <ng-container>
        <mat-option *ngFor="let option of options" [value]="option.value">
          <span>{{ option.prompt | translate }}</span>
        </mat-option>
      </ng-container>
    </mat-autocomplete>
  </mat-form-field>

  <ng-template #groupedSelect>
    <mat-form-field [ngClass]="{ 'adjust-dropdown-width': addLabel }">
      <input
        type="text"
        matInput
        style="width: 100%"
        [disabled]="(disabled | async) ? (disabled | async) : false"
        [placeholder]="placeholder | translate"
        [matAutocomplete]="auto"
        [name]="configuration.configuration['name']"
        [id]="configuration.configuration['name']"
        [(ngModel)]="selection"
        #model="ngModel"
        (focus)="groupFilterOptions()"
        (ngModelChange)="groupFilterOptions($event)"
        (change)="onChange()"
        #inputField
        (keydown.enter)="options.length == 0 ? inputField.blur() : ''"
        shouldLabelFloat="shouldLabelFloat"
      />
      <mat-icon matSuffix style="color: rgba(0, 0, 0, 0.54)"
        >arrow_drop_down</mat-icon
      >

      <mat-autocomplete
        #auto="matAutocomplete"
        class="table-autocomplete"
        [displayWith]="displayWithFn"
        (opened)="onOpen($event)"
        (closed)="onCloseSelect(); inputField.blur()"
        (optionSelected)="onChange()"
      >
        <ng-container *ngIf="!enableGroupSelection">
          <mat-optgroup *ngFor="let group of options" [label]="group.groupName">
            <mat-option
              *ngFor="let option of group.groupValues"
              [value]="option.value"
            >
              {{ option.prompt | translate }}
            </mat-option>
          </mat-optgroup>
        </ng-container>
        <ng-container *ngIf="enableGroupSelection">
          <div *ngFor="let group of options">
            <mat-option [value]="group.groupIdentifier">
              {{ group.groupName | translate }}
            </mat-option>
            <mat-option
              *ngFor="let option of group.groupValues"
              [value]="option.value"
              style="padding-left: 32px"
            >
              {{ option.prompt | translate }}
            </mat-option>
          </div>
        </ng-container>
      </mat-autocomplete>
    </mat-form-field>
  </ng-template>
  <br />
</div>

Legend

Html element

Component

Html element with directive

@WidgetComponent

File

Extends

Implements

Metadata

Index

Widget inputs

Widget outputs

Properties

Methods

Constructor

Methods

Properties

results matching ""

No results matching ""