@acorex/components 22.1.7 → 22.2.0-next.0

package/types/acorex-components-wysiwyg.d.ts

@@ -1,47 +1,56 @@
 import * as polytype from 'polytype';
-import * as i0 from '@angular/core';
-import { OnDestroy, ElementRef } from '@angular/core';
-import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
-import * as i1 from '@acorex/components/button';
-import * as i2 from '@acorex/components/decorators';
-import * as i3 from '@acorex/components/select-box';
-import * as i4 from '@angular/forms';
-import * as i5 from '@acorex/components/color-palette';
-import * as i6 from '@acorex/components/popover';
-import * as i7 from '@acorex/components/text-box';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { AXStyleColorType, MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+import * as _acorex_cdk_wysiwyg from '@acorex/cdk/wysiwyg';
+import { AXWysiwyg, AXWysiwygTextAlign, AXWysiwygHeadingLevel } from '@acorex/cdk/wysiwyg';
+import { AXComboBoxItem, AXComboBoxValue } from '@acorex/components/combo-box';
+
+type AXWysiwygMode = 'compact' | 'normal';
+interface AXWysiwygButtonConfig {
+    text?: string;
+    icon?: string;
+    tooltip?: string;
+    look?: 'solid' | 'fill' | 'outline' | 'flat' | 'blank' | 'none';
+    color?: AXStyleColorType;
+}
 
 declare const AXWysiwygContainerComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<string>;
-    ɵfac: i0.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
-    ɵprov: i0.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }, typeof MXLookComponent]>;
 /**
  * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
  * @category Components
  */
-declare class AXWysiwygContainerComponent extends AXWysiwygContainerComponent_base implements OnDestroy {
+declare class AXWysiwygContainerComponent extends AXWysiwygContainerComponent_base {
     #private;
     /**
      * Specifies the placeholder text.
      *
      */
-    placeHolder: i0.InputSignal<string>;
+    placeHolder: _angular_core.InputSignal<string>;
     /**
      * Specifies the initial editor height in number of text lines.
      *
      */
-    initialLine: i0.InputSignal<number>;
-    private wysiwygService;
-    protected isQuillLoaded: i0.WritableSignal<boolean>;
-    private isEditorClean;
-    private wysiwyg;
-    private container;
-    private toolbar;
-    private platformId;
+    initialLine: _angular_core.InputSignal<number>;
+    /**
+     * Toolbar layout: `compact` groups block types and insert actions in a dropdown; `normal` shows all tools inline.
+     */
+    mode: _angular_core.InputSignal<AXWysiwygMode>;
+    private readonly wysiwyg;
+    private readonly context;
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly translation;
+    private readonly view;
+    private readonly toolbar;
+    private lastCommittedHtml;
+    private alive;
     private changeHandlerTimer;
-    protected changeHandler(): void;
-    /** @ignore */
-    ngOnDestroy(): void;
+    private readonly syncToolbarMode;
     /**
      * Focuses the component.
      *
@@ -55,110 +64,450 @@ declare class AXWysiwygContainerComponent extends AXWysiwygContainerComponent_ba
      */
     blur(): void;
     /**
-     * Checks if the component is focused or has any focused element.
-     *
-     * @returns boolean - True if the component has focus.
-     */
-    hasFocus(): boolean;
-    /**
-     * Sets the disabled state of the component.
-     *
-     * @param isDisabled - Whether the component should be disabled.
-     * @returns void - No return value.
+     * Replaces the editor document. External value updates go through the form binding;
+     * this method does not emit a user change.
      */
     setWysiwygContent(value: string): void;
-    private get __hostName();
-    get __hostClass(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygContainerComponent, "ax-wysiwyg-container", never, { "look": { "alias": "look"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; "isSignal": true; }; "initialLine": { "alias": "initialLine"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, ["container", "toolbar"], ["*", "ax-validation-rule"], true, never>;
+    /** @ignore */
+    protected internalValueChanged(value: string): void;
+    private initEditor;
+    private scheduleCommit;
+    private publishHtml;
+    private syncEditorFromValue;
+    private syncEditable;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygContainerComponent, "ax-wysiwyg-container", never, { "look": { "alias": "look"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; "isSignal": true; }; "initialLine": { "alias": "initialLine"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, ["view", "toolbar"], ["*", "ax-validation-rule"], true, never>;
 }
 
 /**
+ * Toolbar for the WYSIWYG editor.
+ * Formatting controls belong in `ax-prefix`. Actions such as submit belong in `ax-suffix`.
  * @category Components
- * A component for viewing WYSIWYG content.
  */
 declare class AXWysiwygToolbarComponent {
-    toolbar: i0.Signal<ElementRef<HTMLDivElement>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygToolbarComponent, "ax-wysiwyg-toolbar", never, {}, {}, never, ["ax-prefix", "ax-suffix"], true, never>;
+    toolbar: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    private readonly host;
+    private readonly renderer;
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly zIndexService;
+    private observer;
+    private overlayState;
+    private unlistenClick;
+    private clampFrame;
+    constructor();
+    private setupPickerOverlay;
+    private syncPickerOverlay;
+    private openPickerOverlay;
+    private closePickerOverlay;
+    private queueClamp;
+    /**
+     * Keep expanded picker menus inside the viewport horizontally.
+     * Vertical direction is handled by CSS (open upward when the toolbar is below the editor).
+     */
+    private keepPickerInViewport;
+    private clearPickerOffset;
+    private teardownPickerOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygToolbarComponent, "ax-wysiwyg-toolbar", never, {}, {}, never, ["ax-prefix", "*", "ax-suffix"], true, never>;
 }
 
+declare class AXWysiwygContext {
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    readonly readonly: _angular_core.WritableSignal<boolean>;
+    readonly mode: _angular_core.WritableSignal<AXWysiwygMode>;
+    readonly compact: _angular_core.Signal<boolean>;
+    readonly interactionDisabled: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygContext, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+type AXWysiwygAlignmentButtonKey = 'left' | 'center' | 'right' | 'justify';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * Text alignment controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygAlignmentComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygAlignmentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygAlignmentComponent, "ax-wysiwyg-alignment", never, {}, {}, never, never, true, never>;
-}
-
-declare class WysiwygService {
-    selectedColor: i0.WritableSignal<string>;
-    selectedBackgroundColor: i0.WritableSignal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WysiwygService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<WysiwygService>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygAlignmentButtonKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly i18n: {
+        readonly placeholder: "@acorex:wysiwyg.placeholder";
+        readonly menu: {
+            readonly blockType: "@acorex:wysiwyg.menu.block-type";
+            readonly insert: "@acorex:wysiwyg.menu.insert";
+            readonly align: "@acorex:wysiwyg.menu.align";
+        };
+        readonly tools: {
+            readonly undo: "@acorex:wysiwyg.tools.undo";
+            readonly redo: "@acorex:wysiwyg.tools.redo";
+            readonly bold: "@acorex:wysiwyg.tools.bold";
+            readonly italic: "@acorex:wysiwyg.tools.italic";
+            readonly underline: "@acorex:wysiwyg.tools.underline";
+            readonly strike: "@acorex:wysiwyg.tools.strike";
+            readonly code: "@acorex:wysiwyg.tools.code";
+            readonly codeBlock: "@acorex:wysiwyg.tools.code-block";
+            readonly link: "@acorex:wysiwyg.tools.link";
+            readonly image: "@acorex:wysiwyg.tools.image";
+            readonly video: "@acorex:wysiwyg.tools.video";
+            readonly bulletList: "@acorex:wysiwyg.tools.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.tools.ordered-list";
+            readonly rtl: "@acorex:wysiwyg.tools.rtl";
+            readonly textColor: "@acorex:wysiwyg.tools.text-color";
+            readonly highlight: "@acorex:wysiwyg.tools.highlight";
+            readonly paragraph: "@acorex:wysiwyg.tools.paragraph";
+            readonly alignLeft: "@acorex:wysiwyg.tools.align-left";
+            readonly alignCenter: "@acorex:wysiwyg.tools.align-center";
+            readonly alignRight: "@acorex:wysiwyg.tools.align-right";
+            readonly alignJustify: "@acorex:wysiwyg.tools.align-justify";
+        };
+        readonly blocks: {
+            readonly paragraph: "@acorex:wysiwyg.blocks.paragraph";
+            readonly blockquote: "@acorex:wysiwyg.blocks.blockquote";
+            readonly codeBlock: "@acorex:wysiwyg.blocks.code-block";
+            readonly bulletList: "@acorex:wysiwyg.blocks.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.blocks.ordered-list";
+            readonly image: "@acorex:wysiwyg.blocks.image";
+            readonly video: "@acorex:wysiwyg.blocks.video";
+            readonly heading: (level: number) => string;
+        };
+        readonly fontSize: {
+            readonly placeholder: "@acorex:wysiwyg.font-size.placeholder";
+            readonly small: "@acorex:wysiwyg.font-size.small";
+            readonly normal: "@acorex:wysiwyg.font-size.normal";
+            readonly large: "@acorex:wysiwyg.font-size.large";
+            readonly huge: "@acorex:wysiwyg.font-size.huge";
+        };
+        readonly insert: {
+            readonly linkUrl: "@acorex:wysiwyg.insert.link-url";
+            readonly imageUrl: "@acorex:wysiwyg.insert.image-url";
+            readonly videoUrl: "@acorex:wysiwyg.insert.video-url";
+            readonly apply: "@acorex:wysiwyg.insert.apply";
+            readonly remove: "@acorex:wysiwyg.insert.remove";
+            readonly insert: "@acorex:wysiwyg.insert.insert";
+        };
+    };
+    protected readonly alignButtons: _angular_core.Signal<{
+        align: AXWysiwygTextAlign;
+        config: AXWysiwygButtonConfig;
+    }[]>;
+    protected readonly activeAlignIcon: _angular_core.Signal<string>;
+    protected isAlignActive(align: AXWysiwygTextAlign): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygAlignmentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygAlignmentComponent, "ax-wysiwyg-alignment", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type AXWysiwygColorsButtonKey = 'textColor' | 'highlight';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * Text and highlight color controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygColorsComponent {
-    protected wysiwygService: WysiwygService;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygColorsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygColorsComponent, "ax-wysiwyg-colors", never, {}, {}, never, never, true, never>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygColorsButtonKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly clearLabel = "@acorex:common.general.clear";
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly textColorButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly highlightButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly draftTextColor: _angular_core.WritableSignal<string>;
+    protected readonly draftHighlightColor: _angular_core.WritableSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygColorsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygColorsComponent, "ax-wysiwyg-colors", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type AXWysiwygFontStyleButtonKey = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'codeBlock';
+type AXWysiwygBlockMenuItemKey = 'paragraph' | 'blockquote' | 'codeBlock' | 'bulletList' | 'orderedList' | 'image' | 'video' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * Font style, size, and heading controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygFontStyleComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygFontStyleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygFontStyleComponent, "ax-wysiwyg-font-style", never, {}, {}, never, never, true, never>;
+    headingLevels: _angular_core.InputSignal<AXWysiwygHeadingLevel[]>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygFontStyleButtonKey, false | AXWysiwygButtonConfig>>>;
+    menuItems: _angular_core.InputSignal<Partial<Record<AXWysiwygBlockMenuItemKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly i18n: {
+        readonly placeholder: "@acorex:wysiwyg.placeholder";
+        readonly menu: {
+            readonly blockType: "@acorex:wysiwyg.menu.block-type";
+            readonly insert: "@acorex:wysiwyg.menu.insert";
+            readonly align: "@acorex:wysiwyg.menu.align";
+        };
+        readonly tools: {
+            readonly undo: "@acorex:wysiwyg.tools.undo";
+            readonly redo: "@acorex:wysiwyg.tools.redo";
+            readonly bold: "@acorex:wysiwyg.tools.bold";
+            readonly italic: "@acorex:wysiwyg.tools.italic";
+            readonly underline: "@acorex:wysiwyg.tools.underline";
+            readonly strike: "@acorex:wysiwyg.tools.strike";
+            readonly code: "@acorex:wysiwyg.tools.code";
+            readonly codeBlock: "@acorex:wysiwyg.tools.code-block";
+            readonly link: "@acorex:wysiwyg.tools.link";
+            readonly image: "@acorex:wysiwyg.tools.image";
+            readonly video: "@acorex:wysiwyg.tools.video";
+            readonly bulletList: "@acorex:wysiwyg.tools.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.tools.ordered-list";
+            readonly rtl: "@acorex:wysiwyg.tools.rtl";
+            readonly textColor: "@acorex:wysiwyg.tools.text-color";
+            readonly highlight: "@acorex:wysiwyg.tools.highlight";
+            readonly paragraph: "@acorex:wysiwyg.tools.paragraph";
+            readonly alignLeft: "@acorex:wysiwyg.tools.align-left";
+            readonly alignCenter: "@acorex:wysiwyg.tools.align-center";
+            readonly alignRight: "@acorex:wysiwyg.tools.align-right";
+            readonly alignJustify: "@acorex:wysiwyg.tools.align-justify";
+        };
+        readonly blocks: {
+            readonly paragraph: "@acorex:wysiwyg.blocks.paragraph";
+            readonly blockquote: "@acorex:wysiwyg.blocks.blockquote";
+            readonly codeBlock: "@acorex:wysiwyg.blocks.code-block";
+            readonly bulletList: "@acorex:wysiwyg.blocks.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.blocks.ordered-list";
+            readonly image: "@acorex:wysiwyg.blocks.image";
+            readonly video: "@acorex:wysiwyg.blocks.video";
+            readonly heading: (level: number) => string;
+        };
+        readonly fontSize: {
+            readonly placeholder: "@acorex:wysiwyg.font-size.placeholder";
+            readonly small: "@acorex:wysiwyg.font-size.small";
+            readonly normal: "@acorex:wysiwyg.font-size.normal";
+            readonly large: "@acorex:wysiwyg.font-size.large";
+            readonly huge: "@acorex:wysiwyg.font-size.huge";
+        };
+        readonly insert: {
+            readonly linkUrl: "@acorex:wysiwyg.insert.link-url";
+            readonly imageUrl: "@acorex:wysiwyg.insert.image-url";
+            readonly videoUrl: "@acorex:wysiwyg.insert.video-url";
+            readonly apply: "@acorex:wysiwyg.insert.apply";
+            readonly remove: "@acorex:wysiwyg.insert.remove";
+            readonly insert: "@acorex:wysiwyg.insert.insert";
+        };
+    };
+    private readonly insertPopover;
+    protected readonly insertUrl: _angular_core.WritableSignal<string>;
+    protected readonly insertKind: _angular_core.WritableSignal<"video" | "image">;
+    protected readonly boldButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly italicButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly underlineButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly strikeButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly codeButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly codeBlockButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly paragraphMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly blockquoteMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly codeBlockMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly bulletListMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly orderedListMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly imageMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly videoMenuItem: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly headingButtons: _angular_core.Signal<{
+        level: AXWysiwygHeadingLevel;
+        label: string;
+        menuKey: AXWysiwygBlockMenuItemKey;
+        config: AXWysiwygButtonConfig;
+    }[]>;
+    protected readonly fontSizeItems: _angular_core.Signal<AXComboBoxItem[]>;
+    protected readonly fontSizeComboValue: _angular_core.Signal<"normal" | _acorex_cdk_wysiwyg.AXWysiwygFontSizeToken>;
+    protected readonly blockLabelSource: _angular_core.Signal<string>;
+    protected readonly blockLabel: _angular_core.Signal<string>;
+    protected readonly insertPlaceholderSource: _angular_core.Signal<"@acorex:wysiwyg.insert.image-url" | "@acorex:wysiwyg.insert.video-url">;
+    protected readonly insertPlaceholder: _angular_core.Signal<string>;
+    protected isHeadingActive(level: AXWysiwygHeadingLevel): boolean;
+    protected isParagraphActive(): boolean;
+    protected onFontSizeComboChange(value: AXComboBoxValue): void;
+    protected beginInsert(kind: 'image' | 'video'): void;
+    protected applyInsert(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygFontStyleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygFontStyleComponent, "ax-wysiwyg-font-style", never, { "headingLevels": { "alias": "headingLevels"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type AXWysiwygHistoryButtonKey = 'undo' | 'redo';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * Undo and redo controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygHistoryComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygHistoryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygHistoryComponent, "ax-wysiwyg-history", never, {}, {}, never, never, true, never>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygHistoryButtonKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly undoButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly redoButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygHistoryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygHistoryComponent, "ax-wysiwyg-history", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type AXWysiwygInsertButtonKey = 'link' | 'image' | 'video';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * Link, image, and video insertion controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygInsertComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygInsertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygInsertComponent, "ax-wysiwyg-insert", never, {}, {}, never, never, true, never>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygInsertButtonKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly i18n: {
+        readonly placeholder: "@acorex:wysiwyg.placeholder";
+        readonly menu: {
+            readonly blockType: "@acorex:wysiwyg.menu.block-type";
+            readonly insert: "@acorex:wysiwyg.menu.insert";
+            readonly align: "@acorex:wysiwyg.menu.align";
+        };
+        readonly tools: {
+            readonly undo: "@acorex:wysiwyg.tools.undo";
+            readonly redo: "@acorex:wysiwyg.tools.redo";
+            readonly bold: "@acorex:wysiwyg.tools.bold";
+            readonly italic: "@acorex:wysiwyg.tools.italic";
+            readonly underline: "@acorex:wysiwyg.tools.underline";
+            readonly strike: "@acorex:wysiwyg.tools.strike";
+            readonly code: "@acorex:wysiwyg.tools.code";
+            readonly codeBlock: "@acorex:wysiwyg.tools.code-block";
+            readonly link: "@acorex:wysiwyg.tools.link";
+            readonly image: "@acorex:wysiwyg.tools.image";
+            readonly video: "@acorex:wysiwyg.tools.video";
+            readonly bulletList: "@acorex:wysiwyg.tools.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.tools.ordered-list";
+            readonly rtl: "@acorex:wysiwyg.tools.rtl";
+            readonly textColor: "@acorex:wysiwyg.tools.text-color";
+            readonly highlight: "@acorex:wysiwyg.tools.highlight";
+            readonly paragraph: "@acorex:wysiwyg.tools.paragraph";
+            readonly alignLeft: "@acorex:wysiwyg.tools.align-left";
+            readonly alignCenter: "@acorex:wysiwyg.tools.align-center";
+            readonly alignRight: "@acorex:wysiwyg.tools.align-right";
+            readonly alignJustify: "@acorex:wysiwyg.tools.align-justify";
+        };
+        readonly blocks: {
+            readonly paragraph: "@acorex:wysiwyg.blocks.paragraph";
+            readonly blockquote: "@acorex:wysiwyg.blocks.blockquote";
+            readonly codeBlock: "@acorex:wysiwyg.blocks.code-block";
+            readonly bulletList: "@acorex:wysiwyg.blocks.bullet-list";
+            readonly orderedList: "@acorex:wysiwyg.blocks.ordered-list";
+            readonly image: "@acorex:wysiwyg.blocks.image";
+            readonly video: "@acorex:wysiwyg.blocks.video";
+            readonly heading: (level: number) => string;
+        };
+        readonly fontSize: {
+            readonly placeholder: "@acorex:wysiwyg.font-size.placeholder";
+            readonly small: "@acorex:wysiwyg.font-size.small";
+            readonly normal: "@acorex:wysiwyg.font-size.normal";
+            readonly large: "@acorex:wysiwyg.font-size.large";
+            readonly huge: "@acorex:wysiwyg.font-size.huge";
+        };
+        readonly insert: {
+            readonly linkUrl: "@acorex:wysiwyg.insert.link-url";
+            readonly imageUrl: "@acorex:wysiwyg.insert.image-url";
+            readonly videoUrl: "@acorex:wysiwyg.insert.video-url";
+            readonly apply: "@acorex:wysiwyg.insert.apply";
+            readonly remove: "@acorex:wysiwyg.insert.remove";
+            readonly insert: "@acorex:wysiwyg.insert.insert";
+        };
+    };
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly linkButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly imageButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly videoButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly linkUrl: _angular_core.WritableSignal<string>;
+    protected readonly imageUrl: _angular_core.WritableSignal<string>;
+    protected readonly videoUrl: _angular_core.WritableSignal<string>;
+    protected applyLink(): void;
+    protected removeLink(): void;
+    protected applyImage(): void;
+    protected applyVideo(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygInsertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygInsertComponent, "ax-wysiwyg-insert", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type AXWysiwygListButtonKey = 'bulletList' | 'orderedList' | 'rtl';
 /**
- * A container component for WYSIWYG (What You See Is What You Get) editor functionality.
+ * List and text-direction controls for the WYSIWYG toolbar.
  * @category Components
  */
 declare class AXWysiwygListComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygListComponent, "ax-wysiwyg-list", never, {}, {}, never, never, true, never>;
+    buttons: _angular_core.InputSignal<Partial<Record<AXWysiwygListButtonKey, false | AXWysiwygButtonConfig>>>;
+    protected readonly wysiwyg: AXWysiwyg;
+    protected readonly context: AXWysiwygContext;
+    protected readonly state: _angular_core.WritableSignal<_acorex_cdk_wysiwyg.AXWysiwygState>;
+    protected readonly bulletButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly orderedButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    protected readonly rtlButton: _angular_core.Signal<AXWysiwygButtonConfig>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygListComponent, "ax-wysiwyg-list", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
+ * Editing surface for the WYSIWYG editor.
  * @category Components
- * A component for viewing WYSIWYG content.
  */
 declare class AXWysiwygViewComponent {
-    editor: i0.Signal<ElementRef<HTMLDivElement>>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXWysiwygViewComponent, "ax-wysiwyg-view", never, {}, {}, never, never, true, never>;
+    editor: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXWysiwygViewComponent, "ax-wysiwyg-view", never, {}, {}, never, never, true, never>;
 }
 
 declare class AXWysiwygModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXWysiwygModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXWysiwygModule, never, [typeof i1.AXButtonModule, typeof i2.AXDecoratorModule, typeof i3.AXSelectBoxModule, typeof i4.FormsModule, typeof i5.AXColorPaletteModule, typeof i6.AXPopoverModule, typeof i7.AXTextBoxModule, typeof AXWysiwygContainerComponent, typeof AXWysiwygViewComponent, typeof AXWysiwygAlignmentComponent, typeof AXWysiwygColorsComponent, typeof AXWysiwygFontStyleComponent, typeof AXWysiwygHistoryComponent, typeof AXWysiwygInsertComponent, typeof AXWysiwygListComponent, typeof AXWysiwygToolbarComponent], [typeof AXWysiwygContainerComponent, typeof AXWysiwygViewComponent, typeof AXWysiwygAlignmentComponent, typeof AXWysiwygColorsComponent, typeof AXWysiwygFontStyleComponent, typeof AXWysiwygHistoryComponent, typeof AXWysiwygInsertComponent, typeof AXWysiwygListComponent, typeof AXWysiwygToolbarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXWysiwygModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwygModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXWysiwygModule, never, [typeof AXWysiwygContainerComponent, typeof AXWysiwygViewComponent, typeof AXWysiwygAlignmentComponent, typeof AXWysiwygColorsComponent, typeof AXWysiwygFontStyleComponent, typeof AXWysiwygHistoryComponent, typeof AXWysiwygInsertComponent, typeof AXWysiwygListComponent, typeof AXWysiwygToolbarComponent], [typeof AXWysiwygContainerComponent, typeof AXWysiwygViewComponent, typeof AXWysiwygAlignmentComponent, typeof AXWysiwygColorsComponent, typeof AXWysiwygFontStyleComponent, typeof AXWysiwygHistoryComponent, typeof AXWysiwygInsertComponent, typeof AXWysiwygListComponent, typeof AXWysiwygToolbarComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXWysiwygModule>;
 }
 
-export { AXWysiwygAlignmentComponent, AXWysiwygColorsComponent, AXWysiwygContainerComponent, AXWysiwygFontStyleComponent, AXWysiwygHistoryComponent, AXWysiwygInsertComponent, AXWysiwygListComponent, AXWysiwygModule, AXWysiwygToolbarComponent, AXWysiwygViewComponent };
+declare const AX_WYSIWYG_I18N: {
+    readonly placeholder: "@acorex:wysiwyg.placeholder";
+    readonly menu: {
+        readonly blockType: "@acorex:wysiwyg.menu.block-type";
+        readonly insert: "@acorex:wysiwyg.menu.insert";
+        readonly align: "@acorex:wysiwyg.menu.align";
+    };
+    readonly tools: {
+        readonly undo: "@acorex:wysiwyg.tools.undo";
+        readonly redo: "@acorex:wysiwyg.tools.redo";
+        readonly bold: "@acorex:wysiwyg.tools.bold";
+        readonly italic: "@acorex:wysiwyg.tools.italic";
+        readonly underline: "@acorex:wysiwyg.tools.underline";
+        readonly strike: "@acorex:wysiwyg.tools.strike";
+        readonly code: "@acorex:wysiwyg.tools.code";
+        readonly codeBlock: "@acorex:wysiwyg.tools.code-block";
+        readonly link: "@acorex:wysiwyg.tools.link";
+        readonly image: "@acorex:wysiwyg.tools.image";
+        readonly video: "@acorex:wysiwyg.tools.video";
+        readonly bulletList: "@acorex:wysiwyg.tools.bullet-list";
+        readonly orderedList: "@acorex:wysiwyg.tools.ordered-list";
+        readonly rtl: "@acorex:wysiwyg.tools.rtl";
+        readonly textColor: "@acorex:wysiwyg.tools.text-color";
+        readonly highlight: "@acorex:wysiwyg.tools.highlight";
+        readonly paragraph: "@acorex:wysiwyg.tools.paragraph";
+        readonly alignLeft: "@acorex:wysiwyg.tools.align-left";
+        readonly alignCenter: "@acorex:wysiwyg.tools.align-center";
+        readonly alignRight: "@acorex:wysiwyg.tools.align-right";
+        readonly alignJustify: "@acorex:wysiwyg.tools.align-justify";
+    };
+    readonly blocks: {
+        readonly paragraph: "@acorex:wysiwyg.blocks.paragraph";
+        readonly blockquote: "@acorex:wysiwyg.blocks.blockquote";
+        readonly codeBlock: "@acorex:wysiwyg.blocks.code-block";
+        readonly bulletList: "@acorex:wysiwyg.blocks.bullet-list";
+        readonly orderedList: "@acorex:wysiwyg.blocks.ordered-list";
+        readonly image: "@acorex:wysiwyg.blocks.image";
+        readonly video: "@acorex:wysiwyg.blocks.video";
+        readonly heading: (level: number) => string;
+    };
+    readonly fontSize: {
+        readonly placeholder: "@acorex:wysiwyg.font-size.placeholder";
+        readonly small: "@acorex:wysiwyg.font-size.small";
+        readonly normal: "@acorex:wysiwyg.font-size.normal";
+        readonly large: "@acorex:wysiwyg.font-size.large";
+        readonly huge: "@acorex:wysiwyg.font-size.huge";
+    };
+    readonly insert: {
+        readonly linkUrl: "@acorex:wysiwyg.insert.link-url";
+        readonly imageUrl: "@acorex:wysiwyg.insert.image-url";
+        readonly videoUrl: "@acorex:wysiwyg.insert.video-url";
+        readonly apply: "@acorex:wysiwyg.insert.apply";
+        readonly remove: "@acorex:wysiwyg.insert.remove";
+        readonly insert: "@acorex:wysiwyg.insert.insert";
+    };
+};
+
+export { AXWysiwygAlignmentComponent, AXWysiwygColorsComponent, AXWysiwygContainerComponent, AXWysiwygFontStyleComponent, AXWysiwygHistoryComponent, AXWysiwygInsertComponent, AXWysiwygListComponent, AXWysiwygModule, AXWysiwygToolbarComponent, AXWysiwygViewComponent, AX_WYSIWYG_I18N };
+export type { AXWysiwygAlignmentButtonKey, AXWysiwygBlockMenuItemKey, AXWysiwygColorsButtonKey, AXWysiwygFontStyleButtonKey, AXWysiwygHistoryButtonKey, AXWysiwygInsertButtonKey, AXWysiwygListButtonKey, AXWysiwygMode };