@vectoriox/iox-builder 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/types/vectoriox-iox-builder.d.ts

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { ComponentRef, Type, ChangeDetectorRef, OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ApplicationRef, SimpleChanges, ViewContainerRef, Injector, InjectionToken, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { Subject, Subscription, BehaviorSubject } from 'rxjs';
+import * as _vectoriox_iox_builder from '@vectoriox/iox-builder';
 import * as i20 from 'primeng/popover';
 import { Popover } from 'primeng/popover';
 import { ActivatedRoute } from '@angular/router';
@@ -293,6 +294,11 @@ interface ZoomOption {
     value: number | 'fit';
 }
 declare const ZOOM_OPTIONS: ZoomOption[];
+interface ScreenWidthOption {
+    label: string;
+    width: number;
+}
+declare const SCREEN_WIDTH_OPTIONS: ScreenWidthOption[];
 
 interface OverlayBoxSpacing {
     top: number;
@@ -558,6 +564,7 @@ declare class ViewportService {
     getScale(): number;
     setDevice(device: DeviceMode): void;
     setScale(scale: number): void;
+    setWidth(width: number): void;
     /**
      * Calculate the scale that makes the canvas fit inside the available editor width.
      * @param availableWidth The pixel width of the editor area that holds the canvas.
@@ -617,6 +624,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     builderModes: typeof BuilderMode;
     activeDevice: DeviceMode;
     activeZoom: number;
+    activeScreenWidth: number;
     selectedItem: ComponentNode | null;
     isDragging: boolean;
     scrollThumbTop: number;
@@ -643,6 +651,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     handleToolbarModeChange(mode: BuilderMode): void;
     handleToolbarDeviceChange(device: DeviceMode): void;
     handleToolbarZoomChange(value: number | 'fit'): void;
+    handleToolbarScreenWidthChange(width: number): void;
     get globalElementsBefore(): ComponentNode[];
     get globalElementsAfter(): ComponentNode[];
     /** Canvas width in CSS pixels (driven by ViewportService). */
@@ -877,6 +886,7 @@ declare class ToolbarComponent {
     activeMode: BuilderMode;
     activeDevice: DeviceMode;
     activeZoom: number;
+    activeScreenWidth: number;
     canUndo: boolean;
     canRedo: boolean;
     isSaving: boolean;
@@ -884,6 +894,7 @@ declare class ToolbarComponent {
     modeChange: EventEmitter<BuilderMode>;
     deviceChange: EventEmitter<DeviceMode>;
     zoomChange: EventEmitter<number | "fit">;
+    screenWidthChange: EventEmitter<number>;
     undo: EventEmitter<void>;
     redo: EventEmitter<void>;
     save: EventEmitter<void>;
@@ -893,21 +904,28 @@ declare class ToolbarComponent {
     modePopover: Popover;
     devicePopover: Popover;
     zoomPopover: Popover;
+    widthPopover: Popover;
     modes: typeof BuilderMode;
+    deviceModes: typeof DeviceMode;
     deviceOptions: DeviceOption[];
-    zoomOptions: ZoomOption[];
+    zoomOptions: _vectoriox_iox_builder.ZoomOption[];
+    screenWidthOptions: ScreenWidthOption[];
     get activeModeIcon(): string;
     get activeModeLabel(): string;
     get activeDeviceOption(): DeviceOption;
     get zoomLabel(): string;
+    get sliderZoom(): number;
     toggleModePopover(event: Event): void;
     selectMode(mode: BuilderMode): void;
     toggleDevicePopover(event: Event): void;
     selectDevice(mode: DeviceMode): void;
+    onSliderChange(event: Event): void;
+    toggleWidthPopover(event: Event): void;
+    selectScreenWidth(width: number): void;
     toggleZoomPopover(event: Event): void;
     selectZoom(value: number | 'fit'): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "app-toolbar", never, { "activeMode": { "alias": "activeMode"; "required": false; }; "activeDevice": { "alias": "activeDevice"; "required": false; }; "activeZoom": { "alias": "activeZoom"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; }, { "modeChange": "modeChange"; "deviceChange": "deviceChange"; "zoomChange": "zoomChange"; "undo": "undo"; "redo": "redo"; "save": "save"; "preview": "preview"; "publishToggle": "publishToggle"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "app-toolbar", never, { "activeMode": { "alias": "activeMode"; "required": false; }; "activeDevice": { "alias": "activeDevice"; "required": false; }; "activeZoom": { "alias": "activeZoom"; "required": false; }; "activeScreenWidth": { "alias": "activeScreenWidth"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; }, { "modeChange": "modeChange"; "deviceChange": "deviceChange"; "zoomChange": "zoomChange"; "screenWidthChange": "screenWidthChange"; "undo": "undo"; "redo": "redo"; "save": "save"; "preview": "preview"; "publishToggle": "publishToggle"; }, never, never, false, never>;
 }
 
 declare class SectionComponent implements OnInit, OnDestroy {
@@ -1221,5 +1239,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
-export type { ComponentNode, ComponentTrait, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, InteractionAction, InteractionActionType, InteractionTrigger, IoxBinding, IoxContentService, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export type { ComponentNode, ComponentTrait, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, InteractionAction, InteractionActionType, InteractionTrigger, IoxBinding, IoxContentService, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, ViewportState, ZoomOption };