@simplysm/angular 14.0.26 → 14.0.28

package/src/ui/form/input/{sd-numpad.control.ts → sd-numpad.ts}

@@ -11,8 +11,8 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { num, str } from "@simplysm/core-common";
-import { SdButtonControl } from "../button/sd-button.control";
-import { SdTextfieldControl } from "./sd-textfield.control";
+import { SdButton } from "../button/sd-button";
+import { SdTextfield } from "./sd-textfield";
 import { NgIcon } from "@ng-icons/core";
 import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
 
@@ -21,7 +21,7 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdTextfieldControl, SdButtonControl, NgIcon],
+  imports: [SdTextfield, SdButton, NgIcon],
   template: `
     <table>
       <thead>
@@ -119,7 +119,7 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
     `,
   ],
 })
-export class SdNumpadControl {
+export class SdNumpad {
   text = signal<string | undefined>(undefined);
 
   placeholder = input<string>();

package/src/ui/form/input/{sd-range.control.ts → sd-range.ts}

@@ -6,15 +6,15 @@ import {
   model,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdTextfieldControl } from "./sd-textfield.control";
-import type { TSdTextfieldTypes } from "./sd-textfield-type-handlers";
+import { SdTextfield } from "./sd-textfield";
+import type { SdTextfieldTypes } from "./sd-textfield-type-handlers";
 
 @Component({
   selector: "sd-range",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdTextfieldControl],
+  imports: [SdTextfield],
   template: `
     <sd-textfield
       [type]="type()"
@@ -46,11 +46,11 @@ import type { TSdTextfieldTypes } from "./sd-textfield-type-handlers";
     `,
   ],
 })
-export class SdRangeControl<K extends keyof TSdTextfieldTypes> {
+export class SdRange<K extends keyof SdTextfieldTypes> {
   type = input.required<K>();
 
-  from = model<TSdTextfieldTypes[K]>();
-  to = model<TSdTextfieldTypes[K]>();
+  from = model<SdTextfieldTypes[K]>();
+  to = model<SdTextfieldTypes[K]>();
 
   inputStyle = input<string>();
 

package/src/ui/form/input/{sd-textarea.control.ts → sd-textarea.ts}

@@ -172,7 +172,7 @@ import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
     "[attr.data-sd-theme]": "theme()",
   },
 })
-export class SdTextareaControl {
+export class SdTextarea {
   value = model<string>();
 
   placeholder = input<string>();

package/src/ui/form/input/sd-textfield-type-handlers.ts

@@ -7,7 +7,7 @@ import {
 
 // region 타입 정의
 
-export type TSdTextfieldTypes = {
+export type SdTextfieldTypes = {
   "number": number;
   "text": string;
   "password": string;
@@ -23,7 +23,7 @@ export type TSdTextfieldTypes = {
   "time-sec": Time;
 };
 
-export const sdTextfieldTypes: (keyof TSdTextfieldTypes)[] = [
+export const sdTextfieldTypes: (keyof SdTextfieldTypes)[] = [
   "number",
   "text",
   "password",
@@ -43,20 +43,20 @@ export const sdTextfieldTypes: (keyof TSdTextfieldTypes)[] = [
 
 // region 핸들러 인터페이스
 
-export interface ITextfieldParseOpts {
+export interface TextfieldParseOpts {
   format?: string;
 }
 
-export interface ITextfieldFormatOpts {
+export interface TextfieldFormatOpts {
   useNumberComma?: boolean;
   format?: string;
 }
 
-export interface ITextfieldDisplayOpts {
+export interface TextfieldDisplayOpts {
   minDigits?: number;
 }
 
-export interface ITextfieldValidateOpts {
+export interface TextfieldValidateOpts {
   required?: boolean;
   min?: unknown;
   max?: unknown;
@@ -66,20 +66,20 @@ export interface ITextfieldValidateOpts {
   format?: string;
 }
 
-export interface ITextfieldTypeHandler {
+export interface TextfieldTypeHandler {
   readonly controlType: string;
   getControlStep(explicitStep: number | undefined): number | string;
-  parse(raw: string, opts: ITextfieldParseOpts): unknown;
-  toControlValue(value: unknown, opts: ITextfieldFormatOpts): string;
-  toDisplayText(value: unknown, opts: ITextfieldDisplayOpts): string | undefined;
-  validate(value: unknown, opts: ITextfieldValidateOpts): string[];
+  parse(raw: string, opts: TextfieldParseOpts): unknown;
+  toControlValue(value: unknown, opts: TextfieldFormatOpts): string;
+  toDisplayText(value: unknown, opts: TextfieldDisplayOpts): string | undefined;
+  validate(value: unknown, opts: TextfieldValidateOpts): string[];
 }
 
 // endregion
 
 // region 문자열 타입 핸들러 (text, password, email, color)
 
-function createStringHandler(type: "text" | "password" | "email" | "color"): ITextfieldTypeHandler {
+function createStringHandler(type: "text" | "password" | "email" | "color"): TextfieldTypeHandler {
   return {
     controlType: type,
     getControlStep(_explicitStep) {
@@ -134,7 +134,7 @@ function createStringHandler(type: "text" | "password" | "email" | "color"): ITe
 
 // region 숫자 타입 핸들러
 
-function createNumberHandler(): ITextfieldTypeHandler {
+function createNumberHandler(): TextfieldTypeHandler {
   return {
     controlType: "text",
     getControlStep(explicitStep) {
@@ -199,7 +199,7 @@ function createNumberHandler(): ITextfieldTypeHandler {
 
 // region 포맷 타입 핸들러
 
-function createFormatHandler(): ITextfieldTypeHandler {
+function createFormatHandler(): TextfieldTypeHandler {
   return {
     controlType: "text",
     getControlStep(_explicitStep) {
@@ -280,7 +280,7 @@ function createFormatHandler(): ITextfieldTypeHandler {
 
 function createDateOnlyHandler(
   subtype: "date" | "month" | "year",
-): ITextfieldTypeHandler {
+): TextfieldTypeHandler {
   const controlTypeMap = { date: "date", month: "month", year: "text" } as const;
   const formatMap = {
     date: "yyyy-MM-dd",
@@ -338,7 +338,7 @@ function createDateOnlyHandler(
 
 // region DateTime 타입 핸들러 (datetime, datetime-sec)
 
-function createDateTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
+function createDateTimeHandler(withSeconds: boolean): TextfieldTypeHandler {
   const controlFormat = withSeconds ? "yyyy-MM-ddTHH:mm:ss" : "yyyy-MM-ddTHH:mm";
   const displayFormat = withSeconds ? "yyyy-MM-dd tt hh:mm:ss" : "yyyy-MM-dd tt hh:mm";
 
@@ -392,7 +392,7 @@ function createDateTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
 
 // region Time 타입 핸들러 (time, time-sec)
 
-function createTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
+function createTimeHandler(withSeconds: boolean): TextfieldTypeHandler {
   const controlFormat = withSeconds ? "HH:mm:ss" : "HH:mm";
   const displayFormat = withSeconds ? "tt hh:mm:ss" : "tt hh:mm";
 
@@ -446,7 +446,7 @@ function createTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
 
 // region 핸들러 맵
 
-export const textfieldTypeHandlers: Record<keyof TSdTextfieldTypes, ITextfieldTypeHandler> = {
+export const textfieldTypeHandlers: Record<keyof SdTextfieldTypes, TextfieldTypeHandler> = {
   "text": createStringHandler("text"),
   "password": createStringHandler("password"),
   "email": createStringHandler("email"),

package/src/ui/form/input/{sd-textfield.control.ts → sd-textfield.ts}

@@ -10,7 +10,7 @@ import {
 import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
 import {
   textfieldTypeHandlers,
-  type TSdTextfieldTypes,
+  type SdTextfieldTypes,
 } from "./sd-textfield-type-handlers";
 
 @Component({
@@ -283,8 +283,8 @@ import {
     "[attr.data-sd-theme]": "theme()",
   },
 })
-export class SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
-  value = model<TSdTextfieldTypes[K]>();
+export class SdTextfield<K extends keyof SdTextfieldTypes> {
+  value = model<SdTextfieldTypes[K]>();
 
   type = input.required<K>();
   placeholder = input<string>();
@@ -296,12 +296,12 @@ export class SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
   readonly = input(false, { transform: booleanAttribute });
 
   required = input(false, { transform: booleanAttribute });
-  min = input<TSdTextfieldTypes[K]>();
-  max = input<TSdTextfieldTypes[K]>();
+  min = input<SdTextfieldTypes[K]>();
+  max = input<SdTextfieldTypes[K]>();
   minlength = input<number>();
   maxlength = input<number>();
   pattern = input<string>();
-  validatorFn = input<(value: TSdTextfieldTypes[K] | undefined) => string | undefined>();
+  validatorFn = input<(value: SdTextfieldTypes[K] | undefined) => string | undefined>();
   format = input<string>();
 
   step = input<number>();
@@ -375,7 +375,7 @@ export class SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
     if (parsed === undefined) {
       return;
     }
-    this.value.set(parsed as TSdTextfieldTypes[K]);
+    this.value.set(parsed as SdTextfieldTypes[K]);
   }
 
   onInputPaste(event: ClipboardEvent): void {
@@ -391,6 +391,6 @@ export class SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
       inputEl.value = this.controlValue();
       return;
     }
-    this.value.set(parsed as TSdTextfieldTypes[K] | undefined);
+    this.value.set(parsed as SdTextfieldTypes[K] | undefined);
   }
 }

package/src/ui/form/{sd-form.control.ts → sd-form.ts}

@@ -20,7 +20,7 @@ import {
     </form>
   `,
 })
-export class SdFormControl {
+export class SdForm {
   formElRef = viewChild.required<any, ElementRef<HTMLFormElement>>("formEl", {
     read: ElementRef,
   });

package/src/ui/form/select/{sd-select-button.control.ts → sd-select-button.ts}

@@ -36,7 +36,7 @@ import { setupRipple } from "../../../core/utils/setups/setupRipple";
     "[attr.tabindex]": "0",
   },
 })
-export class SdSelectButtonControl {
+export class SdSelectButton {
   constructor() {
     setupRipple(() => true);
   }

package/src/ui/form/select/{sd-select-item.control.ts → sd-select-item.ts}

@@ -12,16 +12,16 @@ import {
   signal,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdSelectControl } from "./sd-select.control";
-import { SdCheckboxControl } from "../checkbox/sd-checkbox.control";
-import { SdGapControl } from "../../layout/sd-gap.control";
+import { SdSelect } from "./sd-select";
+import { SdCheckbox } from "../checkbox/sd-checkbox";
+import { SdGap } from "../../layout/sd-gap";
 
 @Component({
   selector: "sd-select-item",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdCheckboxControl, SdGapControl],
+  imports: [SdCheckbox, SdGap],
   template: `
     <div class="_content" tabindex="0" (click)="onClick()" (keydown)="onKeydown($event)">
       @if (_parentControl.selectMode() === "multi") {
@@ -77,9 +77,9 @@ import { SdGapControl } from "../../layout/sd-gap.control";
     "[attr.data-sd-hidden]": "hidden()",
   },
 })
-export class SdSelectItemControl<T> {
-  protected readonly _parentControl = inject<SdSelectControl<any, T>>(
-    forwardRef(() => SdSelectControl),
+export class SdSelectItem<T> {
+  protected readonly _parentControl = inject<SdSelect<any, T>>(
+    forwardRef(() => SdSelect),
   );
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _destroyRef = inject(DestroyRef);

package/src/ui/form/select/{sd-select.control.ts → sd-select.ts}

@@ -16,19 +16,19 @@ import {
   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";
 import { tabbable } from "tabbable";
 
-export type TSelectModeValue<T> = {
+export type SelectModeValue<T> = {
   multi: T[];
   single: T;
 };
@@ -39,17 +39,17 @@ export type TSelectModeValue<T> = {
   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>
@@ -180,9 +180,9 @@ export type TSelectModeValue<T> = {
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdSelectControl<M extends "single" | "multi", T> {
+export class SdSelect<M extends "single" | "multi", T> {
   selectMode = input("single" as M);
-  value = model<TSelectModeValue<any>[M]>();
+  value = model<SelectModeValue<any>[M]>();
   placeholder = input<string>();
   disabled = input(false, { transform: booleanAttribute });
   inline = input(false, { transform: booleanAttribute });
@@ -203,16 +203,16 @@ export class SdSelectControl<M extends "single" | "multi", T> {
 
   protected readonly tablerCaretDown = tablerCaretDown;
 
-  _itemControls = contentChildren(SdSelectItemControl);
-  private readonly _dropdownControl = viewChild.required(SdDropdownControl);
-  private readonly _dropdownElRef = viewChild.required<SdDropdownControl, ElementRef<HTMLElement>>(
-    SdDropdownControl,
+  _itemControls = contentChildren(SdSelectItem);
+  private readonly _dropdownControl = viewChild.required(SdDropdown);
+  private readonly _dropdownElRef = viewChild.required<SdDropdown, ElementRef<HTMLElement>>(
+    SdDropdown,
     { read: ElementRef },
   );
 
   _headerTpl = contentChild<TemplateRef<void>>("headerTpl");
   _beforeTpl = contentChild<TemplateRef<void>>("beforeTpl");
-  _itemOfTpl = contentChild(SdItemOfTemplateDirective, { read: TemplateRef });
+  _itemOfTpl = contentChild(SdItemOfTemplate, { read: TemplateRef });
 
   _selectedItemContentHTML = signal<string | undefined>(undefined);
 

package/src/ui/layout/dock/{sd-dock-container.control.ts → sd-dock-container.ts}

@@ -8,7 +8,7 @@ import {
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdDockControl } from "./sd-dock.control";
+import { SdDock } from "./sd-dock";
 
 @Component({
   selector: "sd-dock-container",
@@ -35,8 +35,8 @@ import { SdDockControl } from "./sd-dock.control";
     `,
   ],
 })
-export class SdDockContainerControl {
-  dockControls = contentChildren(SdDockControl);
+export class SdDockContainer {
+  dockControls = contentChildren(SdDock);
 
   contentElRef = viewChild.required<any, ElementRef<HTMLDivElement>>("content", {
     read: ElementRef,

package/src/ui/layout/dock/{sd-dock.control.ts → sd-dock.ts}

@@ -10,8 +10,8 @@ import {
   signal,
   ViewEncapsulation,
 } from "@angular/core";
-import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
-import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
+import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
 
 @Component({
   selector: "sd-dock",
@@ -86,7 +86,7 @@ import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-even
     `,
   ],
 })
-export class SdDockControl {
+export class SdDock {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _destroyRef = inject(DestroyRef);
 
@@ -98,7 +98,7 @@ export class SdDockControl {
 
   size = signal(0);
 
-  private readonly _config = useSdSystemConfigResource<{ size?: string }>({ key: this.key });
+  private readonly _config = injectSdSystemConfigResource<{ size?: string }>({ key: this.key });
 
   constructor() {
     this._destroyRef.onDestroy(() => {
@@ -122,7 +122,7 @@ export class SdDockControl {
     Object.assign(this._elRef.nativeElement.style, style);
   }
 
-  onHostResize(event: ISdResizeEvent) {
+  onHostResize(event: SdResizeEvent) {
     if (["top", "bottom"].includes(this.position()) && event.heightChanged) {
       this.size.set(this._elRef.nativeElement.clientHeight);
     }

package/src/ui/layout/kanban/{sd-kanban-board.control.ts → sd-kanban-board.ts}

@@ -33,14 +33,14 @@ import {
     `,
   ],
 })
-export class SdKanbanBoardControl<L, T> {
-  dragKanban = signal<ISdKanbanDragRef<L, T> | undefined>(undefined);
+export class SdKanbanBoard<L, T> {
+  dragKanban = signal<SdKanbanDragRef<L, T> | undefined>(undefined);
 
   selectedValues = model<T[]>([]);
 
-  drop = output<ISdKanbanBoardDropInfo<L, T>>();
+  drop = output<SdKanbanBoardDropInfo<L, T>>();
 
-  onDropTo(target: ISdKanbanDropTarget<L, T>) {
+  onDropTo(target: SdKanbanDropTarget<L, T>) {
     if (this.dragKanban() == null) return;
 
     this.drop.emit({
@@ -57,18 +57,18 @@ export class SdKanbanBoardControl<L, T> {
   }
 }
 
-export interface ISdKanbanBoardDropInfo<L, T> {
+export interface SdKanbanBoardDropInfo<L, T> {
   sourceKanbanValue?: T;
   targetLaneValue?: L;
   targetKanbanValue?: T;
 }
 
-export interface ISdKanbanDragRef<_L, T> {
+export interface SdKanbanDragRef<_L, T> {
   value(): T | undefined;
   heightOnDrag(): number;
 }
 
-export interface ISdKanbanDropTarget<L, T> {
+export interface SdKanbanDropTarget<L, T> {
   targetLaneValue(): L | undefined;
   targetKanbanValue?(): T | undefined;
 }

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

@@ -14,14 +14,14 @@ import {
   TemplateRef,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdBusyContainerControl } from "../../overlay/busy/sd-busy-container.control";
-import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
+import { SdBusyContainer } from "../../overlay/busy/sd-busy-container";
+import { SdCheckbox } from "../../form/checkbox/sd-checkbox";
 import {
-  SdKanbanBoardControl,
-  type ISdKanbanDropTarget,
-} from "./sd-kanban-board.control";
-import { SdKanbanControl } from "./sd-kanban.control";
-import { SdAnchorControl } from "../../form/button/sd-anchor.control";
+  SdKanbanBoard,
+  type SdKanbanDropTarget,
+} 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";
 
@@ -30,7 +30,7 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdBusyContainerControl, SdCheckboxControl, NgTemplateOutlet, SdAnchorControl, NgIcon],
+  imports: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon],
   host: {
     "class": "flex-column p-default gap-default",
     "[attr.data-sd-drag-over]": "dragOvered()",
@@ -118,9 +118,9 @@ import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
     `,
   ],
 })
-export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoardControl<L, T>>(
-    forwardRef(() => SdKanbanBoardControl),
+export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T> {
+  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
+    forwardRef(() => SdKanbanBoard),
   );
 
   busy = input(false, { transform: booleanAttribute });
@@ -131,7 +131,7 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
 
   value = input<L>();
 
-  kanbanControls = contentChildren<SdKanbanControl<L, T>>(SdKanbanControl, { descendants: true });
+  kanbanControls = contentChildren<SdKanban<L, T>>(SdKanban, { descendants: true });
 
   toolTplRef = contentChild<any, TemplateRef<void>>("toolTpl", { read: TemplateRef });
   titleTplRef = contentChild<any, TemplateRef<void>>("titleTpl", { read: TemplateRef });

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

@@ -12,21 +12,21 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import {
-  SdKanbanBoardControl,
-  type ISdKanbanDragRef,
-  type ISdKanbanDropTarget,
-} from "./sd-kanban-board.control";
-import { SdKanbanLaneControl } from "./sd-kanban-lane.control";
-import { SdEventsDirective } from "../../../core/directives/sd-events.directive";
-import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
-import { SdCardDirective } from "../sd-card.directive";
+  SdKanbanBoard,
+  type SdKanbanDragRef,
+  type SdKanbanDropTarget,
+} from "./sd-kanban-board";
+import { SdKanbanLane } from "./sd-kanban-lane";
+import { SdEvents } from "../../../core/directives/sd-events";
+import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import { SdCard } from "../sd-card";
 
 @Component({
   selector: "sd-kanban",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdEventsDirective, SdCardDirective],
+  imports: [SdEvents, SdCard],
   host: {
     "[attr.data-sd-dragging-this]": "dragKanban() === thisRef",
     "[attr.data-sd-dragging]": "dragKanban() != null",
@@ -112,12 +112,12 @@ import { SdCardDirective } from "../sd-card.directive";
     `,
   ],
 })
-export class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, ISdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoardControl<L, T>>(
-    forwardRef(() => SdKanbanBoardControl),
+export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T> {
+  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
+    forwardRef(() => SdKanbanBoard),
   );
-  private readonly _laneControl = inject<SdKanbanLaneControl<L, T>>(
-    forwardRef(() => SdKanbanLaneControl),
+  private readonly _laneControl = inject<SdKanbanLane<L, T>>(
+    forwardRef(() => SdKanbanLane),
   );
   private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
@@ -185,7 +185,7 @@ export class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, ISdKanbanD
     this.dragOvered.set(false);
   }
 
-  onCardResize(event: ISdResizeEvent) {
+  onCardResize(event: SdResizeEvent) {
     const marginBottom = getComputedStyle(event.target as HTMLElement).marginBottom;
     this.cardHeight.set(
       (event.target as HTMLElement).clientHeight + (parseInt(marginBottom) || 0),

package/src/ui/layout/{sd-card.directive.ts → sd-card.ts}

@@ -1,10 +1,10 @@
 import { Directive } from "@angular/core";
 
 @Directive({
-  selector: "sd-card,[sd-card]",
+  selector: "sd-card,[sdCard]",
   standalone: true,
   host: {
     class: "card",
   },
 })
-export class SdCardDirective {}
+export class SdCard {}

package/src/ui/layout/{sd-gap.control.ts → sd-gap.ts}

@@ -34,7 +34,7 @@ import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation
     "[style.display]": "_displayStyle()",
   },
 })
-export class SdGapControl {
+export class SdGap {
   height = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();
   heightPx = input<number>();
   width = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();

package/src/ui/layout/{sd-pane.directive.ts → sd-pane.ts}

@@ -1,11 +1,11 @@
 import { Directive } from "@angular/core";
 
 @Directive({
-  selector: "sd-pane,[sd-pane]",
+  selector: "sd-pane,[sdPane]",
   standalone: true,
   host: {
     class: "fill",
     style: "display: block;",
   },
 })
-export class SdPaneDirective {}
+export class SdPane {}