/**
 * @fileoverview added by tsickle
 * Generated from: components/editor/parts/editor-header/editor-header.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, EventEmitter, Input, Output } from '@angular/core';
export class TlEditorHeader {
    constructor() {
        this.cursorHighlight = false;
        this.fontSizeCollection = [];
        this.fontCollection = [];
        this.fields = [];
        this.color = 'basic';
        this.colorSelected = '#000000';
        this.fontSelected = 'Arial';
        this.fontSizeSelected = '3pt';
        this.changeColor = new EventEmitter();
        this.changeFont = new EventEmitter();
        this.changeFontSize = new EventEmitter();
        this.clickUnderline = new EventEmitter();
        this.clickItalic = new EventEmitter();
        this.clickBold = new EventEmitter();
        this.clickHighlight = new EventEmitter();
        this.clickAlignContent = new EventEmitter();
        this.clickUnorderedList = new EventEmitter();
        this.clickOrderedList = new EventEmitter();
        this.clickLink = new EventEmitter();
        this.clickImage = new EventEmitter();
        this.clickQuote = new EventEmitter();
        this.clickClear = new EventEmitter();
        this.clickSave = new EventEmitter();
        this.clickField = new EventEmitter();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set labelAddField(value) {
        this._labelAddField = value;
    }
    /**
     * @return {?}
     */
    get labelAddField() {
        return this._labelAddField;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.defaultField = this.labelAddField;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onChangeField($event) {
        this.clickField.emit($event);
        setTimeout((/**
         * @return {?}
         */
        () => this.defaultField = this.labelAddField));
    }
}
TlEditorHeader.decorators = [
    { type: Component, args: [{
                selector: 'tl-editor-header',
                template: "<div class=\"ui-editor-header\">\n  <ul class=\"ui-tools-list\">\n     <li class=\"dropdown\" [tooltip]=\"{text: toolbarConfig?.font?.family?.tooltipText, placement: 'top-center'}\"\n         *ngIf=\"toolbarConfig?.font?.family?.show\">\n       <select class=\"select\" [(ngModel)]=\"fontSelected\" (ngModelChange)=\"changeFont.emit($event)\">\n         <option *ngFor=\"let item of fontCollection\" [ngValue]=\"item.value\">{{ item?.description }}</option>\n       </select>\n     </li>\n        <li class=\"dropdown\" [tooltip]=\"{text: toolbarConfig?.font?.size?.tooltipText, placement: 'top-center'}\"\n            *ngIf=\"toolbarConfig?.font.size?.show\">\n          <select class=\"select\" [(ngModel)]=\"fontSizeSelected\" (ngModelChange)=\"changeFontSize.emit($event)\">\n            <option *ngFor=\"let item of fontSizeCollection\" [ngValue]=\"item.value\">{{ item?.description }}</option>\n          </select>\n        </li>\n    <li [tooltip]=\"{text: toolbarConfig?.font?.bold?.tooltipText, placement: 'top-center'}\"\n        *ngIf=\"toolbarConfig?.font.bold?.show\">\n      <button class=\"ui-command fa fa-bold\" [ngClass]=\"{'ui-active-tool': activeTools.bold}\"\n              (click)=\"clickBold.emit()\"></button>\n    </li>\n    <li [tooltip]=\"{text: toolbarConfig?.font.italic?.tooltipText, placement: 'top-center'}\"\n        *ngIf=\"toolbarConfig?.font.italic?.show\">\n      <button class=\"ui-command fa fa-italic\" [ngClass]=\"{'ui-active-tool': activeTools.italic}\"\n              (click)=\"clickItalic.emit()\"></button>\n    </li>\n    <li [tooltip]=\"{text: toolbarConfig?.font.underline?.tooltipText, placement: 'top-center'}\"\n        *ngIf=\"toolbarConfig?.font.underline?.show\">\n      <button class=\"ui-command fa fa-underline\" [ngClass]=\"{'ui-active-tool': activeTools.underline}\"\n              (click)=\"clickUnderline.emit()\"></button>\n    </li>\n    <li [style.border-bottom]=\"'2px solid ' + colorSelected\" #button\n        [tooltip]=\"{text: toolbarConfig?.font.color?.tooltipText, placement: 'top-center'}\"\n        *ngIf=\"toolbarConfig?.font.color?.show\">\n      <button class=\"ui-command fa fa-font\"></button>\n      <tl-colorpicker [mode]=\"'fromOrigin'\" [elementOrigin]=\"button\" [recentColors]=\"true\"\n                      [(ngModel)]=\"colorSelected\" [returnFormatColor]=\"true\"\n                      (selectColor)=\"changeColor.emit($event)\"></tl-colorpicker>\n    </li>\n    <li *ngIf=\"toolbarConfig?.font.highlight?.show\"\n        [tooltip]=\"{text: toolbarConfig?.font.highlight?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fas fas fa-pen-alt\" [ngClass]=\"{'ui-active-tool': cursorHighlight}\"\n              (click)=\"clickHighlight.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.alignment?.left?.show\"\n        [tooltip]=\"{text: toolbarConfig?.alignment?.left?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-align-left\" [ngClass]=\"{'ui-active-tool': activeTools.alignLeft}\"\n              (click)=\"clickAlignContent.emit('justifyLeft')\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.alignment?.center?.show\"\n        [tooltip]=\"{text: toolbarConfig?.alignment?.center?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-align-center\" [ngClass]=\"{'ui-active-tool': activeTools.alignCenter}\"\n              (click)=\"clickAlignContent.emit('justifyCenter')\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.alignment?.right?.show\"\n        [tooltip]=\"{text: toolbarConfig?.alignment?.right?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-align-right\" [ngClass]=\"{'ui-active-tool': activeTools.alignRight}\"\n              (click)=\"clickAlignContent.emit('justifyRight')\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.alignment?.justify?.show\"\n        [tooltip]=\"{text: toolbarConfig?.alignment?.justify?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-align-justify\" [ngClass]=\"{'ui-active-tool': activeTools.alignJustify}\"\n              (click)=\"clickAlignContent.emit('justifyFull')\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.lists?.ordered?.show\"\n        [tooltip]=\"{text: toolbarConfig?.lists?.ordered?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-list-ul\" [ngClass]=\"{'ui-active-tool': activeTools.listUnordered}\"\n              (click)=\"clickUnorderedList.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.lists?.unordered?.show\"\n        [tooltip]=\"{text: toolbarConfig?.lists?.unordered?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-list-ol\" [ngClass]=\"{'ui-active-tool': activeTools.listOrdered}\"\n              (click)=\"clickOrderedList.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.others?.link?.show\"\n        [tooltip]=\"{text: toolbarConfig?.others?.link?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fa fa-link\" (click)=\"clickLink.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.others?.imageLink?.show\"\n        [tooltip]=\"{text: toolbarConfig?.others?.imageLink?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command far fa-image\" (click)=\"clickImage.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.others?.quote?.show\"\n        [tooltip]=\"{text: toolbarConfig?.others?.quote?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command fas fa-quote-right\" [ngClass]=\"{'ui-active-tool': activeTools.blockQuote}\"\n              (click)=\"clickQuote.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.others?.clear?.show\"\n        [tooltip]=\"{text: toolbarConfig?.others?.clear?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command far fa-trash-alt\"\n              (click)=\"clickClear.emit()\"></button>\n    </li>\n    <li *ngIf=\"toolbarConfig?.others?.save?.show\"\n        [tooltip]=\"{text: toolbarConfig?.others?.save?.tooltipText, placement: 'top-center'}\">\n      <button class=\"ui-command far fa-save\"\n              (click)=\"clickSave.emit()\"></button>\n    </li>\n    <li class=\"dropdown\">\n      <select class=\"select\" *ngIf=\"toolbarConfig?.others?.field\" [tooltip]=\"{text: toolbarConfig?.others?.field?.tooltipText, placement: 'top-center'}\"\n              [(ngModel)]=\"defaultField\" (ngModelChange)=\"onChangeField($event)\">\n        <option default>{{ labelAddField }}</option>\n        <option *ngFor=\"let item of fields\" [ngValue]=\"item.field\">{{ item?.field }}</option>\n      </select>\n    </li>\n  </ul>\n</div>\n",
                styles: [".ui-editor-header{border-bottom:0;border-top-left-radius:3px;border-top-right-radius:3px;height:40px;overflow-x:auto}.ui-editor-header::-webkit-scrollbar{height:4px;width:0}.ui-editor-header .ui-tools-list{display:inline-flex;height:inherit;line-height:inherit;list-style:none;margin:0;padding:0}.ui-editor-header .ui-tools-list li:not(.dropdown){padding:0;width:40px}.ui-editor-header .ui-tools-list li{align-items:center;display:flex;justify-content:center;padding:8px;transition:all .2s ease-in}.ui-editor-header .ui-tools-list li:hover{cursor:pointer}.select{border:1px solid #eaeaea;border-radius:3px;color:#4b4a4a;font-family:Segoe UI,serif;padding-right:20px;text-align:left}.ui-command{background:transparent;border:0;color:#3a3a3a;cursor:pointer;font-size:13px;height:40px;outline:none;padding:0;width:40px}"]
            }] }
];
/** @nocollapse */
TlEditorHeader.ctorParameters = () => [];
TlEditorHeader.propDecorators = {
    toolbarConfig: [{ type: Input }],
    cursorHighlight: [{ type: Input }],
    fontSizeCollection: [{ type: Input }],
    fontCollection: [{ type: Input }],
    fields: [{ type: Input }],
    color: [{ type: Input }],
    activeTools: [{ type: Input }],
    colorSelected: [{ type: Input }],
    fontSelected: [{ type: Input }],
    fontSizeSelected: [{ type: Input }],
    changeColor: [{ type: Output }],
    changeFont: [{ type: Output }],
    changeFontSize: [{ type: Output }],
    clickUnderline: [{ type: Output }],
    clickItalic: [{ type: Output }],
    clickBold: [{ type: Output }],
    clickHighlight: [{ type: Output }],
    clickAlignContent: [{ type: Output }],
    clickUnorderedList: [{ type: Output }],
    clickOrderedList: [{ type: Output }],
    clickLink: [{ type: Output }],
    clickImage: [{ type: Output }],
    clickQuote: [{ type: Output }],
    clickClear: [{ type: Output }],
    clickSave: [{ type: Output }],
    clickField: [{ type: Output }],
    labelAddField: [{ type: Input, args: ['labelAddField',] }]
};
if (false) {
    /** @type {?} */
    TlEditorHeader.prototype.toolbarConfig;
    /** @type {?} */
    TlEditorHeader.prototype.cursorHighlight;
    /** @type {?} */
    TlEditorHeader.prototype.fontSizeCollection;
    /** @type {?} */
    TlEditorHeader.prototype.fontCollection;
    /** @type {?} */
    TlEditorHeader.prototype.fields;
    /** @type {?} */
    TlEditorHeader.prototype.color;
    /** @type {?} */
    TlEditorHeader.prototype.activeTools;
    /** @type {?} */
    TlEditorHeader.prototype.colorSelected;
    /** @type {?} */
    TlEditorHeader.prototype.fontSelected;
    /** @type {?} */
    TlEditorHeader.prototype.fontSizeSelected;
    /** @type {?} */
    TlEditorHeader.prototype.changeColor;
    /** @type {?} */
    TlEditorHeader.prototype.changeFont;
    /** @type {?} */
    TlEditorHeader.prototype.changeFontSize;
    /** @type {?} */
    TlEditorHeader.prototype.clickUnderline;
    /** @type {?} */
    TlEditorHeader.prototype.clickItalic;
    /** @type {?} */
    TlEditorHeader.prototype.clickBold;
    /** @type {?} */
    TlEditorHeader.prototype.clickHighlight;
    /** @type {?} */
    TlEditorHeader.prototype.clickAlignContent;
    /** @type {?} */
    TlEditorHeader.prototype.clickUnorderedList;
    /** @type {?} */
    TlEditorHeader.prototype.clickOrderedList;
    /** @type {?} */
    TlEditorHeader.prototype.clickLink;
    /** @type {?} */
    TlEditorHeader.prototype.clickImage;
    /** @type {?} */
    TlEditorHeader.prototype.clickQuote;
    /** @type {?} */
    TlEditorHeader.prototype.clickClear;
    /** @type {?} */
    TlEditorHeader.prototype.clickSave;
    /** @type {?} */
    TlEditorHeader.prototype.clickField;
    /**
     * @type {?}
     * @private
     */
    TlEditorHeader.prototype._labelAddField;
    /** @type {?} */
    TlEditorHeader.prototype.defaultField;
}
//# sourceMappingURL=data:application/json;base64, 