@simplysm/angular 14.0.26 → 14.0.28

package/dist/ui/form/select/{sd-select.control.js → sd-select.js}

@@ -1,12 +1,12 @@
 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 { 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 { 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";
@@ -17,13 +17,13 @@ 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) {
+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 SdSelectControl_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SdSelect_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -32,12 +32,12 @@ function SdSelectControl_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.placeholder());
 } }
-function SdSelectControl_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function SdSelect_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) {
+function SdSelect_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵelement(1, "ng-icon", 9);
     i0.ɵɵelementEnd();
@@ -46,56 +46,56 @@ function SdSelectControl_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("svg", ctx_r1.tablerCaretDown);
 } }
-function SdSelectControl_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function SdSelect_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);
+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 SdSelectControl_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+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 SdSelectControl_Conditional_11_Template_sd_anchor_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectAll()); });
+    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 SdSelectControl_Conditional_11_Template_sd_anchor_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeselectAll()); });
+    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 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);
+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 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);
+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 SdSelectControl_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SdSelectControl_Conditional_13_For_1_Template, 1, 7, null, 13, i0.ɵɵrepeaterTrackByIdentity);
+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 SdSelectControl_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function SdSelect_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0, 1);
 } }
-export class SdSelectControl {
+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 */ []));
@@ -112,12 +112,12 @@ export class SdSelectControl {
     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 });
+    _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(SdItemOfTemplateDirective, { ...(ngDevMode ? { debugName: "_itemOfTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _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();
@@ -307,40 +307,40 @@ export class SdSelectControl {
             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);
+    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 SdSelectControl_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx._dropdownControl, SdDropdownControl, 5)(ctx._dropdownElRef, SdDropdownControl, 5, ElementRef);
+        } }, 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 SdSelectControl_HostBindings(rf, ctx) { if (rf & 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, "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) {
+        } }, 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 SdSelectControl_Template_sd_dropdown_openChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.dropdownOpen, $event) || (ctx.dropdownOpen = $event); return i0.ɵɵresetView($event); });
+            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, 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.ɵɵ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, SdSelectControl_Conditional_7_Template, 2, 1, "div", 6);
+            i0.ɵɵconditionalCreate(7, SdSelect_Conditional_7_Template, 2, 1, "div", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, SdSelectControl_Conditional_8_Template, 1, 0);
+            i0.ɵɵconditionalCreate(8, SdSelect_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.ɵɵ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("sd-ripple", !ctx.disabled());
+            i0.ɵɵproperty("sdRipple", !ctx.disabled());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx._selectedItemContentHTML() !== undefined ? 4 : ctx.placeholder() ? 5 : 6);
             i0.ɵɵadvance(3);
@@ -355,27 +355,27 @@ export class SdSelectControl {
             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,
+        } }, dependencies: [SdDropdown,
+            SdDropdownPopup,
+            SdAnchor,
+            SdGap,
             NgTemplateOutlet,
-            SdRippleDirective,
+            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(SdSelectControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
         type: Component,
         args: [{ selector: "sd-select", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
-                    SdDropdownControl,
-                    SdDropdownPopupControl,
-                    SdAnchorControl,
-                    SdGapControl,
+                    SdDropdown,
+                    SdDropdownPopup,
+                    SdAnchor,
+                    SdGap,
                     NgTemplateOutlet,
-                    SdRippleDirective,
+                    SdRipple,
                     NgIcon,
                 ], template: `
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
-      <div class="_sd-select-control" [sd-ripple]="!disabled()">
+      <div class="_sd-select-control" [sdRipple]="!disabled()">
         <div class="_sd-select-control-content" #contentEl>
           @if (_selectedItemContentHTML() !== undefined) {
             <div [innerHTML]="_selectedItemContentHTML()"></div>
@@ -426,5 +426,5 @@ export class SdSelectControl {
                     "[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: 183, forbidOrphanRendering: true }); })();
+    }], () => [], { 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

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

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

@@ -0,0 +1 @@
+{"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.control.js → sd-dock-container.js}

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component, contentChildren, effect, ElementRef, input, viewChild, ViewEncapsulation, } from "@angular/core";
-import { SdDockControl } from "./sd-dock.control";
+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 SdDockContainerControl {
-    dockControls = contentChildren(SdDockControl, ...(ngDevMode ? [{ debugName: "dockControls" }] : /* istanbul ignore next */ []));
+export class SdDockContainer {
+    dockControls = contentChildren(SdDock, ...(ngDevMode ? [{ debugName: "dockControls" }] : /* istanbul ignore next */ []));
     contentElRef = viewChild.required("content", {
         read: ElementRef,
     });
@@ -65,16 +65,16 @@ export class SdDockContainerControl {
             });
         });
     }
-    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);
+    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 SdDockContainerControl_Query(rf, ctx) { if (rf & 1) {
+        } }, 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 SdDockContainerControl_Template(rf, ctx) { if (rf & 1) {
+        } }, 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);
@@ -83,14 +83,14 @@ export class SdDockContainerControl {
             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, [{
+(() => { (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(() => SdDockControl), { isSignal: true }] }], contentElRef: [{ type: i0.ViewChild, args: ["content", { ...{
+    }], () => [], { 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(SdDockContainerControl, { className: "SdDockContainerControl", filePath: "packages/angular/src/ui/layout/dock/sd-dock-container.control.ts", lineNumber: 38, forbidOrphanRendering: true }); })();
+(() => { (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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1 @@
+{"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"}

package/dist/ui/layout/dock/{sd-dock.control.js → sd-dock.js}

@@ -1,14 +1,14 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, DestroyRef, effect, ElementRef, inject, input, signal, ViewEncapsulation, } from "@angular/core";
-import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
+import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-function SdDockControl_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SdDock_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵdomElementStart(0, "div", 1);
-    i0.ɵɵdomListener("mousedown", function SdDockControl_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeBarMousedown($event)); });
+    i0.ɵɵdomListener("mousedown", function SdDock_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeBarMousedown($event)); });
     i0.ɵɵdomElementEnd();
 } }
-export class SdDockControl {
+export class SdDock {
     _elRef = inject((ElementRef));
     _destroyRef = inject(DestroyRef);
     _dragCleanup;
@@ -16,7 +16,7 @@ export class SdDockControl {
     position = input("top", ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = signal(0, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _config = useSdSystemConfigResource({ key: this.key });
+    _config = injectSdSystemConfigResource({ key: this.key });
     constructor() {
         this._destroyRef.onDestroy(() => {
             this._dragCleanup?.();
@@ -90,21 +90,21 @@ export class SdDockControl {
             this._dragCleanup = undefined;
         };
     }
-    static ɵfac = function SdDockControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDockControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDockControl, selectors: [["sd-dock"]], hostVars: 2, hostBindings: function SdDockControl_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("sdResize", function SdDockControl_sdResize_HostBindingHandler($event) { return ctx.onHostResize($event); });
+    static ɵfac = function SdDock_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdDock)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdDock, selectors: [["sd-dock"]], hostVars: 2, hostBindings: function SdDock_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("sdResize", function SdDock_sdResize_HostBindingHandler($event) { return ctx.onHostResize($event); });
         } if (rf & 2) {
             i0.ɵɵattribute("data-sd-position", ctx.position())("data-sd-resizable", ctx.resizable());
-        } }, inputs: { key: [1, "key"], position: [1, "position"], resizable: [1, "resizable"] }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "_resize-bar"], [1, "_resize-bar", 3, "mousedown"]], template: function SdDockControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { key: [1, "key"], position: [1, "position"], resizable: [1, "resizable"] }, ngContentSelectors: _c0, decls: 2, vars: 1, consts: [[1, "_resize-bar"], [1, "_resize-bar", 3, "mousedown"]], template: function SdDock_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-            i0.ɵɵconditionalCreate(1, SdDockControl_Conditional_1_Template, 1, 0, "div", 0);
+            i0.ɵɵconditionalCreate(1, SdDock_Conditional_1_Template, 1, 0, "div", 0);
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.resizable() ? 1 : -1);
         } }, styles: ["sd-dock {\n  display: block;\n  position: absolute;\n  overflow: auto;\n}\nsd-dock[data-sd-resizable=true] > ._resize-bar {\n  position: absolute;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=top] > ._resize-bar {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=bottom] > ._resize-bar {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=left] > ._resize-bar {\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=right] > ._resize-bar {\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDockControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDock, [{
         type: Component,
         args: [{ selector: "sd-dock", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "[attr.data-sd-position]": "position()",
@@ -117,4 +117,4 @@ export class SdDockControl {
     }
   `, styles: ["sd-dock {\n  display: block;\n  position: absolute;\n  overflow: auto;\n}\nsd-dock[data-sd-resizable=true] > ._resize-bar {\n  position: absolute;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=top] > ._resize-bar {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=bottom] > ._resize-bar {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  cursor: ns-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=left] > ._resize-bar {\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-dock[data-sd-resizable=true][data-sd-position=right] > ._resize-bar {\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 2px;\n  cursor: ew-resize;\n}"] }]
     }], () => [], { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDockControl, { className: "SdDockControl", filePath: "packages/angular/src/ui/layout/dock/sd-dock.control.ts", lineNumber: 89, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDock, { className: "SdDock", filePath: "packages/angular/src/ui/layout/dock/sd-dock.ts", lineNumber: 89, forbidOrphanRendering: true }); })();

package/dist/ui/layout/kanban/sd-kanban-board.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+export declare class SdKanbanBoard<L, T> {
+    dragKanban: import("@angular/core").WritableSignal<SdKanbanDragRef<L, T> | undefined>;
+    selectedValues: import("@angular/core").ModelSignal<T[]>;
+    drop: import("@angular/core").OutputEmitterRef<SdKanbanBoardDropInfo<L, T>>;
+    onDropTo(target: SdKanbanDropTarget<L, T>): void;
+    onDocumentDragEnd(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdKanbanBoard<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdKanbanBoard<any, any>, "sd-kanban-board", never, { "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; }, { "selectedValues": "selectedValuesChange"; "drop": "drop"; }, never, ["*"], true, never>;
+}
+export interface SdKanbanBoardDropInfo<L, T> {
+    sourceKanbanValue?: T;
+    targetLaneValue?: L;
+    targetKanbanValue?: T;
+}
+export interface SdKanbanDragRef<_L, T> {
+    value(): T | undefined;
+    heightOnDrag(): number;
+}
+export interface SdKanbanDropTarget<L, T> {
+    targetLaneValue(): L | undefined;
+    targetKanbanValue?(): T | undefined;
+}
+//# sourceMappingURL=sd-kanban-board.d.ts.map

package/dist/ui/layout/kanban/sd-kanban-board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-kanban-board.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/kanban/sd-kanban-board.ts"],"names":[],"mappings":";AASA,qBA0Ba,aAAa,CAAC,CAAC,EAAE,CAAC;IAC7B,UAAU,4EAAwD;IAElE,cAAc,2CAAkB;IAEhC,IAAI,wEAAyC;IAE7C,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;IAYzC,iBAAiB;yCAnBN,aAAa;2CAAb,aAAa;CAsBzB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,CAAC;CACvB;AAED,MAAM,WAAW,eAAe,CAAC,EAAE,EAAE,CAAC;IACpC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvB,YAAY,IAAI,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,EAAE,CAAC;IACtC,eAAe,IAAI,CAAC,GAAG,SAAS,CAAC;IACjC,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CACrC"}

package/dist/ui/layout/kanban/{sd-kanban-board.control.js → sd-kanban-board.js}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, model, output, signal, ViewEncapsulation, } from "@angular/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdKanbanBoardControl {
+export class SdKanbanBoard {
     dragKanban = signal(undefined, ...(ngDevMode ? [{ debugName: "dragKanban" }] : /* istanbul ignore next */ []));
     selectedValues = model([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
     drop = output();
@@ -18,15 +18,15 @@ export class SdKanbanBoardControl {
     onDocumentDragEnd() {
         this.dragKanban.set(undefined);
     }
-    static ɵfac = function SdKanbanBoardControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanbanBoardControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanbanBoardControl, selectors: [["sd-kanban-board"]], hostBindings: function SdKanbanBoardControl_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("dragend", function SdKanbanBoardControl_dragend_HostBindingHandler() { return ctx.onDocumentDragEnd(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { selectedValues: [1, "selectedValues"] }, outputs: { selectedValues: "selectedValuesChange", drop: "drop" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdKanbanBoardControl_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function SdKanbanBoard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanbanBoard)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanbanBoard, selectors: [["sd-kanban-board"]], hostBindings: function SdKanbanBoard_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("dragend", function SdKanbanBoard_dragend_HostBindingHandler() { return ctx.onDocumentDragEnd(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { selectedValues: [1, "selectedValues"] }, outputs: { selectedValues: "selectedValuesChange", drop: "drop" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdKanbanBoard_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanBoardControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanBoard, [{
         type: Component,
         args: [{ selector: "sd-kanban-board", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], host: {
                     "(document:dragend)": "onDocumentDragEnd()",
@@ -34,4 +34,4 @@ export class SdKanbanBoardControl {
     <ng-content></ng-content>
   `, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--gap-auto);\n  }\n}"] }]
     }], null, { selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }, { type: i0.Output, args: ["selectedValuesChange"] }], drop: [{ type: i0.Output, args: ["drop"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanBoardControl, { className: "SdKanbanBoardControl", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban-board.control.ts", lineNumber: 36, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanBoard, { className: "SdKanbanBoard", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban-board.ts", lineNumber: 36, forbidOrphanRendering: true }); })();

package/dist/ui/layout/kanban/{sd-kanban-lane.control.d.ts → sd-kanban-lane.d.ts}

@@ -1,18 +1,18 @@
 import { TemplateRef } from "@angular/core";
-import { type ISdKanbanDropTarget } from "./sd-kanban-board.control";
-import { SdKanbanControl } from "./sd-kanban.control";
+import { type SdKanbanDropTarget } from "./sd-kanban-board";
+import { SdKanban } from "./sd-kanban";
 import * as i0 from "@angular/core";
-export declare class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
+export declare class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T> {
     private readonly _boardControl;
     busy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     useCollapse: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     collapse: import("@angular/core").ModelSignal<boolean>;
     value: import("@angular/core").InputSignal<L | undefined>;
-    kanbanControls: import("@angular/core").Signal<readonly SdKanbanControl<L, T>[]>;
+    kanbanControls: import("@angular/core").Signal<readonly SdKanban<L, T>[]>;
     toolTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     titleTplRef: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     isAllSelected: import("@angular/core").Signal<boolean>;
-    dragKanban: import("@angular/core").Signal<import("./sd-kanban-board.control").ISdKanbanDragRef<L, T> | undefined>;
+    dragKanban: import("@angular/core").Signal<import("./sd-kanban-board").SdKanbanDragRef<L, T> | undefined>;
     dragOvered: import("@angular/core").WritableSignal<boolean>;
     selectableKanbanLength: import("@angular/core").Signal<number>;
     targetLaneValue(): L | undefined;
@@ -23,7 +23,7 @@ export declare class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L,
     onDragDrop(event: DragEvent): void;
     protected readonly tablerEyeOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M10.585 10.587a2 2 0 0 0 2.829 2.828\"></path><path d=\"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\"></path><path d=\"M3 3l18 18\"></path></svg>";
     protected readonly tablerEye = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"stroke-width:var(--ng-icon__stroke-width, 2)\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"></path><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"></path></svg>";
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdKanbanLaneControl<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdKanbanLaneControl<any, any>, "sd-kanban-lane", never, { "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "useCollapse": { "alias": "useCollapse"; "required": false; "isSignal": true; }; "collapse": { "alias": "collapse"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "collapse": "collapseChange"; }, ["kanbanControls", "toolTplRef", "titleTplRef"], ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdKanbanLane<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdKanbanLane<any, any>, "sd-kanban-lane", never, { "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "useCollapse": { "alias": "useCollapse"; "required": false; "isSignal": true; }; "collapse": { "alias": "collapse"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "collapse": "collapseChange"; }, ["kanbanControls", "toolTplRef", "titleTplRef"], ["*"], true, never>;
 }
-//# sourceMappingURL=sd-kanban-lane.control.d.ts.map
+//# sourceMappingURL=sd-kanban-lane.d.ts.map

package/dist/ui/layout/kanban/sd-kanban-lane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-kanban-lane.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/kanban/sd-kanban-lane.ts"],"names":[],"mappings":"AACA,OAAO,EAYL,WAAW,EAEZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAKvC,qBA6Fa,YAAY,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;IACjE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE5B;IAEF,IAAI,qEAAiD;IAErD,WAAW,qEAAiD;IAE5D,QAAQ,+CAAgB;IAExB,KAAK,qDAAc;IAEnB,cAAc,4DAAoE;IAElF,UAAU,gEAA0E;IACpF,WAAW,gEAA2E;IAEtF,aAAa,0CAGV;IAEH,UAAU,gGAAmD;IAE7D,UAAU,kDAAiB;IAE3B,sBAAsB,yCAEpB;IAEF,eAAe;IAIf,2BAA2B;IAI3B,sBAAsB,CAAC,GAAG,EAAE,OAAO;IAyBnC,UAAU,CAAC,KAAK,EAAE,SAAS;IAS3B,WAAW,CAAC,KAAK,EAAE,SAAS;IAO5B,UAAU,CAAC,KAAK,EAAE,SAAS;IAU3B,SAAS,CAAC,QAAQ,CAAC,YAAY,wkBAAgB;IAC/C,SAAS,CAAC,QAAQ,CAAC,SAAS,ubAAa;yCA3F9B,YAAY;2CAAZ,YAAY;CA4FxB"}