@haloduck/ui 2.0.5 → 2.0.7

package/fesm2022/haloduck-ui.mjs

@@ -237,8 +237,8 @@ class AuthenticateComponent {
             },
         })
             .then((res) => {
-            console.log('res', res);
-            console.log('res.nextStep.signInStep', res.nextStep.signInStep);
+            // console.log('res', res);
+            // console.log('res.nextStep.signInStep', res.nextStep.signInStep);
             if (res.nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED') {
                 this.switchStage('newPassword');
             }
@@ -263,7 +263,6 @@ class AuthenticateComponent {
             this.notificationService.showNotification('success', 'Successfully signed in.', 3000);
         })
             .catch((err) => {
-            console.log('err', JSON.stringify(err));
             if (err.code === 'NotAuthorizedException') {
                 this.notificationService.showNotification('error', 'Failed to sign in.');
             }
@@ -575,7 +574,6 @@ class SelectComponent {
         // hide label if no content.
         if (this.label && this.label.nativeElement) {
             const hasContent = this.label.nativeElement.textContent?.trim();
-            console.log('Label content:', hasContent);
             if (!hasContent) {
                 this.label.nativeElement.style.display = 'none';
             }
@@ -1034,13 +1032,13 @@ class CopyButtonComponent {
         }, 500); // Animation duration
         if (navigator.clipboard && window.isSecureContext) {
             navigator.clipboard
-                .writeText(this.text)
-                .then(() => {
-                console.log('Text copied to clipboard');
-            })
-                .catch((err) => {
-                console.error('Failed to copy text: ', err);
-            });
+                .writeText(this.text);
+            // .then(() => {
+            //   console.log('Text copied to clipboard');
+            // })
+            // .catch((err) => {
+            //   console.error('Failed to copy text: ', err);
+            // });
         }
         else {
             const textArea = document.createElement('textarea');
@@ -1051,10 +1049,10 @@ class CopyButtonComponent {
             textArea.select();
             try {
                 document.execCommand('copy');
-                console.log('Text copied to clipboard');
+                // console.log('Text copied to clipboard');
             }
             catch (err) {
-                console.error('Failed to copy text: ', err);
+                // console.error('Failed to copy text: ', err);
             }
             document.body.removeChild(textArea);
         }
@@ -1370,9 +1368,6 @@ class DateRangeComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    ngOnInit() {
-        console.log('DateRangeComponent ngOnInit', this.dateRangeOptions);
-    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -1386,7 +1381,6 @@ class DateRangeComponent {
                 this.placeholder = translation;
             }
         });
-        console.log('DateRangeComponent constructor', this.dateRangeOptions);
         zip(this.translateService.selectTranslate('ui.calendar.today', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.yesterday', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.2 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.3 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a week ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.15 Days ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a month ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.2 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.3 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.6 months ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.a year ago', {}, 'haloduck'), this.translateService.selectTranslate('ui.calendar.pick manually', {}, 'haloduck'))
             .pipe(takeUntilDestroyed())
             .subscribe(([today, yesterday, twoDaysAgo, threeDaysAgo, aWeekAgo, fifteenDaysAgo, aMonthAgo, twoMonthsAgo, threeMonthsAgo, sixMonthsAgo, aYearAgo, pickManually,]) => {
@@ -1493,7 +1487,6 @@ class DrawCanvasComponent {
         this.setupCanvas();
     }
     loadImage() {
-        console.log(this.canvasRef.nativeElement.width, this.canvasRef.nativeElement.height, this.canvasRef.nativeElement.getBoundingClientRect());
         const image = new Image();
         image.src = this.imagePath;
         image.onload = () => {
@@ -2161,10 +2154,21 @@ class MapToAddressComponent {
     disabled = false;
     currentLngLat;
     _currentAddress;
+    _isGoogleLoaded = false;
+    _loadError;
+    get isGoogleLoaded() {
+        return this._isGoogleLoaded;
+    }
+    get loadError() {
+        return this._loadError;
+    }
     set currentAddress(value) {
         if (value) {
             this._currentAddress = value;
-            this.setMapToAddress();
+            // Google Maps API가 로드된 후에만 실행
+            if (this._isGoogleLoaded) {
+                this.setMapToAddress();
+            }
         }
     }
     locationChanged = new EventEmitter();
@@ -2174,12 +2178,24 @@ class MapToAddressComponent {
     onChange = () => { };
     onTouched = () => { };
     async ngOnInit() {
-        await this.initScript();
-        this.initMap();
+        try {
+            await this.initScript();
+            this._isGoogleLoaded = true;
+            this.initMap();
+            // API 로드 완료 후 pending된 주소 설정 실행
+            if (this._currentAddress) {
+                this.setMapToAddress();
+            }
+        }
+        catch (error) {
+            this._loadError = 'Google Maps API를 로드할 수 없습니다.';
+            isDevMode() && console.error('Failed to load Google Maps API:', error);
+        }
     }
     initScript() {
         return new Promise((resolve, reject) => {
             if (typeof google !== 'undefined') {
+                this._isGoogleLoaded = true;
                 resolve();
                 return;
             }
@@ -2187,10 +2203,13 @@ class MapToAddressComponent {
             script.src = `https://maps.googleapis.com/maps/api/js?key=${this.coreService.getGoogleApiKey()}&libraries=places,marker&loading=sync`;
             script.async = false;
             script.defer = true;
-            script.onload = () => resolve();
+            script.onload = () => {
+                this._isGoogleLoaded = true;
+                resolve();
+            };
             script.onerror = (error) => reject(error);
             document.head.appendChild(script);
-            console.log('Google Maps script loaded', script);
+            isDevMode() && console.log('Google Maps script loaded', script);
         });
     }
     initMap() {
@@ -2263,6 +2282,10 @@ class MapToAddressComponent {
         }
     }
     setMapToAddress() {
+        if (!this._isGoogleLoaded) {
+            isDevMode() && console.warn('Google Maps API not loaded yet');
+            return;
+        }
         const geocoder = new google.maps.Geocoder();
         geocoder.geocode({ address: this._currentAddress }, (results, status) => {
             if (status === 'OK' && results[0]) {
@@ -2276,6 +2299,10 @@ class MapToAddressComponent {
         });
     }
     getAddress() {
+        if (!this._isGoogleLoaded) {
+            isDevMode() && console.warn('Google Maps API not loaded yet');
+            return;
+        }
         const geocoder = new google.maps.Geocoder();
         const position = this.marker.position;
         if (!position) {
@@ -2327,7 +2354,10 @@ class MapToAddressComponent {
         if (value) {
             this.location = value;
             this.currentLngLat = { lat: value.lat, lng: value.lng };
-            this.initializeMap(this.currentLngLat);
+            // Google Maps API가 로드된 후에만 맵 초기화
+            if (this._isGoogleLoaded) {
+                this.initializeMap(this.currentLngLat);
+            }
         }
     }
     registerOnChange(fn) {
@@ -2346,7 +2376,7 @@ class MapToAddressComponent {
                 useExisting: MapToAddressComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<div id=\"map\" class=\"w-full h-full\"></div>", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  <div\n    *ngIf=\"!isGoogleLoaded && !loadError\"\n    class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\"\n  >\n    <div class=\"text-center\">\n      <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"></div>\n      <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n    </div>\n  </div>\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  <div\n    *ngIf=\"loadError\"\n    class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\"\n  >\n    <div class=\"text-center p-4\">\n      <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n      <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n      <p class=\"text-red-600 text-xs mt-1\">\uC778\uD130\uB137 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uACE0 \uD398\uC774\uC9C0\uB97C \uC0C8\uB85C\uACE0\uCE68\uD574 \uC8FC\uC138\uC694.</p>\n    </div>\n  </div>\n\n  <div id=\"map\" class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MapToAddressComponent, decorators: [{
             type: Component,
@@ -2356,7 +2386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             useExisting: MapToAddressComponent,
                             multi: true,
                         },
-                    ], template: "<div id=\"map\" class=\"w-full h-full\"></div>", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  <div\n    *ngIf=\"!isGoogleLoaded && !loadError\"\n    class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\"\n  >\n    <div class=\"text-center\">\n      <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2\"></div>\n      <p class=\"text-gray-600 text-sm\">\uC9C0\uB3C4\uB97C \uB85C\uB529 \uC911\uC785\uB2C8\uB2E4...</p>\n    </div>\n  </div>\n\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  <div\n    *ngIf=\"loadError\"\n    class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\"\n  >\n    <div class=\"text-center p-4\">\n      <div class=\"text-red-500 text-2xl mb-2\">\u26A0\uFE0F</div>\n      <p class=\"text-red-700 text-sm font-medium\">{{ loadError }}</p>\n      <p class=\"text-red-600 text-xs mt-1\">\uC778\uD130\uB137 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uACE0 \uD398\uC774\uC9C0\uB97C \uC0C8\uB85C\uACE0\uCE68\uD574 \uC8FC\uC138\uC694.</p>\n    </div>\n  </div>\n\n  <div id=\"map\" class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], currentLngLat: [{