//MSM10JUL25
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/tooltip";
export class IconSelectorComponent {
    sanitizer;
    allIcons;
    themeColor = '#ff0000'; // Default theme color
    height = '300px'; // Default height
    tooltipPosition = "above"; // above, below, left, right, before, after
    selectedIcon; // Selected icon name
    cdnIconURL = ""; // CDN URL for icons
    label = ''; // Input label
    labelFont = ''; // Input label font
    labelWeight = ''; // Input label Weight
    inputWeight = ''; // Input Weight
    labelSize = ''; // Input label Size
    labelColor = ''; // Input label Color
    showLabel = ''; // Input label Color
    required = false; // Required validation
    mode = 'edit'; // New mode input
    question = {};
    options = []; // For radio buttons
    iconSelected = new EventEmitter(); // Event emitter for selected icon
    filteredIcons = [];
    searchQuery = '';
    showDropdown = false;
    constructor(sanitizer) {
        this.sanitizer = sanitizer;
    }
    ngOnInit() {
        this.filteredIcons = this.allIcons != null && this.allIcons.length > 0 ? [...this.allIcons] : [];
    }
    filterIcons() {
        if (!this.searchQuery) {
            this.filteredIcons = this.allIcons != null && this.allIcons.length > 0 ? [...this.allIcons] : [];
            return;
        }
        this.filteredIcons = this.allIcons?.filter((icon) => icon?.name?.toLowerCase().includes(this.searchQuery?.toLowerCase()));
    }
    selectIcon(icon) {
        const iconSVG = this.getSVG(icon.svg);
        this.selectedIcon = iconSVG;
        this.iconSelected.emit(icon);
    }
    toggleDropdown() {
        this.showDropdown = !this.showDropdown;
    }
    getSVG(icon) {
        if (typeof icon === 'object') {
            return this.sanitizer.bypassSecurityTrustHtml(icon.changingThisBreaksApplicationSecurity || '');
        }
        return this.sanitizer.bypassSecurityTrustHtml(icon);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconSelectorComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconSelectorComponent, isStandalone: true, selector: "nxt-icon-selector", inputs: { allIcons: "allIcons", themeColor: "themeColor", height: "height", tooltipPosition: "tooltipPosition", selectedIcon: "selectedIcon", cdnIconURL: "cdnIconURL", label: "label", labelFont: "labelFont", labelWeight: "labelWeight", inputWeight: "inputWeight", labelSize: "labelSize", labelColor: "labelColor", showLabel: "showLabel", required: "required", mode: "mode", question: "question", options: "options" }, outputs: { iconSelected: "iconSelected" }, ngImport: i0, template: "<!-- MSM10JUL25 for icon selector UI -->\n<div class=\"icon-selector\">\n  <div class=\"selected-icon\" (click)=\"toggleDropdown()\">\n    <span *ngIf=\"!selectedIcon\">Choose Icon</span>\n    <div *ngIf=\"selectedIcon\" [innerHTML]=\"selectedIcon\" class=\"svg-container\"></div><span\n      class=\"material-icons\">arrow_drop_down</span>\n  </div>\n\n  <div class=\"icon-selector-container\" [style.height]=\"height\" *ngIf=\"showDropdown\">\n    <div class=\"search-container\">\n      <div class=\"search-box\">\n        <input type=\"text\" [(ngModel)]=\"searchQuery\" (input)=\"filterIcons()\" placeholder=\"Search icons...\"\n          class=\"search-input\">\n      </div>\n    </div>\n\n    <div class=\"icon-grid-container\" [style.max-height]=\"'calc(' + height + ' - 120px)'\">\n      <div *ngIf=\"filteredIcons.length === 0\" class=\"no-results\">\n        No icons found matching \"{{searchQuery}}\"\n      </div>\n\n      <div class=\"icon-grid\">\n        <div *ngFor=\"let icon of filteredIcons\" class=\"icon-option\" [matTooltip]=icon.name\n          [matTooltipPosition]=tooltipPosition>\n          <div class=\"icon-option\">\n            <div class=\"click-overlay\" (click)=\"selectIcon(icon); toggleDropdown()\"></div>\n            <div [innerHTML]=\"getSVG(icon.svg)\" class=\"svg-container\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".icon-item svg{color:red}.icon-selector-container{padding:16px;max-width:400px;margin:0 auto;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#fff;overflow:hidden}.search-container{margin:8px 0 16px}.icon-grid-container{overflow-y:scroll!important;padding-right:4px}.icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.icon-option{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:#f5f5f5;aspect-ratio:1/1}.icon-option:hover{background-color:#e0e0e0;transform:scale(1.05)}.icon-option.selected{background-color:#e3f2fd;border:2px solid #2196f3}.no-results{text-align:center;padding:20px;color:#757575;font-style:italic}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}::-webkit-scrollbar-thumb{background:#888;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}.icon-selector{position:relative;display:inline-block}.selected-icon{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px;border:1px solid #ccc;border-radius:4px}.icon-dropdown{position:absolute;top:100%;left:0;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:3px}.icon-option{padding:3px;cursor:pointer;border-radius:4px;display:flex;justify-content:center}.icon-option:hover{background-color:#f0f0f0}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1}svg{width:20px!important;height:20px!important}.click-overlay{position:absolute;inset:0;z-index:1}.icon-option{position:relative;cursor:pointer}.svg-container{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nxt-icon-selector', imports: [CommonModule, FormsModule, MatTooltipModule], standalone: true, template: "<!-- MSM10JUL25 for icon selector UI -->\n<div class=\"icon-selector\">\n  <div class=\"selected-icon\" (click)=\"toggleDropdown()\">\n    <span *ngIf=\"!selectedIcon\">Choose Icon</span>\n    <div *ngIf=\"selectedIcon\" [innerHTML]=\"selectedIcon\" class=\"svg-container\"></div><span\n      class=\"material-icons\">arrow_drop_down</span>\n  </div>\n\n  <div class=\"icon-selector-container\" [style.height]=\"height\" *ngIf=\"showDropdown\">\n    <div class=\"search-container\">\n      <div class=\"search-box\">\n        <input type=\"text\" [(ngModel)]=\"searchQuery\" (input)=\"filterIcons()\" placeholder=\"Search icons...\"\n          class=\"search-input\">\n      </div>\n    </div>\n\n    <div class=\"icon-grid-container\" [style.max-height]=\"'calc(' + height + ' - 120px)'\">\n      <div *ngIf=\"filteredIcons.length === 0\" class=\"no-results\">\n        No icons found matching \"{{searchQuery}}\"\n      </div>\n\n      <div class=\"icon-grid\">\n        <div *ngFor=\"let icon of filteredIcons\" class=\"icon-option\" [matTooltip]=icon.name\n          [matTooltipPosition]=tooltipPosition>\n          <div class=\"icon-option\">\n            <div class=\"click-overlay\" (click)=\"selectIcon(icon); toggleDropdown()\"></div>\n            <div [innerHTML]=\"getSVG(icon.svg)\" class=\"svg-container\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".icon-item svg{color:red}.icon-selector-container{padding:16px;max-width:400px;margin:0 auto;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#fff;overflow:hidden}.search-container{margin:8px 0 16px}.icon-grid-container{overflow-y:scroll!important;padding-right:4px}.icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.icon-option{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:#f5f5f5;aspect-ratio:1/1}.icon-option:hover{background-color:#e0e0e0;transform:scale(1.05)}.icon-option.selected{background-color:#e3f2fd;border:2px solid #2196f3}.no-results{text-align:center;padding:20px;color:#757575;font-style:italic}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}::-webkit-scrollbar-thumb{background:#888;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}.icon-selector{position:relative;display:inline-block}.selected-icon{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px;border:1px solid #ccc;border-radius:4px}.icon-dropdown{position:absolute;top:100%;left:0;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:3px}.icon-option{padding:3px;cursor:pointer;border-radius:4px;display:flex;justify-content:center}.icon-option:hover{background-color:#f0f0f0}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1}svg{width:20px!important;height:20px!important}.click-overlay{position:absolute;inset:0;z-index:1}.icon-option{position:relative;cursor:pointer}.svg-container{display:flex;align-items:center;justify-content:center}\n"] }]
        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { allIcons: [{
                type: Input
            }], themeColor: [{
                type: Input
            }], height: [{
                type: Input
            }], tooltipPosition: [{
                type: Input
            }], selectedIcon: [{
                type: Input
            }], cdnIconURL: [{
                type: Input
            }], label: [{
                type: Input
            }], labelFont: [{
                type: Input
            }], labelWeight: [{
                type: Input
            }], inputWeight: [{
                type: Input
            }], labelSize: [{
                type: Input
            }], labelColor: [{
                type: Input
            }], showLabel: [{
                type: Input
            }], required: [{
                type: Input
            }], mode: [{
                type: Input
            }], question: [{
                type: Input
            }], options: [{
                type: Input
            }], iconSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 