icon-selector/icon-selector.component.ts
selector | c8y-icon-selector |
templateUrl | ./icon-selector.component.html |
Properties |
Methods |
Inputs |
Outputs |
iconCategoriesToExclude |
Type : string[]
|
Default value : []
|
selectedIcon |
Type : string
|
showIconClass |
Type : boolean
|
Default value : true
|
onSelect |
Type : EventEmitter
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
onCategoryFilterChanged |
onCategoryFilterChanged()
|
Returns :
void
|
onIconClicked | ||||||
onIconClicked(icon: string)
|
||||||
Parameters :
Returns :
void
|
iconCategories |
Type : IconCategory[]
|
icons |
Type : DefaultIcons
|
quickSearch |
Type : string
|
selectedIconCategory |
Type : IconCategory
|
<div class="p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom">
<div class="row d-flex-sm">
<div class="col-sm-6 m-b-8">
<div class="input-group-search input-group" style="width: auto">
<input
type="search"
class="form-control"
id="filter-icons"
[(ngModel)]="quickSearch"
placeholder="{{ 'Type to filter icons…' | translate }}"
/>
<span class="input-group-addon" *ngIf="!quickSearch || quickSearch.length === 0">
<i c8yIcon="search"></i>
</span>
<span
class="input-group-addon pointer"
*ngIf="quickSearch && quickSearch.length > 0"
(click)="quickSearch = ''"
>
<i c8yIcon="times"></i>
</span>
</div>
</div>
<div class="col-sm-6 m-b-8">
<div class="d-flex a-i-center">
<label class="m-b-0 m-r-8 flex-no-shrink" translate>Filter by type</label>
<div class="c8y-select-wrapper">
<select
id="exampleSelect"
class="form-control"
[(ngModel)]="selectedIconCategory"
(change)="onCategoryFilterChanged()"
>
<option *ngFor="let category of iconCategories" [ngValue]="category">
{{ category.displayName | translate }}
</option>
</select>
<span></span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-inner-scroll">
<div class="modal-body" style="height: calc(100vh - 293px)">
<div class="dtm-icon-grid">
<div *ngFor="let iconDefinition of icons | keyvalue" class="d-contents">
<div *ngIf="!quickSearch" class="legend form-block center grid__col--fullspan">
{{ iconDefinition.value.label | translate }}
</div>
<div class="d-contents" *ngFor="let icon of iconDefinition.value.icons">
<div
class="dtm-icon-grid__item"
[ngClass]="{
'dtm-icon-grid__item--selected': selectedIcon && icon === selectedIcon
}"
*ngIf="!quickSearch || quickSearch.length === 0 || icon.indexOf(quickSearch) > -1"
>
<button (click)="onIconClicked(icon)" class="dtm-icon-grid__btn" [title]="icon">
<i [c8yIcon]="icon" class="d-block icon-40"></i>
<small *ngIf="showIconClass" class="text-break-word">{{ icon }}</small>
</button>
</div>
</div>
</div>
</div>
</div>
</div>