npm - @acorex/components - Versions diffs - 21.0.2-next.23 → 21.0.2-next.25 - Mend

@acorex/components 21.0.2-next.23 → 21.0.2-next.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (340) hide show

package/fesm2022/acorex-components-fab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-fab.mjs","sources":["../tmp-esm2022/fab/lib/fab.component.js","../tmp-esm2022/fab/lib/fab-item/fab-item.component.js","../tmp-esm2022/fab/acorex-components-fab.js"],"sourcesContent":["import { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';\nimport { ChangeDetectionStrategy, Component, effect, input, model, output, signal, viewChild, ViewEncapsulation, } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@acorex/components/popover\";\nexport class AXFabComponent {\n constructor() {\n this.label = input(null, ...(ngDevMode ? [{ debugName: \"label\" }] : []));\n this.popupStyle = input('bubble', ...(ngDevMode ? [{ debugName: \"popupStyle\" }] : []));\n this.popupPlacement = model(null, ...(ngDevMode ? [{ debugName: \"popupPlacement\" }] : []));\n this.size = input('md', ...(ngDevMode ? [{ debugName: \"size\" }] : []));\n this.popoverRef = viewChild(AXPopoverComponent, ...(ngDevMode ? [{ debugName: \"popoverRef\" }] : []));\n this.offsetPopover = signal(null, ...(ngDevMode ? [{ debugName: \"offsetPopover\" }] : []));\n this.#eff = effect(() => {\n if (this.popupStyle() === 'box') {\n this.popupPlacement.set('top-end');\n this.offsetPopover.set(-10);\n }\n else {\n this.popupPlacement.set('top');\n this.offsetPopover.set(-2);\n }\n }, ...(ngDevMode ? [{ debugName: \"#eff\" }] : []));\n /*\n Fires each time the user clicks the button.\n * @event\n /\n this.onClick = output();\n /\n Emits when the popover is opened.\n * @event\n /\n this.onOpened = output();\n /\n Emits when the popover is closed.\n * @event\n /\n this.onClosed = output();\n }\n #eff;\n addStyleClass() {\n const fabItemContainer = document.querySelector('.ax-fab-item-container');\n if (!fabItemContainer)\n return;\n if (this.popupStyle() === 'box') {\n fabItemContainer.classList.add('ax-fab-box-style');\n }\n else {\n fabItemContainer.classList.add('ax-fab-bubble-style');\n }\n }\n openPopover() {\n this.addStyleClass();\n this.onOpened.emit({ component: this });\n }\n closePopover() {\n this.onClosed.emit({ component: this });\n }\n close() {\n this.popoverRef().close();\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.2.0\", version: \"20.3.3\", type: AXFabComponent, isStandalone: true, selector: \"ax-fab\", inputs: { label: { classPropertyName: \"label\", publicName: \"label\", isSignal: true, isRequired: false, transformFunction: null }, popupStyle: { classPropertyName: \"popupStyle\", publicName: \"popupStyle\", isSignal: true, isRequired: false, transformFunction: null }, popupPlacement: { classPropertyName: \"popupPlacement\", publicName: \"popupPlacement\", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: \"size\", publicName: \"size\", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popupPlacement: \"popupPlacementChange\", onClick: \"onClick\", onOpened: \"onOpened\", onClosed: \"onClosed\" }, viewQueries: [{ propertyName: \"popoverRef\", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: \"<ax-button class=\\\"ax-{{ size() }}\\\" #btn (onClick)=\\\"onClick.emit($event)\\\" color=\\\"primary\\\" look=\\\"solid\\\" [text]=\\\"label()\\\">\\n <ng-content select=\\\"ax-icon\\\"> </ng-content>\\n</ax-button>\\n\\n<ax-popover\\n (onOpened)=\\\"openPopover()\\\"\\n (onClosed)=\\\"closePopover()\\\"\\n [disablePanelClass]=\\\"true\\\"\\n [offsetY]=\\\"offsetPopover()\\\"\\n [placement]=\\\"popupPlacement()\\\"\\n [target]=\\\"btn\\\"\\n>\\n <div class=\\\"ax-fab-item-container\\\">\\n <ng-content select=\\\"ax-fab-item\\\"> </ng-content>\\n </div>\\n</ax-popover>\\n\", styles: [\"ax-fab ax-button{border-radius:1000vmax}.ax-fab-item-container{display:flex;flex-direction:column;gap:.25rem;padding-block:.5rem}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}.ax-fab-item-container ax-text{font-weight:500;font-size:.875rem;line-height:1.25rem}.ax-fab-item-container .ax-fab-box{padding:.25rem .875rem;display:flex;align-items:center;gap:.5rem;min-width:10rem}.ax-fab-item-container .ax-fab-box:hover{background-color:rgba(var(--ax-sys-color-surface));cursor:pointer}\\n\"], dependencies: [{ kind: \"component\", type: AXButtonComponent, selector: \"ax-button\", inputs: [\"disabled\", \"size\", \"tabIndex\", \"color\", \"look\", \"text\", \"toggleable\", \"selected\", \"iconOnly\", \"type\", \"loadingText\"], outputs: [\"onBlur\", \"onFocus\", \"onClick\", \"selectedChange\", \"toggleableChange\", \"lookChange\", \"colorChange\", \"disabledChange\", \"loadingTextChange\"] }, { kind: \"ngmodule\", type: AXPopoverModule }, { kind: \"component\", type: i1.AXPopoverComponent, selector: \"ax-popover\", inputs: [\"width\", \"disablePanelClass\", \"disabled\", \"offsetX\", \"offsetY\", \"target\", \"placement\", \"content\", \"openOn\", \"closeOn\", \"hasBackdrop\", \"openAfter\", \"closeAfter\", \"closeOnScroll\", \"backdropClass\", \"panelClass\", \"adaptivityEnabled\"], outputs: [\"onOpened\", \"onClosed\"] }, { kind: \"ngmodule\", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXFabComponent, decorators: [{\n type: Component,\n args: [{ selector: 'ax-fab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonComponent, AXPopoverModule, AXDecoratorModule], template: \"<ax-button class=\\\"ax-{{ size() }}\\\" #btn (onClick)=\\\"onClick.emit($event)\\\" color=\\\"primary\\\" look=\\\"solid\\\" [text]=\\\"label()\\\">\\n <ng-content select=\\\"ax-icon\\\"> </ng-content>\\n</ax-button>\\n\\n<ax-popover\\n (onOpened)=\\\"openPopover()\\\"\\n (onClosed)=\\\"closePopover()\\\"\\n [disablePanelClass]=\\\"true\\\"\\n [offsetY]=\\\"offsetPopover()\\\"\\n [placement]=\\\"popupPlacement()\\\"\\n [target]=\\\"btn\\\"\\n>\\n <div class=\\\"ax-fab-item-container\\\">\\n <ng-content select=\\\"ax-fab-item\\\"> </ng-content>\\n </div>\\n</ax-popover>\\n\", styles: [\"ax-fab ax-button{border-radius:1000vmax}.ax-fab-item-container{display:flex;flex-direction:column;gap:.25rem;padding-block:.5rem}.ax-fab-item-container.ax-fab-box-style{background-color:rgba(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.ax-fab-item-container ax-popover{display:none}.ax-fab-item-container ax-button{border-radius:1000vmax}.ax-fab-item-container ax-text{font-weight:500;font-size:.875rem;line-height:1.25rem}.ax-fab-item-container .ax-fab-box{padding:.25rem .875rem;display:flex;align-items:center;gap:.5rem;min-width:10rem}.ax-fab-item-container .ax-fab-box:hover{background-color:rgba(var(--ax-sys-color-surface));cursor:pointer}\\n\"] }]\n }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvZmFiL3NyYy9saWIvZmFiLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvZmFiL3NyYy9saWIvZmFiLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzlELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNqRixPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxNQUFNLEVBQ04sS0FBSyxFQUNMLEtBQUssRUFDTCxNQUFNLEVBQ04sTUFBTSxFQUNOLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7OztBQVV2QixNQUFNLE9BQU8sY0FBYztJQVIzQjtRQVNFLFVBQUssR0FBRyxLQUFLLENBQVMsSUFBSSxpREFBQyxDQUFDO1FBRTVCLGVBQVUsR0FBRyxLQUFLLENBQW1CLFFBQVEsc0RBQUMsQ0FBQztRQUUvQyxtQkFBYyxHQUFHLEtBQUssQ0FBa0IsSUFBSSwwREFBQyxDQUFDO1FBRTlDLFNBQUksR0FBRyxLQUFLLENBQW1DLElBQUksZ0RBQUMsQ0FBQztRQUUzQyxlQUFVLEdBQUcsU0FBUyxDQUFDLGtCQUFrQixzREFBQyxDQUFDO1FBRTNDLGtCQUFhLEdBQUcsTUFBTSxDQUFTLElBQUkseURBQUMsQ0FBQztRQUUvQyxTQUFJLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUNqQixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxLQUFLLEVBQUUsQ0FBQztnQkFDaEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7Z0JBQ25DLElBQUksQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDOUIsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUMvQixJQUFJLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzdCLENBQUM7UUFDSCxDQUFDLGdEQUFDLENBQUM7UUFFSDs7O1dBR0c7UUFDSCxZQUFPLEdBQUcsTUFBTSxFQUFnQixDQUFDO1FBRWpDOzs7V0FHRztRQUNILGFBQVEsR0FBRyxNQUFNLEVBQVcsQ0FBQztRQUU3Qjs7O1dBR0c7UUFDSCxhQUFRLEdBQUcsTUFBTSxFQUFXLENBQUM7S0F3QjlCO0lBbERDLElBQUksQ0FRRDtJQW9CSyxhQUFhO1FBQ25CLE1BQU0sZ0JBQWdCLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBQzFFLElBQUksQ0FBQyxnQkFBZ0I7WUFBRSxPQUFPO1FBQzlCLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxLQUFLLEtBQUssRUFBRSxDQUFDO1lBQ2hDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNyRCxDQUFDO2FBQU0sQ0FBQztZQUNOLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUN4RCxDQUFDO0lBQ0gsQ0FBQztJQUVTLFdBQVc7UUFDbkIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUVTLFlBQVk7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRU0sS0FBSztRQUNWLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUM1QixDQUFDOzhHQTlEVSxjQUFjO2tHQUFkLGNBQWMsc3ZCQVNRLGtCQUFrQixnRUNqQ3JELHlnQkFnQkEseXlCRE1ZLGlCQUFpQiwwVUFBRSxlQUFlLDZYQUFFLGlCQUFpQjs7MkZBRXBELGNBQWM7a0JBUjFCLFNBQVM7K0JBQ0UsUUFBUSxpQkFHSCxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsaUJBQWlCLEVBQUUsZUFBZSxFQUFFLGlCQUFpQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDbGlja0V2ZW50LCBBWEV2ZW50LCBBWFBsYWNlbWVudFR5cGUgfSBmcm9tICdAYWNvcmV4L2Nkay9jb21tb24nO1xuaW1wb3J0IHsgQVhCdXR0b25Db21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvYnV0dG9uJztcbmltcG9ydCB7IEFYRGVjb3JhdG9yTW9kdWxlIH0gZnJvbSAnQGFjb3JleC9jb21wb25lbnRzL2RlY29yYXRvcnMnO1xuaW1wb3J0IHsgQVhQb3BvdmVyQ29tcG9uZW50LCBBWFBvcG92ZXJNb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvcG9wb3Zlcic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBlZmZlY3QsXG4gIGlucHV0LFxuICBtb2RlbCxcbiAgb3V0cHV0LFxuICBzaWduYWwsXG4gIHZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1mYWInLFxuICB0ZW1wbGF0ZVVybDogJy4vZmFiLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZmFiLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbQVhCdXR0b25Db21wb25lbnQsIEFYUG9wb3Zlck1vZHVsZSwgQVhEZWNvcmF0b3JNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBBWEZhYkNvbXBvbmVudCB7XG4gIGxhYmVsID0gaW5wdXQ8c3RyaW5nPihudWxsKTtcblxuICBwb3B1cFN0eWxlID0gaW5wdXQ8J2J1YmJsZScgfCAnYm94Jz4oJ2J1YmJsZScpO1xuXG4gIHBvcHVwUGxhY2VtZW50ID0gbW9kZWw8QVhQbGFjZW1lbnRUeXBlPihudWxsKTtcblxuICBzaXplID0gaW5wdXQ8J3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCc+KCdtZCcpO1xuXG4gIHByb3RlY3RlZCBwb3BvdmVyUmVmID0gdmlld0NoaWxkKEFYUG9wb3ZlckNvbXBvbmVudCk7XG5cbiAgcHJvdGVjdGVkIG9mZnNldFBvcG92ZXIgPSBzaWduYWw8bnVtYmVyPihudWxsKTtcblxuICAjZWZmID0gZWZmZWN0KCgpID0+IHtcbiAgICBpZiAodGhpcy5wb3B1cFN0eWxlKCkgPT09ICdib3gnKSB7XG4gICAgICB0aGlzLnBvcHVwUGxhY2VtZW50LnNldCgndG9wLWVuZCcpO1xuICAgICAgdGhpcy5vZmZzZXRQb3BvdmVyLnNldCgtMTApO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnBvcHVwUGxhY2VtZW50LnNldCgndG9wJyk7XG4gICAgICB0aGlzLm9mZnNldFBvcG92ZXIuc2V0KC0yKTtcbiAgICB9XG4gIH0pO1xuXG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSB1c2VyIGNsaWNrcyB0aGUgYnV0dG9uLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkNsaWNrID0gb3V0cHV0PEFYQ2xpY2tFdmVudD4oKTtcblxuICAvKipcbiAgICogRW1pdHMgd2hlbiB0aGUgcG9wb3ZlciBpcyBvcGVuZWQuXG4gICAqIEBldmVudFxuICAgKi9cbiAgb25PcGVuZWQgPSBvdXRwdXQ8QVhFdmVudD4oKTtcblxuICAvKipcbiAgICogRW1pdHMgd2hlbiB0aGUgcG9wb3ZlciBpcyBjbG9zZWQuXG4gICAqIEBldmVudFxuICAgKi9cbiAgb25DbG9zZWQgPSBvdXRwdXQ8QVhFdmVudD4oKTtcblxuICBwcml2YXRlIGFkZFN0eWxlQ2xhc3MoKSB7XG4gICAgY29uc3QgZmFiSXRlbUNvbnRhaW5lciA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5heC1mYWItaXRlbS1jb250YWluZXInKTtcbiAgICBpZiAoIWZhYkl0ZW1Db250YWluZXIpIHJldHVybjtcbiAgICBpZiAodGhpcy5wb3B1cFN0eWxlKCkgPT09ICdib3gnKSB7XG4gICAgICBmYWJJdGVtQ29udGFpbmVyLmNsYXNzTGlzdC5hZGQoJ2F4LWZhYi1ib3gtc3R5bGUnKTtcbiAgICB9IGVsc2Uge1xuICAgICAgZmFiSXRlbUNvbnRhaW5lci5jbGFzc0xpc3QuYWRkKCdheC1mYWItYnViYmxlLXN0eWxlJyk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG9wZW5Qb3BvdmVyKCkge1xuICAgIHRoaXMuYWRkU3R5bGVDbGFzcygpO1xuICAgIHRoaXMub25PcGVuZWQuZW1pdCh7IGNvbXBvbmVudDogdGhpcyB9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBjbG9zZVBvcG92ZXIoKSB7XG4gICAgdGhpcy5vbkNsb3NlZC5lbWl0KHsgY29tcG9uZW50OiB0aGlzIH0pO1xuICB9XG5cbiAgcHVibGljIGNsb3NlKCkge1xuICAgIHRoaXMucG9wb3ZlclJlZigpLmNsb3NlKCk7XG4gIH1cbn1cbiIsIjxheC1idXR0b24gY2xhc3M9XCJheC17eyBzaXplKCkgfX1cIiAjYnRuIChvbkNsaWNrKT1cIm9uQ2xpY2suZW1pdCgkZXZlbnQpXCIgY29sb3I9XCJwcmltYXJ5XCIgbG9vaz1cInNvbGlkXCIgW3RleHRdPVwibGFiZWwoKVwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1pY29uXCI+IDwvbmctY29udGVudD5cbjwvYXgtYnV0dG9uPlxuXG48YXgtcG9wb3ZlclxuICAob25PcGVuZWQpPVwib3BlblBvcG92ZXIoKVwiXG4gIChvbkNsb3NlZCk9XCJjbG9zZVBvcG92ZXIoKVwiXG4gIFtkaXNhYmxlUGFuZWxDbGFzc109XCJ0cnVlXCJcbiAgW29mZnNldFldPVwib2Zmc2V0UG9wb3ZlcigpXCJcbiAgW3BsYWNlbWVudF09XCJwb3B1cFBsYWNlbWVudCgpXCJcbiAgW3RhcmdldF09XCJidG5cIlxuPlxuICA8ZGl2IGNsYXNzPVwiYXgtZmFiLWl0ZW0tY29udGFpbmVyXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtZmFiLWl0ZW1cIj4gPC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvYXgtcG9wb3Zlcj5cbiJdfQ==","import { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, output, ViewEncapsulation } from '@angular/core';\nimport { AXFabComponent } from '../fab.component';\nimport as i0 from \"@angular/core\";\nimport * as i1 from \"@acorex/components/decorators\";\nexport class AXFabItemComponent {\n constructor() {\n this.label = input(null, ...(ngDevMode ? [{ debugName: \"label\" }] : []));\n this.parent = inject(AXFabComponent);\n this.buttonSize = computed(() => {\n switch (this.parent.size()) {\n case 'xl':\n return 'lg';\n case 'lg':\n return 'md';\n case 'md':\n return 'sm';\n case 'sm':\n return 'xs';\n case 'xs':\n return 'xs';\n }\n }, ...(ngDevMode ? [{ debugName: \"buttonSize\" }] : []));\n /*\n Fires each time the user clicks the button.\n * @event\n /\n this.onClick = output();\n }\n clickHandler() {\n this.onClick.emit({ component: this });\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXFabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.3.3\", type: AXFabItemComponent, isStandalone: true, selector: \"ax-fab-item\", inputs: { label: { classPropertyName: \"label\", publicName: \"label\", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: \"onClick\" }, ngImport: i0, template: \"<ng-template #iconTpl>\\n <ng-content select=\\\"ax-icon\\\"></ng-content>\\n</ng-template>\\n\\n@if (parent.popupStyle() === 'bubble') {\\n <ax-button class=\\\"ax-{{ buttonSize() }}\\\" [text]=\\\"label()\\\" (onClick)=\\\"clickHandler()\\\">\\n <ng-container ngTemplateOutlet=\\\"iconTpl\\\"></ng-container>\\n </ax-button>\\n} @else {\\n <button (click)=\\\"clickHandler()\\\" class=\\\"ax-fab-box\\\">\\n <ng-container ngTemplateOutlet=\\\"iconTpl\\\"></ng-container>\\n <ax-text> {{ label() }}</ax-text>\\n </button>\\n}\\n\", dependencies: [{ kind: \"component\", type: AXButtonComponent, selector: \"ax-button\", inputs: [\"disabled\", \"size\", \"tabIndex\", \"color\", \"look\", \"text\", \"toggleable\", \"selected\", \"iconOnly\", \"type\", \"loadingText\"], outputs: [\"onBlur\", \"onFocus\", \"onClick\", \"selectedChange\", \"toggleableChange\", \"lookChange\", \"colorChange\", \"disabledChange\", \"loadingTextChange\"] }, { kind: \"ngmodule\", type: AXDecoratorModule }, { kind: \"component\", type: i1.AXDecoratorGenericComponent, selector: \"ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay\" }, { kind: \"directive\", type: NgTemplateOutlet, selector: \"[ngTemplateOutlet]\", inputs: [\"ngTemplateOutletContext\", \"ngTemplateOutlet\", \"ngTemplateOutletInjector\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXFabItemComponent, decorators: [{\n type: Component,\n args: [{ selector: 'ax-fab-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonComponent, AXDecoratorModule, NgTemplateOutlet], template: \"<ng-template #iconTpl>\\n <ng-content select=\\\"ax-icon\\\"></ng-content>\\n</ng-template>\\n\\n@if (parent.popupStyle() === 'bubble') {\\n <ax-button class=\\\"ax-{{ buttonSize() }}\\\" [text]=\\\"label()\\\" (onClick)=\\\"clickHandler()\\\">\\n <ng-container ngTemplateOutlet=\\\"iconTpl\\\"></ng-container>\\n </ax-button>\\n} @else {\\n <button (click)=\\\"clickHandler()\\\" class=\\\"ax-fab-box\\\">\\n <ng-container ngTemplateOutlet=\\\"iconTpl\\\"></ng-container>\\n <ax-text> {{ label() }}</ax-text>\\n </button>\\n}\\n\" }]\n }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFiLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9mYWIvc3JjL2xpYi9mYWItaXRlbS9mYWItaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2ZhYi9zcmMvbGliL2ZhYi1pdGVtL2ZhYi1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzlELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZILE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBU2xELE1BQU0sT0FBTyxrQkFBa0I7SUFQL0I7UUFRRSxVQUFLLEdBQUcsS0FBSyxDQUFTLElBQUksaURBQUMsQ0FBQztRQUVsQixXQUFNLEdBQUcsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBRWhDLGVBQVUsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ25DLFFBQVEsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDO2dCQUMzQixLQUFLLElBQUk7b0JBQ1AsT0FBTyxJQUFJLENBQUM7Z0JBQ2QsS0FBSyxJQUFJO29CQUNQLE9BQU8sSUFBSSxDQUFDO2dCQUNkLEtBQUssSUFBSTtvQkFDUCxPQUFPLElBQUksQ0FBQztnQkFDZCxLQUFLLElBQUk7b0JBQ1AsT0FBTyxJQUFJLENBQUM7Z0JBQ2QsS0FBSyxJQUFJO29CQUNQLE9BQU8sSUFBSSxDQUFDO1lBQ2hCLENBQUM7UUFDSCxDQUFDLHNEQUFDLENBQUM7UUFFSDs7O1dBR0c7UUFDSCxZQUFPLEdBQUcsTUFBTSxFQUFnQixDQUFDO0tBS2xDO0lBSFcsWUFBWTtRQUNwQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7OEdBNUJVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLDRPQ2QvQixxZkFjQSw0Q0RGWSxpQkFBaUIsMFVBQUUsaUJBQWlCLHNQQUFFLGdCQUFnQjs7MkZBRXJELGtCQUFrQjtrQkFQOUIsU0FBUzsrQkFDRSxhQUFhLGlCQUVSLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxpQkFBaUIsRUFBRSxpQkFBaUIsRUFBRSxnQkFBZ0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ2xpY2tFdmVudCB9IGZyb20gJ0BhY29yZXgvY2RrL2NvbW1vbic7XG5pbXBvcnQgeyBBWEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHsgQVhEZWNvcmF0b3JNb2R1bGUgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvZGVjb3JhdG9ycyc7XG5pbXBvcnQgeyBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbmplY3QsIGlucHV0LCBvdXRwdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBWEZhYkNvbXBvbmVudCB9IGZyb20gJy4uL2ZhYi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1mYWItaXRlbScsXG4gIHRlbXBsYXRlVXJsOiAnLi9mYWItaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbQVhCdXR0b25Db21wb25lbnQsIEFYRGVjb3JhdG9yTW9kdWxlLCBOZ1RlbXBsYXRlT3V0bGV0XSxcbn0pXG5leHBvcnQgY2xhc3MgQVhGYWJJdGVtQ29tcG9uZW50IHtcbiAgbGFiZWwgPSBpbnB1dDxzdHJpbmc+KG51bGwpO1xuXG4gIHByb3RlY3RlZCBwYXJlbnQgPSBpbmplY3QoQVhGYWJDb21wb25lbnQpO1xuXG4gIHByb3RlY3RlZCBidXR0b25TaXplID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIHN3aXRjaCAodGhpcy5wYXJlbnQuc2l6ZSgpKSB7XG4gICAgICBjYXNlICd4bCc6XG4gICAgICAgIHJldHVybiAnbGcnO1xuICAgICAgY2FzZSAnbGcnOlxuICAgICAgICByZXR1cm4gJ21kJztcbiAgICAgIGNhc2UgJ21kJzpcbiAgICAgICAgcmV0dXJuICdzbSc7XG4gICAgICBjYXNlICdzbSc6XG4gICAgICAgIHJldHVybiAneHMnO1xuICAgICAgY2FzZSAneHMnOlxuICAgICAgICByZXR1cm4gJ3hzJztcbiAgICB9XG4gIH0pO1xuXG4gIC8qKlxuICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSB1c2VyIGNsaWNrcyB0aGUgYnV0dG9uLlxuICAgKiAgQGV2ZW50XG4gICAqL1xuICBvbkNsaWNrID0gb3V0cHV0PEFYQ2xpY2tFdmVudD4oKTtcblxuICBwcm90ZWN0ZWQgY2xpY2tIYW5kbGVyKCkge1xuICAgIHRoaXMub25DbGljay5lbWl0KHsgY29tcG9uZW50OiB0aGlzIH0pO1xuICB9XG59XG4iLCI8bmctdGVtcGxhdGUgI2ljb25UcGw+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LWljb25cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG5AaWYgKHBhcmVudC5wb3B1cFN0eWxlKCkgPT09ICdidWJibGUnKSB7XG4gIDxheC1idXR0b24gY2xhc3M9XCJheC17eyBidXR0b25TaXplKCkgfX1cIiBbdGV4dF09XCJsYWJlbCgpXCIgKG9uQ2xpY2spPVwiY2xpY2tIYW5kbGVyKClcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaWNvblRwbFwiPjwvbmctY29udGFpbmVyPlxuICA8L2F4LWJ1dHRvbj5cbn0gQGVsc2Uge1xuICA8YnV0dG9uIChjbGljayk9XCJjbGlja0hhbmRsZXIoKVwiIGNsYXNzPVwiYXgtZmFiLWJveFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpY29uVHBsXCI+PC9uZy1jb250YWluZXI+XG4gICAgPGF4LXRleHQ+IHt7IGxhYmVsKCkgfX08L2F4LXRleHQ+XG4gIDwvYnV0dG9uPlxufVxuIl19","/\n Generated bundle index. Do not edit.\n /\nexport from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMtZmFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9mYWIvc3JjL2Fjb3JleC1jb21wb25lbnRzLWZhYi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":["i1"],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-fab.mjs","sources":["../../../../packages/components/fab/src/lib/fab.component.ts","../../../../packages/components/fab/src/lib/fab.component.html","../../../../packages/components/fab/src/lib/fab-item/fab-item.component.ts","../../../../packages/components/fab/src/lib/fab-item/fab-item.component.html","../../../../packages/components/fab/src/acorex-components-fab.ts"],"sourcesContent":["import { AXClickEvent, AXEvent, AXPlacementType } from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n model,\n output,\n signal,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\n@Component({\n selector: 'ax-fab',\n templateUrl: './fab.component.html',\n styleUrls: ['./fab.component.compiled.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [AXButtonComponent, AXPopoverModule, AXDecoratorModule],\n})\nexport class AXFabComponent {\n label = input<string>(null);\n\n popupStyle = input<'bubble' \| 'box'>('bubble');\n\n popupPlacement = model<AXPlacementType>(null);\n\n size = input<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'>('md');\n\n protected popoverRef = viewChild(AXPopoverComponent);\n\n protected offsetPopover = signal<number>(null);\n\n #eff = effect(() => {\n if (this.popupStyle() === 'box') {\n this.popupPlacement.set('top-end');\n this.offsetPopover.set(-10);\n } else {\n this.popupPlacement.set('top');\n this.offsetPopover.set(-2);\n }\n });\n\n /*\n Fires each time the user clicks the button.\n * @event\n /\n onClick = output<AXClickEvent>();\n\n /\n Emits when the popover is opened.\n * @event\n /\n onOpened = output<AXEvent>();\n\n /\n Emits when the popover is closed.\n * @event\n /\n onClosed = output<AXEvent>();\n\n private addStyleClass() {\n const fabItemContainer = document.querySelector('.ax-fab-item-container');\n if (!fabItemContainer) return;\n if (this.popupStyle() === 'box') {\n fabItemContainer.classList.add('ax-fab-box-style');\n } else {\n fabItemContainer.classList.add('ax-fab-bubble-style');\n }\n }\n\n protected openPopover() {\n this.addStyleClass();\n this.onOpened.emit({ component: this });\n }\n\n protected closePopover() {\n this.onClosed.emit({ component: this });\n }\n\n public close() {\n this.popoverRef().close();\n }\n}\n","<ax-button class=\"ax-{{ size() }}\" #btn (onClick)=\"onClick.emit($event)\" color=\"primary\" look=\"solid\" [text]=\"label()\">\n <ng-content select=\"ax-icon\"> </ng-content>\n</ax-button>\n\n<ax-popover\n (onOpened)=\"openPopover()\"\n (onClosed)=\"closePopover()\"\n [disablePanelClass]=\"true\"\n [offsetY]=\"offsetPopover()\"\n [placement]=\"popupPlacement()\"\n [target]=\"btn\"\n>\n <div class=\"ax-fab-item-container\">\n <ng-content select=\"ax-fab-item\"> </ng-content>\n </div>\n</ax-popover>\n","import { AXClickEvent } from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, output, ViewEncapsulation } from '@angular/core';\nimport { AXFabComponent } from '../fab.component';\n\n@Component({\n selector: 'ax-fab-item',\n templateUrl: './fab-item.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [AXButtonComponent, AXDecoratorModule, NgTemplateOutlet],\n})\nexport class AXFabItemComponent {\n label = input<string>(null);\n\n protected parent = inject(AXFabComponent);\n\n protected buttonSize = computed(() => {\n switch (this.parent.size()) {\n case 'xl':\n return 'lg';\n case 'lg':\n return 'md';\n case 'md':\n return 'sm';\n case 'sm':\n return 'xs';\n case 'xs':\n return 'xs';\n }\n });\n\n /\n Fires each time the user clicks the button.\n * @event\n /\n onClick = output<AXClickEvent>();\n\n protected clickHandler() {\n this.onClick.emit({ component: this });\n }\n}\n","<ng-template #iconTpl>\n <ng-content select=\"ax-icon\"></ng-content>\n</ng-template>\n\n@if (parent.popupStyle() === 'bubble') {\n <ax-button class=\"ax-{{ buttonSize() }}\" [text]=\"label()\" (onClick)=\"clickHandler()\">\n <ng-container ngTemplateOutlet=\"iconTpl\"></ng-container>\n </ax-button>\n} @else {\n <button (click)=\"clickHandler()\" class=\"ax-fab-box\">\n <ng-container ngTemplateOutlet=\"iconTpl\"></ng-container>\n <ax-text> {{ label() }}</ax-text>\n </button>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-flow-chart.mjs CHANGED Viewed

@@ -4,9 +4,9 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, signal, effect, Injectable, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, output, afterNextRender, input, computed, HostListener, NgModule } from '@angular/core';
+import { inject, NgZone, PLATFORM_ID, signal, effect, Injectable, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, output, afterNextRender, input, computed, HostListener, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
@@ -14,6 +14,8 @@ import { Subject } from 'rxjs';
 class AXFlowChartService {
     constructor() {
         this.zone = inject(NgZone);
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
         this.initialFlowChartEdge = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : []));
         this.initialFlowChartNode = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : []));
         this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
@@ -33,16 +35,18 @@ class AXFlowChartService {
         this.draggingConnection = false;
         this.tempLine = null;
         this.#eff2 = effect(() => {
-            if (this.initialFlowChartEdge()) {
-                setTimeout(() => {
-                    this.drawEdges(this.initialFlowChartEdge());
-                });
+            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartEdge()) {
+                return;
             }
+            setTimeout(() => {
+                this.drawEdges(this.initialFlowChartEdge());
+            });
         }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
         this.#eff3 = effect(() => {
-            if (this.initialFlowChartNode()) {
-                this.createNode(this.initialFlowChartNode());
+            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartNode()) {
+                return;
             }
+            this.createNode(this.initialFlowChartNode());
         }, ...(ngDevMode ? [{ debugName: "#eff3" }] : []));
     }
     #eff2;
@@ -121,7 +125,6 @@ class AXFlowChartService {
                 nodeId: dot.dataset['nodeId'],
                 anchor: dot.dataset['anchor'],
             };
-            console.log(clicked);
             if (!this.anchorClickBuffer) {
                 this.anchorClickBuffer = clicked;
             }
@@ -143,7 +146,7 @@ class AXFlowChartService {
     }
     addAnchors(el, type) {
         ['top', 'bottom', 'left', 'right'].forEach((anchor) => {
-            const dot = document.createElement('div');
+            const dot = this.document.createElement('div');
             dot.className = 'ax-flow-chart-anchor';
             dot.dataset['anchor'] = anchor;
             dot.dataset['nodeId'] = el.dataset['id'];
@@ -205,8 +208,8 @@ class AXFlowChartService {
         };
         // Add global event listeners
         this.zone.runOutsideAngular(() => {
-            document.addEventListener('mousemove', mousemoveHandler);
-            document.addEventListener('mouseup', mouseupHandler);
+            this.document.addEventListener('mousemove', mousemoveHandler);
+            this.document.addEventListener('mouseup', mouseupHandler);
         });
         // Store global listeners
         const globalListeners = this.eventListeners.get('global');
@@ -278,7 +281,7 @@ class AXFlowChartService {
         const svgElement = this.svgService()?.nativeElement;
         if (!svgElement)
             return;
-        this.tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        this.tempLine = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
         this.tempLine.setAttribute('x1', x.toString());
         this.tempLine.setAttribute('y1', y.toString());
         this.tempLine.setAttribute('x2', x.toString());
@@ -305,6 +308,9 @@ class AXFlowChartService {
         this.drawEdges();
     }
     drawEdges(edges) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
         const svg = this.svgService()?.nativeElement;
         if (!svg)
             return;
@@ -337,7 +343,7 @@ class AXFlowChartService {
                     this.selectedEdge.set(edge);
                     this.selectedNode.set(null);
                     // Remove selection from all other lines
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
                         if (l !== line)
                             l.classList.remove('selected');
                     });
@@ -351,7 +357,7 @@ class AXFlowChartService {
         });
     }
     createLine(from, to, edge) {
-        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        const line = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
         line.setAttribute('x1', from.x.toString());
         line.setAttribute('y1', from.y.toString());
         line.setAttribute('x2', to.x.toString());
@@ -391,10 +397,17 @@ class AXFlowChartService {
         }
     }
     createNode(nodes) {
-        document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const canvas = this.canvasService()?.nativeElement;
+        if (!canvas) {
+            return;
+        }
+        this.document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
         nodes.forEach((node) => {
-            const el = document.createElement('div');
-            const p = document.createElement('p');
+            const el = this.document.createElement('div');
+            const p = this.document.createElement('p');
             p.innerText = node.label;
             el.appendChild(p);
             el.className = 'ax-flow-chart-node';
@@ -405,7 +418,7 @@ class AXFlowChartService {
             this.addAnchors(el, node.type);
             this.makeDraggable(el);
             this.setupNodeEventListeners(el, node);
-            this.canvasService().nativeElement.appendChild(el);
+            canvas.appendChild(el);
             this.nodesMap.set(node.id, el);
         });
     }
@@ -416,7 +429,7 @@ class AXFlowChartService {
                 this.removeEdge(edge);
             }
         });
-        document.querySelector(`[data-id="${nodeId}"]`)?.remove();
+        this.document.querySelector(`[data-id="${nodeId}"]`)?.remove();
         this.anchorClickBuffer = null;
     }
     cleanup() {
@@ -424,10 +437,10 @@ class AXFlowChartService {
         this.nodesMap.clear();
         this.eventListeners.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService, decorators: [{
             type: Injectable
         }] });
@@ -499,12 +512,12 @@ class AXFlowChartCreatorComponent extends NXComponent {
         printWindow.document.write(printContent);
         printWindow.document.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartCreatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXFlowChartCreatorComponent, isStandalone: true, selector: "ax-flow-chart-creator", providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{display:flex;gap:1rem;align-items:center;padding:1rem}ax-flow-chart-creator .ax-shape-container{display:flex;gap:1rem}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));display:flex;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer}ax-flow-chart-creator .ax-shape-container .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-creator .ax-shape-container .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}\n"], dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartCreatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXFlowChartCreatorComponent, isStandalone: true, selector: "ax-flow-chart-creator", providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{align-items:center;gap:1rem;padding:1rem;display:flex}ax-flow-chart-creator .ax-shape-container{gap:1rem;display:flex}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:flex}ax-flow-chart-creator .ax-shape-container .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-creator .ax-shape-container .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}\n"], dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartCreatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartCreatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-flow-chart-creator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTextBoxModule, AXButtonModule, CommonModule, FormsModule], providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{display:flex;gap:1rem;align-items:center;padding:1rem}ax-flow-chart-creator .ax-shape-container{display:flex;gap:1rem}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));display:flex;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer}ax-flow-chart-creator .ax-shape-container .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-creator .ax-shape-container .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}\n"] }]
+            args: [{ selector: 'ax-flow-chart-creator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTextBoxModule, AXButtonModule, CommonModule, FormsModule], providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{align-items:center;gap:1rem;padding:1rem;display:flex}ax-flow-chart-creator .ax-shape-container{gap:1rem;display:flex}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:flex}ax-flow-chart-creator .ax-shape-container .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-creator .ax-shape-container .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}\n"] }]
         }] });
 class AXFlowChartRendererComponent extends NXComponent {
@@ -513,6 +526,8 @@ class AXFlowChartRendererComponent extends NXComponent {
         this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : []));
         this.svg = viewChild('connections', ...(ngDevMode ? [{ debugName: "svg" }] : []));
         this.service = inject(AXFlowChartService);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
         this.onLineClick = output();
         this.onLineDbClick = output();
         this.onNodeClick = output();
@@ -523,9 +538,10 @@ class AXFlowChartRendererComponent extends NXComponent {
             this.setupEventListeners();
         });
         this.#eff = effect(() => {
-            if (this.canvas() && this.svg()) {
-                this.initializeServices();
+            if (!isPlatformBrowser(this.platformId) || !this.canvas() || !this.svg()) {
+                return;
             }
+            this.initializeServices();
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
     #init;
@@ -561,8 +577,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === canvas) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -571,8 +587,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === svg) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -588,13 +604,13 @@ class AXFlowChartRendererComponent extends NXComponent {
         this.service.nodeDbClick.unsubscribe();
         this.service.onEdgeUpdate.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXFlowChartRendererComponent, isStandalone: true, selector: "ax-flow-chart-renderer", outputs: { onLineClick: "onLineClick", onLineDbClick: "onLineDbClick", onNodeClick: "onNodeClick", onNodeDbClick: "onNodeDbClick", onEdgeUpdate: "onEdgeUpdate", onNodeUpdate: "onNodeUpdate" }, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["connections"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{overflow:hidden;width:var(--ax-comp-flow-chart-width, 100%);height:var(--ax-comp-flow-chart-height, 30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{position:relative;width:100%;height:100%}ax-flow-chart-renderer .ax-flow-chart-node{position:absolute;padding:1rem;background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s ease}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{position:absolute;width:10px;height:10px;background-color:rgba(var(--ax-sys-color-on-lightest-surface));border-radius:50%;cursor:crosshair;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{transition:.3s all ease;scale:1.3;background-color:rgba(var(--ax-sys-color-danger-darkest-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{transition:.3s all ease;stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));display:flex;justify-content:center;align-items:center;width:auto;height:auto}ax-flow-chart-renderer .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-renderer .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg) scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXFlowChartRendererComponent, isStandalone: true, selector: "ax-flow-chart-renderer", outputs: { onLineClick: "onLineClick", onLineDbClick: "onLineDbClick", onNodeClick: "onNodeClick", onNodeDbClick: "onNodeDbClick", onEdgeUpdate: "onEdgeUpdate", onNodeUpdate: "onNodeUpdate" }, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["connections"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{width:var(--ax-comp-flow-chart-width,100%);height:var(--ax-comp-flow-chart-height,30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{width:100%;height:100%;position:relative}ax-flow-chart-renderer .ax-flow-chart-node{background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none;padding:1rem;position:absolute}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{background-color:rgba(var(--ax-sys-color-on-lightest-surface));cursor:crosshair;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{background-color:rgba(var(--ax-sys-color-danger-darkest-surface));transition:all .3s;scale:1.3}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer;transition:all .3s}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));justify-content:center;align-items:center;width:auto;height:auto;display:flex}ax-flow-chart-renderer .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-renderer .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg)scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-flow-chart-renderer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{overflow:hidden;width:var(--ax-comp-flow-chart-width, 100%);height:var(--ax-comp-flow-chart-height, 30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{position:relative;width:100%;height:100%}ax-flow-chart-renderer .ax-flow-chart-node{position:absolute;padding:1rem;background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s ease}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{position:absolute;width:10px;height:10px;background-color:rgba(var(--ax-sys-color-on-lightest-surface));border-radius:50%;cursor:crosshair;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{transition:.3s all ease;scale:1.3;background-color:rgba(var(--ax-sys-color-danger-darkest-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{transition:.3s all ease;stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));display:flex;justify-content:center;align-items:center;width:auto;height:auto}ax-flow-chart-renderer .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-renderer .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg) scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"] }]
-        }] });
+            args: [{ selector: 'ax-flow-chart-renderer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{width:var(--ax-comp-flow-chart-width,100%);height:var(--ax-comp-flow-chart-height,30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{width:100%;height:100%;position:relative}ax-flow-chart-renderer .ax-flow-chart-node{background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none;padding:1rem;position:absolute}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{background-color:rgba(var(--ax-sys-color-on-lightest-surface));cursor:crosshair;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{background-color:rgba(var(--ax-sys-color-danger-darkest-surface));transition:all .3s;scale:1.3}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer;transition:all .3s}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));justify-content:center;align-items:center;width:auto;height:auto;display:flex}ax-flow-chart-renderer .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-renderer .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg)scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"] }]
+        }], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], svg: [{ type: i0.ViewChild, args: ['connections', { isSignal: true }] }], onLineClick: [{ type: i0.Output, args: ["onLineClick"] }], onLineDbClick: [{ type: i0.Output, args: ["onLineDbClick"] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onNodeDbClick: [{ type: i0.Output, args: ["onNodeDbClick"] }], onEdgeUpdate: [{ type: i0.Output, args: ["onEdgeUpdate"] }], onNodeUpdate: [{ type: i0.Output, args: ["onNodeUpdate"] }] } });
 class AXFlowChartComponent extends NXComponent {
     constructor() {
@@ -658,23 +674,23 @@ class AXFlowChartComponent extends NXComponent {
     removeNode(nodeId) {
         this.flowChartService.removeNode(nodeId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXFlowChartComponent, isStandalone: true, selector: "ax-flow-chart", inputs: { initialFlowChartNode: { classPropertyName: "initialFlowChartNode", publicName: "initialFlowChartNode", isSignal: true, isRequired: true, transformFunction: null }, initialFlowChartEdge: { classPropertyName: "initialFlowChartEdge", publicName: "initialFlowChartEdge", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXFlowChartComponent, isStandalone: true, selector: "ax-flow-chart", inputs: { initialFlowChartNode: { classPropertyName: "initialFlowChartNode", publicName: "initialFlowChartNode", isSignal: true, isRequired: true, transformFunction: null }, initialFlowChartEdge: { classPropertyName: "initialFlowChartEdge", publicName: "initialFlowChartEdge", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [
             AXFlowChartService,
             { provide: AXComponent, useExisting: AXFlowChartComponent },
             { provide: AXValuableComponent, useExisting: AXFlowChartComponent },
             { provide: AXFocusableComponent, useExisting: AXFlowChartComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<ng-content select=\"ax-flow-chart-renderer\"></ng-content>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-flow-chart{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius)}ax-flow-chart ax-header{border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-flow-chart ax-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<ng-content select=\"ax-flow-chart-renderer\"></ng-content>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-flow-chart{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);flex-direction:column;width:100%;height:100%;display:flex}ax-flow-chart ax-header{border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-flow-chart ax-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-flow-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXFlowChartService,
                         { provide: AXComponent, useExisting: AXFlowChartComponent },
                         { provide: AXValuableComponent, useExisting: AXFlowChartComponent },
                         { provide: AXFocusableComponent, useExisting: AXFlowChartComponent },
-                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n<ng-content select=\"ax-flow-chart-renderer\"></ng-content>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-flow-chart{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius)}ax-flow-chart ax-header{border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-flow-chart ax-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}\n"] }]
-        }], propDecorators: { handleKeyboardEvent: [{
+                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n<ng-content select=\"ax-flow-chart-renderer\"></ng-content>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-flow-chart{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);flex-direction:column;width:100%;height:100%;display:flex}ax-flow-chart ax-header{border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-flow-chart ax-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}\n"] }]
+        }], propDecorators: { initialFlowChartNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFlowChartNode", required: true }] }], initialFlowChartEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFlowChartEdge", required: true }] }], handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -682,11 +698,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 const COMPONENT = [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent];
 const MODULES = [CommonModule];
 class AXFlowChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartModule, imports: [CommonModule, AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent], exports: [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartModule, imports: [MODULES, AXFlowChartCreatorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, imports: [CommonModule, AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent], exports: [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, imports: [MODULES, AXFlowChartCreatorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],