@haloduck/ui 2.0.14 → 2.0.15

package/fesm2022/haloduck-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, inject, ChangeDetectorRef, forwardRef, ViewChild, signal, EventEmitter, Output, ViewContainerRef, NgZone, isDevMode, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, Input, Component, inject, ChangeDetectorRef, forwardRef, ViewChild, signal, EventEmitter, Output, ViewContainerRef, NgZone, isDevMode, ChangeDetectionStrategy, HostBinding, Directive } from '@angular/core';
 import { signIn, confirmSignIn, resetPassword, confirmResetPassword } from 'aws-amplify/auth';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -3051,6 +3051,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }] } });
 
+class GroupedDirective {
+    elementRef;
+    renderer;
+    haloduckGrouped = {};
+    bgClasses = '';
+    borderClasses = 'border border-light-inactive dark:border-dark-inactive rounded';
+    labelText = '';
+    labelClasses = 'absolute bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive px-2 py-0.5 text-sm font-medium rounded';
+    labelOffset = '-10px';
+    hostClasses = 'relative';
+    labelElement = null;
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.applyConfig();
+        this.createBorder();
+        this.createLabel();
+    }
+    applyConfig() {
+        if (typeof this.haloduckGrouped === 'string') {
+            this.labelText = this.haloduckGrouped;
+        }
+        else if (typeof this.haloduckGrouped === 'object') {
+            const config = this.haloduckGrouped;
+            this.bgClasses = config.bgClasses ?? this.bgClasses;
+            this.borderClasses = config.borderClasses ?? this.borderClasses;
+            this.labelText = config.labelText ?? this.labelText;
+            this.labelClasses = config.labelClasses ?? this.labelClasses;
+            this.labelOffset = config.labelOffset ?? this.labelOffset;
+        }
+    }
+    createBorder() {
+        const element = this.elementRef.nativeElement;
+        // 기존 테두리 클래스 제거
+        this.removeBorderClasses(element);
+        // Tailwind 클래스 추가
+        this.addClasses(element, this.borderClasses);
+    }
+    createLabel() {
+        if (!this.labelText)
+            return;
+        const element = this.elementRef.nativeElement;
+        // 기존 라벨 제거
+        if (this.labelElement) {
+            this.renderer.removeChild(element, this.labelElement);
+        }
+        // 라벨 요소 생성
+        this.labelElement = this.renderer.createElement('span');
+        // Tailwind 클래스 적용
+        if (this.labelElement) {
+            this.addClasses(this.labelElement, this.labelClasses);
+        }
+        // 커스텀 스타일 (Tailwind로 매핑할 수 없는 속성들)
+        this.renderer.setStyle(this.labelElement, 'top', this.labelOffset);
+        this.renderer.setStyle(this.labelElement, 'left', '8px');
+        this.renderer.setStyle(this.labelElement, 'white-space', 'nowrap');
+        this.renderer.setStyle(this.labelElement, 'z-index', '10');
+        this.renderer.setStyle(this.labelElement, 'pointer-events', 'none');
+        // 라벨 텍스트 설정
+        this.renderer.setProperty(this.labelElement, 'textContent', this.labelText);
+        // 요소에 라벨 추가
+        this.renderer.appendChild(element, this.labelElement);
+    }
+    addClasses(element, classString) {
+        if (!classString)
+            return;
+        // 공백으로 구분된 클래스들을 분리하여 각각 추가
+        const classes = classString.split(' ').filter(className => className.trim());
+        classes.forEach(className => {
+            if (className.trim()) {
+                this.renderer.addClass(element, className.trim());
+            }
+        });
+    }
+    removeBorderClasses(element) {
+        // 기본 테두리 클래스들 제거
+        const defaultBorderClasses = [
+            'border', 'border-2', 'border-3', 'border-4', 'border-8',
+            'border-solid', 'border-dashed', 'border-dotted', 'border-double', 'border-none',
+            'rounded-none', 'rounded-sm', 'rounded', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-3xl', 'rounded-full',
+            'border-gray-200', 'border-gray-300', 'border-gray-400', 'border-gray-500', 'border-gray-600', 'border-gray-700', 'border-gray-800', 'border-gray-900',
+            'border-blue-500', 'border-blue-700', 'border-red-500', 'border-red-600', 'border-green-500', 'border-green-600',
+            'border-amber-500', 'border-amber-600', 'border-violet-500', 'border-violet-600', 'border-pink-500', 'border-pink-600',
+            'border-white', 'border-black'
+        ];
+        defaultBorderClasses.forEach(className => {
+            this.renderer.removeClass(element, className);
+        });
+    }
+    // 라벨 텍스트 업데이트 메서드
+    updateLabel(text) {
+        if (this.labelElement) {
+            this.renderer.setProperty(this.labelElement, 'textContent', text);
+        }
+    }
+    // 라벨 표시/숨김 메서드
+    toggleLabel(show) {
+        if (this.labelElement) {
+            if (show) {
+                this.renderer.removeClass(this.labelElement, 'hidden');
+            }
+            else {
+                this.renderer.addClass(this.labelElement, 'hidden');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupedDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: GroupedDirective, isStandalone: true, selector: "[haloduckGrouped]", inputs: { haloduckGrouped: "haloduckGrouped", bgClasses: "bgClasses", borderClasses: "borderClasses", labelText: "labelText", labelClasses: "labelClasses", labelOffset: "labelOffset" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[haloduckGrouped]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { haloduckGrouped: [{
+                type: Input
+            }], bgClasses: [{
+                type: Input
+            }], borderClasses: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], labelClasses: [{
+                type: Input
+            }], labelOffset: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class BreadcrumbService {
     router;
     coreService = inject(CoreService);
@@ -3163,5 +3297,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, TabsComponent, TagInputComponent, TagViewerComponent, 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, GroupedDirective, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, TagInputComponent, TagViewerComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
 //# sourceMappingURL=haloduck-ui.mjs.map