@useinsider/guido 1.0.3-beta.c4d9021 → 1.0.3-beta.c600a63

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

@@ -1,8 +1,10 @@
-import { Control, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { TextValueObject } from '@@/Types/generic';
+import { Control, ImmutableHtmlElementNode, ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 interface TextInputProps {
     name: string;
     placeholder?: string;
     className?: string;
+    disabled?: boolean;
 }
 interface LabelProps {
     text: string;
@@ -17,10 +19,7 @@ interface IconButtonProps {
 interface SelectProps {
     name: string;
     placeholder: string;
-    options: {
-        text: string;
-        value: string;
-    }[];
+    options: TextValueObject[];
     className?: string;
 }
 interface CounterProps {
@@ -29,6 +28,15 @@ 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;
@@ -40,11 +48,33 @@ 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 }: {
@@ -52,8 +82,14 @@ export declare abstract class CommonControl extends Control {
         value: string;
     }): string;
     _GuSelect({ name, placeholder, options, className }: SelectProps): string;
-    _GuTextInput({ name, placeholder, className }: TextInputProps): string;
+    _GuTextInput({ name, placeholder, className, disabled }: 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;
     /**
      *
@@ -61,7 +97,8 @@ export declare abstract class CommonControl extends Control {
      * @returns It returns a button with an icon.
      */
     _GuIconButton({ name, icon, className }: IconButtonProps): string;
-    _GuTwoColumns(children: string[]): string;
+    _GuOneColumn(children: string[], className?: string): string;
+    _GuTwoColumns(children: string[], className?: string): string;
     /**
      * Creates an orderable (sortable) list control
      * @param name - The control name for value binding

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

@@ -0,0 +1,312 @@
+/**
+ * Reusable Control Factory Functions
+ *
+ * These factory functions can be used by any extension block to generate
+ * controls dynamically, reducing code duplication across the codebase.
+ *
+ * Note: TypeScript's type inference has limitations with dynamically generated classes.
+ * The eslint-disable comment above suppresses warnings that would otherwise require
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};
+/**
+ * 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;
+    };
+};