ngx-form-designerr 0.0.10

package/lib/widgets/page-widgets/table-inspector.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export declare class TableInspectorComponent {
+    config: any;
+    getValue: (path: string) => any;
+    setValue: (path: string, value: any) => void;
+    onChange: () => void;
+    get columns(): any;
+    get rows(): any;
+    addColumn(): void;
+    removeColumn(index: number): void;
+    updateColumns(): void;
+    addRow(): void;
+    removeRow(index: number): void;
+    updateRows(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableInspectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableInspectorComponent, "app-table-inspector", never, { "config": { "alias": "config"; "required": false; }; "getValue": { "alias": "getValue"; "required": false; }; "setValue": { "alias": "setValue"; "required": false; }; "onChange": { "alias": "onChange"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/widgets/page-widgets/table-widget.component.d.ts

@@ -0,0 +1,35 @@
+import { OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormEngine } from '../../form-core/form-engine';
+import * as i0 from "@angular/core";
+export declare class TableWidgetComponent implements OnInit, OnChanges, OnDestroy {
+    config: any;
+    engine?: FormEngine;
+    control?: FormControl;
+    private readonly dataProvider;
+    private readonly pluginCtx;
+    searchControl: FormControl<string | null>;
+    loading: boolean;
+    error: string | null;
+    pageSize: number;
+    pageIndex: number;
+    total: number;
+    displayRows: any[];
+    private readonly destroyRef;
+    private reqId;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    getStyles(): Record<string, any>;
+    showToolbar(): boolean;
+    get pageStart(): number;
+    get pageEnd(): number;
+    prevPage(): void;
+    nextPage(): void;
+    hasNextPage(): boolean;
+    private updateRows;
+    private getRowsFromBinding;
+    private getDependencyFieldIds;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableWidgetComponent, "app-table-widget", never, { "config": { "alias": "config"; "required": true; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/widgets/page-widgets/text-block-widget.component.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+export declare class TextBlockWidgetComponent {
+    private readonly editor;
+    private readonly router;
+    config: any;
+    engine?: any;
+    control?: any;
+    getStyles(): Record<string, any>;
+    isDesignMode(): boolean;
+    isEditing(): boolean;
+    textEditorClass(): string;
+    textContainerClass(): string;
+    textHtml(): string;
+    quillHtml(): string;
+    onHtmlChange(html: string): void;
+    onLinkClick(event: MouseEvent): void;
+    private wrapHtmlForQuill;
+    private normalizeInlineHtml;
+    private normalizeInternalHref;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextBlockWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextBlockWidgetComponent, "app-text-block-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/widgets/page-widgets.d.ts

@@ -0,0 +1,2 @@
+import { WidgetDefinition } from './widget-definition';
+export declare const PAGE_WIDGETS: WidgetDefinition[];

package/lib/widgets/static-widgets/image/image-widget.component.d.ts

@@ -0,0 +1,18 @@
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormEngine } from '../../../form-core/form-engine';
+import * as i0 from "@angular/core";
+export declare class ImageWidgetComponent implements OnInit, OnChanges {
+    config: any;
+    engine?: FormEngine;
+    control?: FormControl;
+    displaySrc: string | null;
+    private readonly dataProvider;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateSrc;
+    getContainerStyles(): Record<string, any>;
+    getSpacing(token: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageWidgetComponent, "app-image-widget", never, { "config": { "alias": "config"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/widgets/style-helpers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared helpers for normalizing style objects coming from widget configs.
+ * - Converts number values to px strings.
+ * - Skips null/undefined/empty values.
+ */
+export type StyleRecord = Record<string, any>;
+export declare function normalizeStyle(style?: StyleRecord): Record<string, any>;
+export declare function mergeAndNormalize(base?: StyleRecord, override?: StyleRecord): Record<string, any>;

package/lib/widgets/style-properties.d.ts

@@ -0,0 +1,28 @@
+import { PropertyField, PropertySection } from './widget-definition';
+export declare const LAYOUT_FIELDS: PropertyField[];
+export declare const SPACING_MARGIN_FIELDS: PropertyField[];
+export declare const SPACING_PADDING_FIELDS: PropertyField[];
+export declare const SPACING_BOX_MODEL_FIELD: PropertyField;
+export declare const APPEARANCE_FIELDS: PropertyField[];
+export declare const TYPOGRAPHY_FIELDS: PropertyField[];
+export declare const TRANSFORM_FIELDS: PropertyField[];
+export declare const EFFECTS_FIELDS: PropertyField[];
+export declare const STYLE_LAYOUT_SECTION: PropertySection;
+export declare const STYLE_SPACING_SECTION: PropertySection;
+export declare const STYLE_APPEARANCE_SECTION: PropertySection;
+export declare const STYLE_TYPOGRAPHY_SECTION: PropertySection;
+export declare const STYLE_TRANSFORM_SECTION: PropertySection;
+export declare const STYLE_EFFECTS_SECTION: PropertySection;
+export declare const STYLE_SECTIONS: PropertySection[];
+/**
+ * Standard style sections for form widgets (no transforms)
+ */
+export declare const STANDARD_FORM_STYLE_SECTIONS: PropertySection[];
+/**
+ * Full style sections for web widgets (includes transforms)
+ */
+export declare const FULL_WEB_STYLE_SECTIONS: PropertySection[];
+/**
+ * Email-safe style sections (no transforms or advanced effects)
+ */
+export declare const EMAIL_SAFE_STYLE_SECTIONS: PropertySection[];

package/lib/widgets/style-sections.d.ts

@@ -0,0 +1 @@
+export { STYLE_LAYOUT_SECTION, STYLE_SPACING_SECTION, STYLE_APPEARANCE_SECTION, STYLE_TYPOGRAPHY_SECTION, STYLE_TRANSFORM_SECTION, STYLE_EFFECTS_SECTION, STYLE_SECTIONS } from './style-properties';

package/lib/widgets/table-widget.d.ts

@@ -0,0 +1,2 @@
+import { WidgetDefinition } from './widget-definition';
+export declare const TABLE_WIDGET: WidgetDefinition;

package/lib/widgets/widget-definition.d.ts

@@ -0,0 +1,76 @@
+import { Type, InjectionToken } from '@angular/core';
+import { WidgetKind, DesignerFlavor } from '../form-core/models';
+export interface WidgetConfig {
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    [key: string]: any;
+}
+export type PropertyFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'slide-toggle' | 'color' | 'color-swatch' | 'icon-picker' | 'padding' | 'margin' | 'shadow' | 'border' | 'options-editor' | 'validators-editor' | 'conditional-editor' | 'custom' | 'field-reference' | 'dimension' | 'edge-box' | 'box-model' | 'range-number' | 'select-icon';
+export interface PropertyField {
+    key: string;
+    type: PropertyFieldType;
+    label: string;
+    placeholder?: string;
+    helpText?: string;
+    hint?: string;
+    options?: {
+        label: string;
+        value: any;
+        icon?: string;
+    }[];
+    allowedFieldTypes?: string[];
+    includeSelf?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    icon?: string;
+    unit?: string;
+    linkedByDefault?: boolean;
+    allowedUnits?: string[];
+    customComponent?: Type<any>;
+    customInputs?: Record<string, any>;
+    hiddenIf?: (config: any) => boolean;
+}
+export interface PropertySection {
+    label: string;
+    expanded?: boolean;
+    fields: PropertyField[];
+}
+export declare const WIDGET_ID_SEPARATOR: ":";
+/**
+ * Generates a stable widget ID from a plugin ID and widget name/type.
+ * @param pluginId Globally unique plugin ID (e.g. 'core.form', 'acme.analytics')
+ * @param widgetName Short widget identifier (e.g. 'text', 'line-chart')
+ */
+export declare function buildWidgetId(pluginId: string, widgetName: string): string;
+/**
+ * Implementation helper for defining widgets with standard IDs.
+ * Plugin authors should use this to ensure ID consistency.
+ */
+export declare function defineWidget(pluginId: string, def: Omit<WidgetDefinition, 'id'>): WidgetDefinition;
+export type DataShape = 'scalar' | 'list';
+export interface DataBindingContract {
+    shape: DataShape;
+    targetPath?: string;
+}
+export interface WidgetDefinition {
+    id: string;
+    kind: WidgetKind;
+    flavor?: DesignerFlavor;
+    type: string;
+    icon: string;
+    label: string;
+    createConfig: () => any;
+    renderer: Type<any>;
+    properties?: PropertySection[];
+    dataBinding?: DataBindingContract;
+    dataConsumer?: 'value' | 'list' | 'image' | 'none';
+    inspector?: Type<any>;
+}
+export interface WidgetPack {
+    flavor: DesignerFlavor;
+    widgets: WidgetDefinition[];
+}
+export declare const WIDGET_DEFINITIONS: InjectionToken<WidgetDefinition[]>;

package/lib/widgets/widget-editor-context.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import type { FieldSchema } from '../form-core/models';
+export type WidgetEditorContext = {
+    isDesignMode: () => boolean;
+    isSelected: () => boolean;
+    updateField: (fieldId: string, updates: Partial<FieldSchema>) => void;
+};
+export declare const WIDGET_EDITOR_CONTEXT: InjectionToken<WidgetEditorContext>;

package/lib/widgets/widget-packs.d.ts

@@ -0,0 +1,4 @@
+import { DesignerFlavor } from '../form-core/models';
+import { WidgetDefinition, WidgetPack } from './widget-definition';
+export declare const DEFAULT_WIDGET_PACKS: WidgetPack[];
+export declare function getWidgetsForFlavor(flavor: DesignerFlavor, packs?: WidgetPack[]): WidgetDefinition[];

package/lib/widgets/widgets.d.ts

@@ -0,0 +1,2 @@
+import { WidgetDefinition } from './widget-definition';
+export declare const FIELD_WIDGETS: WidgetDefinition[];

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ngx-form-designerr",
+  "version": "0.0.10",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@monaco-editor/loader": "^1.4.0",
+    "lucide-angular": "^0.469.0",
+    "quill": "^2.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@babel/standalone": "^7.25.0",
+    "@json-editor/json-editor": "^2.15.2"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "@babel/standalone": {
+      "optional": true
+    },
+    "@json-editor/json-editor": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "uuid": "^13.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-form-designer.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-form-designer.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,70 @@
+export * from './lib/form-core/models';
+export * from './lib/form-core/form-engine';
+export * from './lib/form-core/schema-factory';
+export * from './lib/form-core/schema-guard';
+export * from './lib/form-renderer/json-form-renderer.component';
+export * from './lib/form-renderer/layout-node.component';
+export * from './lib/email-renderer/email-renderer.component';
+export * from './lib/form-renderer/form-viewer/form-viewer.component';
+export * from './lib/form-designer/json-form-designer.component';
+export * from './lib/form-designer/form-designer-shell.component';
+export * from './lib/form-designer/designer-state.service';
+export * from './lib/form-designer/designer-context.service';
+export * from './lib/form-designer/layout-canvas.component';
+export * from './lib/form-designer/field-palette.component';
+export * from './lib/form-designer/properties-panel.component';
+export * from './lib/form-designer/template-library';
+export * from './lib/form-designer/widget-inspector.component';
+export * from './lib/form-designer/dynamic-properties/dynamic-properties.component';
+export * from './lib/form-designer/data-panel/data-panel.component';
+export * from './lib/form-designer/rules-editor/rules-panel/rules-panel.component';
+export * from './lib/form-designer/events-panel/events-panel.component';
+export * from './lib/form-designer/services/widget-definition-resolver.service';
+export * from './lib/form-designer/inspector-sections/inspector-layout-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-spacing-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-size-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-position-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-typography-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-borders-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-backgrounds-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-effects-section.component';
+export * from './lib/form-designer/inspector-sections/inspector-advanced-section.component';
+export * from './lib/website/website-project.models';
+export * from './lib/website/website-project.service';
+export * from './lib/website/website-designer-shell.component';
+export * from './lib/website/website-brick-studio.component';
+export * from './lib/website/website-preview-shell.component';
+export * from './lib/website/website-section-library';
+export * from './lib/widgets/widget-definition';
+export * from './lib/widgets/widgets';
+export * from './lib/widgets/page-widgets';
+export * from './lib/widgets/email-widgets';
+export * from './lib/widgets/widget-packs';
+export * from './lib/plugins/designer-plugin';
+export * from './lib/plugins/core-plugins';
+export * from './lib/plugins/plugin-providers';
+export * from './lib/plugins/plugin-context';
+export * from './lib/plugins/section-definition';
+export * from './lib/theme/theme.service';
+export * from './lib/ui/ui-tabs.component';
+export * from './lib/ui/ui-accordion.component';
+export * from './lib/ui/ui-field-wrapper.component';
+export * from './lib/ui/ui-input.component';
+export * from './lib/ui/ui-dimension.component';
+export * from './lib/ui/ui-box-model.component';
+export * from './lib/ui/ui-edge-box.component';
+export * from './lib/ui/ui-color-swatch.component';
+export * from './lib/ui/ui-range-number.component';
+export * from './lib/ui/ui-select-icon.component';
+export * from './lib/widgets/style-properties';
+export * from './lib/widgets/style-sections';
+export * from './lib/widgets/style-helpers';
+export * from './lib/data/data-catalog';
+export * from './lib/data/data-provider';
+export * from './lib/data/in-memory-data-catalog.service';
+export * from './lib/form-designer/global-data-manager.component';
+export * from './lib/data/file-upload-client';
+export * from './lib/data/data-source-client';
+export * from './lib/data/http-data-source-client';
+export * from './lib/data/data-source-parsers';
+export * from './lib/data/external-data-source';

package/tailwind.preset.js

@@ -0,0 +1,51 @@
+// Tailwind CSS Preset for ngx-form-designer
+// This file can be used by consumers to inherit the library's design tokens.
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        accent: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          500: '#2563eb',
+          600: '#1d4ed8',
+          700: '#1e40af'
+        },
+        ink: {
+          900: '#0f172a',
+          700: '#1f2937',
+          600: '#374151',
+          500: '#4b5563',
+          400: '#6b7280'
+        },
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1'
+        },
+        // Light theme tokens (Webflow-style inspector)
+        'panel-dark': '#ffffff',
+        'input-dark': '#f9fafb',
+        'border-dark': '#e5e7eb',
+        'text-secondary-dark': '#6b7280',
+        'highlight-orange': '#c46c35',
+        'primary-blue': '#0073e6'
+      },
+      borderRadius: {
+        'md': '10px',
+        'lg': '12px'
+      },
+      boxShadow: {
+        'card': '0 1px 2px rgba(15, 23, 42, 0.05)',
+        'popover': '0 10px 40px rgba(15, 23, 42, 0.12)'
+      },
+      fontFamily: {
+        sans: ['Inter', 'Segoe UI', 'system-ui', 'sans-serif']
+      }
+    },
+  },
+}