icon-selector/icon-selector-wrapper/icon-selector-wrapper.component.ts
A component which acts as a wrapper for the icon selector.
Example 1:
Example :<c8y-icon-selector-wrapper
[selectedIcon]="'water'"
(onSelect)="selectIcon($event)"
></c8y-icon-selector-wrapper>OR as a part of a formGroup Example 2:
Example :<c8y-icon-selector-wrapper name="icon" formControlName="icon">
</c8y-icon-selector-wrapper>
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IconSelectorWrapperComponent), multi: true
}
|
| selector | c8y-icon-selector-wrapper |
| templateUrl | ./icon-selector-wrapper.component.html |
Methods |
|
Inputs |
Outputs |
constructor(iconSelector: IconSelectorService, gainsightService: GainsightService)
|
|||||||||
|
Parameters :
|
| canRemoveIcon |
Type : boolean
|
Default value : false
|
| iconSize |
Type : number
|
Default value : 32
|
|
The displayed icon size, the value has to be multiple of 8. |
| selectedIcon |
Type : string
|
| onSelect |
Type : EventEmitter<string>
|
| Async openIconSelector |
openIconSelector()
|
|
Returns :
any
|
| removeIcon |
removeIcon()
|
|
Returns :
void
|
<div class="d-flex a-i-center j-c-center p-relative">
<div
class="icon-{{ iconSize }} text-center l-h-1 fit-w fit-h"
*ngIf="selectedIcon"
>
<i
class="c8y-icon-duocolor"
[c8yIcon]="selectedIcon"
></i>
</div>
<div
class="icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w"
style="border: 2px dashed var(--c8y-root-component-border-color)"
*ngIf="!selectedIcon"
>
<span class="d-flex a-i-center j-c-center text-12 fit-h">
<em>{{ 'Auto' | translate }}</em>
</span>
</div>
<div class="showOnHover d-flex j-c-center p-absolute fit-h fit-w">
<button
class="btn btn-dot btn-icon btn-sm m-0"
title="{{ 'Select icon' | translate }}"
[attr.aria-label]="'Select icon' | translate"
type="button"
(click)="openIconSelector()"
*ngIf="!selectedIcon"
>
{{ 'Select' | translate }}
</button>
<button
class="btn btn-dot btn-sm btn-icon m-0"
[attr.aria-label]="'Change icon' | translate"
tooltip="{{ 'Change icon' | translate }}"
placement="top"
[delay]="500"
container="body"
type="button"
*ngIf="selectedIcon"
(click)="openIconSelector()"
>
<i [c8yIcon]="'replace'"></i>
</button>
<button
class="btn btn-dot btn-dot--danger btn-icon btn-sm m-0"
[attr.aria-label]="'Remove icon and use default icon' | translate"
tooltip="{{ 'Remove icon and use default icon' | translate }}"
placement="top"
[delay]="500"
container="body"
type="button"
*ngIf="selectedIcon && canRemoveIcon"
(click)="removeIcon()"
>
<i [c8yIcon]="'trash'"></i>
</button>
</div>
</div>