@simplysm/angular 14.0.1 → 14.0.5

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

@@ -0,0 +1,430 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, contentChildren, effect, ElementRef, input, model, signal, TemplateRef, viewChild, ViewEncapsulation, } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdDropdownControl } from "../../overlay/dropdown/sd-dropdown.control";
+import { SdDropdownPopupControl } from "../../overlay/dropdown/sd-dropdown-popup.control";
+import { SdSelectItemControl } from "./sd-select-item.control";
+import { SdAnchorControl } from "../button/sd-anchor.control";
+import { SdGapControl } from "../../layout/sd-gap.control";
+import { SdItemOfTemplateDirective } from "../../../core/directives/sd-item-of-template.directive";
+import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive";
+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 SdSelectControl_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 SdSelectControl_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 SdSelectControl_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "\u00A0");
+    i0.ɵɵelementEnd();
+} }
+function SdSelectControl_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 SdSelectControl_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0);
+} }
+function SdSelectControl_Conditional_10_ng_template_0_Template(rf, ctx) { }
+function SdSelectControl_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSelectControl_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 SdSelectControl_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 SdSelectControl_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 SdSelectControl_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 SdSelectControl_Conditional_12_ng_template_0_Template(rf, ctx) { }
+function SdSelectControl_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSelectControl_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 SdSelectControl_Conditional_13_For_1_ng_template_0_Template(rf, ctx) { }
+function SdSelectControl_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdSelectControl_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 SdSelectControl_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SdSelectControl_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 SdSelectControl_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0, 1);
+} }
+export class SdSelectControl {
+    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(SdSelectItemControl, ...(ngDevMode ? [{ debugName: "_itemControls" }] : /* istanbul ignore next */ []));
+    _dropdownControl = viewChild.required(SdDropdownControl);
+    _dropdownElRef = viewChild.required(SdDropdownControl, { read: ElementRef });
+    _headerTpl = contentChild("headerTpl", ...(ngDevMode ? [{ debugName: "_headerTpl" }] : /* istanbul ignore next */ []));
+    _beforeTpl = contentChild("beforeTpl", ...(ngDevMode ? [{ debugName: "_beforeTpl" }] : /* istanbul ignore next */ []));
+    _itemOfTpl = contentChild(SdItemOfTemplateDirective, { ...(ngDevMode ? { debugName: "_itemOfTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _selectedItemContentHTML = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedItemContentHTML" }] : /* istanbul ignore next */ []));
+    _flatItems = signal([], ...(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 "";
+        });
+        // Flatten items array (with hierarchy support)
+        effect(() => {
+            const items = this.items();
+            if (items == null) {
+                this._flatItems.set([]);
+                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);
+            this._flatItems.set(flat);
+        });
+        // 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
+        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 separator = this.multiSelectionDisplayDirection() === "vertical" ? "<br>" : ", ";
+                const htmlParts = [];
+                for (const item of items) {
+                    if (arr.includes(item.value())) {
+                        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;
+            }
+            for (const item of items) {
+                if (item.value() === currentValue) {
+                    const html = item.contentHTML();
+                    if (html !== "") {
+                        this._selectedItemContentHTML.set(html);
+                    }
+                    return;
+                }
+            }
+            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 SdSelectControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSelectControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectControl, selectors: [["sd-select"]], contentQueries: function SdSelectControl_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx._itemControls, SdSelectItemControl, 4)(dirIndex, ctx._headerTpl, _c0, 5)(dirIndex, ctx._beforeTpl, _c1, 5)(dirIndex, ctx._itemOfTpl, SdItemOfTemplateDirective, 5, TemplateRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(4);
+        } }, viewQuery: function SdSelectControl_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx._dropdownControl, SdDropdownControl, 5)(ctx._dropdownElRef, SdDropdownControl, 5, ElementRef);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, hostVars: 4, hostBindings: function SdSelectControl_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, "sd-ripple"], [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 SdSelectControl_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵprojectionDef(_c2);
+            i0.ɵɵelementStart(0, "sd-dropdown", 1);
+            i0.ɵɵtwoWayListener("openChange", function SdSelectControl_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, SdSelectControl_Conditional_4_Template, 1, 1, "div", 4)(5, SdSelectControl_Conditional_5_Template, 2, 1, "span", 5)(6, SdSelectControl_Conditional_6_Template, 2, 0, "span");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, SdSelectControl_Conditional_7_Template, 2, 1, "div", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(8, SdSelectControl_Conditional_8_Template, 1, 0);
+            i0.ɵɵelementStart(9, "sd-dropdown-popup");
+            i0.ɵɵconditionalCreate(10, SdSelectControl_Conditional_10_Template, 1, 1, null, 7);
+            i0.ɵɵconditionalCreate(11, SdSelectControl_Conditional_11_Template, 6, 1, "div", 8);
+            i0.ɵɵconditionalCreate(12, SdSelectControl_Conditional_12_Template, 1, 1, null, 7);
+            i0.ɵɵconditionalCreate(13, SdSelectControl_Conditional_13_Template, 2, 0)(14, SdSelectControl_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("sd-ripple", !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: [SdDropdownControl,
+            SdDropdownPopupControl,
+            SdAnchorControl,
+            SdGapControl,
+            NgTemplateOutlet,
+            SdRippleDirective,
+            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(SdSelectControl, [{
+        type: Component,
+        args: [{ selector: "sd-select", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                    SdDropdownControl,
+                    SdDropdownPopupControl,
+                    SdAnchorControl,
+                    SdGapControl,
+                    NgTemplateOutlet,
+                    SdRippleDirective,
+                    NgIcon,
+                ], template: `
+    <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
+      <div class="_sd-select-control" [sd-ripple]="!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(() => SdSelectItemControl), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdownControl), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdownControl), { ...{ 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(() => SdItemOfTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectControl, { className: "SdSelectControl", filePath: "packages/angular/src/ui/form/select/sd-select.control.ts", lineNumber: 178 }); })();

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

@@ -0,0 +1,12 @@
+import { ElementRef } from "@angular/core";
+import { SdDockControl } from "./sd-dock.control";
+import * as i0 from "@angular/core";
+export declare class SdDockContainerControl {
+    dockControls: import("@angular/core").Signal<readonly SdDockControl[]>;
+    contentElRef: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    contentClass: import("@angular/core").InputSignal<string | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdDockContainerControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDockContainerControl, "sd-dock-container", never, { "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, {}, ["dockControls"], ["*"], true, never>;
+}
+//# sourceMappingURL=sd-dock-container.control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-dock-container.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\layout\\dock\\sd-dock-container.control.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,UAAU,EAIX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;;AAElD,qBAyBa,sBAAsB;IACjC,YAAY,2DAAkC;IAE9C,YAAY,6DAET;IAEH,YAAY,0DAAmB;;yCAPpB,sBAAsB;2CAAtB,sBAAsB;CA8DlC"}

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

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component, contentChildren, effect, ElementRef, input, viewChild, ViewEncapsulation, } from "@angular/core";
+import { SdDockControl } from "./sd-dock.control";
+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 SdDockContainerControl {
+    dockControls = contentChildren(SdDockControl, ...(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 SdDockContainerControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDockContainerControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDockContainerControl, selectors: [["sd-dock-container"]], contentQueries: function SdDockContainerControl_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.dockControls, SdDockControl, 4);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, viewQuery: function SdDockContainerControl_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 SdDockContainerControl_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(SdDockContainerControl, [{
+        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(() => SdDockControl), { 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(SdDockContainerControl, { className: "SdDockContainerControl", filePath: "packages/angular/src/ui/layout/dock/sd-dock-container.control.ts", lineNumber: 38 }); })();

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

@@ -0,0 +1,17 @@
+import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import * as i0 from "@angular/core";
+export declare class SdDockControl {
+    private readonly _elRef;
+    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: ISdResizeEvent): void;
+    onResizeBarMousedown(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdDockControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDockControl, "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.control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-dock.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\layout\\dock\\sd-dock.control.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;AAE1F,qBAyEa,aAAa;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,GAAG,0DAAmB;IACtB,QAAQ,2EAAqD;IAC7D,SAAS,qEAAiD;IAE1D,IAAI,iDAAa;IAEjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAmE;;IAgB3F,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAI/C,YAAY,CAAC,KAAK,EAAE,cAAc;IASlC,oBAAoB,CAAC,KAAK,EAAE,UAAU;yCAtC3B,aAAa;2CAAb,aAAa;CAmFzB"}