File

core/select/typeahead.component.ts

Implements

ControlValueAccessor Validator AfterViewInit

Metadata

Index

Properties
Methods
Inputs
Outputs

Inputs

allowFreeEntries
Type : boolean
Default value : true
autoClose
Type : boolean
Default value : true
container
Type : string | "body"
Default value : ''
disabled
Type : boolean
Default value : false
displayProperty
Type : string
Default value : 'name'
hideNew
Type : boolean
Default value : false
icon
Type : string
Default value : 'caret-down'
maxlength
Type : string | number
name
Type : string
Default value : this.displayProperty
placeholder
Type : string
required
Type : boolean
Default value : false
selected
Type : IIdentified
Default value : { id: null }

Outputs

onIconClick
Type : EventEmitter
onSearch
Type : EventEmitter

Methods

doBlur
doBlur()
Returns : void
getDisplayProperty
getDisplayProperty()
Returns : any
handleKeyboard
handleKeyboard(event)
Parameters :
Name Optional
event No
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
onShown
onShown()
Returns : void
registerOnChange
registerOnChange(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
reset
reset()

Resets the input field - clear value and clean field to be pristine and untouched.

Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
validate
validate(_ctrl: AbstractControl)
Parameters :
Name Type Optional
_ctrl AbstractControl No
Returns : literal type
writeValue
writeValue(value)
Parameters :
Name Optional
value No
Returns : void

Properties

dropdown
Type : BsDropdownDirective
Decorators :
@ViewChild('dropdown', {static: false})
list
Type : QueryList<ListItemComponent>
Decorators :
@ContentChildren(ListItemComponent)
searchControl
Type : ElementRef
Decorators :
@ViewChild('searchControl', {static: false})
searchControlModel
Decorators :
@ViewChild('searchControlModel', {static: false})
<div
  class="c8y-search-dropdown dropdown fit-w"
  dropdown
  [container]="container"
  placement="bottom left"
  #dropdown="bs-dropdown"
  [autoClose]="true"
  (onShown)="onShown()"
  [isDisabled]="disabled"
>
  <div class="input-group input-group-dropdown" dropdownToggle>
    <input
      #searchControl
      #searchControlModel="ngModel"
      type="text"
      class="form-control text-truncate"
      [ngClass]="{'p-r-80': !hideNew &&
      (selected
        ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
        : false), 
        'p-r-40': hideNew || getDisplayProperty()?.length === 0
        }"
      [required]="required"
      [ngModel]="selected ? getDisplayProperty() : ''"
      [placeholder]="placeholder | translate"
      (blur)="doBlur()"
      [name]="name"
      [maxlength]="maxlength"
      [disabled]="disabled"
      title="{{ placeholder | translate }}"
    />
    <span
      class="label label-info p-absolute"
      style="top: 10px; right: 40px; z-index: 10"
      translate
      *ngIf="
        !hideNew &&
        (selected
          ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
          : false)
      "
    >
      New
    </span>

    <span class="input-group-btn">
      <button
        type="button"
        class="btn btn-clean"
        title="{{ 'Search' | translate }}"
        [disabled]="disabled"
        (click)="onIconClick.emit({ icon, $event });"
      >
        <i [c8yIcon]="icon" class="text-primary"></i>
      </button>
    </span>
  </div>

  <c8y-list-group
    class="dropdown-menu dropdown-menu--modal"
    *dropdownMenu
    [style.width]="container === 'body' ? searchControl.clientWidth + 'px' : undefined"
  >
    <ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
  </c8y-list-group>
</div>

results matching ""

    No results matching ""