@libs-ui/components-inputs-quill2x 0.2.351-0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@libs-ui/components-inputs-quill2x",
+  "version": "0.2.351-0",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "quill2x": "npm:quill@2.0.3",
+    "@ssumo/quill-resize-module": "1.0.3"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-inputs-quill2x.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-inputs-quill2x.mjs",
+      "esm": "./esm2022/libs-ui-components-inputs-quill2x.mjs",
+      "default": "./fesm2022/libs-ui-components-inputs-quill2x.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/quill2x.component.d.ts

@@ -0,0 +1,162 @@
+import { OnDestroy, OnInit, TemplateRef, WritableSignal } from '@angular/core';
+import { IEmitSelectKey } from '@libs-ui/components-dropdown';
+import { IFocusAndBlurEvent } from '@libs-ui/components-inputs-input';
+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 { TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+import { IOutputColorChangeMultipleType } from '@libs-ui/components-color-picker';
+import { IQuill2xBlotRegister, IQuill2xCustomConfig, IQuill2xFunctionControlEvent, IQuill2xLink, IQuill2xSelectionChange, IQuill2xTextChange, IQuill2xToolbarConfig, IQuill2xUploadImageConfig } from './interfaces/quill2x.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsInputsQuill2xComponent implements OnInit, OnDestroy {
+    private displayEditor;
+    private isPaste;
+    private quill;
+    private addEditLinkComponentRef;
+    private uploadImageComponentRef;
+    private handlers;
+    private timerSetFontSize;
+    private timerCalculatorToolbar;
+    private totalRecallCalculatorToolbar;
+    private isCalculatorToolbarSuccess;
+    private showMention;
+    private handlerTextChangeBind;
+    private handlerSelectionChangeBind;
+    protected borderColor: import("@angular/core").Signal<string>;
+    protected containerClass: import("@angular/core").Signal<string>;
+    protected containerToolbarClass: import("@angular/core").Signal<string>;
+    protected containerEditorClass: import("@angular/core").Signal<string>;
+    protected showButtonMoreToolbar: import("@angular/core").Signal<boolean>;
+    protected displaySkeletonToolbar: import("@angular/core").Signal<boolean>;
+    protected labelFontSelectedComputed: import("@angular/core").Signal<any>;
+    protected fontSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected listConfigFont: WritableSignal<IListConfigItem>;
+    protected listConfigHeader: WritableSignal<IListConfigItem>;
+    protected headerSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected labelHeaderSelectedComputed: import("@angular/core").Signal<any>;
+    protected listConfigAlign: WritableSignal<IListConfigItem>;
+    protected alignSelected: WritableSignal<IEmitSelectKey | undefined>;
+    protected iconAlignSelectedComputed: import("@angular/core").Signal<any>;
+    protected colorSelected: WritableSignal<string | undefined>;
+    protected backgroundSelected: WritableSignal<string | undefined>;
+    protected listCheckboxSelected: WritableSignal<boolean>;
+    protected adjustSelected: WritableSignal<string | undefined>;
+    protected messageError: WritableSignal<string>;
+    protected fontSize: WritableSignal<{
+        value: number;
+    }>;
+    protected link: WritableSignal<IQuill2xLink>;
+    protected showMoreAction: WritableSignal<boolean>;
+    protected toolbarOptionsConfig: WritableSignal<Array<IQuill2xToolbarConfig>>;
+    protected loadingUploadImage: WritableSignal<boolean>;
+    readonly uploadImageConfig: import("@angular/core").InputSignalWithTransform<IQuill2xUploadImageConfig, IQuill2xUploadImageConfig | undefined>;
+    readonly displayToolbar: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly placeholder: import("@angular/core").InputSignalWithTransform<string, string | undefined>;
+    readonly blotsRegister: import("@angular/core").InputSignal<IQuill2xBlotRegister[] | undefined>;
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly quillCustomConfig: import("@angular/core").InputSignal<IQuill2xCustomConfig | undefined>;
+    readonly label: import("@angular/core").InputSignal<ILabel | undefined>;
+    readonly item: import("@angular/core").ModelSignal<TYPE_OBJECT>;
+    readonly fieldBind: import("@angular/core").InputSignal<string>;
+    readonly autoUpdateValueWhenTextChange: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly dataConfigMention: import("@angular/core").InputSignal<IMentionConfig | undefined>;
+    readonly templateToolBarPersonalize: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    readonly zIndex: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly ignoreShowPopupEditLink: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreCommunicateMicroEventPopup: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly handlersExpand: import("@angular/core").InputSignal<{
+        title: string;
+        action: () => void;
+    }[] | undefined>;
+    readonly resizeImagePlugin: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly fontSizeDefault: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly heightEditorContentDefault: import("@angular/core").InputSignal<number | undefined>;
+    readonly minHeightEditorContentDefault: import("@angular/core").InputSignal<number | undefined>;
+    readonly maxHeightEditorContentDefault: import("@angular/core").InputSignal<number | undefined>;
+    readonly removeNearWhiteColorsOnPaste: import("@angular/core").InputSignal<boolean>;
+    readonly resize: import("@angular/core").InputSignalWithTransform<"vertical" | "none", "vertical" | "none" | undefined>;
+    readonly autoFocus: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly focusTimerOnInit: import("@angular/core").InputSignalWithTransform<number, number | undefined>;
+    readonly focusBottom: import("@angular/core").InputSignal<boolean | 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 showErrorLabel: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly showErrorBorder: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly ignoreShowBorderErrorToolbar: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly outShowPopupEditLink: import("@angular/core").OutputEmitterRef<{
+        dataLink: IQuill2xLink;
+        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 outSelectionChange: import("@angular/core").OutputEmitterRef<IQuill2xSelectionChange>;
+    readonly outTextChange: import("@angular/core").OutputEmitterRef<IQuill2xTextChange>;
+    readonly outContextMenu: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IQuill2xFunctionControlEvent>;
+    private readonly htmlContainer;
+    private readonly quillBodyContainer;
+    private readonly toolbarContainer;
+    private readonly inputLinkRef;
+    private readonly destroyRef;
+    private readonly notificationService;
+    private readonly translate;
+    private readonly cdr;
+    private readonly dynamicComponentService;
+    constructor();
+    ngOnInit(): Promise<void>;
+    get FunctionsControl(): IQuill2xFunctionControlEvent;
+    protected handlerChangeShowMoreAction(event: Event): void;
+    protected handleSelectFont(event: IEmitSelectKey | undefined): void;
+    protected handleSelectHeader(event: IEmitSelectKey | undefined): void;
+    protected handlerValueChangeFontSize(event?: IFocusAndBlurEvent): void;
+    protected handleSelectAlign(event: IEmitSelectKey | undefined): void;
+    protected handlerSetFormat(type: string, data: IOutputColorChangeMultipleType): void;
+    protected handlerInsertEmoji(emoji: unknown): void;
+    protected handlerUnlink(event: Event): void;
+    protected handlerEditLink(event: Event): void;
+    protected handleToggleMention(show: boolean): void;
+    protected handlerInsertMention(data: IMentionInsert): void;
+    private handleTable;
+    private handleUndo;
+    private handleRedo;
+    private handlerShowUploadImage;
+    private insertText;
+    private handlerSelectionChange;
+    private handlerCopy;
+    private handlerPaste;
+    private handlerTextChange;
+    private updateStateToolbarByFormatInCursor;
+    private validate;
+    private updateHandlerFunction;
+    private noPreventEmbedDeletion;
+    private setFontSizeSelected;
+    private setFontSelected;
+    private setColorSelected;
+    private calculatorToolbar;
+    private setStyleForContent;
+    private setContent;
+    private adjustIndexForImages;
+    private uploadImagesAndInsert;
+    private insertImage;
+    protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT): void;
+    private insertLink;
+    private handleShowUploadLink;
+    private insertMention;
+    private updateValueByRootQuillHtml;
+    private convertInnerHTMLAndSetValue;
+    private removeUnwantedPart;
+    private detectLink;
+    private getIndexUrlMatch;
+    private focus;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsInputsQuill2xComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsInputsQuill2xComponent, "libs_ui-components-inputs-quill2x", never, { "uploadImageConfig": { "alias": "uploadImageConfig"; "required": false; "isSignal": true; }; "displayToolbar": { "alias": "displayToolbar"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "blotsRegister": { "alias": "blotsRegister"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "quillCustomConfig": { "alias": "quillCustomConfig"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "item": { "alias": "item"; "required": true; "isSignal": true; }; "fieldBind": { "alias": "fieldBind"; "required": true; "isSignal": true; }; "autoUpdateValueWhenTextChange": { "alias": "autoUpdateValueWhenTextChange"; "required": false; "isSignal": true; }; "dataConfigMention": { "alias": "dataConfigMention"; "required": false; "isSignal": true; }; "templateToolBarPersonalize": { "alias": "templateToolBarPersonalize"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "ignoreShowPopupEditLink": { "alias": "ignoreShowPopupEditLink"; "required": false; "isSignal": true; }; "ignoreCommunicateMicroEventPopup": { "alias": "ignoreCommunicateMicroEventPopup"; "required": false; "isSignal": true; }; "handlersExpand": { "alias": "handlersExpand"; "required": false; "isSignal": true; }; "resizeImagePlugin": { "alias": "resizeImagePlugin"; "required": false; "isSignal": true; }; "fontSizeDefault": { "alias": "fontSizeDefault"; "required": false; "isSignal": true; }; "heightEditorContentDefault": { "alias": "heightEditorContentDefault"; "required": false; "isSignal": true; }; "minHeightEditorContentDefault": { "alias": "minHeightEditorContentDefault"; "required": false; "isSignal": true; }; "maxHeightEditorContentDefault": { "alias": "maxHeightEditorContentDefault"; "required": false; "isSignal": true; }; "removeNearWhiteColorsOnPaste": { "alias": "removeNearWhiteColorsOnPaste"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "focusTimerOnInit": { "alias": "focusTimerOnInit"; "required": false; "isSignal": true; }; "focusBottom": { "alias": "focusBottom"; "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; }; "showErrorLabel": { "alias": "showErrorLabel"; "required": false; "isSignal": true; }; "showErrorBorder": { "alias": "showErrorBorder"; "required": false; "isSignal": true; }; "ignoreShowBorderErrorToolbar": { "alias": "ignoreShowBorderErrorToolbar"; "required": false; "isSignal": true; }; }, { "item": "itemChange"; "outShowPopupEditLink": "outShowPopupEditLink"; "outMessageError": "outMessageError"; "outBlur": "outBlur"; "outFocus": "outFocus"; "outChange": "outChange"; "outSelectionChange": "outSelectionChange"; "outTextChange": "outTextChange"; "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 { IQuill2xUploadImageConfig } from '../interfaces/quill2x.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<IQuill2xUploadImageConfig>;
+    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/data.define.d.ts

@@ -0,0 +1,25 @@
+import { IListConfigItem } from '@libs-ui/components-list';
+import { IQuill2xLink, IQuill2xToolbarConfig, IQuill2xUploadImageConfig, QUILL2X_TYPE_MODE_BAR_CONFIG_OPTION } from '../interfaces/quill2x.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: QUILL2X_TYPE_MODE_BAR_CONFIG_OPTION, hasIconImage: boolean, hasIconPersonalize: boolean) => Array<IQuill2xToolbarConfig>;
+export declare const iconList: () => Array<{
+    key: string;
+    icon: string;
+}>;
+export declare const uploadImageConfigDefault: () => IQuill2xUploadImageConfig;
+export declare const linkDefault: () => IQuill2xLink;
+export declare const fontSizeWhiteList: () => string[];

package/utils/functions.define.d.ts

@@ -0,0 +1,30 @@
+import { TranslateService } from '@ngx-translate/core';
+import Delta from 'quill-delta';
+import Quill2x from 'quill2x';
+export declare const createTableSelector: (quill: Quill2x, anchorEl: HTMLElement | null, translate: TranslateService) => void;
+export declare const createContextMenuOptionTable: (quill: Quill2x, translate: TranslateService) => void;
+export declare function enableTableSelection(container: HTMLElement): void;
+export declare const mergeCells: (startCell: HTMLElement, endCell: HTMLElement) => void;
+export declare function splitCells(cellSplit: HTMLElement): void;
+export declare const getAllTablesWithSpan: (quill: any) => void;
+export declare const registerQuill2x: () => void;
+export declare const isEmptyQuill2x: (quill: Quill2x | null) => boolean;
+export declare const getHTMLFromDeltaOfQuill2x: (delta: Delta, options?: {
+    getRootHtml?: boolean;
+    replaceNewLineTo?: string;
+    replaceTagBRTo?: string;
+    replaceBrToDiv?: boolean;
+    functionReplaceDelta?: (op: Delta) => void;
+    replaceTags?: {
+        tag: string;
+        replaceTo: string;
+    }[];
+}) => string;
+export declare const getDeltaOfQuill2xFromHTML: (html: string) => Promise<Delta>;
+export declare const convertHtmlToDivBlocks: (html: string) => string;
+export declare const processPasteData: (e: ClipboardEvent, config: {
+    element: HTMLElement;
+    handlerPasteFile?: (files: FileList) => void;
+    callBack?: (positonReturn: "file" | "range" | "content" | "no-content") => void;
+}) => Promise<void>;
+export declare const insertContentWithRange: (content: string, savedRange: Range, element: HTMLElement) => void;