@simplysm/angular 14.0.62 → 14.0.64

package/dist/controls/select/sd-select.d.ts

@@ -31,7 +31,7 @@ export declare class SdSelect<M extends "single" | "multi", T> {
     _beforeTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     _itemOfTpl: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     private readonly _sanitizer;
-    _selectedItemContentHTML: import("@angular/core").WritableSignal<SafeHtml | undefined>;
+    _selectedItemContentHTML: import("@angular/core").Signal<SafeHtml | undefined>;
     _flatItems: import("@angular/core").Signal<{
         data: T;
         index: number;

package/dist/controls/select/sd-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAaL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA4Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,+DAA2C;IAEnE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmGH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCAvMT,QAAQ;2CAAR,QAAQ;CA2MpB"}
+{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA4Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,uDAwBrB;IAEH,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmDH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCA/KT,QAAQ;2CAAR,QAAQ;CAmLpB"}

package/dist/controls/select/sd-select.js

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, inject, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, inject, input, model, TemplateRef, viewChild, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { DomSanitizer } from "@angular/platform-browser";
 import { SdDropdown } from "../dropdown/sd-dropdown";
@@ -122,7 +122,34 @@ export class SdSelect {
     _beforeTpl = contentChild("beforeTpl", ...(ngDevMode ? [{ debugName: "_beforeTpl" }] : /* istanbul ignore next */ []));
     _itemOfTpl = contentChild(SdItemOfTemplate, { ...(ngDevMode ? { debugName: "_itemOfTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     _sanitizer = inject(DomSanitizer);
-    _selectedItemContentHTML = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedItemContentHTML" }] : /* istanbul ignore next */ []));
+    _selectedItemContentHTML = computed(() => {
+        const items = this._itemControls();
+        const currentValue = this.value();
+        if (this.selectMode() === "multi") {
+            if (!Array.isArray(currentValue) || currentValue.length === 0)
+                return undefined;
+            const arr = currentValue;
+            const selectedItems = items.filter((item) => arr.includes(item.value()));
+            const isVertical = this.multiSelectionDisplayDirection() === "vertical";
+            const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
+            const htmlParts = [];
+            for (const item of selectedItems) {
+                const html = item.contentHTML();
+                if (html !== "")
+                    htmlParts.push(`<span style="display: inline">${html}</span>`);
+            }
+            if (htmlParts.length === 0)
+                return undefined;
+            return this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator));
+        }
+        const selectedItem = items.find((item) => item.value() === currentValue);
+        if (selectedItem == null)
+            return undefined;
+        const html = selectedItem.contentHTML();
+        if (html === "")
+            return undefined;
+        return this._sanitizer.bypassSecurityTrustHtml(html);
+    }, ...(ngDevMode ? [{ debugName: "_selectedItemContentHTML" }] : /* istanbul ignore next */ []));
     _flatItems = computed(() => {
         const items = this.items();
         if (items == null)
@@ -191,50 +218,6 @@ export class SdSelect {
                 });
             }
         });
-        // Mirror selected item's contentHTML to the trigger display area
-        // PERF-004: item.value() reads are untracked to reduce signal subscriptions from O(N) to O(K).
-        // _itemControls() already tracks item additions/removals, value() tracks selection changes.
-        effect(() => {
-            const items = this._itemControls();
-            const currentValue = this.value();
-            if (this.selectMode() === "multi") {
-                if (!Array.isArray(currentValue) || currentValue.length === 0) {
-                    this._selectedItemContentHTML.set(undefined);
-                    return;
-                }
-                const arr = currentValue;
-                const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
-                const isVertical = this.multiSelectionDisplayDirection() === "vertical";
-                const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
-                const htmlParts = [];
-                for (const item of selectedItems) {
-                    const html = item.contentHTML();
-                    if (html !== "") {
-                        htmlParts.push(`<span style="display: inline">${html}</span>`);
-                    }
-                }
-                if (htmlParts.length > 0) {
-                    this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator)));
-                }
-                else {
-                    this._selectedItemContentHTML.set(undefined);
-                }
-                return;
-            }
-            const selectedItem = untracked(() => items.find((item) => item.value() === currentValue));
-            if (selectedItem != null) {
-                const html = selectedItem.contentHTML();
-                if (html !== "") {
-                    this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(html));
-                }
-                else {
-                    this._selectedItemContentHTML.set(undefined);
-                }
-            }
-            else {
-                this._selectedItemContentHTML.set(undefined);
-            }
-        });
     }
     selectItem(itemValue) {
         this._setOrToggle(itemValue);
@@ -406,4 +389,4 @@ export class SdSelect {
                     "[attr.data-sd-disabled]": "disabled()",
                 }, styles: ["sd-select {\n  display: block;\n  position: relative;\n  width: 100%;\n  min-width: 10em;\n}\nsd-select > sd-dropdown {\n  display: flex;\n  overflow: hidden;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n  border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: flex;\n  position: relative;\n  gap: var(--gap-default);\n  flex-grow: 1;\n  padding: var(--gap-sm) var(--gap-default);\n  cursor: pointer;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n  opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n  padding: var(--gap-sm);\n  border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n  border-top-right-radius: var(--border-radius-default);\n  border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n  background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-light);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n  vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n  gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n  padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n  gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n  padding: var(--gap-default);\n}\nsd-select[data-sd-inset=true] {\n  min-width: auto;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n  background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"] }]
     }], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], dropdownOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOpen", required: false }] }, { type: i0.Output, args: ["dropdownOpenChange"] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItem), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 259 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 257 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.62",
+  "version": "14.0.64",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -50,10 +50,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.62",
-    "@simplysm/core-common": "14.0.62",
-    "@simplysm/service-client": "14.0.62",
-    "@simplysm/service-common": "14.0.62"
+    "@simplysm/core-browser": "14.0.64",
+    "@simplysm/core-common": "14.0.64",
+    "@simplysm/service-common": "14.0.64",
+    "@simplysm/service-client": "14.0.64"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.10",

package/src/controls/select/sd-select.ts

@@ -10,9 +10,7 @@ import {
   inject,
   input,
   model,
-  signal,
   TemplateRef,
-  untracked,
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
@@ -293,7 +291,31 @@ export class SdSelect<M extends "single" | "multi", T> {
 
   private readonly _sanitizer = inject(DomSanitizer);
 
-  _selectedItemContentHTML = signal<SafeHtml | undefined>(undefined);
+  _selectedItemContentHTML = computed<SafeHtml | undefined>(() => {
+    const items = this._itemControls();
+    const currentValue = this.value();
+
+    if (this.selectMode() === "multi") {
+      if (!Array.isArray(currentValue) || currentValue.length === 0) return undefined;
+      const arr: T[] = currentValue;
+      const selectedItems = items.filter((item) => arr.includes(item.value()));
+      const isVertical = this.multiSelectionDisplayDirection() === "vertical";
+      const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
+      const htmlParts: string[] = [];
+      for (const item of selectedItems) {
+        const html = item.contentHTML();
+        if (html !== "") htmlParts.push(`<span style="display: inline">${html}</span>`);
+      }
+      if (htmlParts.length === 0) return undefined;
+      return this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator));
+    }
+
+    const selectedItem = items.find((item) => item.value() === currentValue);
+    if (selectedItem == null) return undefined;
+    const html = selectedItem.contentHTML();
+    if (html === "") return undefined;
+    return this._sanitizer.bypassSecurityTrustHtml(html);
+  });
 
   _flatItems = computed(() => {
     const items = this.items();
@@ -363,54 +385,6 @@ export class SdSelect<M extends "single" | "multi", T> {
         });
       }
     });
-
-    // Mirror selected item's contentHTML to the trigger display area
-    // PERF-004: item.value() reads are untracked to reduce signal subscriptions from O(N) to O(K).
-    // _itemControls() already tracks item additions/removals, value() tracks selection changes.
-    effect(() => {
-      const items = this._itemControls();
-      const currentValue = this.value();
-
-      if (this.selectMode() === "multi") {
-        if (!Array.isArray(currentValue) || currentValue.length === 0) {
-          this._selectedItemContentHTML.set(undefined);
-          return;
-        }
-
-        const arr: T[] = currentValue;
-        const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
-
-        const isVertical = this.multiSelectionDisplayDirection() === "vertical";
-        const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
-        const htmlParts: string[] = [];
-        for (const item of selectedItems) {
-          const html = item.contentHTML();
-          if (html !== "") {
-            htmlParts.push(`<span style="display: inline">${html}</span>`);
-          }
-        }
-        if (htmlParts.length > 0) {
-          this._selectedItemContentHTML.set(
-            this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator)),
-          );
-        } else {
-          this._selectedItemContentHTML.set(undefined);
-        }
-        return;
-      }
-
-      const selectedItem = untracked(() => items.find((item) => item.value() === currentValue));
-      if (selectedItem != null) {
-        const html = selectedItem.contentHTML();
-        if (html !== "") {
-          this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(html));
-        } else {
-          this._selectedItemContentHTML.set(undefined);
-        }
-      } else {
-        this._selectedItemContentHTML.set(undefined);
-      }
-    });
   }
 
   selectItem(itemValue: T | undefined): void {