ngx-view-builder-designer 0.5.0

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ngx-view-builder-designer",
+  "version": "0.5.0",
+  "description": "Visual designer (drag-and-drop builder) for NGX View Builder. Requires ngx-view-builder-runtime.",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://ngxviewbuilder.io",
+  "author": "NGX View Builder (https://ngxviewbuilder.io)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ngxviewbuilder/ngx-view-builder-community.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ngxviewbuilder/ngx-view-builder-community/issues"
+  },
+  "keywords": [
+    "angular",
+    "form-builder",
+    "view-builder",
+    "drag-and-drop",
+    "json-forms",
+    "low-code"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "ngx-view-builder-runtime": "0.5.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0",
+    "lodash-es": "^4.17.21"
+  },
+  "module": "fesm2022/ngx-view-builder-designer.mjs",
+  "typings": "types/ngx-view-builder-designer.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-view-builder-designer.d.ts",
+      "default": "./fesm2022/ngx-view-builder-designer.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module"
+}

package/types/ngx-view-builder-designer.d.ts

@@ -0,0 +1,347 @@
+import { NgxViewBuilderBuilderTabCode, RendererService, CreatorStructureService, IStructure, ElementBaseModel, IBaseElement, INgxViewBuilderBuilderTabDefinition, BuilderPageDisplayMode, BuilderModel, UiDictionaries, INgxViewBuilderExternalConfig, INgxViewBuilderHeaderAction, INgxViewBuilderBuilderSettings, IValueChangedEvent, INgxViewBuilderTemplateSavedEvent, INgxViewBuilderTemplateDeletedEvent, INgxViewBuilderTemplatesLoadedEvent, INgxViewBuilderSidebarGroupSavedEvent, INgxViewBuilderSidebarGroupDeletedEvent, INgxViewBuilderSidebarGroupsLoadedEvent, INgxViewBuilderHeaderActionClickEvent, HeaderTabEnum, PreviewRendererService, DataSourceService, NgxViewBuilderApiService, BuilderTabRegistryService, NgxViewBuilderMcpBridgeService, DataService, INgxViewBuilderPreviewSettings, PropertyModel } from 'ngx-view-builder-runtime';
+export * from 'ngx-view-builder-runtime';
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+
+interface HeaderTab {
+    label: string;
+    code: NgxViewBuilderBuilderTabCode;
+    order?: number;
+    isHidden?: boolean;
+}
+
+declare class CreatorRendererService extends RendererService {
+    creatorStructureService: CreatorStructureService;
+    toModel(structureJson: IStructure): void;
+    mapToModel(elements: Record<string, any>): Record<string, ElementBaseModel>;
+    convertTemplateToModels(templateObj: any, parentInstance: any, parentPath: string, templateElementParentDataPath?: string): void;
+    convertColumnsToModels(columns: IBaseElement[], parentInstance: any, parentPath: string, isTemplateElement?: boolean, templateElementParentDataPath?: string): void;
+    applyDataSources(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CreatorRendererService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CreatorRendererService>;
+}
+
+declare class HistoryService {
+    private readonly maxSnapshots;
+    private readonly propertyChangeDebounceMs;
+    private creatorStructureService;
+    private creatorRendererService;
+    private previewRendererService;
+    private rendererService;
+    private eventService;
+    private undoStack;
+    private redoStack;
+    private captureTimer;
+    private trackingStarted;
+    private trackingRefCount;
+    private restoringSnapshot;
+    private focusedElementName;
+    canUndo: _angular_core.WritableSignal<boolean>;
+    canRedo: _angular_core.WritableSignal<boolean>;
+    private readonly onDropHandler;
+    private readonly onAfterPropertyChangedHandler;
+    private readonly onElementFocusHandler;
+    private readonly onKeyDownHandler;
+    beginTracking(): void;
+    stopTracking(): void;
+    syncWithCurrentState(reset?: boolean): void;
+    undo(): boolean;
+    redo(): boolean;
+    private captureCheckpoint;
+    private createSnapshot;
+    private restoreSnapshot;
+    private updateAvailabilitySignals;
+    private trimUndoStack;
+    private clearCaptureTimer;
+    private isEditableTarget;
+    private deleteFocusedElementFromKeyboard;
+    private resolveFocusedElement;
+    private findElementByNameInMap;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HistoryService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<HistoryService>;
+}
+
+declare class BuilderPluginContextService {
+    private readonly activePluginTab;
+    private readonly builderPageDisplayMode;
+    readonly pluginTab: _angular_core.Signal<INgxViewBuilderBuilderTabDefinition>;
+    readonly renderMode: _angular_core.Signal<"standalone" | "builder">;
+    readonly allowedElementTypes: _angular_core.Signal<Set<string>>;
+    readonly allowedGroupCodes: _angular_core.Signal<Set<string>>;
+    readonly showTemplatesLibrary: _angular_core.Signal<boolean>;
+    readonly showCopiesLibrary: _angular_core.Signal<boolean>;
+    readonly showFooter: _angular_core.Signal<boolean>;
+    readonly showPagesFooterTab: _angular_core.Signal<boolean>;
+    readonly showDataSourcesFooterTab: _angular_core.Signal<boolean>;
+    readonly pageDisplayMode: _angular_core.Signal<"all" | "single">;
+    readonly singlePage: _angular_core.Signal<boolean>;
+    setActivePluginTab(tab: INgxViewBuilderBuilderTabDefinition | null | undefined): void;
+    setBuilderPageDisplayMode(mode: BuilderPageDisplayMode | null | undefined): boolean;
+    clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BuilderPluginContextService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<BuilderPluginContextService>;
+}
+
+declare class NgxViewBuilderBuilder implements OnInit, AfterViewInit, OnDestroy {
+    model: _angular_core.InputSignal<BuilderModel>;
+    language: _angular_core.InputSignal<string>;
+    theme: _angular_core.InputSignal<"light" | "dark">;
+    uiDictionaries: _angular_core.InputSignal<UiDictionaries>;
+    contentTranslations: _angular_core.InputSignal<Record<string, Record<string, string>>>;
+    cssVariables: _angular_core.InputSignal<Record<string, string>>;
+    externalConfig: _angular_core.InputSignal<INgxViewBuilderExternalConfig>;
+    externalConfigUrl: _angular_core.InputSignal<string>;
+    viewportSettings: _angular_core.InputSignal<{
+        mobile?: number;
+        tablet?: number;
+        desktop?: number;
+    }>;
+    activeTab: _angular_core.InputSignal<string>;
+    hideHeaderTabs: _angular_core.InputSignal<boolean>;
+    hideSaveAction: _angular_core.InputSignal<boolean>;
+    headerActions: _angular_core.InputSignal<INgxViewBuilderHeaderAction[]>;
+    runtimeSettings: _angular_core.InputSignal<INgxViewBuilderBuilderSettings>;
+    valueChanged: _angular_core.OutputEmitterRef<IValueChangedEvent>;
+    structureChanged: _angular_core.OutputEmitterRef<IStructure>;
+    tabChanged: _angular_core.OutputEmitterRef<string>;
+    languageChanged: _angular_core.OutputEmitterRef<string>;
+    saveRequested: _angular_core.OutputEmitterRef<void>;
+    templateSaved: _angular_core.OutputEmitterRef<INgxViewBuilderTemplateSavedEvent>;
+    templateDeleted: _angular_core.OutputEmitterRef<INgxViewBuilderTemplateDeletedEvent>;
+    templatesLoaded: _angular_core.OutputEmitterRef<INgxViewBuilderTemplatesLoadedEvent>;
+    sidebarGroupSaved: _angular_core.OutputEmitterRef<INgxViewBuilderSidebarGroupSavedEvent>;
+    sidebarGroupDeleted: _angular_core.OutputEmitterRef<INgxViewBuilderSidebarGroupDeletedEvent>;
+    sidebarGroupsLoaded: _angular_core.OutputEmitterRef<INgxViewBuilderSidebarGroupsLoadedEvent>;
+    headerActionRequested: _angular_core.OutputEmitterRef<INgxViewBuilderHeaderActionClickEvent>;
+    headerTabEnum: typeof HeaderTabEnum;
+    selectedTab: _angular_core.WritableSignal<string>;
+    visibleHeaderTabs: _angular_core.Signal<HeaderTab[]>;
+    rendererService: RendererService;
+    previewRendererService: PreviewRendererService;
+    creatorRendererService: CreatorRendererService;
+    dataSourceService: DataSourceService;
+    ngxViewBuilderApiService: NgxViewBuilderApiService;
+    builderTabRegistry: BuilderTabRegistryService;
+    builderPluginContext: BuilderPluginContextService;
+    private ngxViewBuilderBuilderAdapterService;
+    private licenseService;
+    readonly mcpBridge: NgxViewBuilderMcpBridgeService;
+    /** Last MCP settings applied, so a settings change that does not touch them is not a
+     * reason to drop a live connection. */
+    private appliedMcpUrl;
+    private hostElement;
+    private documentRef;
+    private renderer;
+    private domInstrumentationService;
+    historyService: HistoryService;
+    private runtimeVariablesService;
+    private eventService;
+    private readonly onBuilderSaveRequestedHandler;
+    dataService: DataService;
+    isLoaded: _angular_core.WritableSignal<boolean>;
+    private mutationObserver;
+    private inheritedThemeObserver;
+    private appliedCssVariableKeys;
+    private appliedCssVariablesSnapshot;
+    private isInstrumentingDom;
+    private activeThemeMode;
+    private lastAppliedThemePreset;
+    private customThemeDefinition;
+    private themeSwitchRafHandle;
+    private customCssStyleElement;
+    private cssVariablesStyleElement;
+    private customCssLinkElements;
+    private markupSecurityService;
+    private externalConfigRequestId;
+    activeTheme: _angular_core.WritableSignal<"light" | "dark">;
+    private readonly apiValueChangedHandler;
+    private readonly apiStructureChangedHandler;
+    private readonly apiLanguageChangedHandler;
+    private readonly apiTabChangedHandler;
+    private readonly apiTabChangeRequestedHandler;
+    private readonly apiCssVariablesChangedHandler;
+    private readonly apiCustomCssChangedHandler;
+    private readonly apiCustomCssUrlsChangedHandler;
+    private readonly apiThemeModeChangedHandler;
+    private readonly apiCustomThemeChangedHandler;
+    private readonly apiTemplateSavedHandler;
+    private readonly apiTemplateDeletedHandler;
+    private readonly apiTemplatesLoadedHandler;
+    private readonly apiSidebarGroupSavedHandler;
+    private readonly apiSidebarGroupDeletedHandler;
+    private readonly apiSidebarGroupsLoadedHandler;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get creatorStructure(): IStructure;
+    onTabSelected(selectedTab: NgxViewBuilderBuilderTabCode): void;
+    onUndoRequested(): void;
+    onRedoRequested(): void;
+    onSaveRequested(): void;
+    /** Schema version of the loaded view, used to offer the upgrade action. */
+    protected readonly structureSchemaVersion: _angular_core.Signal<number>;
+    protected readonly runtimeSchemaVersion = 1;
+    /**
+     * The upgrade is already applied in memory - the view could not render otherwise.
+     * This just persists it, so it goes through the ordinary save path.
+     */
+    onSchemaUpgradeRequested(): void;
+    onCustomHeaderActionSelected(action: INgxViewBuilderHeaderAction): void;
+    resolvedViewportSettings(): {
+        mobile?: number;
+        tablet?: number;
+        desktop?: number;
+    } | null;
+    resolvedPreviewSettings(): INgxViewBuilderPreviewSettings | null;
+    private applyBuilderSettings;
+    /**
+     * Opens or closes the MCP bridge from settings.
+     *
+     * Reconnecting on every settings write would drop a live session each time a host
+     * touched an unrelated field, so this only acts when the endpoint itself changed.
+     */
+    private applyMcpSetting;
+    private applyBuilderPageDisplayModeSetting;
+    private resolveAllowedTab;
+    private applyExternalConfig;
+    private loadExternalConfig;
+    private applyCustomCss;
+    private applyCustomCssUrls;
+    private applyCssVariables;
+    private applyDefaultCssVariables;
+    private applyThemePreset;
+    private reapplyHostCssVariables;
+    private reapplyRuntimeThemeArtifacts;
+    private getStyleRoot;
+    private syncThemeArtifactsRoot;
+    private applyCssVariablesToElement;
+    private updateCssVariableStyleElement;
+    private resolveThemePresetVariables;
+    private scheduleThemeSwitchUnlock;
+    private setupInheritedThemeSync;
+    private syncThemeFromHostIfNeeded;
+    private resolveInheritedThemeMode;
+    private hasExplicitThemeOverride;
+    private normalizeThemeMode;
+    private setupDomInstrumentation;
+    private instrumentDomSoon;
+    private instrumentDomSafely;
+    private getInstrumentationRoot;
+    private syncRuntimeVariableMappings;
+    private isBuiltInTab;
+    resolveHeaderTabId(tabCode: NgxViewBuilderBuilderTabCode): string;
+    resolveHeaderPanelId(tabCode: NgxViewBuilderBuilderTabCode): string;
+    private normalizeDomId;
+    activePluginTabDefinition: _angular_core.Signal<INgxViewBuilderBuilderTabDefinition>;
+    activeBuilderPluginTabDefinition: _angular_core.Signal<INgxViewBuilderBuilderTabDefinition>;
+    private deepCloneData;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxViewBuilderBuilder, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxViewBuilderBuilder, "ngx-view-builder-builder", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "uiDictionaries": { "alias": "uiDictionaries"; "required": false; "isSignal": true; }; "contentTranslations": { "alias": "contentTranslations"; "required": false; "isSignal": true; }; "cssVariables": { "alias": "cssVariables"; "required": false; "isSignal": true; }; "externalConfig": { "alias": "externalConfig"; "required": false; "isSignal": true; }; "externalConfigUrl": { "alias": "externalConfigUrl"; "required": false; "isSignal": true; }; "viewportSettings": { "alias": "viewportSettings"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; "hideHeaderTabs": { "alias": "hideHeaderTabs"; "required": false; "isSignal": true; }; "hideSaveAction": { "alias": "hideSaveAction"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "runtimeSettings": { "alias": "runtimeSettings"; "required": false; "isSignal": true; }; }, { "valueChanged": "valueChanged"; "structureChanged": "structureChanged"; "tabChanged": "tabChanged"; "languageChanged": "languageChanged"; "saveRequested": "saveRequested"; "templateSaved": "templateSaved"; "templateDeleted": "templateDeleted"; "templatesLoaded": "templatesLoaded"; "sidebarGroupSaved": "sidebarGroupSaved"; "sidebarGroupDeleted": "sidebarGroupDeleted"; "sidebarGroupsLoaded": "sidebarGroupsLoaded"; "headerActionRequested": "headerActionRequested"; }, never, never, true, never>;
+}
+
+declare const NGX_VIEW_BUILDER_TEMPLATES_FEATURE_PACK_ID = "ngx-view-builder-templates";
+/** The same literal the shared layer checks, so the two can never drift apart. */
+declare const NGX_VIEW_BUILDER_TEMPLATES_CAPABILITY = "templates";
+declare function createTemplatesLibraryProperty(data?: Partial<PropertyModel>): PropertyModel;
+
+/** `risk` renders the existing danger styling - amber/red, for actions that warn. */
+type BuilderActionButtonTone = 'subtle' | 'neutral' | 'primary' | 'risk';
+type BuilderActionButtonSize = 'lg' | 'ms' | 'sm' | 'sx' | 'md';
+type BuilderActionButtonAlign = 'left' | 'center';
+
+declare class BuilderActionButton {
+    private readonly hostElement;
+    label: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    testId: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<string>;
+    className: _angular_core.InputSignal<string>;
+    tone: _angular_core.InputSignal<BuilderActionButtonTone>;
+    size: _angular_core.InputSignal<BuilderActionButtonSize>;
+    align: _angular_core.InputSignal<BuilderActionButtonAlign>;
+    active: _angular_core.InputSignal<boolean>;
+    fullWidth: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    resolveClasses(): string[];
+    onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BuilderActionButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BuilderActionButton, "builder-action-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+type BuilderIconButtonIconSet = 'material' | 'nvb';
+type BuilderIconButtonSize = 'lg' | 'ms' | 'sm' | 'sx' | 'xs';
+type BuilderIconButtonTone = 'neutral' | 'danger';
+declare class BuilderIconButton {
+    private readonly hostElement;
+    icon: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    title: _angular_core.InputSignal<string>;
+    testId: _angular_core.InputSignal<string>;
+    iconSet: _angular_core.InputSignal<BuilderIconButtonIconSet>;
+    size: _angular_core.InputSignal<BuilderIconButtonSize>;
+    tone: _angular_core.InputSignal<BuilderIconButtonTone>;
+    ghost: _angular_core.InputSignal<boolean>;
+    dragHandle: _angular_core.InputSignal<boolean>;
+    active: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    className: _angular_core.InputSignal<string>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    resolveClasses(): string[];
+    onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BuilderIconButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BuilderIconButton, "builder-icon-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "iconSet": { "alias": "iconSet"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+interface LicensePayload {
+    customerId?: string;
+    expiresAt?: string;
+    plan?: string;
+}
+interface LicenseStatus {
+    initialized: boolean;
+    missing: boolean;
+    /** This version's RELEASE_DATE is later than the license expiresAt, so the build is not covered. */
+    outdated: boolean;
+    invalid: boolean;
+    expiresAt: Date | null;
+    plan: string | null;
+}
+declare class LicenseService {
+    readonly status: _angular_core.WritableSignal<LicenseStatus>;
+    /** True when the license is missing, invalid or does not cover this version, so the builder shows the watermark. */
+    readonly isUnlicensed: _angular_core.Signal<boolean>;
+    readonly shouldShowModal: _angular_core.WritableSignal<boolean>;
+    readonly shouldShowInvalidModal: _angular_core.WritableSignal<boolean>;
+    private licenseKey;
+    setLicenseKey(key: string): void;
+    /** Called by the builder when settings carry no licenseKey, meaning there simply is no key. */
+    markMissing(): void;
+    private isOfficialDemoHost;
+    /** True when watermark and modal enforcement is off: during the beta, or on the official demo. */
+    private isEnforcementSuppressed;
+    saveModalTimestamp(): void;
+    dismissModal(): void;
+    saveInvalidModalTimestamp(): void;
+    dismissInvalidModal(): void;
+    private initialize;
+    private parseKey;
+    /**
+     * Offline ECDSA P-256 paraso patikra su iterptu viesu raktu.
+     * Grazina: true (galioja) | false (suklastota/be paraso) | null (WebCrypto nepasiekiamas  praleidziam).
+     */
+    private verifySignature;
+    private checkShouldShowModal;
+    private checkShouldShowInvalidModal;
+    private runServerCheck;
+    private applyServerResult;
+    private getCachedValidation;
+    private cacheValidation;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LicenseService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LicenseService>;
+}
+
+export { BuilderActionButton, BuilderIconButton, LicenseService, NGX_VIEW_BUILDER_TEMPLATES_CAPABILITY, NGX_VIEW_BUILDER_TEMPLATES_FEATURE_PACK_ID, NgxViewBuilderBuilder, createTemplatesLibraryProperty };
+export type { LicensePayload, LicenseStatus };