@c8y/ngx-components/fesm2022/c8y-ngx-components-icon-selector.mjs

Angular modules for Cumulocity IoT applications

import * as i0 from '@angular/core';
import { Pipe, EventEmitter, Input, Output, Component, Injectable, forwardRef, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i2 from '@c8y/ngx-components';
import { IconDirective, C8yTranslateDirective, C8yTranslatePipe, CommonModule, DropAreaModule } from '@c8y/ngx-components';
import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
import { gettext } from '@c8y/ngx-components/gettext';
import * as i1$1 from 'ngx-bootstrap/modal';
import { BehaviorSubject, defer, from, combineLatest } from 'rxjs';
import { map, shareReplay, debounceTime, startWith } from 'rxjs/operators';
import { clone } from 'lodash-es';
import { NgIf, NgFor, NgClass, AsyncPipe } from '@angular/common';
import { PRODUCT_EXPERIENCE_ICON_SELECTOR } from '@c8y/ngx-components/icon-selector/model';

class IconNamePipe {
    transform(icon) {
        if (icon.startsWith('c8y-')) {
            return icon.replace(/^c8y-/, '');
        }
        return icon;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: IconNamePipe, isStandalone: true, name: "iconName" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconNamePipe, decorators: [{
            type: Pipe,
            args: [{ name: 'iconName' }]
        }] });

const allIconCategory = gettext('All`icons-category`');
class IconSelectorComponent {
    constructor() {
        this.iconCategoriesToExclude = [];
        this.showIconClass = true;
        this.onSelect = new EventEmitter();
        this.searchTerm$ = new BehaviorSubject('');
        this.selectedIconCategory$ = new BehaviorSubject(allIconCategory);
        this.icons$ = defer(() => from(this.loadIconDefinitions())).pipe(map(icons => icons.filter(tmp => !this.iconCategoriesToExclude.includes(tmp.label))), shareReplay({ refCount: true, bufferSize: 1 }));
        this.filteredIcons$ = combineLatest([
            this.icons$,
            this.searchTerm$.pipe(debounceTime(500), startWith(this.searchTerm$.value)),
            this.selectedIconCategory$
        ]).pipe(map(([icons, searchTerm, category]) => this.filterIconsByCategoryAndSearchTerm(icons, category, searchTerm)));
        this.availableIconCategories$ = this.icons$.pipe(map(icons => [allIconCategory, ...icons.map(tmp => tmp.label)]));
    }
    async loadIconDefinitions() {
        const { allIcons } = await import('@c8y/ngx-components/icon-selector/icons');
        return allIcons;
    }
    filterIconsByCategoryAndSearchTerm(iconCategories, selectedCategory, searchTerm) {
        if (selectedCategory !== allIconCategory) {
            iconCategories = iconCategories.filter(category => category.label === selectedCategory);
        }
        if (searchTerm) {
            const lowerCaseSearchTerm = searchTerm.toLowerCase();
            const matchingCategories = new Array();
            for (const category of iconCategories) {
                const matchingIcons = category.icons.filter(iconClasses => iconClasses.some(iconClass => iconClass.includes(lowerCaseSearchTerm)));
                if (matchingIcons.length) {
                    matchingCategories.push({ ...clone(category), icons: matchingIcons });
                }
            }
            return matchingCategories;
        }
        return iconCategories;
    }
    onSearchChange(searchTerm) {
        this.searchTerm$.next(searchTerm);
    }
    onCategoryFilterChanged(categoryChange) {
        this.selectedIconCategory$.next(categoryChange);
    }
    onIconClicked(icon) {
        this.selectedIcon = icon[0];
        this.onSelect.emit(icon[0]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: IconSelectorComponent, isStandalone: true, selector: "c8y-icon-selector", inputs: { iconCategoriesToExclude: "iconCategoriesToExclude", showIconClass: "showIconClass", selectedIcon: "selectedIcon" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-6 m-b-8\">\n      <div class=\"input-group-search input-group\" style=\"width: auto\">\n        <input\n          type=\"search\"\n          class=\"form-control\"\n          id=\"filter-icons\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n        />\n        <ng-template #searchIcon>\n          <span class=\"input-group-addon\">\n            <i c8yIcon=\"search\"></i>\n          </span>\n        </ng-template>\n        <span\n          class=\"input-group-addon pointer\"\n          *ngIf=\"searchTerm$ | async; else searchIcon\"\n          (click)=\"onSearchChange('')\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </span>\n      </div>\n    </div>\n    <div class=\"col-sm-6 m-b-8 text-right\">\n      <div class=\"d-inline-flex a-i-center text-left\">\n        <label class=\"m-b-0 m-r-8 flex-no-shrink\" translate>Filter by type</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            id=\"exampleSelect\"\n            class=\"form-control\"\n            [ngModel]=\"selectedIconCategory$ | async\"\n            (ngModelChange)=\"onCategoryFilterChanged($event)\"\n          >\n            <option *ngFor=\"let category of availableIconCategories$ | async\" [ngValue]=\"category\">\n              {{ category | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-inner-scroll\">\n  <div class=\"modal-body\" style=\"height: calc(100vh - 293px)\">\n    <div class=\"dtm-icon-grid\">\n      <div *ngFor=\"let iconDefinition of filteredIcons$ | async\" class=\"d-contents\">\n        <div class=\"legend form-block center grid__col--fullspan\">\n          {{ iconDefinition.label | translate }}\n        </div>\n\n        <div class=\"d-contents\" *ngFor=\"let icon of iconDefinition.icons\">\n          <div\n            class=\"dtm-icon-grid__item\"\n            [ngClass]=\"{\n              'dtm-icon-grid__item--selected': selectedIcon && icon[0] === selectedIcon\n            }\"\n          >\n            <button (click)=\"onIconClicked(icon)\" class=\"dtm-icon-grid__btn\" [title]=\"icon[0] | iconName\">\n              <i [c8yIcon]=\"icon[0]\" class=\"d-block icon-40\"></i>\n              <small *ngIf=\"showIconClass\" class=\"text-break-word\">{{ icon[0] | iconName }}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IconNamePipe, name: "iconName" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-icon-selector', imports: [
                        FormsModule,
                        IconDirective,
                        NgIf,
                        C8yTranslateDirective,
                        NgFor,
                        NgClass,
                        C8yTranslatePipe,
                        AsyncPipe,
                        IconNamePipe
                    ], template: "<div class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-6 m-b-8\">\n      <div class=\"input-group-search input-group\" style=\"width: auto\">\n        <input\n          type=\"search\"\n          class=\"form-control\"\n          id=\"filter-icons\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n        />\n        <ng-template #searchIcon>\n          <span class=\"input-group-addon\">\n            <i c8yIcon=\"search\"></i>\n          </span>\n        </ng-template>\n        <span\n          class=\"input-group-addon pointer\"\n          *ngIf=\"searchTerm$ | async; else searchIcon\"\n          (click)=\"onSearchChange('')\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </span>\n      </div>\n    </div>\n    <div class=\"col-sm-6 m-b-8 text-right\">\n      <div class=\"d-inline-flex a-i-center text-left\">\n        <label class=\"m-b-0 m-r-8 flex-no-shrink\" translate>Filter by type</label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            id=\"exampleSelect\"\n            class=\"form-control\"\n            [ngModel]=\"selectedIconCategory$ | async\"\n            (ngModelChange)=\"onCategoryFilterChanged($event)\"\n          >\n            <option *ngFor=\"let category of availableIconCategories$ | async\" [ngValue]=\"category\">\n              {{ category | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-inner-scroll\">\n  <div class=\"modal-body\" style=\"height: calc(100vh - 293px)\">\n    <div class=\"dtm-icon-grid\">\n      <div *ngFor=\"let iconDefinition of filteredIcons$ | async\" class=\"d-contents\">\n        <div class=\"legend form-block center grid__col--fullspan\">\n          {{ iconDefinition.label | translate }}\n        </div>\n\n        <div class=\"d-contents\" *ngFor=\"let icon of iconDefinition.icons\">\n          <div\n            class=\"dtm-icon-grid__item\"\n            [ngClass]=\"{\n              'dtm-icon-grid__item--selected': selectedIcon && icon[0] === selectedIcon\n            }\"\n          >\n            <button (click)=\"onIconClicked(icon)\" class=\"dtm-icon-grid__btn\" [title]=\"icon[0] | iconName\">\n              <i [c8yIcon]=\"icon[0]\" class=\"d-block icon-40\"></i>\n              <small *ngIf=\"showIconClass\" class=\"text-break-word\">{{ icon[0] | iconName }}</small>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [], propDecorators: { iconCategoriesToExclude: [{
                type: Input
            }], showIconClass: [{
                type: Input
            }], onSelect: [{
                type: Output
            }], selectedIcon: [{
                type: Input
            }] } });

class IconSelectorModalComponent {
    constructor(bsModal) {
        this.bsModal = bsModal;
        this.title = gettext('Select icon');
        this.saveButtonLabel = gettext('Select');
        this.iconCategoriesToExclude = [];
        this.showIconClass = true;
        this.result = new Promise((resolve, reject) => {
            this.save = resolve;
            this.cancel = reject;
        });
    }
    close() {
        this.bsModal.hide();
        this.cancel();
    }
    saveChanges() {
        this.bsModal.hide();
        this.save(this.currentSelection);
    }
    selectionChange(newSelection) {
        this.currentSelection = newSelection;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: IconSelectorModalComponent, isStandalone: true, selector: "c8y-icon-selector-modal", ngImport: i0, template: "<div class=\"modal-header\">\n  <div id=\"modal-title\" class=\"modal-title h4\">{{ title | translate }}</div>\n</div>\n<div id=\"modal-body\">\n  <c8y-icon-selector\n    (onSelect)=\"selectionChange($event)\"\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n  ></c8y-icon-selector>\n</div>\n<div class=\"modal-footer separator text-center\">\n  <button class=\"btn btn-default\" (click)=\"close()\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button class=\"btn btn-primary\" [disabled]=\"!currentSelection\" (click)=\"saveChanges()\">\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: IconSelectorComponent, selector: "c8y-icon-selector", inputs: ["iconCategoriesToExclude", "showIconClass", "selectedIcon"], outputs: ["onSelect"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-icon-selector-modal', imports: [IconSelectorComponent, C8yTranslatePipe], template: "<div class=\"modal-header\">\n  <div id=\"modal-title\" class=\"modal-title h4\">{{ title | translate }}</div>\n</div>\n<div id=\"modal-body\">\n  <c8y-icon-selector\n    (onSelect)=\"selectionChange($event)\"\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n  ></c8y-icon-selector>\n</div>\n<div class=\"modal-footer separator text-center\">\n  <button class=\"btn btn-default\" (click)=\"close()\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button class=\"btn btn-primary\" [disabled]=\"!currentSelection\" (click)=\"saveChanges()\">\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1$1.BsModalRef }] });

class IconSelectorService {
    constructor(modal) {
        this.modal = modal;
    }
    selectIcon(initialState = {}) {
        const modal = this.modal.show(IconSelectorModalComponent, {
            ignoreBackdropClick: true,
            keyboard: false,
            initialState,
            class: 'modal-lg'
        });
        const content = modal.content;
        return content.result;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorService, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: i1$1.BsModalService }] });

/**
 * A component which acts as a wrapper for the icon selector.
 *
 * Example 1:
 * ```
    <c8y-icon-selector-wrapper
        [selectedIcon]="'water'"
        (onSelect)="selectIcon($event)"
    ></c8y-icon-selector-wrapper>
 * ```
 * OR as a part of a formGroup
 * Example 2:
 * ```
    <c8y-icon-selector-wrapper name="icon" formControlName="icon">
    </c8y-icon-selector-wrapper>
 * ```
 */
class IconSelectorWrapperComponent {
    constructor(iconSelector, gainsightService) {
        this.iconSelector = iconSelector;
        this.gainsightService = gainsightService;
        this.canRemoveIcon = false;
        /**
         * The displayed icon size, the value has to be multiple of 8.
         */
        this.iconSize = 32;
        this.onSelect = new EventEmitter();
        /**
         * @ignore
         */
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        this.onChange = () => { };
    }
    /**
     * @ignore
     * @param icon The value to update
     */
    writeValue(icon) {
        this.selectedIcon = icon;
    }
    /**
     * @ignore
     * @param fn The function to register for changes
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * @ignore
     * @param fn The function to register for changes
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    removeIcon() {
        this.onSelect.emit(undefined);
    }
    async openIconSelector() {
        try {
            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR.EVENTS.ICON_SELECTOR, {
                component: PRODUCT_EXPERIENCE_ICON_SELECTOR.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
                action: PRODUCT_EXPERIENCE_ICON_SELECTOR.ACTIONS.OPEN_ICON_SELECTOR
            });
            const icon = await this.iconSelector.selectIcon({
                currentSelection: this.selectedIcon
            });
            this.onChange(icon);
            this.selectedIcon = icon;
            this.onSelect.emit(icon);
            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR.EVENTS.ICON_SELECTOR, {
                component: PRODUCT_EXPERIENCE_ICON_SELECTOR.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
                action: PRODUCT_EXPERIENCE_ICON_SELECTOR.ACTIONS.ICON_SELECTED
            });
        }
        catch {
            // nothing to do
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorWrapperComponent, deps: [{ token: IconSelectorService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: IconSelectorWrapperComponent, isStandalone: true, selector: "c8y-icon-selector-wrapper", inputs: { canRemoveIcon: "canRemoveIcon", selectedIcon: "selectedIcon", iconSize: "iconSize" }, outputs: { onSelect: "onSelect" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => IconSelectorWrapperComponent),
                multi: true
            }
        ], ngImport: i0, template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  <div\n    class=\"icon-{{ iconSize }} text-center l-h-1 fit-w fit-h\"\n    *ngIf=\"selectedIcon\"\n  >\n    <i\n      class=\"c8y-icon-duocolor\"\n      [c8yIcon]=\"selectedIcon\"\n    ></i>\n  </div>\n\n  <div\n    class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n    style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    *ngIf=\"!selectedIcon\"\n  >\n    <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n      <em>{{ 'Auto' | translate }}</em>\n    </span>\n  </div>\n  <div class=\"showOnHover d-flex j-c-center p-absolute fit-h fit-w\">\n    <button\n      class=\"btn btn-dot btn-icon btn-sm m-0\"\n      title=\"{{ 'Select icon' | translate }}\"\n      [attr.aria-label]=\"'Select icon' | translate\"\n      type=\"button\"\n      (click)=\"openIconSelector()\"\n      *ngIf=\"!selectedIcon\"\n    >\n      {{ 'Select' | translate }}\n    </button>\n    <button\n      class=\"btn btn-dot btn-sm btn-icon m-0\"\n      [attr.aria-label]=\"'Change icon' | translate\"\n      tooltip=\"{{ 'Change icon' | translate }}\"\n      placement=\"top\"\n      [delay]=\"500\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"selectedIcon\"\n      (click)=\"openIconSelector()\"\n    >\n      <i [c8yIcon]=\"'replace'\"></i>\n    </button>\n    <button\n      class=\"btn btn-dot btn-dot--danger btn-icon btn-sm m-0\"\n      [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n      tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n      placement=\"top\"\n      [delay]=\"500\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"selectedIcon && canRemoveIcon\"\n      (click)=\"removeIcon()\"\n    >\n      <i [c8yIcon]=\"'trash'\"></i>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-icon-selector-wrapper', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => IconSelectorWrapperComponent),
                            multi: true
                        }
                    ], imports: [NgIf, IconDirective, TooltipDirective, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  <div\n    class=\"icon-{{ iconSize }} text-center l-h-1 fit-w fit-h\"\n    *ngIf=\"selectedIcon\"\n  >\n    <i\n      class=\"c8y-icon-duocolor\"\n      [c8yIcon]=\"selectedIcon\"\n    ></i>\n  </div>\n\n  <div\n    class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n    style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    *ngIf=\"!selectedIcon\"\n  >\n    <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n      <em>{{ 'Auto' | translate }}</em>\n    </span>\n  </div>\n  <div class=\"showOnHover d-flex j-c-center p-absolute fit-h fit-w\">\n    <button\n      class=\"btn btn-dot btn-icon btn-sm m-0\"\n      title=\"{{ 'Select icon' | translate }}\"\n      [attr.aria-label]=\"'Select icon' | translate\"\n      type=\"button\"\n      (click)=\"openIconSelector()\"\n      *ngIf=\"!selectedIcon\"\n    >\n      {{ 'Select' | translate }}\n    </button>\n    <button\n      class=\"btn btn-dot btn-sm btn-icon m-0\"\n      [attr.aria-label]=\"'Change icon' | translate\"\n      tooltip=\"{{ 'Change icon' | translate }}\"\n      placement=\"top\"\n      [delay]=\"500\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"selectedIcon\"\n      (click)=\"openIconSelector()\"\n    >\n      <i [c8yIcon]=\"'replace'\"></i>\n    </button>\n    <button\n      class=\"btn btn-dot btn-dot--danger btn-icon btn-sm m-0\"\n      [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n      tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n      placement=\"top\"\n      [delay]=\"500\"\n      container=\"body\"\n      type=\"button\"\n      *ngIf=\"selectedIcon && canRemoveIcon\"\n      (click)=\"removeIcon()\"\n    >\n      <i [c8yIcon]=\"'trash'\"></i>\n    </button>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: IconSelectorService }, { type: i2.GainsightService }], propDecorators: { canRemoveIcon: [{
                type: Input
            }], selectedIcon: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], onSelect: [{
                type: Output
            }] } });

class IconSelectorModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModule, imports: [CommonModule,
            FormsModule,
            DropAreaModule,
            TooltipModule,
            IconSelectorComponent,
            IconSelectorModalComponent,
            IconNamePipe,
            IconSelectorWrapperComponent], exports: [IconSelectorComponent,
            IconSelectorModalComponent,
            IconNamePipe,
            IconSelectorWrapperComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModule, imports: [CommonModule,
            FormsModule,
            DropAreaModule,
            TooltipModule,
            IconSelectorComponent,
            IconSelectorModalComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectorModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        FormsModule,
                        DropAreaModule,
                        TooltipModule,
                        IconSelectorComponent,
                        IconSelectorModalComponent,
                        IconNamePipe,
                        IconSelectorWrapperComponent
                    ],
                    exports: [
                        IconSelectorComponent,
                        IconSelectorModalComponent,
                        IconNamePipe,
                        IconSelectorWrapperComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { IconNamePipe, IconSelectorComponent, IconSelectorModalComponent, IconSelectorModule, IconSelectorService, IconSelectorWrapperComponent };
//# sourceMappingURL=c8y-ngx-components-icon-selector.mjs.map