@useinsider/guido 1.0.3-beta.df886ce → 1.0.3-beta.dfb1fcf

package/dist/src/extensions/Blocks/Recommendation/controls/spacingControl.d.ts

@@ -0,0 +1,60 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../common-control';
+export declare const SPACING_CONTROL_ID = "recommendation-spacing-control";
+/**
+ * Control for managing spacing between product cards
+ * - Column spacing: horizontal gap between cards in the same row
+ * - Row spacing: vertical gap between different rows
+ */
+export declare class SpacingControl extends CommonControl {
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    /**
+     * Reads spacing values from data attributes or returns defaults
+     */
+    _setFormValues(): void;
+    /**
+     * Gets stored column spacing from the first product card wrapper's parent element's padding
+     * Reads the actual padding value instead of relying on data attributes
+     *
+     * The padding is applied as "0 {halfSpacing}px" on the parent TD element,
+     * so we need to extract the horizontal padding value and multiply by 2 to get total spacing.
+     */
+    _getStoredColumnSpacing(): number;
+    /**
+     * Gets stored row spacing from the first spacer element's height style
+     * Reads the actual height value instead of relying on data attributes
+     */
+    _getStoredRowSpacing(): number;
+    /**
+     * Handles column spacing changes
+     * Applies horizontal padding to all product card wrappers
+     */
+    _onColumnSpacingChange(spacing: number): void;
+    /**
+     * Handles row spacing changes
+     * Applies height to all spacer elements between product rows
+     */
+    _onRowSpacingChange(spacing: number): void;
+    /**
+     * Stores column spacing value in block data attribute
+     */
+    _storeColumnSpacing(spacing: number): void;
+    /**
+     * Stores row spacing value in block data attribute
+     */
+    _storeRowSpacing(spacing: number): void;
+    _listenToFormUpdates(): void;
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    _debouncedOnColumnSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    _debouncedOnRowSpacingChange: import("@vueuse/shared").PromisifyFn<(spacing: number) => void>;
+}

package/dist/src/extensions/Blocks/Recommendation/templates/blockTemplate.d.ts

@@ -1,6 +1,6 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
-import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION } from './templateUtils';
-declare const blockTemplate = "\n    <td align=\"left\" class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20\">\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <BLOCK_TEXT\n                                                class=\"es-p10t es-p10b es-p20l es-p20r\"\n                                                align=\"center\">\n                                                <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                    <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                </p>\n                                            </BLOCK_TEXT>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 20px;\"></td>\n    </tr>\n\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+import { DEFAULTS, getDefaultProducts, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY } from './templateUtils';
+declare const blockTemplate = "\n    <td\n        align=\"left\"\n        class=\"ins-recommendation-v3-block-v2 es-p20\"\n        data-price-inline=\"0\">\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <BLOCK_TEXT\n                                                class=\"es-p10t es-p10b es-p20l es-p20r\"\n                                                align=\"center\">\n                                                <p path=\"1\" style=\"font-size: 28px; color: #333333;\">\n                                                    <strong path=\"1,0\">{-{-TITLE-}-}</strong>\n                                                </p>\n                                            </BLOCK_TEXT>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            \n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 export declare function getDefaultTemplate(): string;
 /**
  * Generates a custom template with specified products and layout
@@ -12,5 +12,5 @@ export declare function getDefaultTemplate(): string;
  */
 export declare function generateBlockTemplate(products: RecommendationProduct[], productsPerRow: number, title?: string, composition?: string[]): string;
 export declare function prepareProductRows(products: RecommendationProduct[], productsPerRow: number, composition?: string[]): string;
-export { DEFAULTS, DEFAULT_CARD_COMPOSITION, getDefaultProducts, };
+export { DEFAULTS, DEFAULT_CARD_COMPOSITION, DEFAULT_CARD_VISIBILITY, getDefaultProducts, };
 export default blockTemplate;

package/dist/src/extensions/Blocks/Recommendation/templates/migrationTemplate.d.ts

@@ -1,6 +1,6 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
 import { DEFAULTS, getDefaultProducts } from './templateUtils';
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20\"\n    >\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"recommendation-block\"\n        esd-handler-name=\"esd-extension-RecommendationBlock\"\n        class=\"ins-recommendation-v3-block-v2 es-p20 esd-recommendation-block esd-extension-block esd-container-frame\"\n        data-price-inline=\"0\">\n        <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n            <tr>\n                <td align=\"center\">\n                    <table\n                        class=\"container\"\n                        width=\"100%\"\n                        cellpadding=\"0\"\n                        cellspacing=\"0\"\n                        border=\"0\">\n                        <tbody>\n                            <tr>\n                                <td>\n                                    <table\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\">\n                                        <tbody>\n                                            <tr>\n                                                {-{-TITLE-}-}\n                                            </tr>\n                                        </tbody>\n                                    </table>\n                                </td>\n                            </tr>\n                            <tr>\n                                <td class=\"spacer\" style=\"height: 20px;\"></td>\n                            </tr>\n                            <tr>\n                                <td>\n                                    <table\n                                        class=\"ins-recommendation-product-container\"\n                                        width=\"100%\"\n                                        cellpadding=\"0\"\n                                        cellspacing=\"0\"\n                                        border=\"0\"\n                                    >\n                                        {-{-PRODUCT_ROWS-}-}\n                                    </table>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 export declare function getMigrationTemplate(): string;
 /**
  * Generates a custom migration template with specified products and layout

package/dist/src/extensions/Blocks/Recommendation/templates/templateUtils.d.ts

@@ -1,10 +1,13 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
+import { ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON } from '../constants';
 export interface ElementRenderer {
-    productImage: (product: RecommendationProduct) => string;
-    productName: (product: RecommendationProduct) => string;
-    productPrice: (product: RecommendationProduct) => string;
-    productOldPrice: (product: RecommendationProduct) => string;
-    productButton: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_NAME]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OLD_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct) => string;
+    [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct) => string;
 }
 export interface TemplateConfig {
     spacer: string;
@@ -17,10 +20,15 @@ export declare const DEFAULTS: {
     TITLE: string;
     DESCRIPTION: string;
 };
-export declare const spacer = "\n    <tr>\n        <td class=\"spacer\" style=\"height: 20px;\"></td>\n    </tr>\n";
-export declare const productRow = "\n    <tr>\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                {-{-PRODUCTS-}-}\n            </table>\n        </td>\n    </tr>\n";
+export declare const spacer = "\n    <tr>\n        <td class=\"spacer\" style=\"height: 10px;\"></td>\n    </tr>\n";
+export declare const productRow = "\n    <tr class=\"recommendation-product-row\">\n        <td>\n            <table width=\"100%\" height=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n                {-{-PRODUCTS-}-}\n            </table>\n        </td>\n    </tr>\n";
 export declare const productCardWrapper = "\n    <td width=\"{-{-COLUMN_WIDTH-}-}\" style=\"padding: 0 5px;\" valign=\"top\" height=\"100%\">\n        <table\n            width=\"100%\"\n            height=\"100%\"\n            cellpadding=\"0\"\n            cellspacing=\"0\"\n            border=\"0\"\n            class=\"product-card-wrapper\">\n            <tr>\n                <td\n                    class=\"product-attribute-cell\"\n                    valign=\"top\">\n                    <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                        <tbody>\n                            {-{-PRODUCT_CONTENT-}-}\n                        </tbody>\n                    </table>\n                </td>\n            </tr>\n        </table>\n    </td>\n";
 export declare const DEFAULT_CARD_COMPOSITION: string[];
+/**
+ * Default visibility settings for card composition elements
+ * Omnibus Price and Omnibus Discount are hidden by default
+ */
+export declare const DEFAULT_CARD_VISIBILITY: Record<string, boolean>;
 export declare function getDefaultProducts(): RecommendationProduct[];
 /**
  * Core template generation logic that works with any element renderer

package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Utility for preserving text styling when updating innerHTML
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/**
+ * Preserves existing style tags when updating text content
+ *
+ * When users apply text styles (bold, italic, etc.) in Stripo, the editor wraps
+ * content in tags like <strong>, <em>, <u>, <s>. This function extracts those
+ * style tags from the original HTML and re-applies them to the new text content.
+ * @example
+ * // Original: <span class="omnibus-text-before"><strong>Lowest price: </strong></span>
+ * // After calling preserveTextStyles(element, 'Best price: ')
+ * // Result: <strong>Best price: </strong>
+ * @param element - The DOM element or ImmutableHtmlNode containing the styled text
+ * @param newText - The new text content to insert
+ * @returns The new text wrapped in the original style tags
+ */
+export declare function preserveTextStyles(element: ImmutableHtmlNode | Element, newText: string): string;

package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts

@@ -1,4 +1,4 @@
-import type { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
 export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
 export declare class UnsubscribeBlock extends Block {
@@ -12,8 +12,9 @@ export declare class UnsubscribeBlock extends Block {
     getName(): string;
     getDescription(): string;
     getTemplate(): string;
-    onSelect(node: ImmutableHtmlElementNode): void;
-    onDelete(node: ImmutableHtmlElementNode): void;
+    onCreated(node: ImmutableHtmlNode): void;
+    onSelect(node: ImmutableHtmlNode): undefined;
+    onDelete(node: ImmutableHtmlNode): undefined;
     onDestroy(): void;
     private _setupSelectEventListener;
     private _removeSelectEventListener;

package/dist/src/extensions/Blocks/common-control.d.ts

@@ -1,10 +1,8 @@
-import { TextValueObject } from '@@/Types/generic';
-import { Control, ImmutableHtmlElementNode, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { Control, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 interface TextInputProps {
     name: string;
     placeholder?: string;
     className?: string;
-    disabled?: boolean;
 }
 interface LabelProps {
     text: string;
@@ -19,7 +17,10 @@ interface IconButtonProps {
 interface SelectProps {
     name: string;
     placeholder: string;
-    options: TextValueObject[];
+    options: {
+        text: string;
+        value: string;
+    }[];
     className?: string;
 }
 interface CounterProps {
@@ -28,15 +29,6 @@ interface CounterProps {
     minValue?: number;
     step?: number;
 }
-interface RadioButtonProps {
-    name: string;
-    buttons: {
-        text?: string;
-        value: string;
-        icon?: string;
-    }[];
-    id?: string;
-}
 interface ButtonProps {
     name: string;
     label: string;
@@ -48,33 +40,11 @@ interface ButtonProps {
  */
 export declare abstract class CommonControl extends Control {
     currentNode?: ImmutableHtmlNode;
-    protected lastBlockInstanceId: string | null;
     abstract getId(): string;
     abstract getTemplate(): string;
     abstract onRender(): Promise<void> | void;
     getContainer(): ShadowRoot;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
-    onDestroy(): void;
-    /**
-     * Gets the config block element from the current node.
-     * @returns The config block element or null if not found
-     */
-    protected getConfigBlock(): ImmutableHtmlElementNode | null;
-    /**
-     * Gets the current block instance ID from the config block.
-     * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
-     * @returns The block instance ID or null if not found
-     */
-    protected getBlockInstanceId(blockInstanceIdAttribute?: string): string | null;
-    /**
-     * Handles block instance change detection and syncing.
-     * This is a helper method for controls that need to sync attributes when switching between block instances.
-     * @param syncFunction - Function to call when block instance changes (to sync from attributes)
-     * @param updateUI - Function to call to update the UI (called both on change and when same block)
-     * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
-     * @returns true if block instance changed, false otherwise
-     */
-    protected handleBlockInstanceChange(syncFunction: (node: ImmutableHtmlNode) => void, updateUI: () => void, blockInstanceIdAttribute?: string): boolean;
     _GuLabel({ text, name, position }: LabelProps): string;
     _GuToggle(name: string): string;
     _GuSelectItem({ text, value }: {
@@ -82,14 +52,8 @@ export declare abstract class CommonControl extends Control {
         value: string;
     }): string;
     _GuSelect({ name, placeholder, options, className }: SelectProps): string;
-    _GuTextInput({ name, placeholder, className, disabled }: TextInputProps): string;
+    _GuTextInput({ name, placeholder, className }: TextInputProps): string;
     _GuCounter({ name, maxValue, minValue, step }: CounterProps): string;
-    _GuRadioButtonItem({ text, value, icon }: {
-        text?: string;
-        value: string;
-        icon?: string;
-    }): string;
-    _GuRadioButton({ name, buttons, id }: RadioButtonProps): string;
     _GuButton({ name, label, id }: ButtonProps): string;
     /**
      *
@@ -97,8 +61,7 @@ export declare abstract class CommonControl extends Control {
      * @returns It returns a button with an icon.
      */
     _GuIconButton({ name, icon, className }: IconButtonProps): string;
-    _GuOneColumn(children: string[], className?: string): string;
-    _GuTwoColumns(children: string[], className?: string): string;
+    _GuTwoColumns(children: string[]): string;
     /**
      * Creates an orderable (sortable) list control
      * @param name - The control name for value binding

package/dist/src/extensions/Blocks/controlFactories.d.ts

@@ -9,304 +9,87 @@
  * extensive type assertions throughout the file. The generated controls are type-safe
  * at runtime and follow the exact same patterns as manually-written control classes.
  */
-import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 /**
  * Factory function to create text align controls for different block elements
  */
-export declare function createTextAlignControl(controlId: string, targetBlockId: string, containerSelector: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextAlignControl(controlId: string, targetBlockId: string, containerSelector: string): any;
 /**
  * Factory function to create text color controls for different block elements
  */
-export declare function createTextColorControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextColorControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create text size controls for different block elements
  */
-export declare function createTextSizeControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextSizeControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create text style controls for different block elements
  */
-export declare function createTextStyleControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextStyleControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create text font family controls for different block elements
  */
-export declare function createTextFontFamilyControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextFontFamilyControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create text background color controls for different block elements
  */
-export declare function createTextBackgroundColorControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createTextBackgroundColorControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create paddings controls for different block elements
  */
-export declare function createPaddingsControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createPaddingsControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
+/**
+ * Factory function to create text line spacing controls for different block elements
+ */
+export declare function createTextLineSpacingControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button align controls for different block elements
  */
-export declare function createButtonAlignControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonAlignControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button color controls for different block elements
  */
-export declare function createButtonColorControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonColorControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button border controls for different block elements
  */
-export declare function createButtonBorderControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderControlLabels | undefined;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonBorderControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button border radius controls for different block elements
  */
-export declare function createButtonBorderRadiusControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderRadiusControlLabels | undefined;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonBorderRadiusControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button font family controls for different block elements
  */
-export declare function createButtonFontFamilyControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonFontFamilyControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button margins controls for different block elements
  */
-export declare function createButtonMarginsControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonMarginsControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button paddings controls for different block elements
  */
-export declare function createButtonPaddingsControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonPaddingsControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button text controls for different block elements
  */
-export declare function createButtonTextControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonTextControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button text size controls for different block elements
  */
-export declare function createButtonTextSizeControl(controlId: string, targetBlockId: string, containerSelector?: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonTextSizeControl(controlId: string, targetBlockId: string, containerSelector?: string): any;
 /**
  * Factory function to create button text style and font color controls for different block elements
  */
-export declare function createButtonTextStyleAndFontColorControl(controlId: string, targetBlockId: string, containerSelector: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ButtonTextStyleAndFontColorControlLabels | undefined;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonTextStyleAndFontColorControl(controlId: string, targetBlockId: string, containerSelector: string): any;
 /**
  * Factory function to create button fit to container controls for different block elements
  */
-export declare function createButtonFitToContainerControl(controlId: string, targetBlockId: string, containerSelector: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createButtonFitToContainerControl(controlId: string, targetBlockId: string, containerSelector: string): any;
 /**
  * Factory function to create image size controls for different block elements
  */
-export declare function createImageSizeControl(controlId: string, targetBlockId: string, containerSelector: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createImageSizeControl(controlId: string, targetBlockId: string, containerSelector: string): any;
 /**
  * Factory function to create image margins controls for different block elements
  */
-export declare function createImageMarginsControl(controlId: string, targetBlockId: string, containerSelector: string): {
-    new (): {
-        getId(): string;
-        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
-        getParentControlId(): string;
-        api: import("@stripoinc/ui-editor-extensions").ControlApi;
-        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-        getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-        isVisible(_node: ImmutableHtmlNode): boolean;
-    };
-};
+export declare function createImageMarginsControl(controlId: string, targetBlockId: string, containerSelector: string): any;