@simplysm/angular 14.0.1 → 14.0.5

package/dist/ui/form/editor/sd-tiptap-editor.control.js

@@ -0,0 +1,480 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, input, model, untracked, ViewEncapsulation, } from "@angular/core";
+import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import * as i0 from "@angular/core";
+function SdTiptapEditorControl_Conditional_0_Conditional_48_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 26);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Conditional_48_For_2_Template_button_click_0_listener() { const color_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.applyColor(color_r5)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const color_r5 = ctx.$implicit;
+    i0.ɵɵstyleProp("background-color", color_r5);
+    i0.ɵɵattribute("aria-label", color_r5);
+} }
+function SdTiptapEditorControl_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 23);
+    i0.ɵɵrepeaterCreate(1, SdTiptapEditorControl_Conditional_0_Conditional_48_For_2_Template, 1, 3, "button", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementStart(3, "button", 25);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.colorPresets);
+} }
+function SdTiptapEditorControl_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 SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "button", 4);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 5);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "button", 6);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "button", 7);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "button", 8);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(15, "div", 2)(16, "button", 9);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleColorPicker("text")); });
+    i0.ɵɵdomElement(17, "span", 10);
+    i0.ɵɵtext(18, " A ");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(19, "button", 11);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleColorPicker("bg")); });
+    i0.ɵɵdomElement(20, "span", 10);
+    i0.ɵɵtext(21, " BG ");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(22, "div", 2)(23, "button", 12);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(25, "button", 13);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(27, "button", 14);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("indent")); });
+    i0.ɵɵtext(28, "\u2192");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(29, "button", 15);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("outdent")); });
+    i0.ɵɵtext(30, "\u2190");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(31, "div", 2)(32, "button", 16);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(34, "button", 17);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(36, "div", 2)(37, "button", 18);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(39, "button", 19);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(41, "button", 20);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(43, "button", 21);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_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.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(45, "div", 2)(46, "button", 22);
+    i0.ɵɵdomListener("click", function SdTiptapEditorControl_Conditional_0_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.execCmd("clean")); });
+    i0.ɵɵtext(47, "Tx");
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵconditionalCreate(48, SdTiptapEditorControl_Conditional_0_Conditional_48_Template, 5, 0, "div", 23);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.h1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.h2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.bold);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.italic);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.underline);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.strike);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("background-color", ctx_r1.activeColor);
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", ctx_r1.activeBgColor);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.bulletList);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.orderedList);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.blockquote);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.codeBlock);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.alignLeft);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.alignCenter);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.alignRight);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("_active", ctx_r1.activeStates.alignJustify);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.colorPickerMode !== undefined ? 48 : -1);
+} }
+const DEFAULT_EXTENSIONS = [
+    StarterKit,
+    TextStyle,
+    Color,
+    Highlight.configure({ multicolor: true }),
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    Image.configure({ inline: false, allowBase64: true }),
+];
+export class SdTiptapEditorControl {
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    validatorFn = input(...(ngDevMode ? [undefined, { debugName: "validatorFn" }] : /* istanbul ignore next */ []));
+    extensions = input(...(ngDevMode ? [undefined, { debugName: "extensions" }] : /* istanbul ignore next */ []));
+    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",
+    ];
+    activeStates = {};
+    activeColor = "";
+    activeBgColor = "";
+    colorPickerMode;
+    /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+    editor;
+    updatingFromEditor = false;
+    lastExtensions;
+    resolvedExtensions = computed(() => {
+        const custom = this.extensions();
+        if (custom !== undefined)
+            return custom;
+        const ph = this.placeholder();
+        if (ph !== undefined) {
+            return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+        }
+        return DEFAULT_EXTENSIONS;
+    }, ...(ngDevMode ? [{ debugName: "resolvedExtensions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Single effect that tracks both extensions and value
+        effect(() => {
+            const extensions = this.resolvedExtensions();
+            const val = this.value();
+            // Skip if value change originated from editor input
+            if (this.updatingFromEditor)
+                return;
+            // Recreate editor if extensions changed
+            if (this.lastExtensions !== extensions) {
+                this.lastExtensions = extensions;
+                this.destroyEditor();
+                this.createEditor(extensions, val);
+                return;
+            }
+            // Sync value to existing editor
+            if (this.editor == null)
+                return;
+            const currentHtml = this.getEditorHtml();
+            if (currentHtml === val)
+                return;
+            this.editor.commands.setContent(val ?? "", { emitUpdate: false });
+        });
+        // disabled/readonly → editor.setEditable()
+        effect(() => {
+            if (this.editor == null)
+                return;
+            const editable = !this.disabled() && !this.readonly();
+            this.editor.setEditable(editable);
+        });
+        // setupInvalid for form validation
+        setupInvalid(() => {
+            const errorMessages = [];
+            if (this.value() == null) {
+                if (this.required()) {
+                    errorMessages.push("값을 입력하세요.");
+                }
+            }
+            if (this.validatorFn()) {
+                const message = this.validatorFn()(this.value());
+                if (message !== undefined) {
+                    errorMessages.push(message);
+                }
+            }
+            return errorMessages.join("\r\n");
+        });
+        this.destroyRef.onDestroy(() => {
+            this.destroyEditor();
+        });
+    }
+    createEditor(extensions, initialContent) {
+        const container = this.elRef.nativeElement.querySelector("._editor-container");
+        if (container == null)
+            return;
+        this.editor = new Editor({
+            element: container,
+            extensions,
+            content: initialContent ?? "",
+            editable: untracked(() => !this.disabled() && !this.readonly()),
+            onUpdate: ({ editor }) => {
+                const html = this.getEditorHtmlFrom(editor);
+                this.updatingFromEditor = true;
+                this.value.set(html);
+                this.updatingFromEditor = false;
+            },
+            onTransaction: () => {
+                this.refreshActiveStates();
+            },
+        });
+    }
+    destroyEditor() {
+        if (this.editor != null) {
+            this.editor.destroy();
+            this.editor = undefined;
+        }
+    }
+    getEditorHtml() {
+        if (this.editor == null)
+            return undefined;
+        return this.getEditorHtmlFrom(this.editor);
+    }
+    getEditorHtmlFrom(editor) {
+        const html = editor.getHTML();
+        if (editor.isEmpty)
+            return undefined;
+        return html;
+    }
+    execCmd(cmd) {
+        if (this.editor == null)
+            return;
+        const chain = this.editor.chain().focus();
+        switch (cmd) {
+            case "bold":
+                chain.toggleBold().run();
+                break;
+            case "italic":
+                chain.toggleItalic().run();
+                break;
+            case "underline":
+                chain.toggleUnderline().run();
+                break;
+            case "strike":
+                chain.toggleStrike().run();
+                break;
+            case "h1":
+                chain.toggleHeading({ level: 1 }).run();
+                break;
+            case "h2":
+                chain.toggleHeading({ level: 2 }).run();
+                break;
+            case "bulletList":
+                chain.toggleBulletList().run();
+                break;
+            case "orderedList":
+                chain.toggleOrderedList().run();
+                break;
+            case "indent":
+                chain.sinkListItem("listItem").run();
+                break;
+            case "outdent":
+                chain.liftListItem("listItem").run();
+                break;
+            case "blockquote":
+                chain.toggleBlockquote().run();
+                break;
+            case "codeBlock":
+                chain.toggleCodeBlock().run();
+                break;
+            case "alignLeft":
+                chain.setTextAlign("left").run();
+                break;
+            case "alignCenter":
+                chain.setTextAlign("center").run();
+                break;
+            case "alignRight":
+                chain.setTextAlign("right").run();
+                break;
+            case "alignJustify":
+                chain.setTextAlign("justify").run();
+                break;
+            case "clean":
+                chain.clearNodes().unsetAllMarks().run();
+                break;
+        }
+    }
+    toggleColorPicker(mode) {
+        this.colorPickerMode = this.colorPickerMode === mode ? undefined : mode;
+    }
+    applyColor(color) {
+        if (this.editor == null)
+            return;
+        const chain = this.editor.chain().focus();
+        if (this.colorPickerMode === "text") {
+            if (color !== undefined) {
+                chain.setColor(color).run();
+            }
+            else {
+                chain.unsetColor().run();
+            }
+        }
+        else if (this.colorPickerMode === "bg") {
+            if (color !== undefined) {
+                chain.setHighlight({ color }).run();
+            }
+            else {
+                chain.unsetHighlight().run();
+            }
+        }
+        this.colorPickerMode = undefined;
+    }
+    refreshActiveStates() {
+        if (this.editor == null)
+            return;
+        this.activeStates = {
+            bold: this.editor.isActive("bold"),
+            italic: this.editor.isActive("italic"),
+            underline: this.editor.isActive("underline"),
+            strike: this.editor.isActive("strike"),
+            h1: this.editor.isActive("heading", { level: 1 }),
+            h2: this.editor.isActive("heading", { level: 2 }),
+            bulletList: this.editor.isActive("bulletList"),
+            orderedList: this.editor.isActive("orderedList"),
+            blockquote: this.editor.isActive("blockquote"),
+            codeBlock: this.editor.isActive("codeBlock"),
+            alignLeft: this.editor.isActive({ textAlign: "left" }),
+            alignCenter: this.editor.isActive({ textAlign: "center" }),
+            alignRight: this.editor.isActive({ textAlign: "right" }),
+            alignJustify: this.editor.isActive({ textAlign: "justify" }),
+        };
+        const textColor = this.editor.getAttributes("textStyle")["color"];
+        this.activeColor = typeof textColor === "string" ? textColor : "";
+        const bgColor = this.editor.getAttributes("highlight")["color"];
+        this.activeBgColor = typeof bgColor === "string" ? bgColor : "";
+    }
+    static ɵfac = function SdTiptapEditorControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTiptapEditorControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTiptapEditorControl, selectors: [["sd-tiptap-editor"]], hostVars: 2, hostBindings: function SdTiptapEditorControl_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly());
+        } }, inputs: { value: [1, "value"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], placeholder: [1, "placeholder"], validatorFn: [1, "validatorFn"], extensions: [1, "extensions"] }, outputs: { value: "valueChange" }, decls: 2, vars: 1, consts: [[1, "_editor-container"], [1, "_toolbar"], [1, "_btn-group"], ["type", "button", "data-cmd", "h1", 3, "click"], ["type", "button", "data-cmd", "h2", 3, "click"], ["type", "button", "data-cmd", "bold", 3, "click"], ["type", "button", "data-cmd", "italic", 3, "click"], ["type", "button", "data-cmd", "underline", 3, "click"], ["type", "button", "data-cmd", "strike", 3, "click"], ["type", "button", "data-cmd", "textColor", 1, "_color-btn", 3, "click"], [1, "_color-indicator"], ["type", "button", "data-cmd", "bgColor", 1, "_color-btn", 3, "click"], ["type", "button", "data-cmd", "bulletList", 3, "click"], ["type", "button", "data-cmd", "orderedList", 3, "click"], ["type", "button", "data-cmd", "indent", 3, "click"], ["type", "button", "data-cmd", "outdent", 3, "click"], ["type", "button", "data-cmd", "blockquote", 3, "click"], ["type", "button", "data-cmd", "codeBlock", 3, "click"], ["type", "button", "data-cmd", "alignLeft", 3, "click"], ["type", "button", "data-cmd", "alignCenter", 3, "click"], ["type", "button", "data-cmd", "alignRight", 3, "click"], ["type", "button", "data-cmd", "alignJustify", 3, "click"], ["type", "button", "data-cmd", "clean", 3, "click"], [1, "_color-picker"], ["type", "button", 1, "_color-swatch", 3, "background-color"], ["type", "button", 1, "_color-swatch", "_no-color", 3, "click"], ["type", "button", 1, "_color-swatch", 3, "click"]], template: function SdTiptapEditorControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SdTiptapEditorControl_Conditional_0_Template, 49, 33);
+            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}\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, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditorControl, [{
+        type: Component,
+        args: [{ selector: "sd-tiptap-editor", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
+    @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>
+        </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>
+        </div>
+        <div class="_btn-group">
+          <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')">
+            <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="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>
+        </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>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+      @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 _no-color"
+                  (click)="applyColor(undefined)">✕</button>
+        </div>
+      }
+    }
+    <div class="_editor-container"></div>
+  `, 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}\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}"] }]
+    }], () => [], { 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(SdTiptapEditorControl, { className: "SdTiptapEditorControl", filePath: "packages/angular/src/ui/form/editor/sd-tiptap-editor.control.ts", lineNumber: 232 }); })();

package/dist/ui/form/input/sd-date-range.picker.d.ts

@@ -0,0 +1,13 @@
+import { DateOnly } from "@simplysm/core-common";
+import * as i0 from "@angular/core";
+export declare class SdDateRangePicker {
+    periodType: import("@angular/core").ModelSignal<"일" | "월" | "범위">;
+    from: import("@angular/core").ModelSignal<DateOnly | undefined>;
+    to: import("@angular/core").ModelSignal<DateOnly | undefined>;
+    required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    handleDatePeriodTypeChanged(): void;
+    handleFromDateChanged(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdDateRangePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDateRangePicker, "sd-date-range-picker", never, { "periodType": { "alias": "periodType"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; "to": { "alias": "to"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "periodType": "periodTypeChange"; "from": "fromChange"; "to": "toChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-date-range.picker.d.ts.map

package/dist/ui/form/input/sd-date-range.picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-date-range.picker.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\form\\input\\sd-date-range.picker.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;;AAEjD,qBA+Ca,iBAAiB;IAC5B,UAAU,wDAAiC;IAC3C,IAAI,4DAAqB;IACzB,EAAE,4DAAqB;IAEvB,QAAQ,qEAAiD;IAEzD,2BAA2B,IAAI,IAAI;IAcnC,qBAAqB,IAAI,IAAI;yCArBlB,iBAAiB;2CAAjB,iBAAiB;CAoC7B"}

package/dist/ui/form/input/sd-date-range.picker.js

@@ -0,0 +1,125 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, ViewEncapsulation, } from "@angular/core";
+import { SdSelectControl } from "../select/sd-select.control";
+import { SdSelectItemControl } from "../select/sd-select-item.control";
+import { SdRangeControl } from "./sd-range.control";
+import { SdTextfieldControl } from "./sd-textfield.control";
+import { DateOnly } from "@simplysm/core-common";
+import * as i0 from "@angular/core";
+function SdDateRangePicker_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-range", 4);
+    i0.ɵɵtwoWayListener("fromChange", function SdDateRangePicker_Conditional_7_Template_sd_range_fromChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.from, $event) || (ctx_r1.from = $event); return i0.ɵɵresetView($event); })("toChange", function SdDateRangePicker_Conditional_7_Template_sd_range_toChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.to, $event) || (ctx_r1.to = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("fromChange", function SdDateRangePicker_Conditional_7_Template_sd_range_fromChange_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleFromDateChanged()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("type", "date");
+    i0.ɵɵtwoWayProperty("from", ctx_r1.from)("to", ctx_r1.to);
+    i0.ɵɵproperty("required", ctx_r1.required());
+} }
+function SdDateRangePicker_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "sd-textfield", 5);
+    i0.ɵɵtwoWayListener("valueChange", function SdDateRangePicker_Conditional_8_Template_sd_textfield_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.from, $event) || (ctx_r1.from = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function SdDateRangePicker_Conditional_8_Template_sd_textfield_valueChange_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleFromDateChanged()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("required", ctx_r1.required())("type", ctx_r1.periodType() === "\uC6D4" ? "month" : "date");
+    i0.ɵɵtwoWayProperty("value", ctx_r1.from);
+} }
+export class SdDateRangePicker {
+    periodType = model("범위", ...(ngDevMode ? [{ debugName: "periodType" }] : /* istanbul ignore next */ []));
+    from = model(...(ngDevMode ? [undefined, { debugName: "from" }] : /* istanbul ignore next */ []));
+    to = model(...(ngDevMode ? [undefined, { debugName: "to" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    handleDatePeriodTypeChanged() {
+        if (this.periodType() === "월") {
+            const fromDate = this.from();
+            if (fromDate) {
+                this.from.set(fromDate.setDay(1));
+                this.to.set(fromDate.addMonths(1).setDay(1).addDays(-1));
+            }
+            else {
+                this.to.set(undefined);
+            }
+        }
+        else if (this.periodType() === "일") {
+            this.to.set(this.from());
+        }
+    }
+    handleFromDateChanged() {
+        if (this.periodType() === "월") {
+            const fromDate = this.from();
+            this.to.set(fromDate?.addMonths(1).setDay(1).addDays(-1));
+        }
+        else if (this.periodType() === "일") {
+            this.to.set(this.from());
+        }
+        else if (this.periodType() === "범위" &&
+            this.from() &&
+            this.to() &&
+            this.from().tick > this.to().tick) {
+            this.to.set(this.from());
+        }
+    }
+    static ɵfac = function SdDateRangePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDateRangePicker)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDateRangePicker, selectors: [["sd-date-range-picker"]], inputs: { periodType: [1, "periodType"], from: [1, "from"], to: [1, "to"], required: [1, "required"] }, outputs: { periodType: "periodTypeChange", from: "fromChange", to: "toChange" }, decls: 9, vars: 6, consts: [[2, "min-width", "0", 3, "valueChange", "value", "required"], [3, "value"], [3, "type", "from", "to", "required"], [3, "required", "type", "value"], [3, "fromChange", "toChange", "type", "from", "to", "required"], [3, "valueChange", "required", "type", "value"]], template: function SdDateRangePicker_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "sd-select", 0);
+            i0.ɵɵtwoWayListener("valueChange", function SdDateRangePicker_Template_sd_select_valueChange_0_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.periodType, $event) || (ctx.periodType = $event); return $event; });
+            i0.ɵɵlistener("valueChange", function SdDateRangePicker_Template_sd_select_valueChange_0_listener() { return ctx.handleDatePeriodTypeChanged(); });
+            i0.ɵɵelementStart(1, "sd-select-item", 1);
+            i0.ɵɵtext(2, "\uC77C");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "sd-select-item", 1);
+            i0.ɵɵtext(4, "\uC6D4");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "sd-select-item", 1);
+            i0.ɵɵtext(6, "\uBC94\uC704");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(7, SdDateRangePicker_Conditional_7_Template, 1, 4, "sd-range", 2)(8, SdDateRangePicker_Conditional_8_Template, 1, 3, "sd-textfield", 3);
+        } if (rf & 2) {
+            i0.ɵɵtwoWayProperty("value", ctx.periodType);
+            i0.ɵɵproperty("required", true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", "\uC77C");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", "\uC6D4");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", "\uBC94\uC704");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
+        } }, dependencies: [SdSelectControl, SdSelectItemControl, SdRangeControl, SdTextfieldControl], styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
+        type: Component,
+        args: [{ selector: "sd-date-range-picker", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdSelectControl, SdSelectItemControl, SdRangeControl, SdTextfieldControl], template: `
+    <sd-select
+      [(value)]="periodType"
+      (valueChange)="handleDatePeriodTypeChanged()"
+      [required]="true"
+      style="min-width: 0"
+    >
+      <sd-select-item [value]="'일'">일</sd-select-item>
+      <sd-select-item [value]="'월'">월</sd-select-item>
+      <sd-select-item [value]="'범위'">범위</sd-select-item>
+    </sd-select>
+    @if (periodType() === "범위") {
+      <sd-range
+        [type]="'date'"
+        [(from)]="from"
+        [(to)]="to"
+        (fromChange)="handleFromDateChanged()"
+        [required]="required()"
+      />
+    } @else {
+      <sd-textfield
+        [required]="required()"
+        [type]="periodType() === '월' ? 'month' : 'date'"
+        [(value)]="from"
+        (valueChange)="handleFromDateChanged()"
+      />
+    }
+  `, styles: ["sd-date-range-picker {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n  sd-date-range-picker {\n    gap: 0;\n  }\n  sd-date-range-picker > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-xxs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-date-range-picker.gap-xs {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-date-range-picker.gap-sm {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-date-range-picker.gap-default {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-date-range-picker.gap-lg {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-date-range-picker.gap-xl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-date-range-picker.gap-xxl {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-date-range-picker.gap-0 {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-date-range-picker.gap-auto {\n    gap: 0;\n  }\n  sd-date-range-picker.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"] }]
+    }], null, { periodType: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodType", required: false }] }, { type: i0.Output, args: ["periodTypeChange"] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDateRangePicker, { className: "SdDateRangePicker", filePath: "packages/angular/src/ui/form/input/sd-date-range.picker.ts", lineNumber: 62 }); })();