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 |
)
|
| selector | c8y-icon-selector-wrapper |
| imports |
NgIf
IconDirective
TooltipDirective
C8yTranslatePipe
|
| 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">
@if (selectedIcon) {
<div class="icon-{{ iconSize }} text-center l-h-1 fit-w fit-h">
<i
class="c8y-icon-duocolor"
[c8yIcon]="selectedIcon"
></i>
</div>
}
@if (!selectedIcon) {
<div
class="icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w"
style="border: 2px dashed var(--c8y-root-component-border-color)"
>
<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">
@if (!selectedIcon) {
<button
class="btn btn-clean btn-icon btn-sm m-0"
title="{{ 'Select icon' | translate }}"
[attr.aria-label]="'Select icon' | translate"
type="button"
(click)="openIconSelector()"
>
{{ 'Select' | translate }}
</button>
}
@if (selectedIcon) {
<button
class="btn btn-dot btn-sm btn-icon m-0"
[attr.aria-label]="'Change icon' | translate"
tooltip="{{ 'Change icon' | translate }}"
placement="top"
container="body"
type="button"
[delay]="500"
(click)="openIconSelector()"
>
<i [c8yIcon]="'replace'"></i>
</button>
}
@if (selectedIcon && canRemoveIcon) {
<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"
container="body"
type="button"
[delay]="500"
(click)="removeIcon()"
>
<i [c8yIcon]="'trash'"></i>
</button>
}
</div>
</div>