@ngstarter-ui/components 1.0.21

package/types/ngstarter-ui-components-guided-tour.d.ts

@@ -0,0 +1,227 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef, Provider, OnDestroy, ViewContainerRef, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as _angular_platform_browser from '@angular/platform-browser';
+import * as _ngstarter_ui_components_guided_tour from '@ngstarter-ui/components/guided-tour';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+
+interface TourConfig {
+    /**
+     * Default padding for the highlighted element.
+     * @default 4
+     */
+    padding?: number;
+    /**
+     * Whether to close the tour when clicking on the backdrop.
+     * @default false
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether to enable keyboard navigation (arrows and Esc).
+     * @default true
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Default text for the "Next" button.
+     */
+    nextBtnText?: string;
+    /**
+     * Default text for the "Prev" button.
+     */
+    prevBtnText?: string;
+    /**
+     * Default text for the "Finish" button.
+     */
+    finishBtnText?: string;
+    /**
+     * Default text for the "Skip" button.
+     */
+    skipBtnText?: string;
+}
+declare const TOUR_CONFIG: InjectionToken<TourConfig>;
+declare function provideTourConfig(config: TourConfig): Provider;
+type TourStepPosition = 'below-start' | 'below-center' | 'below-end' | 'above-start' | 'above-center' | 'above-end' | 'before-start' | 'before-center' | 'before-end' | 'after-start' | 'after-center' | 'after-end';
+interface TourStepConfig {
+    /**
+     * Unique identifier for the tour step anchor or a function that returns an element or selector.
+     */
+    anchorId: string | (() => HTMLElement | string);
+    /**
+     * Title of the tour step.
+     */
+    title?: string;
+    /**
+     * Content of the tour step.
+     */
+    content?: string;
+    /**
+     * HTML content of the tour step.
+     */
+    htmlContent?: string;
+    /**
+     * Template for the tour step.
+     */
+    template?: TemplateRef<any>;
+    /**
+     * Context for the template.
+     */
+    templateContext?: any;
+    /**
+     * Custom data for the tour step.
+     */
+    data?: any;
+    /**
+     * Whether to show a backdrop and highlight the anchor element.
+     */
+    withBackdrop?: boolean;
+    /**
+     * Whether to disable interaction with the highlighted element.
+     */
+    disableInteraction?: boolean;
+    /**
+     * Padding for the highlighted element.
+     * If not provided, the default from TourConfig will be used.
+     */
+    padding?: number;
+    /**
+     * Route to navigate to before showing the step.
+     */
+    route?: string;
+    /**
+     * CSS selector to wait for before showing the step.
+     */
+    waitFor?: string;
+    /**
+     * Callback before showing the step.
+     */
+    onShow?: () => void | Promise<void>;
+    /**
+     * Callback before hiding the step.
+     */
+    onHide?: () => void | Promise<void>;
+    /**
+     * Callback when "Next" is clicked.
+     */
+    onNext?: () => void | Promise<void>;
+    /**
+     * Callback when "Prev" is clicked.
+     */
+    onPrev?: () => void | Promise<void>;
+    /**
+     * Whether to hide the arrow pointing to the anchor.
+     */
+    hideArrow?: boolean;
+    /**
+     * Whether to close the tour when clicking on the backdrop.
+     * If not provided, the default from TourConfig will be used.
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Text for the "Next" button.
+     */
+    nextBtnText?: string;
+    /**
+     * Text for the "Prev" button.
+     */
+    prevBtnText?: string;
+    /**
+     * Text for the "Finish" button.
+     */
+    finishBtnText?: string;
+    /**
+     * Text for the "Skip" button.
+     */
+    skipBtnText?: string;
+    /**
+     * Explicit position for the tour step.
+     * If not provided, the best position will be chosen automatically.
+     */
+    position?: TourStepPosition;
+}
+declare enum TourState {
+    OFF = 0,
+    ON = 1,
+    PAUSED = 2
+}
+declare const TOUR_STEP_COMPONENT: InjectionToken<any>;
+
+declare class TourService implements OnDestroy {
+    private readonly overlay;
+    private readonly config;
+    private readonly document;
+    private readonly router;
+    private backdropOverlayRef;
+    private backdropComponentRef;
+    private readonly _steps;
+    private readonly _currentStepIndex;
+    private readonly _state;
+    private readonly _anchors;
+    private stepOverlayRef;
+    private stepComponentRef;
+    private readonly customStepComponent;
+    constructor();
+    ngOnDestroy(): void;
+    private readonly handleKeyDown;
+    readonly steps: _angular_core.Signal<TourStepConfig[]>;
+    readonly currentStepIndex: _angular_core.Signal<number>;
+    readonly state: _angular_core.Signal<TourState>;
+    readonly currentStep: _angular_core.Signal<TourStepConfig | null>;
+    readonly stepShow$: Subject<TourStepConfig>;
+    readonly stepHide$: Subject<TourStepConfig>;
+    readonly start$: Subject<void>;
+    readonly end$: Subject<void>;
+    registerAnchor(id: string, anchor: any): void;
+    unregisterAnchor(id: string): void;
+    start(steps: TourStepConfig[]): void;
+    end(): Promise<void>;
+    next(): Promise<void>;
+    prev(): Promise<void>;
+    goToStep(index: number): Promise<void>;
+    private waitForElement;
+    showBackdrop(rect: DOMRect, borderRadius: string, viewContainerRef?: ViewContainerRef, anchorElement?: HTMLElement, padding?: number, disableInteraction?: boolean): void;
+    hideBackdrop(animate: boolean): Promise<void>;
+    private _showStep;
+    private showStepForElement;
+    private _getOffset;
+    private _hideStep;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TourService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TourService>;
+}
+
+declare class TourAnchorDirective implements OnInit, OnDestroy {
+    anchorId: _angular_core.InputSignal<string>;
+    private readonly elementRef;
+    private readonly tourService;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly customStepComponent;
+    private readonly config;
+    private overlayRef;
+    private componentRef;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    showStep(step: TourStepConfig): void;
+    hideStep(): Promise<void>;
+    private _getOffset;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TourAnchorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TourAnchorDirective, "[ngsTourAnchor]", never, { "anchorId": { "alias": "ngsTourAnchor"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TourStep {
+    readonly tourService: TourService;
+    private _sanitizer;
+    step: _angular_core.InputSignal<TourStepConfig>;
+    isFirst: _angular_core.InputSignal<boolean>;
+    isLast: _angular_core.InputSignal<boolean>;
+    position: _angular_core.InputSignal<ConnectedPosition | null>;
+    animateEnterClass: _angular_core.InputSignal<boolean>;
+    animateLeaveClass: _angular_core.InputSignal<boolean>;
+    readonly config: _ngstarter_ui_components_guided_tour.TourConfig | null;
+    protected readonly htmlContent: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    getArrowClasses(pos: ConnectedPosition | null): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TourStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TourStep, "ngs-tour-step", never, { "step": { "alias": "step"; "required": true; "isSignal": true; }; "isFirst": { "alias": "isFirst"; "required": false; "isSignal": true; }; "isLast": { "alias": "isLast"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "animateEnterClass": { "alias": "animateEnterClass"; "required": false; "isSignal": true; }; "animateLeaveClass": { "alias": "animateLeaveClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TOUR_CONFIG, TOUR_STEP_COMPONENT, TourAnchorDirective, TourService, TourState, TourStep, provideTourConfig };
+export type { TourConfig, TourStepConfig, TourStepPosition };

package/types/ngstarter-ui-components-headless-stepper.d.ts

@@ -0,0 +1,65 @@
+import * as _angular_core from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+
+declare class HeadlessStep {
+    /** Form control associated with this step */
+    stepControl: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
+    /** Whether the step is optional */
+    optional: _angular_core.InputSignal<boolean>;
+    /** Whether the user has interacted with this step (writable signal) */
+    readonly interacted: _angular_core.WritableSignal<boolean>;
+    /** Whether this step is currently active (writable signal, controlled by Stepper) */
+    readonly isActive: _angular_core.WritableSignal<boolean>;
+    /** Internal writable signal tracking the validity of the stepControl */
+    private readonly _isValid;
+    private _destroyRef;
+    constructor();
+    /** Computed signal indicating if the step is completed */
+    readonly completed: _angular_core.Signal<boolean>;
+    /**
+     * Checks if the step is currently valid.
+     * Considers the validity of the associated stepControl if provided.
+     * @returns boolean True if the step is valid, false otherwise.
+     */
+    isValid(): boolean;
+    /** Resets the step's interacted state */
+    reset(): void;
+    /** Sets the active state of the step */
+    setActive(active: boolean): void;
+    /** Sets the interacted state of the step */
+    setInteracted(interacted: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeadlessStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeadlessStep, "ngs-headless-step", ["ngsHeadlessStep"], { "stepControl": { "alias": "stepControl"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class HeadlessStepper {
+    /** Whether the stepper should operate in linear mode. */
+    readonly linear: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The index of the active step (two-way bound). */
+    readonly selectedIndex: _angular_core.ModelSignal<number>;
+    /** Collection of child StepComponent instances. */
+    readonly steps: _angular_core.Signal<readonly HeadlessStep[]>;
+    /** Computed signal for the total number of steps. */
+    readonly stepsCount: _angular_core.Signal<number>;
+    /** The currently selected StepComponent instance. */
+    readonly selected: _angular_core.Signal<HeadlessStep | undefined>;
+    /** Checks if the user can navigate to the next step. */
+    readonly canMoveNext: _angular_core.Signal<boolean>;
+    /** Computed signal indicating if the current step is the first step. */
+    readonly isFirstStep: _angular_core.Signal<boolean>;
+    /** Computed signal indicating if the current step is the last step. */
+    readonly isLastStep: _angular_core.Signal<boolean>;
+    /** Computed signal calculating the progress percentage. */
+    readonly progressPercent: _angular_core.Signal<number>;
+    constructor();
+    /** Navigates to the next step if possible. */
+    next(): void;
+    /** Navigates to the previous step if possible. */
+    previous(): void;
+    /** Resets the stepper to the first step. */
+    reset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeadlessStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeadlessStepper, "ngs-headless-stepper", ["ngsHeadlessStepper"], { "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["steps"], ["ngs-step"], true, never>;
+}
+
+export { HeadlessStep, HeadlessStepper };

package/types/ngstarter-ui-components-icon.d.ts

@@ -0,0 +1,17 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+declare class Icon implements OnInit, OnChanges {
+    private _sanitizer;
+    protected _iconHtml: _angular_core.WritableSignal<SafeHtml | null>;
+    name: _angular_core.InputSignal<string>;
+    private loaded;
+    ngOnInit(): Promise<void>;
+    ngOnChanges(changes: SimpleChanges): Promise<void>;
+    private _loadIcon;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Icon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Icon, "ngs-icon", ["ngsIcon"], { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Icon };

package/types/ngstarter-ui-components-image-designer.d.ts

@@ -0,0 +1,357 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, AfterViewInit, OnInit, ElementRef, InjectionToken } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { UploadFileSelectedEvent } from '@ngstarter-ui/components/upload';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { Portal } from '@angular/cdk/portal';
+import { HttpClient } from '@angular/common/http';
+
+interface PhotosGetRowsParams {
+    startRow: number;
+    endRow: number;
+    page: number;
+    pageSize: number;
+    filterModel: string;
+    successCallback(rowsThisBlock: any[], lastRow?: number): void;
+    failCallback(): void;
+}
+interface PhotosDataSource {
+    getItems(params: PhotosGetRowsParams): void;
+}
+interface AssetsGetRowsParams {
+    startRow: number;
+    endRow: number;
+    page: number;
+    pageSize: number;
+    filterModel: string;
+    successCallback(rowsThisBlock: any[], lastRow?: number): void;
+    failCallback(): void;
+}
+interface AssetsDataSource {
+    getItems(params: AssetsGetRowsParams): void;
+}
+interface ImageDesignerPhoto {
+    id: string;
+    name?: string;
+    width: number;
+    height: number;
+    url: string;
+    thumbUrl?: string;
+}
+interface PicsumImage {
+    id: string;
+    author?: string;
+    width: number;
+    height: number;
+    url: string;
+    download_url: string;
+}
+interface ImageSize {
+    width: number;
+    height: number;
+}
+interface ImagePreset {
+    name: string;
+    width: number;
+    height: number;
+    icon: string;
+}
+interface ImagePresetCategory {
+    name: string;
+    icon: string;
+    presets: ImagePreset[];
+}
+interface GradientConfig {
+    x0?: number;
+    y0?: number;
+    x1?: number;
+    y1?: number;
+    colorStops: (string | number)[];
+}
+interface LayerConfig {
+    id?: string;
+    type: 'text' | 'image' | 'shape' | 'pattern';
+    name?: string;
+    visible?: boolean;
+    locked?: boolean;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    fill?: string;
+    text?: string;
+    patternImage?: HTMLImageElement | string;
+    [key: string]: any;
+}
+interface ElementConfig {
+    name: string;
+    data: string;
+}
+interface ImageDesignerSnapshot {
+    version?: number;
+    imageSize: ImageSize;
+    layers: LayerConfig[];
+    background: string | any;
+    backgroundConfig?: GradientConfig;
+}
+type ImageDesignerUploadFn = (file: File) => string | ImageDesignerPhoto | Promise<string | ImageDesignerPhoto> | Observable<string | ImageDesignerPhoto>;
+
+declare class ImageDesignerService implements OnDestroy {
+    private stage;
+    private workspaceLayer;
+    private uiLayer;
+    private canvasRect;
+    private maskOverlay;
+    private resizeObserver;
+    private minScale;
+    private maxScale;
+    readonly scale: _angular_core.WritableSignal<number>;
+    readonly isInitialized: _angular_core.WritableSignal<boolean>;
+    private isBrowser;
+    private loadedFonts;
+    readonly fonts: _angular_core.WritableSignal<string[]>;
+    private readonly _layers;
+    readonly layers: _angular_core.Signal<LayerConfig[]>;
+    readonly selectedLayerId: _angular_core.WritableSignal<string | null>;
+    private readonly _change$;
+    readonly change$: rxjs.Observable<void>;
+    private undoStack;
+    private redoStack;
+    readonly canUndo: _angular_core.WritableSignal<boolean>;
+    readonly canRedo: _angular_core.WritableSignal<boolean>;
+    historyLimit: number;
+    private transformer;
+    private selectionRect;
+    private hoverRect;
+    private hoveredShape;
+    private selectionBordersGroup;
+    private selectionStartPos;
+    private isSelecting;
+    private isDragging;
+    private wasSelectedBeforeClick;
+    private snapLines;
+    private snapSettings;
+    private defaultFont;
+    ngOnDestroy(): void;
+    init(container: HTMLDivElement, imageSize: ImageSize, defaultFont?: string, scale?: number, minScale?: number, maxScale?: number): Promise<void>;
+    private handleGlobalMouseUp;
+    private handleGlobalMouseMove;
+    private makeTextEditable;
+    private setupSelectionListeners;
+    selectLayer(id: string | null): void;
+    private updateTransformer;
+    toggleLayerVisibility(id: string): void;
+    toggleLayerLock(id: string): void;
+    flipHorizontal(id: string): Promise<void>;
+    flipVertical(id: string): Promise<void>;
+    fitToPage(id: string): Promise<void>;
+    fillPage(id: string): Promise<void>;
+    deleteLayer(id: string): void;
+    deleteSelectedLayers(): void;
+    moveSelectedLayers(dx: number, dy: number): void;
+    private showHover;
+    private hideHover;
+    private updateSelectionBorders;
+    addLayer(config: LayerConfig, updateList?: boolean): Promise<string | undefined>;
+    private updateShapeOriginalPosition;
+    private updateShapesOriginalPositions;
+    private getNodesClientRect;
+    private getSnappingGuides;
+    private drawSnappingLines;
+    private clearSnapLines;
+    private consecutiveUpdatesCount;
+    private lastUpdateSizeTime;
+    private lastUpdateSizeDimensions;
+    private isSnapshotLoading;
+    private setupResizeObserver;
+    updateSize(container: HTMLDivElement, imageSize: ImageSize, fitToContainer?: boolean, notify?: boolean): void;
+    setScale(scale: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    setMinMaxScale(minScale: number, maxScale: number): void;
+    updateSnapSettings(settings: Partial<typeof this.snapSettings>): void;
+    setCanvasBackground(config: GradientConfig | string, notify?: boolean): void;
+    reorderLayers(previousIndex: number, currentIndex: number): void;
+    currentSnapshotVersion: number;
+    getSnapshot(): ImageDesignerSnapshot;
+    loadSnapshot(snapshot: ImageDesignerSnapshot, resetHistory?: boolean): Promise<void>;
+    loadAllFonts(): Promise<void>;
+    loadFont(fontFamily: string): Promise<void>;
+    getLayerThumbnail(id: string, effectId?: string): string | null;
+    updateLayer(id: string, config: Partial<LayerConfig>): Promise<void>;
+    getBase64Image(): string | undefined;
+    downloadImage(): void;
+    private notifyChange;
+    private saveHistory;
+    undo(): void;
+    redo(): void;
+    private updateHistorySignals;
+    resetHistory(): void;
+    private applyEffectsToShape;
+    destroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageDesignerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ImageDesignerService>;
+}
+
+declare class ImageDesigner implements AfterViewInit, OnDestroy, OnInit {
+    private readonly http;
+    private readonly destroyRef;
+    designerService: ImageDesignerService;
+    isBrowser: boolean;
+    readonly canvasContainer: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    title: _angular_core.InputSignal<string>;
+    imageSize: _angular_core.InputSignal<{
+        width: number;
+        height: number;
+    }>;
+    defaultFont: _angular_core.InputSignal<string>;
+    scale: _angular_core.InputSignal<number>;
+    minScale: _angular_core.InputSignal<number>;
+    maxScale: _angular_core.InputSignal<number>;
+    showGuidelines: _angular_core.InputSignal<boolean>;
+    snapToShapes: _angular_core.InputSignal<boolean>;
+    snapToStageCenter: _angular_core.InputSignal<boolean>;
+    snapToStageBorders: _angular_core.InputSignal<boolean>;
+    guidelineColor: _angular_core.InputSignal<string>;
+    snapRange: _angular_core.InputSignal<number>;
+    showDownloadButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    uploadFn: _angular_core.InputSignal<ImageDesignerUploadFn | undefined>;
+    snapshot: _angular_core.InputSignal<ImageDesignerSnapshot | undefined>;
+    snapshotChanged: _angular_core.OutputEmitterRef<ImageDesignerSnapshot>;
+    photosDataSource: _angular_core.InputSignal<PhotosDataSource | undefined>;
+    assetsDataSource: _angular_core.InputSignal<AssetsDataSource | undefined>;
+    historyLimit: _angular_core.InputSignalWithTransform<number, unknown>;
+    activeItemId: _angular_core.WritableSignal<string | null>;
+    elements: _angular_core.WritableSignal<ElementConfig[]>;
+    photos: _angular_core.WritableSignal<ImageDesignerPhoto[]>;
+    assets: _angular_core.WritableSignal<ImageDesignerPhoto[]>;
+    photosFilter: _angular_core.WritableSignal<string>;
+    assetsFilter: _angular_core.WritableSignal<string>;
+    uploadedImages: _angular_core.WritableSignal<ImageDesignerPhoto[]>;
+    isUploading: _angular_core.WritableSignal<boolean>;
+    uploadPreview: _angular_core.WritableSignal<string | null>;
+    photosPage: _angular_core.WritableSignal<number>;
+    assetsPage: _angular_core.WritableSignal<number>;
+    isLoadingPhotos: _angular_core.WritableSignal<boolean>;
+    isLoadingAssets: _angular_core.WritableSignal<boolean>;
+    hasMoreAssets: _angular_core.WritableSignal<boolean>;
+    hasMorePhotos: _angular_core.WritableSignal<boolean>;
+    resizeWidth: _angular_core.WritableSignal<number>;
+    resizeHeight: _angular_core.WritableSignal<number>;
+    resizeUnit: _angular_core.WritableSignal<string>;
+    presetCategories: _angular_core.WritableSignal<ImagePresetCategory[]>;
+    presetColors: _angular_core.WritableSignal<string[]>;
+    background: _angular_core.WritableSignal<never[]>;
+    resize: _angular_core.WritableSignal<never[]>;
+    displayScale: _angular_core.WritableSignal<number>;
+    zoomPercentage: _angular_core.Signal<string>;
+    layersFromService: _angular_core.Signal<LayerConfig[]>;
+    selectedLayerId: _angular_core.WritableSignal<string | null>;
+    presetPatterns: _angular_core.WritableSignal<string[]>;
+    presetGradients: _angular_core.Signal<{
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+        colorStops: (string | number)[];
+        css: string;
+    }[]>;
+    settingsPortal: _angular_core.WritableSignal<Portal<any> | null>;
+    effectsPortal: _angular_core.WritableSignal<Portal<any> | null>;
+    openEffects(): void;
+    constructor();
+    ngOnInit(): void;
+    onFileSelected(event: UploadFileSelectedEvent): void;
+    private fakeUpload;
+    private getImageDimensions;
+    addUploadedImage(photo: ImageDesignerPhoto, x?: number, y?: number): Promise<void>;
+    loadAssets(): void;
+    onAssetsScroll(event: any): void;
+    loadPhotos(): void;
+    private readonly defaultPhotosDataSource;
+    onPhotosScroll(event: Event): void;
+    addImage(photo: ImageDesignerPhoto, x?: number, y?: number): Promise<void>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    toggleAside(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    undo(): void;
+    redo(): void;
+    resetZoom(): void;
+    onWheel(event: WheelEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    selectLayer(id: string | null | undefined): void;
+    toggleLayerVisibility(id: string, event: MouseEvent): void;
+    toggleLayerLock(id: string, event: MouseEvent): void;
+    deleteLayer(id: string, event: MouseEvent): void;
+    onDragOver(event: DragEvent): void;
+    onTextDragStart(event: DragEvent, type: string): void;
+    onImageDragStart(event: DragEvent, photo: ImageDesignerPhoto | ElementConfig): void;
+    onDrop(event: DragEvent): void;
+    drop(event: CdkDragDrop<LayerConfig[]>): void;
+    download(): void;
+    getBase64Image(): string | undefined;
+    getLayerIcon(type: string | undefined): string;
+    selectedFontSize: _angular_core.WritableSignal<number>;
+    selectedFontWeight: _angular_core.WritableSignal<number>;
+    addHeader(x?: number, y?: number): Promise<void>;
+    addSubheader(x?: number, y?: number): Promise<void>;
+    addBodyText(x?: number, y?: number): Promise<void>;
+    addShape(shape: ElementConfig, x?: number, y?: number): Promise<void>;
+    setGradient(gradient: any): void;
+    setColor(color: string): void;
+    addPattern(url: string): Promise<void>;
+    applyResize(): void;
+    selectPreset(preset: {
+        width: number;
+        height: number;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageDesigner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageDesigner, "ngs-image-designer", ["ngsImageDesigner"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "imageSize": { "alias": "imageSize"; "required": false; "isSignal": true; }; "defaultFont": { "alias": "defaultFont"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "minScale": { "alias": "minScale"; "required": false; "isSignal": true; }; "maxScale": { "alias": "maxScale"; "required": false; "isSignal": true; }; "showGuidelines": { "alias": "showGuidelines"; "required": false; "isSignal": true; }; "snapToShapes": { "alias": "snapToShapes"; "required": false; "isSignal": true; }; "snapToStageCenter": { "alias": "snapToStageCenter"; "required": false; "isSignal": true; }; "snapToStageBorders": { "alias": "snapToStageBorders"; "required": false; "isSignal": true; }; "guidelineColor": { "alias": "guidelineColor"; "required": false; "isSignal": true; }; "snapRange": { "alias": "snapRange"; "required": false; "isSignal": true; }; "showDownloadButton": { "alias": "showDownloadButton"; "required": false; "isSignal": true; }; "uploadFn": { "alias": "uploadFn"; "required": false; "isSignal": true; }; "snapshot": { "alias": "snapshot"; "required": false; "isSignal": true; }; "photosDataSource": { "alias": "photosDataSource"; "required": false; "isSignal": true; }; "assetsDataSource": { "alias": "assetsDataSource"; "required": false; "isSignal": true; }; "historyLimit": { "alias": "historyLimit"; "required": false; "isSignal": true; }; }, { "snapshotChanged": "snapshotChanged"; }, never, never, true, never>;
+}
+
+declare const SVG_ELEMENTS: ElementConfig[];
+
+declare const SVG_PATTERNS: string[];
+
+declare const IMAGE_DESIGNER: InjectionToken<any>;
+
+declare class Settings {
+    private imageDesigner;
+    private designerService;
+    selectedLayerId: _angular_core.WritableSignal<string | null>;
+    layers: _angular_core.Signal<LayerConfig[]>;
+    fonts: _angular_core.WritableSignal<string[]>;
+    selectedLayer: _angular_core.Signal<LayerConfig | null>;
+    showColorPicker: _angular_core.Signal<boolean>;
+    presetColors: _angular_core.WritableSignal<string[]>;
+    fontWeightNames: Record<number, string>;
+    getFontWeightName(value: any): string;
+    updateOpacity(value: number): Promise<void>;
+    updateColor(color: string): Promise<void>;
+    updateFont(font: string): Promise<void>;
+    updateFontWeight(value: number): Promise<void>;
+    updateTextStyle(style: string[]): Promise<void>;
+    toggleUppercase(): Promise<void>;
+    updateTextAlign(align: string): Promise<void>;
+    updateLineHeight(value: number): Promise<void>;
+    updateLetterSpacing(value: number): Promise<void>;
+    getTextStyle: _angular_core.Signal<string[]>;
+    toggleLock(): void;
+    flipHorizontal(): Promise<void>;
+    flipVertical(): Promise<void>;
+    fitToPage(): Promise<void>;
+    fillPage(): Promise<void>;
+    saveSnapshot(): void;
+    loadSnapshot(event: Event): void;
+    openEffects(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Settings, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Settings, "ngs-settings", never, {}, {}, never, never, true, never>;
+}
+
+declare function createDefaultPhotosDataSource(http: HttpClient): PhotosDataSource;
+
+export { IMAGE_DESIGNER, ImageDesigner, ImageDesignerService, SVG_ELEMENTS, SVG_PATTERNS, Settings, createDefaultPhotosDataSource };
+export type { AssetsDataSource, AssetsGetRowsParams, ElementConfig, GradientConfig, ImageDesignerPhoto, ImageDesignerSnapshot, ImageDesignerUploadFn, ImagePreset, ImagePresetCategory, ImageSize, LayerConfig, PhotosDataSource, PhotosGetRowsParams, PicsumImage };

package/types/ngstarter-ui-components-image-placeholder.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class ImagePlaceholder {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImagePlaceholder, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImagePlaceholder, "ngs-image-placeholder", ["ngsImagePlaceholder"], {}, {}, never, never, true, never>;
+}
+
+export { ImagePlaceholder };