Web SDK documentation
  1. Components
  2. SelectComponent

File

core/select/select.component.ts

Implements

AfterContentInit OnChanges OnDestroy AfterViewInit ControlValueAccessor Validator

Metadata

host {
}
providers { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => SelectComponent) } { provide: NG_VALIDATORS, useExisting: forwardRef(() => SelectComponent), multi: true } SelectKeyboardService
selector c8y-select
templateUrl ./select.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

autoClose
Type : boolean
Default value : true

Defines, if the dropdown should close automatically after user interaction.
canDeselect
Type : boolean
Default value : false

Allows the user to deselect an item.
canSelectWithSpace
Type : boolean
Default value : !this.multi

If enabled, an item can be selected with the space key.
container
Type : string | "body"
Default value : 'body'

The container to put the dropdown to. Defaults to body.
disabled
Type : boolean
Default value : false

If set to true, the select is disabled.
icon
Type : string
Default value : 'caret-down'

The icon to be displayed in the select.
insideClick
Type : boolean

Defines if the dropdown should stay open when the user clicks inside the select. If set to true, the dropdown will only close when the user clicks outside the select.
items
Type : [] | [] | []

Items to be displayed in the select. Can be an array of strings or an array of objects with label and value properties.

Example :
```html
<c8y-select [items]="[{ label: 'Item 1', value: 'item1' }, { label: 'Item 2', value: 'item2' }]"></c8y-select>
Example :
```html
```html
<c8y-select [items]="['Item 1', 'Item 2', 'Item 3']"></c8y-select>
Example :
For more complex scenarios, you can use content-projection:

```html
```html
<c8y-select>
   <i [c8yIcon]="'rocket'" class="text-16" *c8ySelectItem="'rocket'; label: 'Rocket'"></i>
   <i [c8yIcon]="'car'" class="text-16" *c8ySelectItem="'car'; label: 'Car'"></i>
</c8y-select>
Example :
multi
Type : boolean
Default value : false

If set to true, the user can select multiple items.
name
Type : string
Default value : 'select'

The name used for this select.
placeholder
Type : string
Default value : 'Select item…'

Placeholder text to be displayed in the select.
required
Type : boolean
Default value : false

Marks the select as required.
selected
Type : string | SelectableItem | Array

The selected item.

Outputs

onDeselect
Type : EventEmitter

Emits if a item was deselected.
onIconClick
Type : EventEmitter

Emits when the select icon is clicked.
onSelect
Type : EventEmitter

Emits if a item is selected.

Methods

close
close()

Closes the dropdown.

Returns : void
deselect
deselect(item: SelectableItem)

Deselects an item.

Parameters :
Name Type Optional Description
item SelectableItem No

The item to deselect.
Returns : void
deselectAll
deselectAll()

Deselects all items

Returns : void
open
open()

Opens the dropdown.

Returns : void
select
select(item: SelectableItem)

Selects an item

Parameters :
Name Type Optional Description
item SelectableItem No

The item to select.
Returns : void

Properties

searchHasFocus
Default value : false

Indicates if the search input has focus.

Accessors

items
getitems()

The items to be displayed in the select.

Returns : SelectableItemTemplate[]
setitems(value: string[] | SelectableItem[] | SelectableItemTemplate[])

Items to be displayed in the select. Can be an array of strings or an array of objects with label and value properties.

Example :
```html
<c8y-select [items]="[{ label: 'Item 1', value: 'item1' }, { label: 'Item 2', value: 'item2' }]"></c8y-select>
Example :
```html
```html
<c8y-select [items]="['Item 1', 'Item 2', 'Item 3']"></c8y-select>
Example :
For more complex scenarios, you can use content-projection:

```html
```html
<c8y-select>
   <i [c8yIcon]="'rocket'" class="text-16" *c8ySelectItem="'rocket'; label: 'Rocket'"></i>
   <i [c8yIcon]="'car'" class="text-16" *c8ySelectItem="'car'; label: 'Car'"></i>
</c8y-select>
Example :
Parameters :
Name Type Optional
value string[] | SelectableItem[] | SelectableItemTemplate[] No
Example : 
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-select [items]=&quot;[{ label: &#39;Item 1&#39;, value: &#39;item1&#39; }, { label: &#39;Item 2&#39;, value: &#39;item2&#39; }]&quot;&gt;&lt;/c8y-select&gt;</code></pre></div>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-select [items]=&quot;[&#39;Item 1&#39;, &#39;Item 2&#39;, &#39;Item 3&#39;]&quot;&gt;&lt;/c8y-select&gt;</code></pre></div><p>For more complex scenarios, you can use content-projection:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;c8y-select&gt;
   &lt;i [c8yIcon]=&quot;&#39;rocket&#39;&quot; class=&quot;text-16&quot; *c8ySelectItem=&quot;&#39;rocket&#39;; label: &#39;Rocket&#39;&quot;&gt;&lt;/i&gt;
   &lt;i [c8yIcon]=&quot;&#39;car&#39;&quot; class=&quot;text-16&quot; *c8ySelectItem=&quot;&#39;car&#39;; label: &#39;Car&#39;&quot;&gt;&lt;/i&gt;
&lt;/c8y-select&gt;</code></pre></div>
Returns : void
selected
getselected()

Returns the selected item.

Returns : SelectableItem[]
setselected(value: string | SelectableItem | Array<string | SelectableItem>)

The selected item.

Parameters :
Name Type Optional
value string | SelectableItem | Array<string | SelectableItem> No
Returns : void
preselectedItem
getpreselectedItem()

A item which is preselected. It is used when a user types in the search input to give a visual typeahead feedback.

Returns : SelectableItem 
<div
  class="c8y-search-dropdown dropdown fit-w"
  placement="bottom left"
  dropdown
  [container]="container"
  #dropdown="bs-dropdown"
  [autoClose]="autoClose"
  [isDisabled]="disabled"
  [insideClick]="insideClick"
  (onShown)="onShown()"
  (onHidden)="onHidden()"
  dropdownToggle
  (click)="open()"
>
  <div
    class="input-group input-group-dropdown"
    role="button"
  >
    <div
      class="form-control text-truncate"
      *ngIf="true"
      [ngClass]="{
        'm-r-80': canDeselect && selected.length > 0,
        'm-r-40': !canDeselect || selected.length === 0,
        'text-truncate': !multi,
        'inner-scroll d-flex a-i-center': multi
      }"
    >
      <!-- rendering of selected items (with content projection) -->
      <div
        class="selected-items"
        *ngIf="projectedSelectedItems"
      >
        <ng-container *ngFor="let selectedItem of selected">
          <ng-container
            *ngTemplateOutlet="
              projectedSelectedItems.templateRef;
              context: { $implicit: selectedItem }
            "
          ></ng-container>
        </ng-container>
        <i
          class="text-muted"
          *ngIf="selected.length === 0 && !searchHasFocus && searchControl.value.length === 0"
        >
          {{ placeholder | translate }}
        </i>
      </div>

      <!-- rendering of selected items (default) -->
      <div
        class="selected-items"
        *ngIf="!projectedSelectedItems"
      >
        <span *ngIf="!multi">
          <span *ngIf="searchHasFocus && preselectedItem">
            {{ preselectedItem.label | translate }}
          </span>
          <span *ngIf="!searchHasFocus && selected.length === 1">
            {{ selected[0].label | translate }}
          </span>
        </span>
        <i
          class="text-muted"
          *ngIf="selected.length === 0 && !preselectedItem && searchControl.value.length === 0"
        >
          {{ placeholder | translate }}
        </i>
        <ng-container *ngIf="multi">
          <span class="m-r-4">{{ searchControl.value }}</span>
          <span
            class="tag tag--info chip"
            *ngFor="let selectedItem of selected"
          >
            <button
              class="btn btn-xs btn-clean text-10 m-r-4"
              title="{{ selectedItem.label | translate }}"
              type="button"
              (click)="$event.preventDefault(); $event.stopPropagation(); deselect(selectedItem)"
            >
              <i c8yIcon="times"></i>
            </button>
            {{ selectedItem.label | translate }}
          </span>
        </ng-container>
      </div>
    </div>
    
    <input
      class="form-control text-truncate"
      type="text"
      autocomplete="off"
      #searchControl
      [ngClass]="{
        'p-absolute': true,
        'm-r-80': canDeselect && selected.length > 0,
        'm-r-40': !canDeselect || selected.length === 0
      }"
      [required]="required"
      (blur)="doBlur()"
      (focus)="doFocus()"
      [name]="name"
      [disabled]="disabled"
    />

    <span class="input-group-btn">
      <!-- this button is displayed only if we have something selected and are allowed to deselect -->
      <button
        class="btn btn-dot"
        title="{{ 'Deselect' | translate }}"
        type="button"
        *ngIf="canDeselect && selected.length > 0"
        [disabled]="disabled"
        (click)="$event.preventDefault(); $event.stopPropagation(); deselectAll()"
      >
        <i c8yIcon="times"></i>
      </button>
      <button
        class="btn btn-dot"
        title="{{ 'Search' | translate }}"
        type="button"
        [disabled]="disabled"
        (click)="onIconClick.emit({ icon, $event })"
        data-cy="select-button"
      >
        <i
          class="text-primary"
          [c8yIcon]="icon"
        ></i>
      </button>
    </span>
  </div>

  <c8y-list-group
    class="dropdown-menu dropdown-menu--modal"
    [style.width]="container === 'body' ? searchControl.parentNode.clientWidth + 'px' : undefined"
    role="menu"
    data-cy="select--dropdown-menu"
    *dropdownMenu
  >
    <!-- rendering of items (default) -->
    <c8y-li
      style="cursor: pointer"
      *ngFor="let item of items"
      [selectable]="true"
      [dense]="true"
      [active]="!multi && item.value === selected[0]?.value"
      (click)="select(item)"
    >
      <span [attr.data-search-label]="item.label | translate"></span>
      <c8y-li-checkbox
        *ngIf="multi"
        [selected]="selected.indexOf(item) > -1"
        (click)="$event.preventDefault();"
      ></c8y-li-checkbox>
      <c8y-li-body
        *ngIf="!item.template"
      >
        {{ item.label | translate }}
      </c8y-li-body>
      <ng-container
        *ngTemplateOutlet="item?.template"
        ngProjectAs="c8y-li-body"
      ></ng-container>
    </c8y-li>
    <ng-content select="div"></ng-content>
  </c8y-list-group>
</div>

results matching ""

    No results matching ""