@simplysm/angular 14.0.26 → 14.0.27

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

@@ -1,20 +1,20 @@
 import { NgTemplateOutlet } from "@angular/common";
 import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, forwardRef, inject, input, model, signal, TemplateRef, ViewEncapsulation, } from "@angular/core";
-import { SdBusyContainerControl } from "../../overlay/busy/sd-busy-container.control";
-import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
-import { SdKanbanBoardControl, } from "./sd-kanban-board.control";
-import { SdKanbanControl } from "./sd-kanban.control";
-import { SdAnchorControl } from "../../form/button/sd-anchor.control";
+import { SdBusyContainer } from "../../overlay/busy/sd-busy-container";
+import { SdCheckbox } from "../../form/checkbox/sd-checkbox";
+import { SdKanbanBoard, } from "./sd-kanban-board";
+import { SdKanban } from "./sd-kanban";
+import { SdAnchor } from "../../form/button/sd-anchor";
 import { NgIcon } from "@ng-icons/core";
 import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
 import * as i0 from "@angular/core";
 const _c0 = ["toolTpl"];
 const _c1 = ["titleTpl"];
 const _c2 = ["*"];
-function SdKanbanLaneControl_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-anchor", 6);
-    i0.ɵɵlistener("click", function SdKanbanLaneControl_Conditional_0_Conditional_1_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onToggleCollapseButtonClick()); });
+    i0.ɵɵlistener("click", function SdKanbanLane_Conditional_0_Conditional_1_Template_sd_anchor_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onToggleCollapseButtonClick()); });
     i0.ɵɵelement(1, "ng-icon", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23,20 +23,20 @@ function SdKanbanLaneControl_Conditional_0_Conditional_1_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("svg", ctx_r1.collapse() ? ctx_r1.tablerEyeOff : ctx_r1.tablerEye);
 } }
-function SdKanbanLaneControl_Conditional_0_Conditional_2_ng_template_1_Template(rf, ctx) { }
-function SdKanbanLaneControl_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_0_Conditional_2_ng_template_1_Template(rf, ctx) { }
+function SdKanbanLane_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵtemplate(1, SdKanbanLaneControl_Conditional_0_Conditional_2_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵtemplate(1, SdKanbanLane_Conditional_0_Conditional_2_ng_template_1_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.titleTplRef() ?? null);
 } }
-function SdKanbanLaneControl_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵconditionalCreate(1, SdKanbanLaneControl_Conditional_0_Conditional_1_Template, 2, 2, "sd-anchor", 4);
-    i0.ɵɵconditionalCreate(2, SdKanbanLaneControl_Conditional_0_Conditional_2_Template, 2, 1, "div", 5);
+    i0.ɵɵconditionalCreate(1, SdKanbanLane_Conditional_0_Conditional_1_Template, 2, 2, "sd-anchor", 4);
+    i0.ɵɵconditionalCreate(2, SdKanbanLane_Conditional_0_Conditional_2_Template, 2, 1, "div", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -45,20 +45,20 @@ function SdKanbanLaneControl_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.titleTplRef() ? 2 : -1);
 } }
-function SdKanbanLaneControl_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-checkbox", 10);
-    i0.ɵɵlistener("valueChange", function SdKanbanLaneControl_Conditional_3_Conditional_1_Template_sd_checkbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSelectAllButtonClick($event)); });
+    i0.ɵɵlistener("valueChange", function SdKanbanLane_Conditional_3_Conditional_1_Template_sd_checkbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSelectAllButtonClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("inline", true)("theme", "white")("value", ctx_r1.isAllSelected());
 } }
-function SdKanbanLaneControl_Conditional_3_ng_template_2_Template(rf, ctx) { }
-function SdKanbanLaneControl_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_3_ng_template_2_Template(rf, ctx) { }
+function SdKanbanLane_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, SdKanbanLaneControl_Conditional_3_Conditional_1_Template, 1, 3, "sd-checkbox", 9);
-    i0.ɵɵtemplate(2, SdKanbanLaneControl_Conditional_3_ng_template_2_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵconditionalCreate(1, SdKanbanLane_Conditional_3_Conditional_1_Template, 1, 3, "sd-checkbox", 9);
+    i0.ɵɵtemplate(2, SdKanbanLane_Conditional_3_ng_template_2_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -67,16 +67,16 @@ function SdKanbanLaneControl_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.toolTplRef() ?? null);
 } }
-function SdKanbanLaneControl_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SdKanbanLane_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-export class SdKanbanLaneControl {
-    _boardControl = inject(forwardRef(() => SdKanbanBoardControl));
+export class SdKanbanLane {
+    _boardControl = inject(forwardRef(() => SdKanbanBoard));
     busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     useCollapse = input(false, { ...(ngDevMode ? { debugName: "useCollapse" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapse = model(false, ...(ngDevMode ? [{ debugName: "collapse" }] : /* istanbul ignore next */ []));
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    kanbanControls = contentChildren(SdKanbanControl, { ...(ngDevMode ? { debugName: "kanbanControls" } : /* istanbul ignore next */ {}), descendants: true });
+    kanbanControls = contentChildren(SdKanban, { ...(ngDevMode ? { debugName: "kanbanControls" } : /* istanbul ignore next */ {}), descendants: true });
     toolTplRef = contentChild("toolTpl", { ...(ngDevMode ? { debugName: "toolTplRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
     titleTplRef = contentChild("titleTpl", { ...(ngDevMode ? { debugName: "titleTplRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
     isAllSelected = computed(() => {
@@ -141,21 +141,21 @@ export class SdKanbanLaneControl {
     }
     tablerEyeOff = tablerEyeOff;
     tablerEye = tablerEye;
-    static ɵfac = function SdKanbanLaneControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanbanLaneControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanbanLaneControl, selectors: [["sd-kanban-lane"]], contentQueries: function SdKanbanLaneControl_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuerySignal(dirIndex, ctx.kanbanControls, SdKanbanControl, 5)(dirIndex, ctx.toolTplRef, _c0, 5, TemplateRef)(dirIndex, ctx.titleTplRef, _c1, 5, TemplateRef);
+    static ɵfac = function SdKanbanLane_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanbanLane)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanbanLane, selectors: [["sd-kanban-lane"]], contentQueries: function SdKanbanLane_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.kanbanControls, SdKanban, 5)(dirIndex, ctx.toolTplRef, _c0, 5, TemplateRef)(dirIndex, ctx.titleTplRef, _c1, 5, TemplateRef);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(3);
-        } }, hostAttrs: [1, "flex-column", "p-default", "gap-default"], hostVars: 1, hostBindings: function SdKanbanLaneControl_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("dragover", function SdKanbanLaneControl_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function SdKanbanLaneControl_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function SdKanbanLaneControl_drop_HostBindingHandler($event) { return ctx.onDragDrop($event); });
+        } }, hostAttrs: [1, "flex-column", "p-default", "gap-default"], hostVars: 1, hostBindings: function SdKanbanLane_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("dragover", function SdKanbanLane_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function SdKanbanLane_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function SdKanbanLane_drop_HostBindingHandler($event) { return ctx.onDragDrop($event); });
         } if (rf & 2) {
             i0.ɵɵattribute("data-sd-drag-over", ctx.dragOvered());
-        } }, inputs: { busy: [1, "busy"], useCollapse: [1, "useCollapse"], collapse: [1, "collapse"], value: [1, "value"] }, outputs: { collapse: "collapseChange" }, ngContentSelectors: _c2, decls: 6, vars: 9, consts: [[1, "flex-fill"], [2, "min-height", "3em", 3, "busy", "type"], [1, "tx-center", "mb-xl"], [1, "_drop-position"], [3, "theme"], [1, "pl-default", 2, "display", "inline-block"], [3, "click", "theme"], [3, "svg"], [3, "ngTemplateOutlet"], [2, "float", "left", 3, "inline", "theme", "value"], [2, "float", "left", 3, "valueChange", "inline", "theme", "value"]], template: function SdKanbanLaneControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { busy: [1, "busy"], useCollapse: [1, "useCollapse"], collapse: [1, "collapse"], value: [1, "value"] }, outputs: { collapse: "collapseChange" }, ngContentSelectors: _c2, decls: 6, vars: 9, consts: [[1, "flex-fill"], [2, "min-height", "3em", 3, "busy", "type"], [1, "tx-center", "mb-xl"], [1, "_drop-position"], [3, "theme"], [1, "pl-default", 2, "display", "inline-block"], [3, "click", "theme"], [3, "svg"], [3, "ngTemplateOutlet"], [2, "float", "left", 3, "inline", "theme", "value"], [2, "float", "left", 3, "valueChange", "inline", "theme", "value"]], template: function SdKanbanLane_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵconditionalCreate(0, SdKanbanLaneControl_Conditional_0_Template, 3, 2, "div");
+            i0.ɵɵconditionalCreate(0, SdKanbanLane_Conditional_0_Template, 3, 2, "div");
             i0.ɵɵelementStart(1, "div", 0)(2, "sd-busy-container", 1);
-            i0.ɵɵconditionalCreate(3, SdKanbanLaneControl_Conditional_3_Template, 3, 2, "div", 2);
-            i0.ɵɵconditionalCreate(4, SdKanbanLaneControl_Conditional_4_Template, 1, 0);
+            i0.ɵɵconditionalCreate(3, SdKanbanLane_Conditional_3_Template, 3, 2, "div", 2);
+            i0.ɵɵconditionalCreate(4, SdKanbanLane_Conditional_4_Template, 1, 0);
             i0.ɵɵelement(5, "div", 3);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
@@ -169,11 +169,11 @@ export class SdKanbanLaneControl {
             i0.ɵɵconditional(!ctx.collapse() ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("height", ctx.dragOvered() ? (((tmp_5_0 = ctx.dragKanban()) == null ? null : tmp_5_0.heightOnDrag()) ?? 0) + "px" : "0px")("display", ctx.dragKanban() ? "block" : "none");
-        } }, dependencies: [SdBusyContainerControl, SdCheckboxControl, NgTemplateOutlet, SdAnchorControl, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanLaneControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanLane, [{
         type: Component,
-        args: [{ selector: "sd-kanban-lane", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdBusyContainerControl, SdCheckboxControl, NgTemplateOutlet, SdAnchorControl, NgIcon], host: {
+        args: [{ selector: "sd-kanban-lane", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], host: {
                     "class": "flex-column p-default gap-default",
                     "[attr.data-sd-drag-over]": "dragOvered()",
                     "(dragover)": "onDragOver($event)",
@@ -225,5 +225,5 @@ export class SdKanbanLaneControl {
       </sd-busy-container>
     </div>
   `, styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--gap-xl) var(--gap-lg);\n  background: var(--theme-gray-lightest);\n  border-radius: var(--border-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}"] }]
-    }], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], useCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCollapse", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse", required: false }] }, { type: i0.Output, args: ["collapseChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], kanbanControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdKanbanControl), { ...{ descendants: true }, isSignal: true }] }], toolTplRef: [{ type: i0.ContentChild, args: ["toolTpl", { ...{ read: TemplateRef }, isSignal: true }] }], titleTplRef: [{ type: i0.ContentChild, args: ["titleTpl", { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanLaneControl, { className: "SdKanbanLaneControl", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban-lane.control.ts", lineNumber: 121, forbidOrphanRendering: true }); })();
+    }], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], useCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCollapse", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse", required: false }] }, { type: i0.Output, args: ["collapseChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], kanbanControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdKanban), { ...{ descendants: true }, isSignal: true }] }], toolTplRef: [{ type: i0.ContentChild, args: ["toolTpl", { ...{ read: TemplateRef }, isSignal: true }] }], titleTplRef: [{ type: i0.ContentChild, args: ["titleTpl", { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanLane, { className: "SdKanbanLane", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban-lane.ts", lineNumber: 121, forbidOrphanRendering: true }); })();

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

@@ -1,7 +1,7 @@
-import { type ISdKanbanDragRef, type ISdKanbanDropTarget } from "./sd-kanban-board.control";
-import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import { type SdKanbanDragRef, type SdKanbanDropTarget } from "./sd-kanban-board";
+import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
 import * as i0 from "@angular/core";
-export declare class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, ISdKanbanDropTarget<L, T> {
+export declare class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T> {
     private readonly _boardControl;
     private readonly _laneControl;
     private readonly _elRef;
@@ -11,7 +11,7 @@ export declare class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, IS
     selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     draggable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     selected: import("@angular/core").Signal<boolean>;
-    dragKanban: import("@angular/core").Signal<ISdKanbanDragRef<L, T> | undefined>;
+    dragKanban: import("@angular/core").Signal<SdKanbanDragRef<L, T> | undefined>;
     contentClass: import("@angular/core").InputSignal<string | undefined>;
     dragOvered: import("@angular/core").WritableSignal<boolean>;
     heightOnDrag: import("@angular/core").WritableSignal<number>;
@@ -21,12 +21,12 @@ export declare class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, IS
     targetKanbanValue(): T | undefined;
     onHostClick(event: MouseEvent): void;
     onDocumentDrop(): void;
-    onCardResize(event: ISdResizeEvent): void;
+    onCardResize(event: SdResizeEvent): void;
     onCardDragStart(): void;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDragDrop(event: DragEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdKanbanControl<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdKanbanControl<any, any>, "sd-kanban", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdKanban<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdKanban<any, any>, "sd-kanban", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "contentClass": { "alias": "contentClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
-//# sourceMappingURL=sd-kanban.control.d.ts.map
+//# sourceMappingURL=sd-kanban.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-kanban.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/kanban/sd-kanban.ts"],"names":[],"mappings":"AAaA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;;AAGzF,qBA2Fa,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;IACpF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAE5B;IACF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+C;IAEtE,QAAQ,CAAC,OAAO,OAAQ;IAExB,KAAK,qDAAc;IAEnB,SAAS,gDAA6C;IAEtD,UAAU,qEAAiD;IAC3D,SAAS,qEAAiD;IAE1D,QAAQ,0CAEN;IACF,UAAU,oEAAmD;IAE7D,YAAY,0DAAmB;IAE/B,UAAU,kDAAiB;IAE3B,YAAY,iDAAa;IAEzB,UAAU,iDAAa;;IAYvB,eAAe;IAIf,iBAAiB;IAIjB,WAAW,CAAC,KAAK,EAAE,UAAU;IAoB7B,cAAc;IAId,YAAY,CAAC,KAAK,EAAE,aAAa;IAOjC,eAAe;IAOf,UAAU,CAAC,KAAK,EAAE,SAAS;IAS3B,WAAW,CAAC,KAAK,EAAE,SAAS;IAO5B,UAAU,CAAC,KAAK,EAAE,SAAS;yCAvGhB,QAAQ;2CAAR,QAAQ;CAgHpB"}

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

@@ -1,13 +1,13 @@
 import { afterNextRender, booleanAttribute, ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, inject, input, signal, ViewEncapsulation, } from "@angular/core";
-import { SdKanbanBoardControl, } from "./sd-kanban-board.control";
-import { SdKanbanLaneControl } from "./sd-kanban-lane.control";
-import { SdEventsDirective } from "../../../core/directives/sd-events.directive";
-import { SdCardDirective } from "../sd-card.directive";
+import { SdKanbanBoard, } from "./sd-kanban-board";
+import { SdKanbanLane } from "./sd-kanban-lane";
+import { SdEvents } from "../../../core/directives/sd-events";
+import { SdCard } from "../sd-card";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdKanbanControl {
-    _boardControl = inject(forwardRef(() => SdKanbanBoardControl));
-    _laneControl = inject(forwardRef(() => SdKanbanLaneControl));
+export class SdKanban {
+    _boardControl = inject(forwardRef(() => SdKanbanBoard));
+    _laneControl = inject(forwardRef(() => SdKanbanLane));
     _elRef = inject(ElementRef);
     thisRef = this;
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
@@ -88,19 +88,19 @@ export class SdKanbanControl {
         event.stopPropagation();
         this._boardControl.onDropTo(this);
     }
-    static ɵfac = function SdKanbanControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanbanControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanbanControl, selectors: [["sd-kanban"]], hostVars: 3, hostBindings: function SdKanbanControl_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("drop.capture", function SdKanbanControl_drop_capture_HostBindingHandler() { return ctx.onDocumentDrop(); }, i0.ɵɵresolveDocument)("click", function SdKanbanControl_click_HostBindingHandler($event) { return ctx.onHostClick($event); });
+    static ɵfac = function SdKanban_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdKanban)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdKanban, selectors: [["sd-kanban"]], hostVars: 3, hostBindings: function SdKanban_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("drop.capture", function SdKanban_drop_capture_HostBindingHandler() { return ctx.onDocumentDrop(); }, i0.ɵɵresolveDocument)("click", function SdKanban_click_HostBindingHandler($event) { return ctx.onHostClick($event); });
         } if (rf & 2) {
             i0.ɵɵattribute("data-sd-dragging-this", ctx.dragKanban() === ctx.thisRef)("data-sd-dragging", ctx.dragKanban() != null)("data-sd-drag-over", ctx.dragOvered());
-        } }, inputs: { value: [1, "value"], selectable: [1, "selectable"], draggable: [1, "draggable"], contentClass: [1, "contentClass"] }, ngContentSelectors: _c0, decls: 4, vars: 9, consts: [[1, "_drag-position", 3, "dragover", "dragleave", "drop"], [1, "_drop-position"], [3, "dragstart", "sdResize", "draggable"]], template: function SdKanbanControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"], selectable: [1, "selectable"], draggable: [1, "draggable"], contentClass: [1, "contentClass"] }, ngContentSelectors: _c0, decls: 4, vars: 9, consts: [[1, "_drag-position", 3, "dragover", "dragleave", "drop"], [1, "_drop-position"], [3, "dragstart", "sdResize", "draggable"]], template: function SdKanban_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵlistener("dragover", function SdKanbanControl_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function SdKanbanControl_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function SdKanbanControl_Template_div_drop_0_listener($event) { return ctx.onDragDrop($event); });
+            i0.ɵɵlistener("dragover", function SdKanban_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function SdKanban_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function SdKanban_Template_div_drop_0_listener($event) { return ctx.onDragDrop($event); });
             i0.ɵɵelementEnd();
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "sd-card", 2);
-            i0.ɵɵlistener("dragstart", function SdKanbanControl_Template_sd_card_dragstart_2_listener() { return ctx.onCardDragStart(); })("sdResize", function SdKanbanControl_Template_sd_card_sdResize_2_listener($event) { return ctx.onCardResize($event); });
+            i0.ɵɵlistener("dragstart", function SdKanban_Template_sd_card_dragstart_2_listener() { return ctx.onCardDragStart(); })("sdResize", function SdKanban_Template_sd_card_sdResize_2_listener($event) { return ctx.onCardResize($event); });
             i0.ɵɵprojection(3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -111,11 +111,11 @@ export class SdKanbanControl {
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.contentClass());
             i0.ɵɵproperty("draggable", ctx.draggable());
-        } }, dependencies: [SdEventsDirective, SdCardDirective], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > sd-card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > sd-card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdEvents, SdCard], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > sd-card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > sd-card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanban, [{
         type: Component,
-        args: [{ selector: "sd-kanban", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdEventsDirective, SdCardDirective], host: {
+        args: [{ selector: "sd-kanban", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdEvents, SdCard], host: {
                     "[attr.data-sd-dragging-this]": "dragKanban() === thisRef",
                     "[attr.data-sd-dragging]": "dragKanban() != null",
                     "[attr.data-sd-drag-over]": "dragOvered()",
@@ -144,4 +144,4 @@ export class SdKanbanControl {
     </sd-card>
   `, styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > sd-card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--border-radius-default);\n  background: var(--trans-light);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: 0.1s linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--gap-lg);\n  visibility: visible;\n}\nsd-kanban > sd-card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--gap-lg);\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanControl, { className: "SdKanbanControl", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban.control.ts", lineNumber: 115, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanban, { className: "SdKanban", filePath: "packages/angular/src/ui/layout/kanban/sd-kanban.ts", lineNumber: 115, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SdCard {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCard, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdCard, "sd-card,[sdCard]", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-card.d.ts","sourceRoot":"","sources":["../../../src/ui/layout/sd-card.ts"],"names":[],"mappings":";AAEA,qBAOa,MAAM;yCAAN,MAAM;2CAAN,MAAM;CAAG"}

package/dist/ui/layout/{sd-card.directive.js → sd-card.js}

@@ -1,13 +1,13 @@
 import { Directive } from "@angular/core";
 import * as i0 from "@angular/core";
-export class SdCardDirective {
-    static ɵfac = function SdCardDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCardDirective)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdCardDirective, selectors: [["sd-card"], ["", "sd-card", ""]], hostAttrs: [1, "card"] });
+export class SdCard {
+    static ɵfac = function SdCard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCard)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdCard, selectors: [["sd-card"], ["", "sdCard", ""]], hostAttrs: [1, "card"] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCardDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCard, [{
         type: Directive,
         args: [{
-                selector: "sd-card,[sd-card]",
+                selector: "sd-card,[sdCard]",
                 standalone: true,
                 host: {
                     class: "card",

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class SdGap {
+    height: import("@angular/core").InputSignal<"default" | "sm" | "lg" | "xxs" | "xs" | "xl" | "xxl" | undefined>;
+    heightPx: import("@angular/core").InputSignal<number | undefined>;
+    width: import("@angular/core").InputSignal<"default" | "sm" | "lg" | "xxs" | "xs" | "xl" | "xxl" | undefined>;
+    widthPx: import("@angular/core").InputSignal<number | undefined>;
+    widthEm: import("@angular/core").InputSignal<number | undefined>;
+    _displayStyle: import("@angular/core").Signal<"none" | "block" | "inline-block" | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdGap, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdGap, "sd-gap", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "heightPx": { "alias": "heightPx"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "widthPx": { "alias": "widthPx"; "required": false; "isSignal": true; }; "widthEm": { "alias": "widthEm"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-gap.d.ts.map

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

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

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

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

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SdPane {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdPane, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdPane, "sd-pane,[sdPane]", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-pane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-pane.d.ts","sourceRoot":"","sources":["../../../src/ui/layout/sd-pane.ts"],"names":[],"mappings":";AAEA,qBAQa,MAAM;yCAAN,MAAM;2CAAN,MAAM;CAAG"}

package/dist/ui/layout/{sd-pane.directive.js → sd-pane.js}

@@ -1,13 +1,13 @@
 import { Directive } from "@angular/core";
 import * as i0 from "@angular/core";
-export class SdPaneDirective {
-    static ɵfac = function SdPaneDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPaneDirective)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdPaneDirective, selectors: [["sd-pane"], ["", "sd-pane", ""]], hostAttrs: [1, "fill", 2, "display", "block"] });
+export class SdPane {
+    static ɵfac = function SdPane_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPane)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SdPane, selectors: [["sd-pane"], ["", "sdPane", ""]], hostAttrs: [1, "fill", 2, "display", "block"] });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPaneDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPane, [{
         type: Directive,
         args: [{
-                selector: "sd-pane,[sd-pane]",
+                selector: "sd-pane,[sdPane]",
                 standalone: true,
                 host: {
                     class: "fill",

package/dist/ui/layout/view/sd-view-item.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SdViewItem {
+    value: import("@angular/core").InputSignal<any>;
+    private readonly _parentControl;
+    isSelected: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdViewItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdViewItem, "sd-view-item", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-view-item.d.ts.map

package/dist/ui/layout/view/sd-view-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-view-item.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/view/sd-view-item.ts"],"names":[],"mappings":";AAUA,qBA4Ba,UAAU;IACrB,KAAK,2CAAgB;IAErB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkB;IAEjD,UAAU,0CAAgE;yCAL/D,UAAU;2CAAV,UAAU;CAMtB"}

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

@@ -1,20 +1,20 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation, } from "@angular/core";
-import { SdViewControl } from "./sd-view.control";
+import { SdView } from "./sd-view";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdViewItemControl {
+export class SdViewItem {
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    _parentControl = inject(SdViewControl);
+    _parentControl = inject(SdView);
     isSelected = computed(() => this._parentControl.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
-    static ɵfac = function SdViewItemControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdViewItemControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdViewItemControl, selectors: [["sd-view-item"]], hostVars: 1, hostBindings: function SdViewItemControl_HostBindings(rf, ctx) { if (rf & 2) {
+    static ɵfac = function SdViewItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdViewItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdViewItem, selectors: [["sd-view-item"]], hostVars: 1, hostBindings: function SdViewItem_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-selected", ctx.isSelected());
-        } }, inputs: { value: [1, "value"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdViewItemControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdViewItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["sd-view-item {\n  display: none;\n}\nsd-view-item[data-sd-selected=true] {\n  display: block;\n}\nsd-view[data-sd-fill=true] sd-view-item {\n  height: 100%;\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdViewItemControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdViewItem, [{
         type: Component,
         args: [{ selector: "sd-view-item", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
     <ng-content></ng-content>
@@ -22,4 +22,4 @@ export class SdViewItemControl {
                     "[attr.data-sd-selected]": "isSelected()",
                 }, styles: ["sd-view-item {\n  display: none;\n}\nsd-view-item[data-sd-selected=true] {\n  display: block;\n}\nsd-view[data-sd-fill=true] sd-view-item {\n  height: 100%;\n}"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdViewItemControl, { className: "SdViewItemControl", filePath: "packages/angular/src/ui/layout/view/sd-view-item.control.ts", lineNumber: 39, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdViewItem, { className: "SdViewItem", filePath: "packages/angular/src/ui/layout/view/sd-view-item.ts", lineNumber: 39, forbidOrphanRendering: true }); })();

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class SdView {
+    value: import("@angular/core").InputSignal<any>;
+    fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdView, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdView, "sd-view", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-view.d.ts","sourceRoot":"","sources":["../../../../src/ui/layout/view/sd-view.ts"],"names":[],"mappings":";AAEA,qBAyBa,MAAM;IACjB,KAAK,2CAAgB;IACrB,IAAI,qEAAiD;yCAF1C,MAAM;2CAAN,MAAM;CAGlB"}

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

@@ -1,18 +1,18 @@
 import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation } from "@angular/core";
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-export class SdViewControl {
+export class SdView {
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = function SdViewControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdViewControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdViewControl, selectors: [["sd-view"]], hostVars: 1, hostBindings: function SdViewControl_HostBindings(rf, ctx) { if (rf & 2) {
+    static ɵfac = function SdView_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdView)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdView, selectors: [["sd-view"]], hostVars: 1, hostBindings: function SdView_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-fill", ctx.fill());
-        } }, inputs: { value: [1, "value"], fill: [1, "fill"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdViewControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"], fill: [1, "fill"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdView_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["sd-view {\n  display: block;\n  background: var(--control-color);\n}\nsd-view[data-sd-fill=true] {\n  height: 100%;\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdViewControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdView, [{
         type: Component,
         args: [{ selector: "sd-view", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
     <ng-content></ng-content>
@@ -20,4 +20,4 @@ export class SdViewControl {
                     "[attr.data-sd-fill]": "fill()",
                 }, styles: ["sd-view {\n  display: block;\n  background: var(--control-color);\n}\nsd-view[data-sd-fill=true] {\n  height: 100%;\n}"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdViewControl, { className: "SdViewControl", filePath: "packages/angular/src/ui/layout/view/sd-view.control.ts", lineNumber: 28, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdView, { className: "SdView", filePath: "packages/angular/src/ui/layout/view/sd-view.ts", lineNumber: 28, forbidOrphanRendering: true }); })();

package/dist/ui/navigation/collapse/sd-collapse-icon.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+export declare class SdCollapseIcon {
+    open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    openRotate: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    icons: {
+        tablerChevronRight: string;
+    };
+    transformStyle: import("@angular/core").Signal<string>;
+    transitionStyle: import("@angular/core").Signal<"transform 0.1s ease-out" | "transform 0.1s ease-in">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapseIcon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCollapseIcon, "sd-collapse-icon", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "openRotate": { "alias": "openRotate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=sd-collapse-icon.d.ts.map

package/dist/ui/navigation/collapse/sd-collapse-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../../src/ui/navigation/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,KAAK;;MAA0B;IAE/B,cAAc,yCAEX;IAEH,eAAe,uFAEZ;yCAZQ,cAAc;2CAAd,cAAc;CAa1B"}

package/dist/ui/navigation/collapse/{sd-collapse-icon.control.js → sd-collapse-icon.js}

@@ -2,7 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input,
 import { NgIcon } from "@ng-icons/core";
 import { tablerChevronRight } from "@ng-icons/tabler-icons";
 import * as i0 from "@angular/core";
-export class SdCollapseIconControl {
+export class SdCollapseIcon {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     openRotate = input(90, { ...(ngDevMode ? { debugName: "openRotate" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     icons = { tablerChevronRight };
@@ -12,16 +12,16 @@ export class SdCollapseIconControl {
     transitionStyle = computed(() => {
         return this.open() ? "transform 0.1s ease-out" : "transform 0.1s ease-in";
     }, ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
-    static ɵfac = function SdCollapseIconControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIconControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapseIconControl, selectors: [["sd-collapse-icon"]], hostVars: 4, hostBindings: function SdCollapseIconControl_HostBindings(rf, ctx) { if (rf & 2) {
+    static ɵfac = function SdCollapseIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIcon)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapseIcon, selectors: [["sd-collapse-icon"]], hostVars: 4, hostBindings: function SdCollapseIcon_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("transform", ctx.transformStyle())("transition", ctx.transitionStyle());
-        } }, inputs: { open: [1, "open"], openRotate: [1, "openRotate"] }, decls: 1, vars: 1, consts: [[3, "svg"]], template: function SdCollapseIconControl_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { open: [1, "open"], openRotate: [1, "openRotate"] }, decls: 1, vars: 1, consts: [[3, "svg"]], template: function SdCollapseIcon_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelement(0, "ng-icon", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("svg", ctx.icons.tablerChevronRight);
         } }, dependencies: [NgIcon], styles: ["sd-collapse-icon {\n  display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n  display: block;\n}"], encapsulation: 2, changeDetection: 0 });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapseIconControl, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapseIcon, [{
         type: Component,
         args: [{ selector: "sd-collapse-icon", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIcon], template: `
     <ng-icon [svg]="icons.tablerChevronRight" />
@@ -30,4 +30,4 @@ export class SdCollapseIconControl {
                     "[style.transition]": "transitionStyle()",
                 }, styles: ["sd-collapse-icon {\n  display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n  display: block;\n}"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "openRotate", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCollapseIconControl, { className: "SdCollapseIconControl", filePath: "packages/angular/src/ui/navigation/collapse/sd-collapse-icon.control.ts", lineNumber: 38, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCollapseIcon, { className: "SdCollapseIcon", filePath: "packages/angular/src/ui/navigation/collapse/sd-collapse-icon.ts", lineNumber: 38, forbidOrphanRendering: true }); })();

package/dist/ui/navigation/collapse/sd-collapse.d.ts

@@ -0,0 +1,14 @@
+import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import * as i0 from "@angular/core";
+export declare class SdCollapse {
+    open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly _contentElRef;
+    contentHeight: import("@angular/core").WritableSignal<number>;
+    contentMarginTop: import("@angular/core").Signal<string>;
+    contentTransition: import("@angular/core").Signal<"margin-top 0.1s ease-out" | "margin-top 0.1s ease-in">;
+    constructor();
+    onContentResize(event: SdResizeEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapse, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCollapse, "sd-collapse", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=sd-collapse.d.ts.map