import { Component, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SingleLineEditorComponent {
    constructor() {
        this.placeholder = 'placeholder';
        this.editorMode = 'single';
        this.label = true;
        this.onChange = (value) => { };
        this.onTouched = () => { };
    }
    ngOnInit() {
        this.selectFunction = () => {
            this.bold = document.queryCommandState('bold');
            this.italic = document.queryCommandState('italic');
            this.underline = document.queryCommandState('underline');
        };
        document.addEventListener('selectionchange', this.selectFunction, false);
        this.sel = window.getSelection();
        if (!this.id) {
            this.id = this.generateUID();
        }
    }
    generateUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    setValue() {
        const x = document.getElementById(this.id)?.innerHTML;
        if (x === '<br>') {
            const z = document.getElementById(this.id);
            z.innerHTML = '';
        }
        this.onChange(x);
    }
    writeValue(value) {
        this.containerValue = value;
        const containerRef = document.getElementById(this.id);
        if (containerRef) {
            setTimeout((val) => {
                containerRef.innerHTML = value;
                this.setValue();
            }, 150);
        }
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched() { }
    show(e) {
        this.showEditorControls = !this.showEditorControls;
        this.activeEditor = !this.activeEditor;
        document.getElementById(this.id)?.focus();
        this.setCaretToEnd();
    }
    insertBold() {
        document.getElementById(this.id)?.focus();
        document.execCommand('bold', false, '');
        this.bold = !this.bold;
    }
    insertItalic() {
        document.getElementById(this.id)?.focus();
        document.execCommand('italic', false, '');
        this.italic = !this.italic;
    }
    insertUnderLine() {
        document.getElementById(this.id)?.focus();
        document.execCommand('underline', false, '');
        this.underline = !this.underline;
    }
    onblur() {
        this.oldRange = window?.getSelection()?.getRangeAt(0).cloneRange(); // to store the range when element is blurred
    }
    setCaretToEnd() {
        window.getSelection()?.removeAllRanges();
        window.getSelection()?.addRange(this.oldRange);
    }
    showControls() {
        if (this.controls !== false) {
            this.controls = false;
        }
        if (this.activeEditor !== false) {
            this.activeEditor = false;
        }
    }
    onPaste(event) {
        event.preventDefault();
        event.stopPropagation();
        const pastedText = event?.clipboardData?.getData('text/plain');
        document.execCommand('insertHTML', false, pastedText);
        const range = this.sel.getRangeAt(0);
        const position = range.getBoundingClientRect();
        const d = document.getElementById(this.id);
        d.scrollLeft = position.x;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SingleLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SingleLineEditorComponent, selector: "app-single-line-editor", inputs: { placeholder: "placeholder", editorMode: "editorMode", label: "label", id: "id" }, providers: [
            { provide: NG_VALUE_ACCESSOR, useExisting: SingleLineEditorComponent, multi: true },
        ], ngImport: i0, template: "\n\n<div class=\"single-line-editor vx-mb-5\">\n    <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\" \n    [class.multiline]=\"editorMode == 'multiline'\" \n    *ngIf=\"editorMode == 'multiline' && label == true\">\n    {{placeholder}}</div>\n\n    <div class=\"editable-box vx-fs-16 vx-paragraph-txt vx-lh-6 vx-pt-1 vx-pb-1\"\n    [attr.placeholder]=\"placeholder\" [class.multiline]=\"editorMode == 'multiline'\" contenteditable=\"true\" id=\"{{id}}\" (blur)='onblur()' appAutoFocus (paste)=\"onPaste($event)\" (input)=\"setValue()\"></div>\n    <div class=\"action vx-fs-12 vx-paragraph-txt\" (click)=\"show()\">Aa</div>\n    <div class=\"editor-option\" *ngIf=\"showEditorControls\">\n        <ul class=\"vx-d-flex vx-align-center vx-m-0\">\n            <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"bold\" (click)=\"insertBold()\">B</button></li>\n            <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\"[class.active]=\"italic\" (click)=\"insertItalic()\"><em>I</em></button></li>\n            <li><button class=\"vx-fs-11 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"underline\" (click)=\"insertUnderLine()\"><i class=\"icons\">&#xeb0a;</i></button></li>\n        </ul>\n    </div>\n</div>\n<div class=\"overlay\" *ngIf=\"showEditorControls\" (click)=\"showControls(); show($event)\"></div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.single-line-editor{position:relative}.single-line-editor .editable-box{background:#fff;border-bottom:1px solid #dbdbdb;display:block!important;overflow:hidden;height:2rem;cursor:text;align-items:center;white-space:nowrap;transition:all .3s ease-in-out;outline:none;padding-right:2.5rem}.single-line-editor .editable-box.active{border-color:#4681ef}.single-line-editor .editable-box audio{height:1.5rem!important}.single-line-editor .editable-box.multiline{min-height:2rem;max-height:10rem;height:auto!important;white-space:pre-wrap!important;overflow:auto!important;width:100%!important}.single-line-editor .editable-box.multiline::-webkit-scrollbar-thumb{background-color:transparent}.single-line-editor .editable-box b{font-weight:600}.single-line-editor .action{position:absolute;bottom:.5rem;right:.5rem;cursor:pointer}.single-line-editor .editor-option{background:#161b2f;border-radius:0 0 .25rem .25rem;position:absolute;bottom:-2.5rem;right:0;z-index:10}.single-line-editor .editor-option ul{list-style-type:none;padding:0 .125rem}.single-line-editor .editor-option ul li button{background:transparent;border:1px solid transparent;border-radius:0;width:2rem;height:2rem;margin:.25rem .125rem}.single-line-editor .editor-option ul li button.active{border-color:#f1f1f150}[contenteditable][placeholder]:empty:before{content:attr(placeholder);position:absolute;color:#74757670;background-color:transparent}.overlay{z-index:9}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SingleLineEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-single-line-editor', providers: [
                        { provide: NG_VALUE_ACCESSOR, useExisting: SingleLineEditorComponent, multi: true },
                    ], template: "\n\n<div class=\"single-line-editor vx-mb-5\">\n    <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\" \n    [class.multiline]=\"editorMode == 'multiline'\" \n    *ngIf=\"editorMode == 'multiline' && label == true\">\n    {{placeholder}}</div>\n\n    <div class=\"editable-box vx-fs-16 vx-paragraph-txt vx-lh-6 vx-pt-1 vx-pb-1\"\n    [attr.placeholder]=\"placeholder\" [class.multiline]=\"editorMode == 'multiline'\" contenteditable=\"true\" id=\"{{id}}\" (blur)='onblur()' appAutoFocus (paste)=\"onPaste($event)\" (input)=\"setValue()\"></div>\n    <div class=\"action vx-fs-12 vx-paragraph-txt\" (click)=\"show()\">Aa</div>\n    <div class=\"editor-option\" *ngIf=\"showEditorControls\">\n        <ul class=\"vx-d-flex vx-align-center vx-m-0\">\n            <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"bold\" (click)=\"insertBold()\">B</button></li>\n            <li><button class=\"vx-fs-13 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\"[class.active]=\"italic\" (click)=\"insertItalic()\"><em>I</em></button></li>\n            <li><button class=\"vx-fs-11 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" [class.active]=\"underline\" (click)=\"insertUnderLine()\"><i class=\"icons\">&#xeb0a;</i></button></li>\n        </ul>\n    </div>\n</div>\n<div class=\"overlay\" *ngIf=\"showEditorControls\" (click)=\"showControls(); show($event)\"></div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.single-line-editor{position:relative}.single-line-editor .editable-box{background:#fff;border-bottom:1px solid #dbdbdb;display:block!important;overflow:hidden;height:2rem;cursor:text;align-items:center;white-space:nowrap;transition:all .3s ease-in-out;outline:none;padding-right:2.5rem}.single-line-editor .editable-box.active{border-color:#4681ef}.single-line-editor .editable-box audio{height:1.5rem!important}.single-line-editor .editable-box.multiline{min-height:2rem;max-height:10rem;height:auto!important;white-space:pre-wrap!important;overflow:auto!important;width:100%!important}.single-line-editor .editable-box.multiline::-webkit-scrollbar-thumb{background-color:transparent}.single-line-editor .editable-box b{font-weight:600}.single-line-editor .action{position:absolute;bottom:.5rem;right:.5rem;cursor:pointer}.single-line-editor .editor-option{background:#161b2f;border-radius:0 0 .25rem .25rem;position:absolute;bottom:-2.5rem;right:0;z-index:10}.single-line-editor .editor-option ul{list-style-type:none;padding:0 .125rem}.single-line-editor .editor-option ul li button{background:transparent;border:1px solid transparent;border-radius:0;width:2rem;height:2rem;margin:.25rem .125rem}.single-line-editor .editor-option ul li button.active{border-color:#f1f1f150}[contenteditable][placeholder]:empty:before{content:attr(placeholder);position:absolute;color:#74757670;background-color:transparent}.overlay{z-index:9}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                type: Input
            }], editorMode: [{
                type: Input
            }], label: [{
                type: Input
            }], id: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 