@haloduck/ui 2.0.8 → 2.0.10

package/fesm2022/haloduck-ui.mjs

@@ -2189,7 +2189,7 @@ class MapToAddressComponent {
             }
         }
         catch (error) {
-            this._loadError = 'Google Maps API를 로드할 수 없습니다.';
+            this._loadError = 'Unable to load Google Maps API.';
             isDevMode() && console.error('Failed to load Google Maps API:', error);
         }
     }
@@ -2371,13 +2371,13 @@ class MapToAddressComponent {
         this.disabled = isDisabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MapToAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: MapToAddressComponent, isStandalone: true, selector: "haloduck-map-to-address", inputs: { disabled: "disabled", language: "language", currentLngLat: "currentLngLat", currentAddress: "currentAddress" }, outputs: { locationChanged: "locationChanged" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MapToAddressComponent, isStandalone: true, selector: "haloduck-map-to-address", inputs: { disabled: "disabled", language: "language", currentLngLat: "currentLngLat", currentAddress: "currentAddress" }, outputs: { locationChanged: "locationChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: MapToAddressComponent,
                 multi: true,
             },
-        ], 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 }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if(!isGoogleLoaded && !loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\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\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if(loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\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\">Please check your internet connection and refresh the page.</p>\n    </div>\n  </div>\n  }\n\n  <div id=\"map\"\n       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: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MapToAddressComponent, decorators: [{
             type: Component,
@@ -2387,7 +2387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             useExisting: MapToAddressComponent,
                             multi: true,
                         },
-                    ], 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"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\n  <!-- \uB85C\uB529 \uC0C1\uD0DC -->\n  @if(!isGoogleLoaded && !loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-gray-100 z-10\">\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\n  <!-- \uC5D0\uB7EC \uC0C1\uD0DC -->\n  @if(loadError) {\n  <div class=\"absolute inset-0 flex items-center justify-center bg-red-50 z-10\">\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\">Please check your internet connection and refresh the page.</p>\n    </div>\n  </div>\n  }\n\n  <div id=\"map\"\n       class=\"w-full h-full\"></div>\n</div>\n", styles: ["#map{border:1px solid #ccc;margin-bottom:10px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], language: [{
@@ -2784,6 +2784,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 args: ['label']
             }] } });
 
+class TabsComponent {
+    tabs = [];
+    selectedIndex = 0;
+    layout = 'vertical';
+    labelWidth = '';
+    selectedIndexChange = new EventEmitter();
+    label;
+    ngOnChanges(changes) {
+        if (changes['tabs']) {
+            this.ensureSelectedInRange();
+        }
+        if (changes['selectedIndex']) {
+            this.ensureSelectedInRange();
+        }
+    }
+    ngAfterViewInit() {
+        // hide label if no content.
+        if (this.label && this.label.nativeElement) {
+            const hasContent = this.label.nativeElement.textContent?.trim();
+            if (!hasContent) {
+                this.label.nativeElement.style.display = 'none';
+            }
+        }
+    }
+    get current() {
+        if (!this.tabs || this.tabs.length === 0)
+            return null;
+        const idx = Math.min(Math.max(this.selectedIndex, 0), this.tabs.length - 1);
+        return this.tabs[idx];
+    }
+    select(index) {
+        if (index < 0 || index >= this.tabs.length)
+            return;
+        this.selectedIndex = index;
+        this.selectedIndexChange.emit(this.selectedIndex);
+    }
+    ensureSelectedInRange() {
+        if (!this.tabs || this.tabs.length === 0) {
+            this.selectedIndex = 0;
+            return;
+        }
+        if (this.selectedIndex < 0)
+            this.selectedIndex = 0;
+        if (this.selectedIndex > this.tabs.length - 1)
+            this.selectedIndex = this.tabs.length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'haloduck-tabs', imports: [CommonModule], template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n\n  <div class=\"flex-1 w-full\">\n    <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n      @for (tab of tabs; track tab; let i = $index) {\n        <button type=\"button\"\n                class=\"px-3 py-2 rounded-t-md\"\n                [ngClass]=\"{\n                  'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n                  'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n                }\"\n                (click)=\"select(i)\">\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (current) {\n        <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], labelWidth: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], label: [{
+                type: ViewChild,
+                args: ['label']
+            }] } });
+
 class BreadcrumbService {
     router;
     coreService = inject(CoreService);
@@ -2896,5 +2963,5 @@ const provideHaloduckTransloco = () => provideTranslocoScope({
  * Generated bundle index. Do not edit.
  */
 
-export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
+export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
 //# sourceMappingURL=haloduck-ui.mjs.map