File

core/select/select.component.ts

Implements

OnChanges OnInit

Metadata

Index

Properties
Methods
Inputs
Outputs
HostListeners

Inputs

applyLabel
Type : string
Default value : gettext('Apply')
disableApplyOnNoSelection
Type : boolean
Default value : false
items
Type : Item[]
placeholder
Type : string
Default value : gettext('Select item')
selected
Type : Item[] | selectedFunction
selectedLabel
Type : string | selectedLabelFunction
updateItems
Type : EventEmitter<boolean>

Outputs

onChange
Type : EventEmitter<Item[]>

HostListeners

click
Arguments : '$event'
click(evt)

Methods

applyChanges
applyChanges()
Returns : void
getSelectAllToggleStatus
getSelectAllToggleStatus()
Returns : { label: any; checked: boolean; indeterminate: boolean; }
isAllFilteredSelected
isAllFilteredSelected()
Returns : boolean
isAllItemsSelected
isAllItemsSelected()
Returns : boolean
isNoItemSelected
isNoItemSelected()
Returns : boolean
isOpenChange
isOpenChange(isOpen: boolean)
Parameters :
Name Type Optional
isOpen boolean No
Returns : void
isSelected
isSelected(item: Item)
Parameters :
Name Type Optional
item Item No
Returns : any
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onChangeItem
onChangeItem(checked: boolean, item: Item)
Parameters :
Name Type Optional
checked boolean No
item Item No
Returns : void
outterSelected
outterSelected(item: Item)
Parameters :
Name Type Optional
item Item No
Returns : any
preventClick
preventClick(evt)
Decorators :
@HostListener('click', ['$event'])
Parameters :
Name Optional
evt No
Returns : void
selectAll
selectAll(checked: boolean)
Parameters :
Name Type Optional
checked boolean No
Returns : void
updateFiltered
updateFiltered(term: string)
Parameters :
Name Type Optional
term string No
Returns : void

Properties

dropdown
Type : BsDropdownDirective
Decorators :
@ViewChild(BsDropdownDirective, {static: false})
filteredItems
Type : Item[]
Default value : []
isOpen
Default value : false
labelsForSelectAll
Type : any
Default value : { all: gettext('All'), allFiltered: gettext('All filtered') }
labelText
Type : string
Default value : ''
liChildren
Decorators :
@ContentChildren(ListItemComponent)
searchFilter
Type : null
Default value : null
showAllLabel
Default value : false
Readonly sizeToShowFilter
Type : number
Default value : 5
textFilter
Type : string
Default value : ''
<div
  class="c8y-child-assets-selector dropdown fit-w"
  (isOpenChange)="isOpenChange($event)"
  dropdown
  #dropdown
  c8yDropdownDirection
  px-event="Select type"
>
  <button
    type="button"
    class="btn dropdown-toggle c8y-dropdown"
    title="{{ labelText || placeholder | translate }}"
    dropdownToggle
  >
    <span class="text-truncate" *ngIf="labelText">
      <ng-container *ngIf="showAllLabel">{{ 'All' | translate }}</ng-container>
      <ng-container *ngIf="!showAllLabel">{{ labelText | translate }}</ng-container>
    </span>
    <span class="text-truncate text-muted" *ngIf="!labelText">
      {{ placeholder | translate }}
    </span>
  </button>

  <ul class="dropdown-menu multiselect-container" *dropdownMenu>
    <ng-content select="c8y-li"></ng-content>
    <ng-container *ngIf="liChildren.length === 0">
      <li *ngIf="items.length > sizeToShowFilter" class="multiselect-item">
        <div class="input-group input-group-search">
          <input
            type="search"
            class="form-control"
            placeholder="{{ 'Filter' | translate }}…"
            (keyup)="updateFiltered($event.target.value)"
            [(ngModel)]="searchFilter"
          />
          <span class="input-group-addon">
            <i c8yIcon="search" *ngIf="!textFilter"></i>
            <i c8yIcon="times" class="text-muted" *ngIf="textFilter" (click)="textFilter = ''"></i>
          </span>
        </div>
      </li>

      <li class="multiselect-item">
        <label
          [title]="getSelectAllToggleStatus().label | translate"
          class="c8y-checkbox input-sm"
          ng-click="vm.toggleSelectAll(); $event.preventDefault()"
        >
          <input
            type="checkbox"
            [checked]="getSelectAllToggleStatus().checked"
            (change)="selectAll($event.target.checked)"
            [indeterminate]="getSelectAllToggleStatus().indeterminate"
            class="m-t-0"
          />
          <span></span>
          <span class="label-text">
            {{ getSelectAllToggleStatus().label | translate }}
          </span>
        </label>
      </li>

      <li>
        <ul class="list-unstyled">
          <li class="multiselect-item" *ngFor="let item of filteredItems">
            <label title="{{ item.name | translate }}" class="c8y-checkbox input-sm text-truncate">
              <input
                type="checkbox"
                [checked]="isSelected(item)"
                (change)="onChangeItem($event.target.checked, item)"
                class="m-t-0"
              />
              <span></span>
              <span class="label-text">
                {{ item.name | translate }}
              </span>
            </label>
          </li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="bg-white">
        <button
          title="{{ applyLabel | translate }}"
          class="btn btn-primary btn-block"
          [disabled]="disableApplyOnNoSelection && isNoItemSelected()"
          (click)="applyChanges()"
        >
          {{ applyLabel | translate }}
        </button>
      </li>
    </ng-container>
  </ul>
</div>

results matching ""

    No results matching ""