@libs-ui/components-inputs-quill 0.1.1-1

package/quill.component.d.ts

@@ -0,0 +1,157 @@
+import { AfterViewInit, ElementRef, OnDestroy, OnInit, TemplateRef, WritableSignal } from '@angular/core';
+import { IEmitSelectKey } from '@libs-ui/components-dropdown';
+import { IMentionConfig, IMentionInsert } from '@libs-ui/components-inputs-mention';
+import { IValidLength, IValidRequired } from '@libs-ui/components-inputs-valid';
+import { ILabel } from '@libs-ui/components-label';
+import { IListConfigItem } from '@libs-ui/components-list';
+import { IPopoverFunctionControlEvent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+import { IQuillBlotRegister, IQuillFunctionControlEvent, IQuillLink, IQuillSelectionChange, IQuillTextChange, IQuillToolbarConfig, IQuillUploadImageConfig, TYPE_MODE_BAR_CONFIG_OPTION } from './interfaces/quill.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsInputsQuillComponent implements OnInit, AfterViewInit, OnDestroy {
+    protected qlEditorElement: WritableSignal<HTMLElement | undefined>;
+    private timeoutScrollToSelectionWithElementScrollHeightAuto;
+    protected loadingUploadImage: WritableSignal<boolean>;
+    protected readonly timeDelayInit: WritableSignal<number>;
+    protected messageError: WritableSignal<string>;
+    protected display: WritableSignal<boolean>;
+    protected listConfigAlign: WritableSignal<IListConfigItem>;
+    protected alignSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected iconAlignSelectedComputed: import("@angular/core").Signal<any>;
+    protected listConfigFont: WritableSignal<IListConfigItem>;
+    protected fontSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected labelFontSelectedComputed: import("@angular/core").Signal<any>;
+    protected listConfigHeader: WritableSignal<IListConfigItem>;
+    protected headerSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected labelHeaderSelectedComputed: import("@angular/core").Signal<any>;
+    protected size: WritableSignal<{
+        value: number;
+    }>;
+    protected showMoreAction: WritableSignal<boolean>;
+    protected link: WritableSignal<IQuillLink>;
+    protected toolbarOptionsConfig: WritableSignal<Array<IQuillToolbarConfig>>;
+    protected displayShowMoreToolbar: import("@angular/core").Signal<boolean>;
+    protected displaySkeleton: import("@angular/core").Signal<boolean>;
+    private timeCalculationToolBar;
+    private popoverFunctionControl;
+    private quill;
+    private handlers;
+    private showMention;
+    private addEditLinkComponentRef;
+    private uploadImageComponentRef;
+    private onDestroy;
+    private dynamicComponentService;
+    private translate;
+    readonly isShowToolBar: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly isToolbarPositionFixed: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly classIncludeToolbar: import("@angular/core").InputSignal<string>;
+    readonly stylesIncludeToolbar: import("@angular/core").InputSignal<TYPE_OBJECT | undefined>;
+    readonly toolbarConfig: import("@angular/core").InputSignal<{
+        type: TYPE_MODE_BAR_CONFIG_OPTION;
+        config?: Array<IQuillToolbarConfig>;
+    } | undefined>;
+    readonly placeholder: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly label: import("@angular/core").InputSignal<ILabel | undefined>;
+    readonly item: import("@angular/core").ModelSignal<TYPE_OBJECT | undefined>;
+    /**đặt cờ này bằng false để tối ưu hiệu năng, và chỉ lấy dữ liệu ra khi có yêu cầu lấy dữ liệu để gửi lên server , gọi refreshItemValue để cập nhật giá tri thủ công*/
+    readonly autoUpdateValueWhenTextChange: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly fieldNameBind: import("@angular/core").InputSignal<string>;
+    readonly readonly: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly showErrorLabel: import("@angular/core").InputSignal<boolean>;
+    readonly showErrorBorder: import("@angular/core").InputSignal<boolean>;
+    readonly onlyShowErrorBorderInContent: import("@angular/core").InputSignal<boolean>;
+    readonly classIncludeTemplate: import("@angular/core").InputSignal<string | undefined>;
+    readonly classInclude: import("@angular/core").InputSignal<string | undefined>;
+    readonly handlersExpand: import("@angular/core").InputSignal<{
+        title: string;
+        action: () => void;
+    }[] | undefined>;
+    readonly validRequired: import("@angular/core").InputSignal<IValidRequired | undefined>;
+    readonly validMinLength: import("@angular/core").InputSignal<IValidLength | undefined>;
+    readonly validMaxLength: import("@angular/core").InputSignal<IValidLength | undefined>;
+    readonly zIndex: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly dataConfigMention: import("@angular/core").InputSignal<IMentionConfig | undefined>;
+    readonly blotsRegister: import("@angular/core").InputSignal<IQuillBlotRegister[] | undefined>;
+    readonly autoFocus: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly focusBottom: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly blockUndoRedoKeyboard: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly templateToolBarPersonalize: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    readonly template: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    readonly uploadImageConfig: import("@angular/core").InputSignalWithTransform<IQuillUploadImageConfig, IQuillUploadImageConfig | undefined>;
+    readonly heightAuto: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly elementScrollHeightAuto: import("@angular/core").InputSignal<HTMLElement | undefined>;
+    readonly ignoreShowPopupEditLink: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreCommunicateMicroEventPopup: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly outShowPopupEditLink: import("@angular/core").OutputEmitterRef<{
+        dataLink: IQuillLink;
+        callback: (linkEdit: {
+            title: string;
+            link: string;
+        }) => Promise<void>;
+    }>;
+    readonly outMessageError: import("@angular/core").OutputEmitterRef<string>;
+    readonly outBlur: import("@angular/core").OutputEmitterRef<void>;
+    readonly outFocus: import("@angular/core").OutputEmitterRef<void>;
+    readonly outChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IQuillFunctionControlEvent>;
+    readonly outSelectionChange: import("@angular/core").OutputEmitterRef<IQuillSelectionChange>;
+    readonly outTextChange: import("@angular/core").OutputEmitterRef<IQuillTextChange>;
+    readonly outContextMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly wrapperEditorEl: import("@angular/core").Signal<ElementRef<any>>;
+    readonly editorEl: import("@angular/core").Signal<ElementRef<any>>;
+    readonly quillOptionEl: import("@angular/core").Signal<ElementRef<any>>;
+    readonly quillEditorEl: import("@angular/core").Signal<ElementRef<any>>;
+    readonly toolbarItemsEl: import("@angular/core").Signal<ElementRef<any>>;
+    private notificationService;
+    private cdr;
+    constructor();
+    ngOnInit(): void;
+    get FunctionsControl(): IQuillFunctionControlEvent;
+    ngAfterViewInit(): Promise<void>;
+    private initQuill;
+    private setupUndoRedoBlocking;
+    private noPreventEmbedDeletion;
+    private setHandlerFunction;
+    private adjustIndexForImages;
+    private handlerSelectionChange;
+    private handlerPaste;
+    private handlerTextChange;
+    private updateValueByRootQuillHtml;
+    protected handlerPopoverFunctionControl(event: IPopoverFunctionControlEvent): void;
+    protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT): void;
+    protected handlerUnlink(event: Event): void;
+    protected handlerEdit(event: Event): void;
+    private calculatorToolbar;
+    protected setStyle(type: string, data: string | number): void;
+    private getFontSize;
+    private getFont;
+    protected handleUndo(): void;
+    protected handleRedo(): void;
+    protected setContent(content: string): Promise<void>;
+    protected handlerAddEmoji(emoji: unknown): void;
+    protected handleShowUploadLink(event: unknown): void;
+    protected handlerUnInsertLink(): void;
+    protected validate(): Promise<boolean>;
+    protected insertImage(content: string, index?: number): Promise<void>;
+    private insertText;
+    private insertLink;
+    private convertInnerHTMLAndSetValue;
+    private setStyleForContent;
+    protected handleToggleMention(show: boolean): void;
+    private handlerShowUploadImage;
+    private uploadImagesAndInsert;
+    private insertMention;
+    protected handlerInsertMention(data: IMentionInsert): void;
+    protected setFontSize(size: number): Promise<void>;
+    protected handlerValueChange(value: number | string): void;
+    protected handleSelectAlign(event: IEmitSelectKey | undefined): void;
+    protected handleSelectFont(event: IEmitSelectKey | undefined): void;
+    protected handlerChangeShowMoreAction(event: Event): void;
+    private scrollToSelectionWithElementScrollHeightAuto;
+    private getQlEditorElement;
+    private removeUnwantedPart;
+    protected handleSelectHeader(event: IEmitSelectKey | undefined): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsQuillComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuillComponent, "libs_ui-components-inputs-quill", never, { "isShowToolBar": { "alias": "isShowToolBar"; "required": false; "isSignal": true; }; "isToolbarPositionFixed": { "alias": "isToolbarPositionFixed"; "required": false; "isSignal": true; }; "classIncludeToolbar": { "alias": "classIncludeToolbar"; "required": false; "isSignal": true; }; "stylesIncludeToolbar": { "alias": "stylesIncludeToolbar"; "required": false; "isSignal": true; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "item": { "alias": "item"; "required": false; "isSignal": true; }; "autoUpdateValueWhenTextChange": { "alias": "autoUpdateValueWhenTextChange"; "required": false; "isSignal": true; }; "fieldNameBind": { "alias": "fieldNameBind"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "showErrorLabel": { "alias": "showErrorLabel"; "required": false; "isSignal": true; }; "showErrorBorder": { "alias": "showErrorBorder"; "required": false; "isSignal": true; }; "onlyShowErrorBorderInContent": { "alias": "onlyShowErrorBorderInContent"; "required": false; "isSignal": true; }; "classIncludeTemplate": { "alias": "classIncludeTemplate"; "required": false; "isSignal": true; }; "classInclude": { "alias": "classInclude"; "required": false; "isSignal": true; }; "handlersExpand": { "alias": "handlersExpand"; "required": false; "isSignal": true; }; "validRequired": { "alias": "validRequired"; "required": false; "isSignal": true; }; "validMinLength": { "alias": "validMinLength"; "required": false; "isSignal": true; }; "validMaxLength": { "alias": "validMaxLength"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "dataConfigMention": { "alias": "dataConfigMention"; "required": false; "isSignal": true; }; "blotsRegister": { "alias": "blotsRegister"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "focusBottom": { "alias": "focusBottom"; "required": false; "isSignal": true; }; "blockUndoRedoKeyboard": { "alias": "blockUndoRedoKeyboard"; "required": false; "isSignal": true; }; "templateToolBarPersonalize": { "alias": "templateToolBarPersonalize"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "uploadImageConfig": { "alias": "uploadImageConfig"; "required": false; "isSignal": true; }; "heightAuto": { "alias": "heightAuto"; "required": false; "isSignal": true; }; "elementScrollHeightAuto": { "alias": "elementScrollHeightAuto"; "required": false; "isSignal": true; }; "ignoreShowPopupEditLink": { "alias": "ignoreShowPopupEditLink"; "required": false; "isSignal": true; }; "ignoreCommunicateMicroEventPopup": { "alias": "ignoreCommunicateMicroEventPopup"; "required": false; "isSignal": true; }; }, { "item": "itemChange"; "outShowPopupEditLink": "outShowPopupEditLink"; "outMessageError": "outMessageError"; "outBlur": "outBlur"; "outFocus": "outFocus"; "outChange": "outChange"; "outFunctionsControl": "outFunctionsControl"; "outSelectionChange": "outSelectionChange"; "outTextChange": "outTextChange"; "outContextMenu": "outContextMenu"; }, never, never, true, never>;
+}

package/quill2x.component.d.ts

@@ -0,0 +1,18 @@
+import { OnInit } from '@angular/core';
+import { IQuillBlotRegister, IQuillFunctionControlEvent } from './interfaces/quill.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsInputsQuill2xComponent implements OnInit {
+    private quill?;
+    readonly blotsRegister: import("@angular/core").InputSignal<IQuillBlotRegister[] | undefined>;
+    readonly outContextMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IQuillFunctionControlEvent>;
+    private readonly htmlContainer;
+    private readonly quillBodyContainer;
+    private destroyRef;
+    ngOnInit(): void;
+    get FunctionsControl(): any;
+    private noPreventEmbedDeletion;
+    private setStyleForContent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsQuill2xComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuill2xComponent, "libs_ui-components-inputs-quill2x", never, { "blotsRegister": { "alias": "blotsRegister"; "required": false; "isSignal": true; }; }, { "outContextMenu": "outContextMenu"; "outFunctionsControl": "outFunctionsControl"; }, never, never, true, never>;
+}

package/upload-image/upload-image.component.d.ts

@@ -0,0 +1,15 @@
+import { IButton } from '@libs-ui/components-buttons-button';
+import { TYPE_MODAL_EVENT } from '@libs-ui/components-modal';
+import { IQuillUploadImageConfig } from '../interfaces/quill.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsInputsQuillUploadImageComponent {
+    protected buttonFooter: import("@angular/core").WritableSignal<IButton[]>;
+    protected disable: import("@angular/core").WritableSignal<boolean>;
+    readonly ignoreCommunicateMicroEvent: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly uploadImageConfig: import("@angular/core").InputSignal<IQuillUploadImageConfig>;
+    readonly outClose: import("@angular/core").OutputEmitterRef<string | void>;
+    private handlerSaveImage;
+    protected handlerEventModal(event: TYPE_MODAL_EVENT): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsQuillUploadImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuillUploadImageComponent, "libs_ui-components-inputs-quill-upload_image", never, { "ignoreCommunicateMicroEvent": { "alias": "ignoreCommunicateMicroEvent"; "required": false; "isSignal": true; }; "uploadImageConfig": { "alias": "uploadImageConfig"; "required": true; "isSignal": true; }; }, { "outClose": "outClose"; }, never, never, true, never>;
+}

package/utils/quill.define.d.ts

@@ -0,0 +1,25 @@
+import { IListConfigItem } from '@libs-ui/components-list';
+import { IQuillLink, IQuillToolbarConfig, IQuillUploadImageConfig, TYPE_MODE_BAR_CONFIG_OPTION } from '../interfaces/quill.interface';
+export declare const listDataAlign: () => {
+    key: string;
+    icon: string;
+}[];
+export declare const listFont: () => {
+    key: string;
+    label: string;
+}[];
+export declare const listHeader: () => {
+    key: string;
+    label: string;
+}[];
+export declare const listConfigAlign: () => IListConfigItem;
+export declare const listConfigFont: () => IListConfigItem;
+export declare const listConfigHeader: () => IListConfigItem;
+export declare const toolBarOptions: (mode: TYPE_MODE_BAR_CONFIG_OPTION, hasIconImage: boolean, hasIconPersonalize: boolean) => Array<IQuillToolbarConfig>;
+export declare const iconList: () => Array<{
+    key: string;
+    icon: string;
+}>;
+export declare const uploadImageConfigDefault: () => IQuillUploadImageConfig;
+export declare const linkDefault: () => IQuillLink;
+export declare const fontSizeWhiteList: () => string[];

package/utils/quill2x.define.d.ts

@@ -0,0 +1,3 @@
+import Quill2x from 'quill2x';
+export declare const createTableSelector: (quill: Quill2x, anchorEl: HTMLElement | null) => void;
+export declare const createContextMenuOptionTable: (quill: Quill2x) => void;