@simplysm/angular 14.0.43 → 14.0.45

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

@@ -1,4 +1,5 @@
 import { TemplateRef } from "@angular/core";
+import type { SafeHtml } from "@angular/platform-browser";
 import { SdSelectItem } from "./sd-select-item";
 import * as i0 from "@angular/core";
 export type SelectModeValue<T> = {
@@ -29,7 +30,8 @@ export declare class SdSelect<M extends "single" | "multi", T> {
     _headerTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     _beforeTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     _itemOfTpl: import("@angular/core").Signal<TemplateRef<any> | undefined>;
-    _selectedItemContentHTML: import("@angular/core").WritableSignal<string | undefined>;
+    private readonly _sanitizer;
+    _selectedItemContentHTML: import("@angular/core").WritableSignal<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,EAYL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAIvB,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,qBAuNa,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,wBAAwB,6DAAyC;IAEjE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IA8HH,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;yCAhOT,QAAQ;2CAAR,QAAQ;CAoOpB"}
+{"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,qBAuNa,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;;IAgIH,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;yCApOT,QAAQ;2CAAR,QAAQ;CAwOpB"}

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

@@ -1,5 +1,6 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, inject, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
+import { DomSanitizer } from "@angular/platform-browser";
 import { SdDropdown } from "../dropdown/sd-dropdown";
 import { SdDropdownPopup } from "../dropdown/sd-dropdown-popup";
 import { SdSelectItem } from "./sd-select-item";
@@ -120,6 +121,7 @@ export class SdSelect {
     _headerTpl = contentChild("headerTpl", ...(ngDevMode ? [{ debugName: "_headerTpl" }] : /* istanbul ignore next */ []));
     _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 */ []));
     _flatItems = computed(() => {
         const items = this.items();
@@ -241,7 +243,7 @@ export class SdSelect {
                     }
                 }
                 if (htmlParts.length > 0) {
-                    this._selectedItemContentHTML.set(htmlParts.join(separator));
+                    this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator)));
                 }
                 else {
                     this._selectedItemContentHTML.set(undefined);
@@ -252,7 +254,7 @@ export class SdSelect {
             if (selectedItem != null) {
                 const html = selectedItem.contentHTML();
                 if (html !== "") {
-                    this._selectedItemContentHTML.set(html);
+                    this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(html));
                 }
                 else {
                     this._selectedItemContentHTML.set(undefined);
@@ -426,4 +428,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: 251 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 254 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.43",
+  "version": "14.0.45",
   "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-common": "14.0.43",
-    "@simplysm/core-browser": "14.0.43",
-    "@simplysm/service-client": "14.0.43",
-    "@simplysm/service-common": "14.0.43"
+    "@simplysm/core-common": "14.0.45",
+    "@simplysm/service-client": "14.0.45",
+    "@simplysm/service-common": "14.0.45",
+    "@simplysm/core-browser": "14.0.45"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.8",

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

@@ -7,6 +7,7 @@ import {
   contentChildren,
   effect,
   ElementRef,
+  inject,
   input,
   model,
   signal,
@@ -16,6 +17,8 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
+import type { SafeHtml } from "@angular/platform-browser";
+import { DomSanitizer } from "@angular/platform-browser";
 import { SdDropdown } from "../dropdown/sd-dropdown";
 import { SdDropdownPopup } from "../dropdown/sd-dropdown-popup";
 import { SdSelectItem } from "./sd-select-item";
@@ -283,7 +286,9 @@ export class SdSelect<M extends "single" | "multi", T> {
   _beforeTpl = contentChild<TemplateRef<void>>("beforeTpl");
   _itemOfTpl = contentChild(SdItemOfTemplate, { read: TemplateRef });
 
-  _selectedItemContentHTML = signal<string | undefined>(undefined);
+  private readonly _sanitizer = inject(DomSanitizer);
+
+  _selectedItemContentHTML = signal<SafeHtml | undefined>(undefined);
 
   _flatItems = computed(() => {
     const items = this.items();
@@ -409,7 +414,9 @@ export class SdSelect<M extends "single" | "multi", T> {
           }
         }
         if (htmlParts.length > 0) {
-          this._selectedItemContentHTML.set(htmlParts.join(separator));
+          this._selectedItemContentHTML.set(
+            this._sanitizer.bypassSecurityTrustHtml(htmlParts.join(separator)),
+          );
         } else {
           this._selectedItemContentHTML.set(undefined);
         }
@@ -420,7 +427,7 @@ export class SdSelect<M extends "single" | "multi", T> {
       if (selectedItem != null) {
         const html = selectedItem.contentHTML();
         if (html !== "") {
-          this._selectedItemContentHTML.set(html);
+          this._selectedItemContentHTML.set(this._sanitizer.bypassSecurityTrustHtml(html));
         } else {
           this._selectedItemContentHTML.set(undefined);
         }