@simplysm/angular 14.1.20 → 14.2.1

package/dist/features/editor/sd-tiptap-editor.js

@@ -27,7 +27,7 @@ function SdTiptapEditor_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf
     i0.ɵɵrepeaterCreate(1, SdTiptapEditor_Conditional_0_Conditional_48_For_2_Template, 1, 3, "button", 24, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵdomElementStart(3, "button", 25);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Conditional_48_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applyColor(undefined)); });
-    i0.ɵɵtext(4, "\u2715");
+    i0.ɵɵtext(4, " \u2715 ");
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -38,27 +38,27 @@ function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2)(2, "button", 3);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h1")); });
-    i0.ɵɵtext(3, "H1");
+    i0.ɵɵtext(3, " H1 ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(4, "button", 4);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("h2")); });
-    i0.ɵɵtext(5, "H2");
+    i0.ɵɵtext(5, " H2 ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 5);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bold")); });
-    i0.ɵɵtext(8, "B");
+    i0.ɵɵtext(8, " B ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(9, "button", 6);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("italic")); });
-    i0.ɵɵtext(10, "I");
+    i0.ɵɵtext(10, " I ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(11, "button", 7);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("underline")); });
-    i0.ɵɵtext(12, "U");
+    i0.ɵɵtext(12, " U ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(13, "button", 8);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("strike")); });
-    i0.ɵɵtext(14, "S");
+    i0.ɵɵtext(14, " S ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(15, "div", 2)(16, "button", 9);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleColorPicker("text")); });
@@ -72,11 +72,11 @@ function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(22, "div", 2)(23, "button", 12);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("bulletList")); });
-    i0.ɵɵtext(24, "UL");
+    i0.ɵɵtext(24, " UL ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(25, "button", 13);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("orderedList")); });
-    i0.ɵɵtext(26, "OL");
+    i0.ɵɵtext(26, " OL ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(27, "button", 14);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("indent")); });
@@ -88,27 +88,27 @@ function SdTiptapEditor_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(31, "div", 2)(32, "button", 16);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("blockquote")); });
-    i0.ɵɵtext(33, "\u275D");
+    i0.ɵɵtext(33, " \u275D ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(34, "button", 17);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("codeBlock")); });
-    i0.ɵɵtext(35, "</>");
+    i0.ɵɵtext(35, " </> ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(36, "div", 2)(37, "button", 18);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignLeft")); });
-    i0.ɵɵtext(38, "\u2261L");
+    i0.ɵɵtext(38, " \u2261L ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(39, "button", 19);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignCenter")); });
-    i0.ɵɵtext(40, "\u2261C");
+    i0.ɵɵtext(40, " \u2261C ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(41, "button", 20);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignRight")); });
-    i0.ɵɵtext(42, "\u2261R");
+    i0.ɵɵtext(42, " \u2261R ");
     i0.ɵɵdomElementEnd();
     i0.ɵɵdomElementStart(43, "button", 21);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_43_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("alignJustify")); });
-    i0.ɵɵtext(44, "\u2261J");
+    i0.ɵɵtext(44, " \u2261J ");
     i0.ɵɵdomElementEnd()();
     i0.ɵɵdomElementStart(45, "div", 2)(46, "button", 22);
     i0.ɵɵdomListener("click", function SdTiptapEditor_Conditional_0_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("clean")); });
@@ -176,11 +176,46 @@ export class SdTiptapEditor {
     _elRef = inject(ElementRef);
     _destroyRef = inject(DestroyRef);
     colorPresets = [
-        "#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef",
-        "#f3f3f3", "#ffffff", "#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff",
-        "#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc",
-        "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc", "#dd7e6b", "#ea9999",
-        "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
+        "#000000",
+        "#434343",
+        "#666666",
+        "#999999",
+        "#b7b7b7",
+        "#cccccc",
+        "#d9d9d9",
+        "#efefef",
+        "#f3f3f3",
+        "#ffffff",
+        "#980000",
+        "#ff0000",
+        "#ff9900",
+        "#ffff00",
+        "#00ff00",
+        "#00ffff",
+        "#4a86e8",
+        "#0000ff",
+        "#9900ff",
+        "#ff00ff",
+        "#e6b8af",
+        "#f4cccc",
+        "#fce5cd",
+        "#fff2cc",
+        "#d9ead3",
+        "#d0e0e3",
+        "#c9daf8",
+        "#cfe2f3",
+        "#d9d2e9",
+        "#ead1dc",
+        "#dd7e6b",
+        "#ea9999",
+        "#f9cb9c",
+        "#ffe599",
+        "#b6d7a8",
+        "#a2c4c9",
+        "#a4c2f4",
+        "#9fc5e8",
+        "#b4a7d6",
+        "#d5a6bd",
     ];
     /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
     editor = signal(undefined, /* @ts-ignore */
@@ -301,7 +336,7 @@ export class SdTiptapEditor {
             i0.ɵɵdomElement(1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.disabled() ? 0 : -1);
-        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--trans-lighter);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--control-color);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
         type: Component,
@@ -309,56 +344,148 @@ export class SdTiptapEditor {
     @if (!disabled()) {
       <div class="_toolbar">
         <div class="_btn-group">
-          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
-                  (click)="execCmd('h1')">H1</button>
-          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
-                  (click)="execCmd('h2')">H2</button>
+          <button
+            type="button"
+            data-cmd="h1"
+            [class._active]="activeStates().h1"
+            (click)="execCmd('h1')"
+          >
+            H1
+          </button>
+          <button
+            type="button"
+            data-cmd="h2"
+            [class._active]="activeStates().h2"
+            (click)="execCmd('h2')"
+          >
+            H2
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
-                  (click)="execCmd('bold')">B</button>
-          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
-                  (click)="execCmd('italic')">I</button>
-          <button type="button" data-cmd="underline" [class._active]="activeStates().underline"
-                  (click)="execCmd('underline')">U</button>
-          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
-                  (click)="execCmd('strike')">S</button>
+          <button
+            type="button"
+            data-cmd="bold"
+            [class._active]="activeStates().bold"
+            (click)="execCmd('bold')"
+          >
+            B
+          </button>
+          <button
+            type="button"
+            data-cmd="italic"
+            [class._active]="activeStates().italic"
+            (click)="execCmd('italic')"
+          >
+            I
+          </button>
+          <button
+            type="button"
+            data-cmd="underline"
+            [class._active]="activeStates().underline"
+            (click)="execCmd('underline')"
+          >
+            U
+          </button>
+          <button
+            type="button"
+            data-cmd="strike"
+            [class._active]="activeStates().strike"
+            (click)="execCmd('strike')"
+          >
+            S
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="textColor" class="_color-btn"
-                  (click)="toggleColorPicker('text')">
+          <button
+            type="button"
+            data-cmd="textColor"
+            class="_color-btn"
+            (click)="toggleColorPicker('text')"
+          >
             <span class="_color-indicator" [style.background-color]="activeColor()"></span>
             A
           </button>
-          <button type="button" data-cmd="bgColor" class="_color-btn"
-                  (click)="toggleColorPicker('bg')">
+          <button
+            type="button"
+            data-cmd="bgColor"
+            class="_color-btn"
+            (click)="toggleColorPicker('bg')"
+          >
             <span class="_color-indicator" [style.background-color]="activeBgColor()"></span>
             BG
           </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
-                  (click)="execCmd('bulletList')">UL</button>
-          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
-                  (click)="execCmd('orderedList')">OL</button>
+          <button
+            type="button"
+            data-cmd="bulletList"
+            [class._active]="activeStates().bulletList"
+            (click)="execCmd('bulletList')"
+          >
+            UL
+          </button>
+          <button
+            type="button"
+            data-cmd="orderedList"
+            [class._active]="activeStates().orderedList"
+            (click)="execCmd('orderedList')"
+          >
+            OL
+          </button>
           <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
           <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
-                  (click)="execCmd('blockquote')">❝</button>
-          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
-                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+          <button
+            type="button"
+            data-cmd="blockquote"
+            [class._active]="activeStates().blockquote"
+            (click)="execCmd('blockquote')"
+          >
+            ❝
+          </button>
+          <button
+            type="button"
+            data-cmd="codeBlock"
+            [class._active]="activeStates().codeBlock"
+            (click)="execCmd('codeBlock')"
+          >
+            &lt;/&gt;
+          </button>
         </div>
         <div class="_btn-group">
-          <button type="button" data-cmd="alignLeft" [class._active]="activeStates().alignLeft"
-                  (click)="execCmd('alignLeft')">≡L</button>
-          <button type="button" data-cmd="alignCenter" [class._active]="activeStates().alignCenter"
-                  (click)="execCmd('alignCenter')">≡C</button>
-          <button type="button" data-cmd="alignRight" [class._active]="activeStates().alignRight"
-                  (click)="execCmd('alignRight')">≡R</button>
-          <button type="button" data-cmd="alignJustify" [class._active]="activeStates().alignJustify"
-                  (click)="execCmd('alignJustify')">≡J</button>
+          <button
+            type="button"
+            data-cmd="alignLeft"
+            [class._active]="activeStates().alignLeft"
+            (click)="execCmd('alignLeft')"
+          >
+            ≡L
+          </button>
+          <button
+            type="button"
+            data-cmd="alignCenter"
+            [class._active]="activeStates().alignCenter"
+            (click)="execCmd('alignCenter')"
+          >
+            ≡C
+          </button>
+          <button
+            type="button"
+            data-cmd="alignRight"
+            [class._active]="activeStates().alignRight"
+            (click)="execCmd('alignRight')"
+          >
+            ≡R
+          </button>
+          <button
+            type="button"
+            data-cmd="alignJustify"
+            [class._active]="activeStates().alignJustify"
+            (click)="execCmd('alignJustify')"
+          >
+            ≡J
+          </button>
         </div>
         <div class="_btn-group">
           <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
@@ -367,13 +494,17 @@ export class SdTiptapEditor {
       @if (colorPickerMode() != undefined) {
         <div class="_color-picker">
           @for (color of colorPresets; track color) {
-            <button type="button" class="_color-swatch"
-                    [style.background-color]="color"
-                    [attr.aria-label]="color"
-                    (click)="applyColor(color)"></button>
+            <button
+              type="button"
+              class="_color-swatch"
+              [style.background-color]="color"
+              [attr.aria-label]="color"
+              (click)="applyColor(color)"
+            ></button>
           }
-          <button type="button" class="_color-swatch _no-color"
-                  (click)="applyColor(undefined)">✕</button>
+          <button type="button" class="_color-swatch _no-color" (click)="applyColor(undefined)">
+            ✕
+          </button>
         </div>
       }
     }
@@ -381,6 +512,6 @@ export class SdTiptapEditor {
   `, host: {
                     "[attr.data-sd-disabled]": "disabled()",
                     "[attr.data-sd-readonly]": "readonly()",
-                }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap-xs);\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--gap-xs) var(--gap-sm);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background: var(--theme-primary-default);\n  color: var(--text-trans-rev-default);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background: var(--trans-lighter);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background: var(--theme-primary-default);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--gap-xs);\n  border-bottom: 1px solid var(--trans-lighter);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--trans-lighter);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--control-color);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background: var(--theme-gray-lightest);\n  color: var(--text-trans-light);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"] }]
+                }, styles: ["sd-tiptap-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-tiptap-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 238 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 335 }); })();

package/dist/features/theme/sd-theme-provider.d.ts

@@ -1,6 +1,23 @@
 import * as i0 from "@angular/core";
+export declare const SD_THEMES: readonly [{
+    readonly value: "light";
+    readonly label: "라이트";
+}, {
+    readonly value: "blueprint";
+    readonly label: "블루프린트";
+}, {
+    readonly value: "ide-dark";
+    readonly label: "IDE 다크";
+}];
+export type SdThemeName = (typeof SD_THEMES)[number]["value"];
+export type SdDensity = "normal" | "compact";
 export declare class SdThemeProvider {
-    blueprint: import("@angular/core").WritableSignal<boolean>;
+    readonly themes: readonly {
+        value: SdThemeName;
+        label: string;
+    }[];
+    theme: import("@angular/core").WritableSignal<"light" | "blueprint" | "ide-dark">;
+    density: import("@angular/core").WritableSignal<SdDensity>;
     readonly fontSizePresets: readonly number[];
     fontSize: import("@angular/core").WritableSignal<number>;
     constructor();

package/dist/features/theme/sd-theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAGA,qBACa,eAAe;IAE1B,SAAS,kDAA0B;IAEnC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAe9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCA5Bb,eAAe;6CAAf,eAAe;CAwC3B"}
+{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,SAAS;;;;;;;;;EAIZ,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7C,qBACa,eAAe;IAC1B,QAAQ,CAAC,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAa;IAG9E,KAAK,6EAAgC;IAErC,OAAO,oDAA+B;IAEtC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAsB9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCAvCb,eAAe;6CAAf,eAAe;CAmD3B"}

package/dist/features/theme/sd-theme-provider.js

@@ -1,10 +1,21 @@
 import { effect, inject, Injectable, PLATFORM_ID, signal } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
+// 내장 테마 단일 정의 — 새 테마 추가 시 여기 항목 1줄 +
+// scss/themes 값 맵 + _theme-variables 의 .sd-theme-{value} writeVars 블록만 추가하면 된다.
+// light 는 :root 기본값이라 값 맵/블록이 없어도 동작한다(클래스가 붙어도 규칙이 없어 무효).
+export const SD_THEMES = [
+    { value: "light", label: "라이트" },
+    { value: "blueprint", label: "블루프린트" },
+    { value: "ide-dark", label: "IDE 다크" },
+];
 export class SdThemeProvider {
-    // 블루프린트(엔지니어링 도면) 테마
-    blueprint = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "blueprint" }] : /* istanbul ignore next */ []));
+    themes = SD_THEMES;
+    // 라이트(기본) / 블루프린트(도면) / IDE 다크
+    theme = signal("light", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    density = signal("normal", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     fontSizePresets = [12, 14, 16, 20, 24, 28];
     fontSize = signal(12, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
@@ -13,7 +24,13 @@ export class SdThemeProvider {
         if (!isPlatformBrowser(inject(PLATFORM_ID)))
             return;
         effect(() => {
-            document.body.classList.toggle("sd-theme-blueprint", this.blueprint());
+            const theme = this.theme();
+            for (const def of this.themes) {
+                document.body.classList.toggle(`sd-theme-${def.value}`, def.value === theme);
+            }
+        });
+        effect(() => {
+            document.body.classList.toggle("sd-density-compact", this.density() === "compact");
         });
         effect(() => {
             document.documentElement.style.fontSize = `${this.fontSize()}px`;

package/dist/features/theme/sd-theme-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,qBA+Ca,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kBAA2B;IAEtD,aAAa,0CAAgF;IAE7F,aAAa,0CAIX;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,uVAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,yTAAe;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,uoBAAiB;yCAbtC,eAAe;2CAAf,eAAe;CAc3B"}
+{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,qBAkEa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kBAA2B;IAEtD,aAAa,0CAAgF;IAE7F,aAAa,0CAIX;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,uVAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,yTAAe;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,uoBAAiB;yCAbtC,eAAe;2CAAf,eAAe;CAc3B"}

package/dist/features/theme/sd-theme-selector.js

@@ -7,6 +7,20 @@ import { NgIcon } from "@ng-icons/core";
 import { SdThemeProvider } from "./sd-theme-provider";
 import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
 import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.value;
+function SdThemeSelector_For_20_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-button", 8);
+    i0.ɵɵlistener("click", function SdThemeSelector_For_20_Template_sd_button_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2._sdTheme.theme.set(item_r2.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("inline", true)("size", "sm")("theme", ctx_r2._sdTheme.theme() === item_r2.value ? "primary" : "link-gray");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r2.label, " ");
+} }
 export class SdThemeSelector {
     _sdTheme = inject(SdThemeProvider);
     isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0], /* @ts-ignore */
@@ -18,7 +32,7 @@ export class SdThemeSelector {
     tablerMinus = tablerMinus;
     tablerPalette = tablerPalette;
     static ɵfac = function SdThemeSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeSelector)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 19, vars: 15, consts: [[3, "inline", "theme"], [3, "svg"], [1, "p-default"], [1, "flex-row", "gap-sm", "cross-align-center"], [1, "flex-row", "gap-xs", "cross-align-center"], [3, "click", "inline", "theme", "size", "disabled"], [3, "valueChange", "value"]], template: function SdThemeSelector_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 25, vars: 16, consts: [[3, "inline", "theme"], [3, "svg"], [1, "p-default"], [1, "flex-row", "gap-sm", "cross-align-center"], [1, "flex-row", "gap-xs", "cross-align-center"], [3, "click", "inline", "theme", "size", "disabled"], [3, "inline", "size", "theme"], [3, "valueChange", "inline", "value"], [3, "click", "inline", "size", "theme"]], template: function SdThemeSelector_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
             i0.ɵɵelement(2, "ng-icon", 1);
             i0.ɵɵelementEnd();
@@ -37,10 +51,16 @@ export class SdThemeSelector {
             i0.ɵɵelement(14, "ng-icon", 1);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(15, "div", 3)(16, "span");
-            i0.ɵɵtext(17, "\uBE14\uB8E8\uD504\uB9B0\uD2B8");
+            i0.ɵɵtext(17, "\uD14C\uB9C8");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "sd-switch", 6);
-            i0.ɵɵtwoWayListener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_18_listener($event) { i0.ɵɵtwoWayBindingSet(ctx._sdTheme.blueprint, $event) || (ctx._sdTheme.blueprint = $event); return $event; });
+            i0.ɵɵelementStart(18, "div", 4);
+            i0.ɵɵrepeaterCreate(19, SdThemeSelector_For_20_Template, 2, 4, "sd-button", 6, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "div", 3)(22, "span");
+            i0.ɵɵtext(23, "compact");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "sd-switch", 7);
+            i0.ɵɵlistener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_24_listener($event) { return ctx._sdTheme.density.set($event ? "compact" : "normal"); });
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -57,8 +77,10 @@ export class SdThemeSelector {
             i0.ɵɵproperty("inline", true)("theme", "link-gray")("size", "sm")("disabled", ctx.isMaxFontSize());
             i0.ɵɵadvance();
             i0.ɵɵproperty("svg", ctx.tablerPlus);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtwoWayProperty("value", ctx._sdTheme.blueprint);
+            i0.ɵɵadvance(5);
+            i0.ɵɵrepeater(ctx._sdTheme.themes);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("inline", true)("value", ctx._sdTheme.density() === "compact");
         } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
@@ -95,12 +117,31 @@ export class SdThemeSelector {
             </div>
           </div>
           <div class="flex-row gap-sm cross-align-center">
-            <span>블루프린트</span>
-            <sd-switch [(value)]="_sdTheme.blueprint" />
+            <span>테마</span>
+            <div class="flex-row gap-xs cross-align-center">
+              @for (item of _sdTheme.themes; track item.value) {
+                <sd-button
+                  [inline]="true"
+                  [size]="'sm'"
+                  [theme]="_sdTheme.theme() === item.value ? 'primary' : 'link-gray'"
+                  (click)="_sdTheme.theme.set(item.value)"
+                >
+                  {{ item.label }}
+                </sd-button>
+              }
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>compact</span>
+            <sd-switch
+              [inline]="true"
+              [value]="_sdTheme.density() === 'compact'"
+              (valueChange)="_sdTheme.density.set($event ? 'compact' : 'normal')"
+            />
           </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>
   ` }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 63 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 82 }); })();

package/dist/features/theme/wcag-contrast.d.ts

@@ -0,0 +1,9 @@
+/**
+ * WCAG 2.x 대비율 (1-21).
+ *
+ * @param foregroundColor 전경색(텍스트 등). 알파면 배경 위에 합성 후 계산.
+ * @param backgroundColor 배경색. 알파면 `baseColor` 위에 합성(불투명 배경이면 불필요).
+ * @param baseColor 반투명 배경 아래의 최종 불투명 표면색.
+ */
+export declare function getWcagContrastRatio(foregroundColor: string, backgroundColor: string, baseColor?: string): number;
+//# sourceMappingURL=wcag-contrast.d.ts.map

package/dist/features/theme/wcag-contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wcag-contrast.d.ts","sourceRoot":"","sources":["../../../src/features/theme/wcag-contrast.ts"],"names":[],"mappings":"AAuEA;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,eAAe,EAAE,MAAM,EACvB,eAAe,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAoBR"}