ato-water-lib 0.0.10 → 0.0.12

package/fesm2020/ato-water-lib.mjs

@@ -3507,7 +3507,8 @@ class AtoDefaultGojsEditor {
         if (this.animationInterval) {
             clearInterval(this.animationInterval);
         }
-        this.myDiagram = this.$(go.Diagram, this.myDiagramDiv, this.initialOptions);
+        const diagramDiv = document.getElementById(`${this.myDiagramDiv}`);
+        this.myDiagram = this.$(go.Diagram, diagramDiv, this.initialOptions);
         // this.myDiagram.initialPosition = new go.Point(0, 0);
         this.addOrRemoveCompoentTemplate();
         this.makeLinkTemplate();
@@ -7735,7 +7736,7 @@ class AssetFlowComponent {
         //     linkFromPortIdProperty: 'fromPort',
         //     linkToPortIdProperty: 'toPort',
         // };
-        this.getDefaultFlowData();
+        this.flowData = this.getDefaultFlowData();
     }
     onClickParamOfTable($event) {
         this.onClickParamOfTableEvent.emit($event);
@@ -7766,14 +7767,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class AtoLoadingDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        // Tạo phần tử spinner wrapper
+        this.spinnerWrapper = this.renderer.createElement('div');
+        this.renderer.setStyle(this.spinnerWrapper, 'position', 'absolute');
+        this.renderer.setStyle(this.spinnerWrapper, 'top', '0');
+        this.renderer.setStyle(this.spinnerWrapper, 'left', '0');
+        this.renderer.setStyle(this.spinnerWrapper, 'width', '100%');
+        this.renderer.setStyle(this.spinnerWrapper, 'height', '100%');
+        this.renderer.setStyle(this.spinnerWrapper, 'display', 'flex');
+        this.renderer.setStyle(this.spinnerWrapper, 'align-items', 'center');
+        this.renderer.setStyle(this.spinnerWrapper, 'justify-content', 'center');
+        this.renderer.setStyle(this.spinnerWrapper, 'background', 'rgba(255, 255, 255, 0.7)');
+        this.renderer.setStyle(this.spinnerWrapper, 'z-index', '10');
+        // Tạo phần tử spinner icon (sử dụng hình ảnh base64)
+        const spinner = this.renderer.createElement('img');
+        // this.renderer.setAttribute(spinner, 'src', 'data:image/gif;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2IoMjU1LCAyNTUsIDI1NSk7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyIgd2lkdGg9Ijg4cHgiIGhlaWdodD0iODhweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KPGRlZnMgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgPG1hc2sgaWQ9ImxkaW8tdmN5YjQ1YmFvdWstbWFzayIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0id2hpdGUiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvcmVjdD4KICA8L21hc2s+CjwvZGVmcz4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM1Y2FhZWEiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvcmVjdD4KPGcgbWFzaz0idXJsKCNsZGlvLXZjeWI0NWJhb3VrLW1hc2spIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICA8cmVjdCB4PSItMTAwIiB5PSItMjUwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgcng9IjkwIiByeT0iOTAiIGZpbGw9IiM4MmNlZmYiIG9wYWNpdHk9IjAuNCIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMCA1MCAtMTAwOzkwIDUwIC0xMDAiIGtleVRpbWVzPSIwOzEiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KICA8L3JlY3Q+CgogIDxyZWN0IHg9Ii0xMDAiIHk9Ii0yNjAiIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiByeD0iOTUiIHJ5PSI5NSIgZmlsbD0iI2E1ZGNmZiIgb3BhY2l0eT0iMC40IiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjEuNTE1MTUxNTE1MTUxNTE1MXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAgNTAgLTExMDs5MCA1MCAtMTEwIiBrZXlUaW1lcz0iMDsxIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij48L2FuaW1hdGVUcmFuc2Zvcm0+CiAgPC9yZWN0PgoKICA8cmVjdCB4PSItMTAwIiB5PSItMjcwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgcng9IjEwMCIgcnk9IjEwMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC40IiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjMuMDMwMzAzMDMwMzAzMDMwM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAgNTAgLTEyMDs5MCA1MCAtMTIwIiBrZXlUaW1lcz0iMDsxIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij48L2FuaW1hdGVUcmFuc2Zvcm0+CiAgPC9yZWN0PgoKPC9nPgo8IS0tIFtsZGlvXSBnZW5lcmF0ZWQgYnkgaHR0cHM6Ly9sb2FkaW5nLmlvLyAtLT48L3N2Zz4=');
+        this.renderer.setProperty(spinner, 'innerHTML', `
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="88px" height="88px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<defs style="animation-play-state: running; animation-delay: 0s;">
+  <mask id="ldio-vcyb45baouk-mask" style="animation-play-state: running; animation-delay: 0s;">
+    <rect x="0" y="0" width="100" height="100" fill="white" style="animation-play-state: running; animation-delay: 0s;"/>
+  </mask>
+</defs>
+<rect x="0" y="0" width="100" height="100" fill="#5caaea" style="animation-play-state: running; animation-delay: 0s;"/>
+<g mask="url(#ldio-vcyb45baouk-mask)" style="animation-play-state: running; animation-delay: 0s;">
+  <rect x="-100" y="-250" width="300" height="300" rx="90" ry="90" fill="#82ceff" opacity="0.4" style="animation-play-state: running; animation-delay: 0s;">
+    <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" values="0 50 -100;90 50 -100" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"/>
+  </rect>
+
+  <rect x="-100" y="-260" width="300" height="300" rx="95" ry="95" fill="#a5dcff" opacity="0.4" style="animation-play-state: running; animation-delay: 0s;">
+    <animateTransform attributeName="transform" type="rotate" dur="1.5151515151515151s" repeatCount="indefinite" values="0 50 -110;90 50 -110" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"/>
+  </rect>
+
+  <rect x="-100" y="-270" width="300" height="300" rx="100" ry="100" fill="#ffffff" opacity="0.4" style="animation-play-state: running; animation-delay: 0s;">
+    <animateTransform attributeName="transform" type="rotate" dur="3.0303030303030303s" repeatCount="indefinite" values="0 50 -120;90 50 -120" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"/>
+  </rect>
+
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
+  `);
+        this.renderer.setStyle(spinner, 'width', '40px');
+        this.renderer.setStyle(spinner, 'height', '40px');
+        // Thêm spinner vào spinner wrapper
+        this.renderer.appendChild(this.spinnerWrapper, spinner);
+    }
+    ngOnChanges(changes) {
+        if (changes['appLoading']) {
+            if (this.appLoading) {
+                this.showSpinner();
+            }
+            else {
+                this.hideSpinner();
+            }
+        }
+    }
+    showSpinner() {
+        this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
+        this.renderer.setStyle(this.el.nativeElement, 'filter', 'blur(2px)');
+        this.renderer.appendChild(this.el.nativeElement, this.spinnerWrapper);
+    }
+    hideSpinner() {
+        this.renderer.removeStyle(this.el.nativeElement, 'filter');
+        if (this.el.nativeElement.contains(this.spinnerWrapper)) {
+            this.renderer.removeChild(this.el.nativeElement, this.spinnerWrapper);
+        }
+    }
+}
+AtoLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AtoLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: { appLoading: "appLoading" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atoLoading]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { appLoading: [{
+                type: Input
+            }] } });
+
 class AtoWaterLibModule {
 }
 AtoWaterLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AtoWaterLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
         AtoFlowDiagramLibComponent,
-        AssetFlowComponent], imports: [CommonModule], exports: [AtoWaterLibComponent,
+        AssetFlowComponent,
+        AtoLoadingDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
         AtoFlowDiagramLibComponent,
-        AssetFlowComponent] });
+        AssetFlowComponent,
+        AtoLoadingDirective] });
 AtoWaterLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, decorators: [{
             type: NgModule,
@@ -7782,6 +7866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         AtoWaterLibComponent,
                         AtoFlowDiagramLibComponent,
                         AssetFlowComponent,
+                        AtoLoadingDirective,
                     ],
                     imports: [
                         CommonModule
@@ -7789,7 +7874,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     exports: [
                         AtoWaterLibComponent,
                         AtoFlowDiagramLibComponent,
-                        AssetFlowComponent
+                        AssetFlowComponent,
+                        AtoLoadingDirective
                     ]
                 }]
         }] });
@@ -7802,5 +7888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AssetFlowComponent, AtoFlowDiagramLibComponent, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService };
+export { AssetFlowComponent, AtoFlowDiagramLibComponent, AtoLoadingDirective, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService };
 //# sourceMappingURL=ato-water-lib.mjs.map