@simplysm/angular 14.0.30 → 14.0.33

package/dist/ui/form/select/sd-select.js

@@ -1,430 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import { SdDropdown } from "../../overlay/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../overlay/dropdown/sd-dropdown-popup";
-import { SdSelectItem } from "./sd-select-item";
-import { SdAnchor } from "../button/sd-anchor";
-import { SdGap } from "../../layout/sd-gap";
-import { SdItemOfTemplate } from "../../../core/directives/sd-item-of-template";
-import { SdRipple } from "../../../core/directives/sd-ripple";
-import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
-import { NgIcon } from "@ng-icons/core";
-import { tablerCaretDown } from "@ng-icons/tabler-icons";
-import { tabbable } from "tabbable";
-import * as i0 from "@angular/core";
-const _c0 = ["headerTpl"];
-const _c1 = ["beforeTpl"];
-const _c2 = [[["sd-select-button"]], "*"];
-const _c3 = ["sd-select-button", "*"];
-const _c4 = (a0, a1, a2, a3) => ({ $implicit: a0, item: a1, index: a2, depth: a3 });
-function SdSelect_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 4);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("innerHTML", ctx_r1._selectedItemContentHTML(), i0.ɵɵsanitizeHtml);
-} }
-function SdSelect_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.placeholder());
-} }
-function SdSelect_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1, "\u00A0");
-    i0.ɵɵelementEnd();
-} }
-function SdSelect_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "ng-icon", 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("svg", ctx_r1.tablerCaretDown);
-} }
-function SdSelect_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵprojection(0);
-} }
-function SdSelect_Conditional_10_ng_template_0_Template(rf, ctx) { }
-function SdSelect_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdSelect_Conditional_10_ng_template_0_Template, 0, 0, "ng-template", 7);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._headerTpl());
-} }
-function SdSelect_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "sd-anchor", 10);
-    i0.ɵɵlistener("click", function SdSelect_Conditional_11_Template_sd_anchor_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectAll()); });
-    i0.ɵɵtext(2, "\uC804\uCCB4\uC120\uD0DD");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "sd-gap", 11);
-    i0.ɵɵelementStart(4, "sd-anchor", 12);
-    i0.ɵɵlistener("click", function SdSelect_Conditional_11_Template_sd_anchor_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeselectAll()); });
-    i0.ɵɵtext(5, "\uC804\uCCB4\uD574\uC81C");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("width", "sm");
-} }
-function SdSelect_Conditional_12_ng_template_0_Template(rf, ctx) { }
-function SdSelect_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdSelect_Conditional_12_ng_template_0_Template, 0, 0, "ng-template", 7);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._beforeTpl());
-} }
-function SdSelect_Conditional_13_For_1_ng_template_0_Template(rf, ctx) { }
-function SdSelect_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SdSelect_Conditional_13_For_1_ng_template_0_Template, 0, 0, "ng-template", 13);
-} if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    const tpl_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", tpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c4, item_r4.data, item_r4.data, item_r4.index, item_r4.depth));
-} }
-function SdSelect_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SdSelect_Conditional_13_For_1_Template, 1, 7, null, 13, i0.ɵɵrepeaterTrackByIdentity);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r1._flatItems());
-} }
-function SdSelect_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵprojection(0, 1);
-} }
-export class SdSelect {
-    selectMode = input("single", ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    hideSelectAll = input(false, { ...(ngDevMode ? { debugName: "hideSelectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    multiSelectionDisplayDirection = input(...(ngDevMode ? [undefined, { debugName: "multiSelectionDisplayDirection" }] : /* istanbul ignore next */ []));
-    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
-    getChildrenFn = input(...(ngDevMode ? [undefined, { debugName: "getChildrenFn" }] : /* istanbul ignore next */ []));
-    contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
-    contentStyle = input(...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
-    dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
-    tablerCaretDown = tablerCaretDown;
-    _itemControls = contentChildren(SdSelectItem, ...(ngDevMode ? [{ debugName: "_itemControls" }] : /* istanbul ignore next */ []));
-    _dropdownControl = viewChild.required(SdDropdown);
-    _dropdownElRef = viewChild.required(SdDropdown, { read: ElementRef });
-    _headerTpl = contentChild("headerTpl", ...(ngDevMode ? [{ debugName: "_headerTpl" }] : /* istanbul ignore next */ []));
-    _beforeTpl = contentChild("beforeTpl", ...(ngDevMode ? [{ debugName: "_beforeTpl" }] : /* istanbul ignore next */ []));
-    _itemOfTpl = contentChild(SdItemOfTemplate, { ...(ngDevMode ? { debugName: "_itemOfTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _selectedItemContentHTML = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedItemContentHTML" }] : /* istanbul ignore next */ []));
-    _flatItems = computed(() => {
-        const items = this.items();
-        if (items == null)
-            return [];
-        const getChildren = this.getChildrenFn();
-        const flat = [];
-        let index = 0;
-        const walk = (list, depth) => {
-            for (const item of list) {
-                flat.push({ data: item, index: index++, depth });
-                if (getChildren !== undefined) {
-                    const children = getChildren(item);
-                    if (children !== undefined) {
-                        walk(children, depth + 1);
-                    }
-                }
-            }
-        };
-        walk(items, 0);
-        return flat;
-    }, ...(ngDevMode ? [{ debugName: "_flatItems" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Required validation
-        setupInvalid(() => {
-            if (!this.required())
-                return "";
-            const v = this.value();
-            if (v == null)
-                return "선택된 항목이 없습니다.";
-            if (Array.isArray(v) && v.length === 0)
-                return "선택된 항목이 없습니다.";
-            return "";
-        });
-        // D3: contentClass/contentStyle via effect() on popup element
-        // + D4: keyboard navigation via tabbable()
-        effect((onCleanup) => {
-            if (this.dropdownOpen()) {
-                const popupEl = this._dropdownControl().popupElRef().nativeElement;
-                const cls = this.contentClass();
-                const addedClasses = [];
-                if (cls !== undefined) {
-                    for (const c of cls.split(" ").filter(Boolean)) {
-                        popupEl.classList.add(c);
-                        addedClasses.push(c);
-                    }
-                }
-                const style = this.contentStyle();
-                const addedStyleProps = [];
-                if (style !== undefined) {
-                    const tempEl = document.createElement("div");
-                    tempEl.style.cssText = style;
-                    for (let i = 0; i < tempEl.style.length; i++) {
-                        const prop = tempEl.style[i];
-                        addedStyleProps.push(prop);
-                        popupEl.style.setProperty(prop, tempEl.style.getPropertyValue(prop));
-                    }
-                }
-                const onKeydown = (event) => {
-                    if (event.ctrlKey || event.altKey)
-                        return;
-                    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const focusableEls = tabbable(popupEl);
-                        if (focusableEls.length === 0)
-                            return;
-                        const currIndex = focusableEls.indexOf(document.activeElement);
-                        if (event.key === "ArrowDown") {
-                            const nextIndex = currIndex + 1;
-                            if (nextIndex < focusableEls.length) {
-                                focusableEls[nextIndex].focus();
-                            }
-                        }
-                        else {
-                            // ArrowUp
-                            if (currIndex <= 0) {
-                                // Return focus to dropdown trigger
-                                this._dropdownElRef().nativeElement.focus();
-                            }
-                            else {
-                                focusableEls[currIndex - 1].focus();
-                            }
-                        }
-                    }
-                };
-                popupEl.addEventListener("keydown", onKeydown);
-                onCleanup(() => {
-                    popupEl.removeEventListener("keydown", onKeydown);
-                    for (const c of addedClasses) {
-                        popupEl.classList.remove(c);
-                    }
-                    for (const prop of addedStyleProps) {
-                        popupEl.style.removeProperty(prop);
-                    }
-                });
-            }
-        });
-        // Mirror selected item's contentHTML to the trigger display area
-        // PERF-004: item.value() reads are untracked to reduce signal subscriptions from O(N) to O(K).
-        // _itemControls() already tracks item additions/removals, value() tracks selection changes.
-        effect(() => {
-            const items = this._itemControls();
-            const currentValue = this.value();
-            if (currentValue == null) {
-                this._selectedItemContentHTML.set(undefined);
-                return;
-            }
-            if (this.selectMode() === "multi") {
-                const arr = currentValue;
-                if (arr.length === 0) {
-                    this._selectedItemContentHTML.set(undefined);
-                    return;
-                }
-                const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
-                const separator = this.multiSelectionDisplayDirection() === "vertical" ? "<br>" : ", ";
-                const htmlParts = [];
-                for (const item of selectedItems) {
-                    const html = item.contentHTML();
-                    if (html !== "") {
-                        htmlParts.push(html);
-                    }
-                }
-                if (htmlParts.length > 0) {
-                    this._selectedItemContentHTML.set(htmlParts.join(separator));
-                }
-                else {
-                    this._selectedItemContentHTML.set(undefined);
-                }
-                return;
-            }
-            const selectedItem = untracked(() => items.find((item) => item.value() === currentValue));
-            if (selectedItem != null) {
-                const html = selectedItem.contentHTML();
-                if (html !== "") {
-                    this._selectedItemContentHTML.set(html);
-                }
-                else {
-                    this._selectedItemContentHTML.set(undefined);
-                }
-            }
-            else {
-                this._selectedItemContentHTML.set(undefined);
-            }
-        });
-    }
-    selectItem(itemValue) {
-        this._setOrToggle(itemValue);
-        if (this.selectMode() === "single") {
-            this.closeDropdown();
-        }
-    }
-    toggleItem(itemValue) {
-        this._setOrToggle(itemValue);
-    }
-    _setOrToggle(itemValue) {
-        if (this.selectMode() === "single") {
-            this.value.set(itemValue);
-        }
-        else {
-            this.value.update((v) => {
-                const arr = v ?? [];
-                if (arr.includes(itemValue)) {
-                    return arr.filter((item) => item !== itemValue);
-                }
-                else {
-                    return [...arr, itemValue];
-                }
-            });
-        }
-    }
-    onSelectAll() {
-        const items = this._itemControls();
-        const values = items
-            .filter((item) => !item.disabled() && !item.hidden())
-            .map((item) => item.value());
-        this.value.set(values);
-    }
-    onDeselectAll() {
-        this.value.set([]);
-    }
-    closeDropdown() {
-        this.dropdownOpen.set(false);
-    }
-    openDropdown() {
-        if (this.disabled())
-            return;
-        this.dropdownOpen.set(true);
-    }
-    static ɵfac = function SdSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSelect)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelect, selectors: [["sd-select"]], contentQueries: function SdSelect_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuerySignal(dirIndex, ctx._itemControls, SdSelectItem, 4)(dirIndex, ctx._headerTpl, _c0, 5)(dirIndex, ctx._beforeTpl, _c1, 5)(dirIndex, ctx._itemOfTpl, SdItemOfTemplate, 5, TemplateRef);
-        } if (rf & 2) {
-            i0.ɵɵqueryAdvance(4);
-        } }, viewQuery: function SdSelect_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx._dropdownControl, SdDropdown, 5)(ctx._dropdownElRef, SdDropdown, 5, ElementRef);
-        } if (rf & 2) {
-            i0.ɵɵqueryAdvance(2);
-        } }, hostVars: 4, hostBindings: function SdSelect_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵattribute("data-sd-size", ctx.size())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-disabled", ctx.disabled());
-        } }, inputs: { selectMode: [1, "selectMode"], value: [1, "value"], placeholder: [1, "placeholder"], disabled: [1, "disabled"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], required: [1, "required"], hideSelectAll: [1, "hideSelectAll"], multiSelectionDisplayDirection: [1, "multiSelectionDisplayDirection"], items: [1, "items"], getChildrenFn: [1, "getChildrenFn"], contentClass: [1, "contentClass"], contentStyle: [1, "contentStyle"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c3, decls: 15, vars: 10, consts: [["contentEl", ""], [3, "openChange", "disabled", "open"], [1, "_sd-select-control", 3, "sdRipple"], [1, "_sd-select-control-content"], [3, "innerHTML"], [1, "tx-trans-lighter"], [1, "_sd-select-control-icon"], [3, "ngTemplateOutlet"], [1, "_sd-select-all-bar"], [3, "svg"], ["data-sd-select-all", "", 3, "click"], [3, "width"], ["data-sd-deselect-all", "", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSelect_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef(_c2);
-            i0.ɵɵelementStart(0, "sd-dropdown", 1);
-            i0.ɵɵtwoWayListener("openChange", function SdSelect_Template_sd_dropdown_openChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.dropdownOpen, $event) || (ctx.dropdownOpen = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵelementStart(1, "div", 2)(2, "div", 3, 0);
-            i0.ɵɵconditionalCreate(4, SdSelect_Conditional_4_Template, 1, 1, "div", 4)(5, SdSelect_Conditional_5_Template, 2, 1, "span", 5)(6, SdSelect_Conditional_6_Template, 2, 0, "span");
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(7, SdSelect_Conditional_7_Template, 2, 1, "div", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, SdSelect_Conditional_8_Template, 1, 0);
-            i0.ɵɵelementStart(9, "sd-dropdown-popup");
-            i0.ɵɵconditionalCreate(10, SdSelect_Conditional_10_Template, 1, 1, null, 7);
-            i0.ɵɵconditionalCreate(11, SdSelect_Conditional_11_Template, 6, 1, "div", 8);
-            i0.ɵɵconditionalCreate(12, SdSelect_Conditional_12_Template, 1, 1, null, 7);
-            i0.ɵɵconditionalCreate(13, SdSelect_Conditional_13_Template, 2, 0)(14, SdSelect_Conditional_14_Template, 1, 0);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            let tmp_10_0;
-            i0.ɵɵproperty("disabled", ctx.disabled());
-            i0.ɵɵtwoWayProperty("open", ctx.dropdownOpen);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("sdRipple", !ctx.disabled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx._selectedItemContentHTML() !== undefined ? 4 : ctx.placeholder() ? 5 : 6);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!ctx.disabled() ? 7 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.disabled() ? 8 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx._headerTpl() ? 10 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectMode() === "multi" && !ctx.hideSelectAll() ? 11 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx._beforeTpl() ? 12 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_10_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_10_0);
-        } }, dependencies: [SdDropdown,
-            SdDropdownPopup,
-            SdAnchor,
-            SdGap,
-            NgTemplateOutlet,
-            SdRipple,
-            NgIcon], styles: ["sd-select {\n  display: block;\n  position: relative;\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  margin-left: var(--gap-sm);\n  opacity: 0.3;\n}\nsd-select > sd-dropdown:focus-within > ._sd-select-control {\n  border-color: var(--theme-secondary-default);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  background: var(--trans-lighter);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"], encapsulation: 2, changeDetection: 0 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
-        type: Component,
-        args: [{ selector: "sd-select", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
-                    SdDropdown,
-                    SdDropdownPopup,
-                    SdAnchor,
-                    SdGap,
-                    NgTemplateOutlet,
-                    SdRipple,
-                    NgIcon,
-                ], template: `
-    <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
-      <div class="_sd-select-control" [sdRipple]="!disabled()">
-        <div class="_sd-select-control-content" #contentEl>
-          @if (_selectedItemContentHTML() !== undefined) {
-            <div [innerHTML]="_selectedItemContentHTML()"></div>
-          } @else if (placeholder()) {
-            <span class="tx-trans-lighter">{{ placeholder() }}</span>
-          } @else {
-            <span>&nbsp;</span>
-          }
-        </div>
-        @if (!disabled()) {
-          <div class="_sd-select-control-icon">
-            <ng-icon [svg]="tablerCaretDown" />
-          </div>
-        }
-      </div>
-      @if (!disabled()) {
-        <ng-content select="sd-select-button" />
-      }
-      <sd-dropdown-popup>
-        @if (_headerTpl()) {
-          <ng-template [ngTemplateOutlet]="_headerTpl()!" />
-        }
-        @if (selectMode() === "multi" && !hideSelectAll()) {
-          <div class="_sd-select-all-bar">
-            <sd-anchor data-sd-select-all (click)="onSelectAll()">전체선택</sd-anchor>
-            <sd-gap [width]="'sm'" />
-            <sd-anchor data-sd-deselect-all (click)="onDeselectAll()">전체해제</sd-anchor>
-          </div>
-        }
-        @if (_beforeTpl()) {
-          <ng-template [ngTemplateOutlet]="_beforeTpl()!" />
-        }
-        @if (_itemOfTpl(); as tpl) {
-          @for (item of _flatItems(); track item) {
-            <ng-template
-              [ngTemplateOutlet]="tpl"
-              [ngTemplateOutletContext]="{ $implicit: item.data, item: item.data, index: item.index, depth: item.depth }"
-            />
-          }
-        } @else {
-          <ng-content />
-        }
-      </sd-dropdown-popup>
-    </sd-dropdown>
-  `, host: {
-                    "[attr.data-sd-size]": "size()",
-                    "[attr.data-sd-inline]": "inline()",
-                    "[attr.data-sd-inset]": "inset()",
-                    "[attr.data-sd-disabled]": "disabled()",
-                }, styles: ["sd-select {\n  display: block;\n  position: relative;\n}\nsd-select > sd-dropdown > ._sd-select-control {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  margin-left: var(--gap-sm);\n  opacity: 0.3;\n}\nsd-select > sd-dropdown:focus-within > ._sd-select-control {\n  border-color: var(--theme-secondary-default);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  background: var(--trans-lighter);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"] }]
-    }], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItem), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/ui/form/select/sd-select.ts", lineNumber: 183, forbidOrphanRendering: true }); })();

package/dist/ui/layout/dock/sd-dock-container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sd-dock-container.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/dock/sd-dock-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,UAAU,EAIX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;;AAEnC,qBAyBa,eAAe;IAC1B,YAAY,oDAA2B;IAEvC,YAAY,6DAET;IAEH,YAAY,0DAAmB;;yCAPpB,eAAe;2CAAf,eAAe;CA8D3B"}

package/dist/ui/layout/dock/sd-dock-container.js

@@ -1,96 +0,0 @@
-import { ChangeDetectionStrategy, Component, contentChildren, effect, ElementRef, input, viewChild, ViewEncapsulation, } from "@angular/core";
-import { SdDock } from "./sd-dock";
-import * as i0 from "@angular/core";
-const _c0 = ["content"];
-const _c1 = ["*"];
-const _c2 = a0 => ["_content", a0];
-const arrowFn0 = (ctx, view) => v => v != null;
-export class SdDockContainer {
-    dockControls = contentChildren(SdDock, ...(ngDevMode ? [{ debugName: "dockControls" }] : /* istanbul ignore next */ []));
-    contentElRef = viewChild.required("content", {
-        read: ElementRef,
-    });
-    contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            let top = 0;
-            let left = 0;
-            let bottom = 0;
-            let right = 0;
-            for (const dockControl of this.dockControls()) {
-                const position = dockControl.position();
-                const size = dockControl.size();
-                if (position === "top") {
-                    dockControl.assignStyle({
-                        top: top + "px",
-                        bottom: "",
-                        left: left + "px",
-                        right: right + "px",
-                    });
-                    top += size;
-                }
-                else if (position === "bottom") {
-                    dockControl.assignStyle({
-                        top: "",
-                        bottom: bottom + "px",
-                        left: left + "px",
-                        right: right + "px",
-                    });
-                    bottom += size;
-                }
-                else if (position === "left") {
-                    dockControl.assignStyle({
-                        top: top + "px",
-                        bottom: bottom + "px",
-                        left: left + "px",
-                        right: "",
-                    });
-                    left += size;
-                }
-                else {
-                    dockControl.assignStyle({
-                        top: top + "px",
-                        bottom: bottom + "px",
-                        left: "",
-                        right: right + "px",
-                    });
-                    right += size;
-                }
-            }
-            Object.assign(this.contentElRef().nativeElement.style, {
-                paddingTop: top + "px",
-                paddingBottom: bottom + "px",
-                paddingRight: right + "px",
-                paddingLeft: left + "px",
-            });
-        });
-    }
-    static ɵfac = function SdDockContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDockContainer)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDockContainer, selectors: [["sd-dock-container"]], contentQueries: function SdDockContainer_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuerySignal(dirIndex, ctx.dockControls, SdDock, 4);
-        } if (rf & 2) {
-            i0.ɵɵqueryAdvance();
-        } }, viewQuery: function SdDockContainer_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.contentElRef, _c0, 5, ElementRef);
-        } if (rf & 2) {
-            i0.ɵɵqueryAdvance();
-        } }, inputs: { contentClass: [1, "contentClass"] }, ngContentSelectors: _c1, decls: 3, vars: 5, consts: [["content", ""]], template: function SdDockContainer_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵdomElementStart(0, "div", null, 0);
-            i0.ɵɵprojection(2);
-            i0.ɵɵdomElementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassMap(i0.ɵɵpureFunction1(3, _c2, ctx.contentClass()).filter(i0.ɵɵarrowFunction(2, arrowFn0, ctx)).join(" "));
-        } }, styles: ["sd-dock-container {\n  display: block;\n  height: 100%;\n}\nsd-dock-container > ._content {\n  position: relative;\n  height: 100%;\n}"], encapsulation: 2, changeDetection: 0 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDockContainer, [{
-        type: Component,
-        args: [{ selector: "sd-dock-container", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
-    <div #content [class]="['_content', contentClass()].filter(v => v != null).join(' ')">
-      <ng-content />
-    </div>
-  `, styles: ["sd-dock-container {\n  display: block;\n  height: 100%;\n}\nsd-dock-container > ._content {\n  position: relative;\n  height: 100%;\n}"] }]
-    }], () => [], { dockControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdDock), { isSignal: true }] }], contentElRef: [{ type: i0.ViewChild, args: ["content", { ...{
-                        read: ElementRef,
-                    }, isSignal: true }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDockContainer, { className: "SdDockContainer", filePath: "packages/angular/src/ui/layout/dock/sd-dock-container.ts", lineNumber: 38, forbidOrphanRendering: true }); })();

package/dist/ui/layout/dock/sd-dock.d.ts

@@ -1,19 +0,0 @@
-import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
-import * as i0 from "@angular/core";
-export declare class SdDock {
-    private readonly _elRef;
-    private readonly _destroyRef;
-    private _dragCleanup;
-    key: import("@angular/core").InputSignal<string | undefined>;
-    position: import("@angular/core").InputSignal<"bottom" | "left" | "right" | "top">;
-    resizable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    size: import("@angular/core").WritableSignal<number>;
-    private readonly _config;
-    constructor();
-    assignStyle(style: Partial<CSSStyleDeclaration>): void;
-    onHostResize(event: SdResizeEvent): void;
-    onResizeBarMousedown(event: MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdDock, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdDock, "sd-dock", never, { "key": { "alias": "key"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-//# sourceMappingURL=sd-dock.d.ts.map

package/dist/ui/layout/dock/sd-dock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sd-dock.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/dock/sd-dock.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;;AAEzF,qBAyEa,MAAM;IACjB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,OAAO,CAAC,YAAY,CAA2B;IAE/C,GAAG,0DAAmB;IACtB,QAAQ,2EAAqD;IAC7D,SAAS,qEAAiD;IAE1D,IAAI,iDAAa;IAEjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsE;;IAoB9F,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAI/C,YAAY,CAAC,KAAK,EAAE,aAAa;IASjC,oBAAoB,CAAC,KAAK,EAAE,UAAU;yCA7C3B,MAAM;2CAAN,MAAM;CA+FlB"}