@haloduck/ui 2.0.16 → 2.0.18

package/fesm2022/haloduck-ui.mjs

@@ -3018,6 +3018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
 class TagViewerComponent {
     label;
     tags = [];
+    shouldWrap = true;
     // Accept input as `value` for consistency with tag-input
     set value(tags) {
         if (Array.isArray(tags)) {
@@ -3039,14 +3040,16 @@ class TagViewerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: TagViewerComponent, isStandalone: true, selector: "haloduck-tag-viewer", inputs: { value: "value" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <ng-container *ngFor=\"let tag of tags\">\n        <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n          {{ tag }}\n        </span>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TagViewerComponent, isStandalone: true, selector: "haloduck-tag-viewer", inputs: { shouldWrap: "shouldWrap", value: "value" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex items-center gap-2\"\n         [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n      </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-tag-viewer', imports: [CommonModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"flex flex-col gap-2\">\n  <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex flex-wrap items-center gap-2\">\n      <ng-container *ngFor=\"let tag of tags\">\n        <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n          {{ tag }}\n        </span>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'haloduck-tag-viewer', imports: [CommonModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"flex flex-col gap-2\">\n  <label #label\n         class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n    <ng-content></ng-content>\n  </label>\n\n  <div\n       class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n    <div class=\"flex items-center gap-2\"\n         [ngClass]=\"shouldWrap ? 'flex-wrap' : 'flex-nowrap'\">\n      @for (tag of tags; track tag) {\n      <span\n            class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n        {{ tag }}\n      </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: ViewChild,
                 args: ['label']
+            }], shouldWrap: [{
+                type: Input
             }], value: [{
                 type: Input
             }] } });
@@ -3069,6 +3072,7 @@ class GroupedDirective {
     }
     ngOnInit() {
         this.applyConfig();
+        this.createLayout();
         this.createBorder();
         this.createLabel();
     }
@@ -3086,6 +3090,10 @@ class GroupedDirective {
             this.labelOffset = config.labelOffset ?? this.labelOffset;
         }
     }
+    createLayout() {
+        const element = this.elementRef.nativeElement;
+        this.addClasses(element, this.layoutClasses);
+    }
     createBorder() {
         const element = this.elementRef.nativeElement;
         // 기존 테두리 클래스 제거