import { __decorate } from "tslib";
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
let BulletIconsComponent = class BulletIconsComponent {
    constructor() {
        /**
         * @description
         * Meta data object of list element.
         */
        this.modal = {};
        /**
         * @description
         * Icon to show.
         */
        this.type = 'check_circle';
        this.index = 1;
        this.showIconMenu = true;
        this.iconChange = new EventEmitter();
    }
    /**
     * NgOnint hook
     */
    ngOnInit() {
        this.initializeProcess();
    }
    /**
     * Initialise Form
     */
    initializeProcess() {
        //console.log('init');
    }
    onSelectBulletIcon(iconName) {
        if (iconName) {
            this.modal.icon_type = iconName;
            if (iconName == 'no_icon') {
                this.iconChange.emit();
            }
        }
    }
};
__decorate([
    ViewChild('check_circle')
], BulletIconsComponent.prototype, "check_circle", void 0);
__decorate([
    ViewChild('fill_circle')
], BulletIconsComponent.prototype, "fill_circle", void 0);
__decorate([
    ViewChild('outline_circle')
], BulletIconsComponent.prototype, "outline_circle", void 0);
__decorate([
    ViewChild('outline_square')
], BulletIconsComponent.prototype, "outline_square", void 0);
__decorate([
    ViewChild('diamond')
], BulletIconsComponent.prototype, "diamond", void 0);
__decorate([
    ViewChild('vpn_key')
], BulletIconsComponent.prototype, "vpn_key", void 0);
__decorate([
    ViewChild('fill_star')
], BulletIconsComponent.prototype, "fill_star", void 0);
__decorate([
    ViewChild('ol_type_1')
], BulletIconsComponent.prototype, "ol_type_1", void 0);
__decorate([
    ViewChild('ol_type_2')
], BulletIconsComponent.prototype, "ol_type_2", void 0);
__decorate([
    ViewChild('ol_type_3')
], BulletIconsComponent.prototype, "ol_type_3", void 0);
__decorate([
    ViewChild('no_icon')
], BulletIconsComponent.prototype, "no_icon", void 0);
__decorate([
    Input()
], BulletIconsComponent.prototype, "modal", void 0);
__decorate([
    Input()
], BulletIconsComponent.prototype, "type", void 0);
__decorate([
    Input()
], BulletIconsComponent.prototype, "index", void 0);
__decorate([
    Input()
], BulletIconsComponent.prototype, "showIconMenu", void 0);
__decorate([
    Output()
], BulletIconsComponent.prototype, "iconChange", void 0);
BulletIconsComponent = __decorate([
    Component({
        selector: 'ew-control-bullet-icons',
        template: "<!-- Icon Renderer -->\r\n<div *ngIf=\"!showIconMenu\">\r\n\t<!-- <ng-container *ngTemplateOutlet=\"this[type]\"></ng-container> -->\r\n\t<ng-container *ngIf=\"type == 'check_circle'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"check_circle; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'fill_circle'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"fill_circle; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'outline_circle'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"outline_circle; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'outline_square'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"outline_square; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'diamond'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"diamond; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'vpn_key'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"vpn_key; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'fill_star'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"fill_star; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'ol_type_1'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"ol_type_1; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'ol_type_2'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"ol_type_2; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"type == 'ol_type_3'\">\r\n\t\t<ng-container *ngTemplateOutlet=\"ol_type_3; context: {$implicit: index, modal: modal}\"></ng-container>\r\n\t</ng-container>\r\n</div>\r\n\r\n<!-- Icons Selection Menu -->\r\n\r\n<div *ngIf=\"showIconMenu\">\r\n\t<button mat-button [matMenuTriggerFor]=\"menu5\" class=\"ew-icon-selection-btn \"\r\n\t\t[ngClass]=\"{\r\n\t\t   'ew-no-icon-selected': (modal.icon_type == 'no_icon')\r\n\t\t  }\"\r\n\t\t>\r\n\t\t<ng-container [ngTemplateOutlet]=\"this[modal.icon_type]\" [ngTemplateOutletContext]=\"{$implicit: 1}\"></ng-container>\r\n\t\t<!-- <mat-icon>check_circle</mat-icon> -->\r\n\t\t<!-- <ng-container *ngTemplateOutlet=\"modal.icon_type\"></ng-container> -->\r\n\t</button>\r\n\t<mat-menu #menu5=\"matMenu\" class=\"ew-checklist-icon-drop\" xPosition=\"before\">\r\n\t\t<div class=\"ew-bullet-list common-list-view\">\r\n\t\t\t<span class=\"list-title-dropzone\">Bullet List</span>\r\n\t\t\t<ul>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('check_circle')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"check_circle; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<!-- <button mat-menu-item>\r\n\t\t\t\t\t\t<label for=\"layout1\">\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"check_circle; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<input type=\"radio\" name=\"bullet_icon\" [(ngModel)]=\"modal.icon_type\" id=\"layout1\" value=\"check_circle\" class=\"ew-layout-display-none\"> -->\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('fill_circle')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"fill_circle; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('outline_circle')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"outline_circle; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('outline_square')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"outline_square; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('diamond')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"diamond; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('vpn_key')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"vpn_key; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('fill_star')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"fill_star; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"ew-number-list common-list-view\">\r\n\t\t\t<span class=\"list-title-dropzone\">Number List</span>\r\n\t\t\t<ul>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('ol_type_1')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"ol_type_1; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('ol_type_2')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"ol_type_2; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t\t<li>\r\n\t\t\t\t\t<button (click)=\"onSelectBulletIcon('ol_type_3')\" mat-menu-item>\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"ol_type_3; context: {$implicit: 1}\"></ng-container>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</li>\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t\t<!-- <div class=\"ew-image-add-icon\">\r\n\t\t\t<button class=\"icon-only-button-ew padding-right-15px-ew no-bg-btn theme-button-text-ew-small\" mat-flat-button disableRipple>Add Custom Image</button>\r\n\t\t</div> -->\r\n\t\t<div class=\"ew-image-add-icon\" (click)=\"onSelectBulletIcon('no_icon')\">\r\n\t\t\t<button class=\"icon-only-button-ew padding-right-15px-ew no-bg-btn theme-button-text-ew-small\" mat-flat-button disableRipple>No icon</button>\r\n\t\t</div>\r\n\t</mat-menu>\r\n</div>\r\n\r\n<!-- SVG Icons Templates -->\r\n\r\n<ng-template #check_circle let-modal=\"modal\">\r\n\t<svg id=\"check_circle-24px_5_\" data-name=\"check_circle-24px (5)\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"18\"\r\n\t\theight=\"18\" [ngClass]=\"modal?.icon_size\" viewBox=\"0 0 18 18\">\r\n\t\t<path id=\"Path_2242\" data-name=\"Path 2242\" d=\"M0,0H18V18H0Z\" fill=\"none\" />\r\n\t\t<path id=\"Path_2243\" data-name=\"Path 2243\"\r\n\t\td=\"M9.5,2A7.5,7.5,0,1,0,17,9.5,7.5,7.5,0,0,0,9.5,2ZM8,13.25,4.25,9.5,5.307,8.443,8,11.128l5.692-5.693L14.75,6.5Z\"\r\n\t\ttransform=\"translate(-0.5 -0.5)\" [attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #fill_circle let-modal=\"modal\">\r\n\t<svg id=\"Component_4_1\" data-name=\"Component 4 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"10\" height=\"10\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 10 10\">\r\n\t\t<circle id=\"Ellipse_2\" data-name=\"Ellipse 2\" cx=\"5\" cy=\"5\" r=\"5\" [attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #outline_circle let-modal=\"modal\">\r\n\t<svg id=\"Component_222_1\" data-name=\"Component 222 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"10\" height=\"10\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 10 10\">\r\n\t\t<g id=\"Ellipse_558\" data-name=\"Ellipse 558\" fill=\"none\" stroke=\"#666\" stroke-width=\"1\">\r\n\t\t\t<circle cx=\"5\" cy=\"5\" r=\"5\" stroke=\"none\" />\r\n\t\t\t<circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"none\" />\r\n\t\t</g>\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #outline_square let-modal=\"modal\">\r\n\t<svg id=\"Component_223_1\" data-name=\"Component 223 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"10\" height=\"10\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 10 10\">\r\n\t\t<g id=\"Path_2259\" data-name=\"Path 2259\" [attr.fill]=\"modal?.icon_color\">\r\n\t\t\t<path d=\"M 9.5 9.5 L 0.5 9.5 L 0.5 0.5 L 9.5 0.5 L 9.5 9.5 Z\" stroke=\"none\" />\r\n\t\t\t<path d=\"M 1 1 L 1 9 L 9 9 L 9 1 L 1 1 M 0 0 L 10 0 L 10 10 L 0 10 L 0 0 Z\" stroke=\"none\" fill=\"#666\" />\r\n\t\t</g>\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #diamond let-modal=\"modal\">\r\n\t<svg id=\"Component_224_1\" data-name=\"Component 224 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"16.071\"\r\n\t\theight=\"17.071\" [ngClass]=\"modal?.icon_size\" viewBox=\"0 0 16.071 17.071\">\r\n\t\t<rect id=\"Rectangle_1449\" data-name=\"Rectangle 1449\" width=\"5\" height=\"5\" transform=\"translate(5 3.536) rotate(-45)\"\r\n\t\t\t[attr.fill]=\"modal?.icon_color\" />\r\n\t\t<rect id=\"Rectangle_1451\" data-name=\"Rectangle 1451\" width=\"5\" height=\"5\"\r\n\t\t\ttransform=\"translate(5 13.536) rotate(-45)\" [attr.fill]=\"modal?.icon_color\" />\r\n\t\t<rect id=\"Rectangle_1452\" data-name=\"Rectangle 1452\" width=\"5\" height=\"5\" transform=\"translate(9 8.536) rotate(-45)\"\r\n\t\t\t[attr.fill]=\"modal?.icon_color\" />\r\n\t\t<rect id=\"Rectangle_1453\" data-name=\"Rectangle 1453\" width=\"5\" height=\"5\" transform=\"translate(0 8.536) rotate(-45)\"\r\n\t\t\t[attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #vpn_key let-modal=\"modal\">\r\n\t<svg id=\"vpn_key-24px_1_\" data-name=\"vpn_key-24px (1)\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"18\" height=\"18\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 18 18\">\r\n\t\t<path id=\"Path_2248\" data-name=\"Path 2248\" d=\"M0,0H18V18H0Z\" fill=\"none\" />\r\n\t\t<path id=\"Path_2249\" data-name=\"Path 2249\"\r\n\t\t\td=\"M9.737,9a4.5,4.5,0,1,0,0,3H13v3h3V12h1.5V9ZM5.5,12A1.5,1.5,0,1,1,7,10.5,1.5,1.5,0,0,1,5.5,12Z\"\r\n\t\t\ttransform=\"translate(-0.25 -1.5)\" [attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #fill_star let-modal=\"modal\">\r\n\t<svg id=\"Component_225_1\" data-name=\"Component 225 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"18\" height=\"18\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 18 18\">\r\n\t\t<path id=\"Polygon_16\" data-name=\"Polygon 16\"\r\n\t\t\td=\"M9,0l2.88,5.782L18,6.875l-4.34,4.667.9,6.458L9,15.1,3.438,18l.9-6.458L0,6.875,6.12,5.782Z\" [attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #ol_type_1 let-modal=\"modal\" let-index>\r\n\t<svg id=\"Component_1_1\" data-name=\"Component 1 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"20\" height=\"20\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 20 20\">\r\n\t\t<circle id=\"Ellipse_1\" data-name=\"Ellipse 1\" cx=\"10\" cy=\"10\" r=\"10\" [attr.fill]=\"modal?.icon_color\" />\r\n\t\t<text id=\"_1\" data-name=\"1\" transform=\"translate(6 15)\" fill=\"#fff\">\r\n\t\t\t<tspan x=\"0\" y=\"0\">{{index}}</tspan>\r\n\t\t</text>\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #ol_type_2 let-modal=\"modal\" let-index>\r\n\t<svg id=\"Component_2_1\" data-name=\"Component 2 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"9\" height=\"19\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 9 19\">\r\n\t\t<text id=\"_1\" data-name=\"1\" transform=\"translate(0 15)\" [attr.fill]=\"modal?.icon_color\">\r\n\t\t\t<tspan x=\"0\" y=\"0\">{{index}}</tspan>\r\n\t\t</text>\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #ol_type_3 let-modal=\"modal\" let-index>\r\n\t<svg id=\"Component_3_1\" data-name=\"Component 3 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"modal?.icon_color\" width=\"24\" height=\"20\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 24 20\">\r\n\t\t<rect id=\"Rectangle_1\" data-name=\"Rectangle 1\" width=\"20\" height=\"20\" [attr.fill]=\"modal?.icon_color\" />\r\n\t\t<text id=\"_1\" data-name=\"1\" transform=\"translate(6 15)\" fill=\"#fff\">\r\n\t\t\t<tspan x=\"0\" y=\"0\">{{index}}</tspan>\r\n\t\t</text>\r\n\t\t<path id=\"Polygon_1\" data-name=\"Polygon 1\" d=\"M6.5,0,13,7H0Z\" transform=\"translate(24 3) rotate(90)\" [attr.fill]=\"modal?.icon_color\" />\r\n\t</svg>\r\n</ng-template>\r\n\r\n<ng-template #no_icon let-modal=\"modal\" let-index>\r\n\t<svg id=\"Component_2_1\" data-name=\"Component 2 \u2013 1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"19\"\r\n\t\t[ngClass]=\"modal?.icon_size\" viewBox=\"0 0 9 19\">\r\n\t\t<text id=\"_1\" data-name=\"1\" transform=\"translate(0 15)\">\r\n\t\t\t<tspan x=\"-20\" y=\"0\"></tspan>\r\n\t\t</text>\r\n\t</svg>\r\n</ng-template>\r\n",
        styles: [""]
    })
], BulletIconsComponent);
export { BulletIconsComponent };
//# sourceMappingURL=data:application/json;base64, 