@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,283 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, DestroyRef, effect, ElementRef, inject, input, model, signal, ViewEncapsulation, } from "@angular/core";
+import { SdDropdownPopup } from "./sd-dropdown-popup";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["sd-dropdown-popup"]]];
+const _c1 = ["*", "sd-dropdown-popup"];
+export class SdDropdown {
+    _elRef = inject((ElementRef));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    popupElRef = contentChild.required(SdDropdownPopup, { read: ElementRef });
+    _popupEl;
+    _mouseoverEl;
+    _backdropEl;
+    _isMobile;
+    _mql;
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        // $breakpoint-mobile (SCSS 변수 참조 불가, 값 동기화 필요)
+        this._mql = window.matchMedia("(max-width: 520px)");
+        this._isMobile = signal(this._mql.matches, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+        const onMqlChange = (e) => {
+            this._isMobile.set(e.matches);
+        };
+        this._mql.addEventListener("change", onMqlChange);
+        destroyRef.onDestroy(() => {
+            this._mql.removeEventListener("change", onMqlChange);
+        });
+        effect((onCleanup) => {
+            if (this.open()) {
+                const popupEl = this.popupElRef().nativeElement;
+                this._popupEl = popupEl;
+                document.body.appendChild(popupEl);
+                if (this._isMobile()) {
+                    popupEl.setAttribute("data-sd-mobile", "");
+                    const backdrop = document.createElement("div");
+                    backdrop.setAttribute("data-sd-dropdown-backdrop", "");
+                    backdrop.style.cssText =
+                        "position:fixed;inset:0;background:var(--busy-overlay-bg);z-index:var(--z-index-dropdown)";
+                    backdrop.addEventListener("click", () => {
+                        this._closePopup();
+                    });
+                    document.body.insertBefore(backdrop, popupEl);
+                    this._backdropEl = backdrop;
+                }
+                else {
+                    this._updatePopupPosition();
+                }
+                const onScroll = (event) => {
+                    this._onDocumentScrollCapture(event);
+                };
+                const onMouseover = (event) => {
+                    this._mouseoverEl = event.target;
+                };
+                const onBlur = (event) => {
+                    this._onDocumentBlurCapture(event);
+                };
+                document.addEventListener("scroll", onScroll, { capture: true, passive: true });
+                document.addEventListener("mouseover", onMouseover);
+                document.addEventListener("blur", onBlur, { capture: true });
+                onCleanup(() => {
+                    document.removeEventListener("scroll", onScroll, { capture: true });
+                    document.removeEventListener("mouseover", onMouseover);
+                    document.removeEventListener("blur", onBlur, { capture: true });
+                    this._removePopup();
+                });
+            }
+            else {
+                this._removePopup();
+            }
+        });
+    }
+    onHostClick() {
+        if (this.open()) {
+            this._closePopup();
+        }
+        else {
+            this._openPopup();
+        }
+    }
+    onHostKeydown(event) {
+        if (event.ctrlKey || event.altKey)
+            return;
+        if (event.key === "ArrowDown") {
+            if (!this.open()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._openPopup();
+            }
+            else {
+                const popupEl = this.popupElRef().nativeElement;
+                const focusable = popupEl.findFirstFocusableChild();
+                if (focusable) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    focusable.focus();
+                }
+            }
+        }
+        if (event.key === "ArrowUp") {
+            if (this.open()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._closePopup();
+            }
+        }
+        if (event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.open()) {
+                this._closePopup();
+            }
+            else {
+                this._openPopup();
+            }
+        }
+        if (event.key === "Escape") {
+            if (this.open()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._closePopup();
+            }
+        }
+    }
+    onPopupKeydown(event) {
+        if (event.ctrlKey || event.altKey)
+            return;
+        if (event.key === "Escape") {
+            if (this.open()) {
+                event.preventDefault();
+                event.stopPropagation();
+                this._closePopup();
+            }
+        }
+    }
+    _openPopup() {
+        if (this.open())
+            return;
+        if (this.disabled())
+            return;
+        this.open.set(true);
+    }
+    _closePopup() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    _updatePopupPosition() {
+        const contentEl = this._elRef.nativeElement;
+        const popupEl = this._popupEl;
+        if (popupEl == null)
+            return;
+        contentEl.repaint();
+        const rect = contentEl.getBoundingClientRect();
+        const isPlaceBottom = window.innerHeight < rect.top * 2;
+        const isPlaceRight = window.innerWidth < rect.left * 2;
+        const gap = 2;
+        const topPos = isPlaceBottom ? undefined : rect.bottom + gap;
+        const bottomPos = isPlaceBottom ? window.innerHeight - rect.top : undefined;
+        const leftPos = isPlaceRight ? undefined : rect.left;
+        const rightPos = isPlaceRight ? window.innerWidth - rect.right : undefined;
+        // Calculate available space for popup
+        const availableHeight = isPlaceBottom
+            ? rect.top - gap
+            : window.innerHeight - rect.bottom - gap;
+        const availableWidth = isPlaceRight ? rect.right : window.innerWidth - rect.left;
+        Object.assign(popupEl.style, {
+            top: topPos !== undefined ? topPos + "px" : "",
+            bottom: bottomPos !== undefined ? bottomPos + "px" : "",
+            left: leftPos !== undefined ? leftPos + "px" : "",
+            right: rightPos !== undefined ? rightPos + "px" : "",
+            minWidth: contentEl.offsetWidth + "px",
+            maxHeight: availableHeight > 0 ? availableHeight + "px" : "",
+            maxWidth: availableWidth > 0 ? availableWidth + "px" : "",
+            overflow: "auto",
+            opacity: "1",
+            pointerEvents: "auto",
+            transform: "none",
+        });
+    }
+    _onDocumentScrollCapture(event) {
+        if (this._isMobile())
+            return;
+        const contentEl = this._elRef.nativeElement;
+        if (event.target.contains(contentEl)) {
+            this._updatePopupPosition();
+        }
+    }
+    _onDocumentBlurCapture(event) {
+        const contentEl = this._elRef.nativeElement;
+        const popupEl = this._popupEl;
+        if (popupEl == null)
+            return;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget instanceof HTMLElement) {
+            if (relatedTarget === contentEl ||
+                relatedTarget === popupEl ||
+                contentEl.contains(relatedTarget) === true ||
+                popupEl.contains(relatedTarget) === true) {
+                return;
+            }
+        }
+        const mouseoverEl = this._mouseoverEl;
+        if (relatedTarget == null &&
+            mouseoverEl instanceof HTMLElement &&
+            (contentEl.contains(mouseoverEl) === true || popupEl.contains(mouseoverEl) === true)) {
+            const focusable = popupEl.findFirstFocusableChild();
+            if (focusable != null) {
+                focusable.focus();
+            }
+            else {
+                contentEl.focus();
+            }
+            return;
+        }
+        if (this.open()) {
+            this._closePopup();
+        }
+    }
+    _removePopup() {
+        if (this._backdropEl != null) {
+            this._backdropEl.remove();
+            this._backdropEl = undefined;
+        }
+        const popupEl = this._popupEl;
+        if (popupEl != null) {
+            const contentEl = this._elRef.nativeElement;
+            if (popupEl.matches(":focus-within")) {
+                contentEl.focus();
+            }
+            popupEl.removeAttribute("data-sd-mobile");
+            Object.assign(popupEl.style, {
+                top: "",
+                bottom: "",
+                left: "",
+                right: "",
+                minWidth: "",
+                maxHeight: "",
+                maxWidth: "",
+                overflow: "",
+                opacity: "",
+                pointerEvents: "",
+                transform: "",
+            });
+            popupEl.remove();
+            this._popupEl = undefined;
+        }
+    }
+    static ɵfac = function SdDropdown_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDropdown)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDropdown, selectors: [["sd-dropdown"]], contentQueries: function SdDropdown_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.popupElRef, SdDropdownPopup, 5, ElementRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostVars: 1, hostBindings: function SdDropdown_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function SdDropdown_click_HostBindingHandler() { return ctx.onHostClick(); })("keydown", function SdDropdown_keydown_HostBindingHandler($event) { return ctx.onHostKeydown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("tabindex", ctx.disabled() ? undefined : "0");
+        } }, inputs: { open: [1, "open"], disabled: [1, "disabled"] }, outputs: { open: "openChange" }, ngContentSelectors: _c1, decls: 2, vars: 0, template: function SdDropdown_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵprojection(0);
+            i0.ɵɵprojection(1, 1);
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdown, [{
+        type: Component,
+        args: [{
+                selector: "sd-dropdown",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [],
+                host: {
+                    "[attr.tabindex]": "disabled() ? undefined : '0'",
+                    "(click)": "onHostClick()",
+                    "(keydown)": "onHostKeydown($event)",
+                },
+                template: `
+    <ng-content />
+    <ng-content select="sd-dropdown-popup" />
+  `,
+            }]
+    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popupElRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdDropdownPopup), { ...{ read: ElementRef }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDropdown, { className: "SdDropdown", filePath: "packages/angular/src/controls/dropdown/sd-dropdown.ts", lineNumber: 34, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-form.d.ts","sourceRoot":"","sources":["../../../src/controls/form/sd-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAIX,MAAM,eAAe,CAAC;;AAEvB,qBAaa,MAAM;IACjB,SAAS,8DAEN;IAEH,IAAI,MAAM,oBAET;IAED,UAAU,wDAAyB;IACnC,WAAW,iDAAY;IAEvB,aAAa;IAIb,YAAY,CAAC,KAAK,EAAE,WAAW;yCAhBpB,MAAM;2CAAN,MAAM;CA6BlB"}

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

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, ElementRef, output, viewChild, ViewEncapsulation, } from "@angular/core";
+import * as i0 from "@angular/core";
+const _c0 = ["formEl"];
+const _c1 = ["*"];
+export class SdForm {
+    formElRef = viewChild.required("formEl", {
+        read: ElementRef,
+    });
+    get formEl() {
+        return this.formElRef().nativeElement;
+    }
+    formSubmit = output();
+    formInvalid = output();
+    requestSubmit() {
+        this.formEl.requestSubmit();
+    }
+    handleSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.formEl.checkValidity()) {
+            this.formSubmit.emit(event);
+            return;
+        }
+        // 자동 메시지 및 포커싱
+        this.formEl.reportValidity();
+        this.formInvalid.emit();
+    }
+    static ɵfac = function SdForm_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdForm)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdForm, selectors: [["sd-form"]], viewQuery: function SdForm_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.formElRef, _c0, 5, ElementRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, outputs: { formSubmit: "formSubmit", formInvalid: "formInvalid" }, ngContentSelectors: _c1, decls: 4, vars: 0, consts: [["formEl", ""], ["novalidate", "", 3, "submit"], ["hidden", "", "type", "submit"]], template: function SdForm_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "form", 1, 0);
+            i0.ɵɵdomListener("submit", function SdForm_Template_form_submit_0_listener($event) { return ctx.handleSubmit($event); });
+            i0.ɵɵprojection(2);
+            i0.ɵɵdomElement(3, "button", 2);
+            i0.ɵɵdomElementEnd();
+        } }, encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdForm, [{
+        type: Component,
+        args: [{
+                selector: "sd-form",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [],
+                template: `
+    <form #formEl novalidate (submit)="handleSubmit($event)">
+      <ng-content />
+      <button hidden type="submit"></button>
+    </form>
+  `,
+            }]
+    }], null, { formElRef: [{ type: i0.ViewChild, args: ["formEl", { ...{
+                        read: ElementRef,
+                    }, isSignal: true }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formInvalid: [{ type: i0.Output, args: ["formInvalid"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdForm, { className: "SdForm", filePath: "packages/angular/src/controls/form/sd-form.ts", lineNumber: 23, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-gap.d.ts","sourceRoot":"","sources":["../../../src/controls/gap/sd-gap.ts"],"names":[],"mappings":";AAEA,qBAkCa,KAAK;IAChB,MAAM,yGAAkE;IACxE,QAAQ,0DAAmB;IAC3B,KAAK,yGAAkE;IACvE,OAAO,0DAAmB;IAC1B,OAAO,0DAAmB;IAE1B,aAAa,gFAcV;yCArBQ,KAAK;2CAAL,KAAK;CAsBjB"}

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import * as i0 from "@angular/core";
+export class SdGap {
+    height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+    heightPx = input(...(ngDevMode ? [undefined, { debugName: "heightPx" }] : /* istanbul ignore next */ []));
+    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    widthPx = input(...(ngDevMode ? [undefined, { debugName: "widthPx" }] : /* istanbul ignore next */ []));
+    widthEm = input(...(ngDevMode ? [undefined, { debugName: "widthEm" }] : /* istanbul ignore next */ []));
+    _displayStyle = computed(() => {
+        if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
+            return "none";
+        }
+        else if (this.width() !== undefined ||
+            this.widthPx() !== undefined ||
+            this.widthEm() !== undefined) {
+            return "inline-block";
+        }
+        else if (this.height() !== undefined || this.heightPx() !== undefined) {
+            return "block";
+        }
+        else {
+            return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "_displayStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = function SdGap_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdGap)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
+            i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
+        } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
+        type: Component,
+        args: [{ selector: "sd-gap", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "", host: {
+                    "[attr.data-sd-height]": "height()",
+                    "[style.height.px]": "heightPx()",
+                    "[attr.data-sd-width]": "width()",
+                    "[style.width.px]": "widthPx()",
+                    "[style.width.em]": "widthEm()",
+                    "[style.display]": "_displayStyle()",
+                }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"] }]
+    }], null, { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], widthEm: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthEm", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGap, { className: "SdGap", filePath: "packages/angular/src/controls/gap/sd-gap.ts", lineNumber: 37, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-date-range.picker.d.ts","sourceRoot":"","sources":["../../../src/controls/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;IAenC,qBAAqB,IAAI,IAAI;yCAtBlB,iBAAiB;2CAAjB,iBAAiB;CA2C7B"}

package/dist/controls/input/sd-date-range.picker.js

@@ -0,0 +1,133 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, ViewEncapsulation, } from "@angular/core";
+import { SdSelect } from "../select/sd-select";
+import { SdSelectItem } from "../select/sd-select-item";
+import { SdRange } from "./sd-range";
+import { SdTextfield } from "./sd-textfield";
+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) {
+                const firstOfMonth = fromDate.setDay(1);
+                this.from.set(firstOfMonth);
+                this.to.set(firstOfMonth.addMonths(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();
+            if (fromDate) {
+                const firstOfMonth = fromDate.setDay(1);
+                this.from.set(firstOfMonth);
+                this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+            }
+            else {
+                this.to.set(undefined);
+            }
+        }
+        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: [SdSelect, SdSelectItem, SdRange, SdTextfield], 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: [SdSelect, SdSelectItem, SdRange, SdTextfield], 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/controls/input/sd-date-range.picker.ts", lineNumber: 62, forbidOrphanRendering: true }); })();

package/dist/controls/input/sd-numpad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-numpad.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-numpad.ts"],"names":[],"mappings":";AAkBA,qBAuGa,QAAQ;IACnB,IAAI,6DAAyC;IAE7C,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IAExB,QAAQ,qEAAiD;IACzD,aAAa,qEAAiD;IAC9D,cAAc,qEAAiD;IAC/D,cAAc,qEAAiD;IAE/D,gBAAgB,iDAAY;;IAoB5B,aAAa,CAAC,GAAG,EAAE,MAAM;IAuBzB,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,eAAe,oXAAmB;yCAvD1C,QAAQ;2CAAR,QAAQ;CAwDpB"}