@simplysm/angular 14.0.7 → 14.0.9

package/src/index.ts

@@ -57,11 +57,45 @@ export { useFullPageCodeSignal } from "./core/utils/useFullPageCodeSignal";
 export { useViewTitleSignal } from "./core/utils/useViewTitleSignal";
 export { useViewTypeSignal, type TSdViewType } from "./core/utils/useViewTypeSignal";
 export { setupCanDeactivate } from "./core/utils/setups/setupCanDeactivate";
+export { setupCumulateSelectedKeys } from "./core/utils/setups/setupCumulateSelectedKeys";
+export { setupCloserWhenSingleSelectionChange } from "./core/utils/setups/setupCloserWhenSingleSelectionChange";
 export {
   useExpandingManager,
   type IExpandItemDef,
 } from "./core/utils/useExpandingManager";
 export { useSelectionManager } from "./core/utils/useSelectionManager";
+export { injectParent } from "./core/utils/injectParent";
+
+// features/address
+export {
+  SdAddressSearchModal,
+  type IAddress,
+} from "./features/address/sd-address-search.modal";
+
+// features
+export { SdBaseContainerControl } from "./features/base/sd-base-container.control";
+export {
+  SdDataSheetControl,
+  AbsSdDataSheet,
+  type ISdDataSheetItemPropInfo,
+  type ISdDataSheetItemInfo,
+  type ISdDataSheetSearchResult,
+} from "./features/data-view/sd-data-sheet.control";
+export { SdDataSheetColumnDirective } from "./features/data-view/sd-data-sheet-column.directive";
+export {
+  SdDataDetailControl,
+  AbsSdDataDetail,
+  type ISdDataDetailDataInfo,
+} from "./features/data-view/sd-data-detail.control";
+export {
+  SdDataSelectButtonControl,
+  AbsSdDataSelectButton,
+} from "./features/data-view/sd-data-select-button.control";
+
+// features/shared-data
+export { SdSharedDataSelectControl } from "./features/shared-data/sd-shared-data-select.control";
+export { SdSharedDataSelectButtonControl } from "./features/shared-data/sd-shared-data-select-button.control";
+export { SdSharedDataSelectListControl } from "./features/shared-data/sd-shared-data-select-list.control";
 
 // ui/layout
 export { SdDockContainerControl } from "./ui/layout/dock/sd-dock-container.control";
@@ -225,4 +259,8 @@ export {
 
 // core/utils
 export { useSortingManager, type ISortingDef } from "./core/utils/useSortingManager";
-export type { TDirectiveInputSignals, TUndefToOptional } from "./core/utils/TDirectiveInputSignals";
+export type {
+  TDirectiveInputSignals,
+  TUndefToOptional,
+  TWithOptional,
+} from "./core/utils/TDirectiveInputSignals";

package/src/scss.d.ts

@@ -1 +1,6 @@
 declare module "*.scss" {}
+
+declare module "*.scss?inline" {
+  const content: string;
+  export default content;
+}

package/src/ui/data/list/sd-list-item.control.ts

@@ -24,7 +24,7 @@ import { setupRipple } from "../../../core/utils/setups/setupRipple";
   standalone: true,
   imports: [SdCollapseControl, SdCollapseIconControl, NgTemplateOutlet, NgIcon],
   template: `
-    <div class="_content" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
+    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
       @if (layout() === "accordion" && hasChildren()) {
         <sd-collapse-icon [open]="open()" />
       }
@@ -119,6 +119,8 @@ export class SdListItemControl {
   selected = input(false, { transform: booleanAttribute });
   selectedIcon = input<string>();
   readonly = input(false, { transform: booleanAttribute });
+  contentStyle = input<string>();
+  contentClass = input<string>();
 
   toolTpl = contentChild<TemplateRef<void>>("toolTpl");
 
@@ -131,7 +133,7 @@ export class SdListItemControl {
   });
 
   constructor() {
-    setupRipple(() => !this.readonly() && !(this.layout() === "flat" && this.hasChildren()));
+    setupRipple(() => !this.readonly() && this.layout() !== "flat");
   }
 
   onContentClick(): void {

package/src/ui/data/sheet/sd-sheet-column.directive.ts

@@ -6,6 +6,14 @@ import {
   TemplateRef,
 } from "@angular/core";
 
+export interface SdSheetCellContext {
+  $implicit: unknown;
+  item: unknown;
+  index: number;
+  depth: number;
+  edit: boolean;
+}
+
 @Directive({
   selector: "sd-sheet-column",
   standalone: true,
@@ -21,6 +29,6 @@ export class SdSheetColumnDirective {
   disableResizing = input(false, { transform: booleanAttribute });
   ordering = input(0);
 
-  cellTplRef = contentChild<TemplateRef<void>>("cellTpl");
+  cellTplRef = contentChild<TemplateRef<SdSheetCellContext>>("cellTpl");
   summaryTplRef = contentChild<TemplateRef<void>>("summaryTpl");
 }

package/src/ui/data/sheet/sd-sheet.control.ts

@@ -135,7 +135,7 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
             >
               @if (expanding.hasExpandable()) {
                 <td class="_expand-col">
-                  @if (getItemDef(item)?.hasChildren) {
+                  @if (getItemDef(item).hasChildren) {
                     <sd-anchor (click)="onExpandClick($event, item)">
                       <ng-icon [svg]="isExpanded(item) ? icons.tablerChevronDown : icons.tablerChevronRight" />
                     </sd-anchor>
@@ -351,7 +351,7 @@ export class SdSheetControl<T> {
   inset = input(false, { transform: booleanAttribute });
   contentStyle = input<string>();
   getItemCellClassFn = input<(item: T, colKey: string) => string>();
-  getItemCellStyleFn = input<(item: T, colKey: string) => string>();
+  getItemCellStyleFn = input<(item: T, colKey: string) => string | undefined>();
   hideConfigBar = input(false, { transform: booleanAttribute });
 
   // Outputs
@@ -384,7 +384,7 @@ export class SdSheetControl<T> {
   // Resizing state
   _isResizing = signal(false);
   _resizeIndicatorLeft = signal(0);
-  private _isOnResizing = false;
+  private _lastResizeEndTimeStamp = 0;
   private _resizingCleanup: (() => void) | null = null;
 
   // Config resource
@@ -478,13 +478,21 @@ export class SdSheetControl<T> {
     getItemSelectableFn: this.getItemSelectableFn,
   });
 
+  private readonly _columnControlMap = computed(() => {
+    const map = new Map<string, SdSheetColumnDirective>();
+    for (const col of this.columnControls()) {
+      map.set(col.key(), col);
+    }
+    return map;
+  });
+
   getColumnCellTpl(key: string) {
-    const col = this.columnControls().find((c) => c.key() === key);
+    const col = this._columnControlMap().get(key);
     return col?.cellTplRef() ?? null;
   }
 
   getColumnSummaryTpl(key: string) {
-    const col = this.columnControls().find((c) => c.key() === key);
+    const col = this._columnControlMap().get(key);
     return col?.summaryTplRef() ?? null;
   }
 
@@ -513,9 +521,8 @@ export class SdSheetControl<T> {
     if (fixedStyle != null) {
       parts.push(fixedStyle);
     }
-    const customStyle = this.getItemCellStyleFn()
-      ? this.getItemCellStyleFn()!(item, colDef.key)
-      : undefined;
+    const styleFn = this.getItemCellStyleFn();
+    const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
     if (customStyle != null) {
       parts.push(customStyle);
     }
@@ -556,7 +563,7 @@ export class SdSheetControl<T> {
   }
 
   onHeaderClick(event: MouseEvent, cell: ISdSheetHeaderDef): void {
-    if (this._isOnResizing) return;
+    if (event.timeStamp - this._lastResizeEndTimeStamp < 50) return;
     if (cell.colDef == null) return;
     if (cell.colDef.disableSorting) return;
     this.sorting.toggle(cell.colDef.key, event.shiftKey);
@@ -642,7 +649,8 @@ export class SdSheetControl<T> {
 
   getDataCellClass(item: T, colDef: ISdSheetColumnDef, r: number, c: number): string | null {
     const parts: string[] = [];
-    const customClass = this.getItemCellClassFn() ? this.getItemCellClassFn()!(item, colDef.key) : undefined;
+    const classFn = this.getItemCellClassFn();
+    const customClass = classFn != null ? classFn(item, colDef.key) : undefined;
     if (customClass != null) {
       parts.push(customClass);
     }
@@ -652,16 +660,16 @@ export class SdSheetControl<T> {
     return parts.length > 0 ? parts.join(" ") : null;
   }
 
-  async onKeydownCapture(event: KeyboardEvent): Promise<void> {
-    await this.cellAgent.handleKeydownCapture(event);
+  async onKeydownCapture(event: Event): Promise<void> {
+    await this.cellAgent.handleKeydownCapture(event as KeyboardEvent);
   }
 
   onDblClick(event: MouseEvent): void {
     this.cellAgent.handleCellDoubleClick(event);
   }
 
-  onBlurCapture(event: FocusEvent): void {
-    this.cellAgent.handleBlurCapture(event);
+  onBlurCapture(event: Event): void {
+    this.cellAgent.handleBlurCapture(event as FocusEvent);
   }
 
   onItemKeydown(event: KeyboardEvent, item: T): void {
@@ -700,7 +708,6 @@ export class SdSheetControl<T> {
     const startWidth = th.offsetWidth;
 
     this._isResizing.set(true);
-    this._isOnResizing = true;
     this._resizeIndicatorLeft.set(
       th.offsetLeft + th.offsetWidth - container.scrollLeft,
     );
@@ -724,10 +731,7 @@ export class SdSheetControl<T> {
       this._isResizing.set(false);
       this._saveColumnConfig(colDef.key, { width: `${newWidth}px` });
 
-      // Prevent sorting for 300ms after resize
-      setTimeout(() => {
-        this._isOnResizing = false;
-      }, 300);
+      this._lastResizeEndTimeStamp = e.timeStamp;
     };
 
     document.addEventListener("mousemove", onMouseMove);

package/src/ui/data/sheet/useSheetCellAgent.ts

@@ -192,8 +192,7 @@ export function useSheetCellAgent(options: {
       }
 
       event.preventDefault();
-      const text = td.textContent;
-      await navigator.clipboard.writeText(text);
+      await navigator.clipboard.writeText(td.textContent);
       return;
     }
 

package/src/ui/data/sheet/useSheetLayoutEngine.ts

@@ -112,6 +112,7 @@ export function useSheetLayoutEngine(options: {
 
           if (canMerge && lastCell != null) {
             lastCell.colspan += 1;
+            spanStartHeaders[row] = headers;
           } else {
             table[row].push({
               text,

package/src/ui/form/button/sd-modal-select-button.control.ts

@@ -15,7 +15,6 @@ import {
   type ISdModalInfo,
   type ISdModalOptions,
 } from "../../overlay/modal/sd-modal.provider";
-import type { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
 import type { TSelectModeValue } from "../select/sd-select.control";
 import { SdAnchorControl } from "./sd-anchor.control";
 import { SdButtonControl } from "./sd-button.control";
@@ -28,30 +27,25 @@ import { tablerSearch, tablerEraser } from "@ng-icons/tabler-icons";
  * ISdModal을 확장하여 selectMode와 selectedItemKeys를 추가한다.
  */
 export interface ISdSelectModal<T> extends ISdModal<ISelectModalOutputResult<T>> {
-  selectMode: InputSignal<"single" | "multi">;
-  selectedItemKeys: InputSignal<T[]>;
+  selectMode: InputSignal<"single" | "multi" | undefined>;
+  selectedItemKeys: InputSignal<any[]>;
 }
 
 /**
  * 모달 선택 결과
  */
 export interface ISelectModalOutputResult<T> {
-  selectedItemKeys: T[];
-  selectedItems: Record<string, unknown>[];
+  selectedItemKeys: any[];
+  selectedItems: T[];
 }
 
 /**
  * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
  */
-export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = Omit<
-  ISdModalInfo<T>,
-  "inputs"
-> & {
-  inputs: Omit<
-    TDirectiveInputSignals<T>,
-    "initialized" | "close" | "actionTplRef" | "selectMode" | "selectedItemKeys"
-  >;
-};
+export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = ISdModalInfo<
+  T,
+  "selectMode" | "selectedItemKeys"
+>;
 
 @Component({
   selector: "sd-modal-select-button",
@@ -71,7 +65,7 @@ export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = Omit<
       }
       @if (!disabled()) {
         <sd-button [inset]="true" (click)="onSearchClick()">
-          <ng-icon [svg]="tablerSearch" />
+          <ng-icon [svg]="searchIcon()" />
         </sd-button>
       }
     </div>
@@ -156,20 +150,27 @@ export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = Omit<
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdModalSelectButtonControl {
+export class SdModalSelectButtonControl<
+  T extends object,
+  K,
+  M extends keyof TSelectModeValue<K> = keyof TSelectModeValue<K>,
+> {
   private readonly _sdModal = inject(SdModalProvider);
 
-  selectMode = input<"single" | "multi">("single");
-  value = model<TSelectModeValue<any>>();
-  selectedItems = model<Record<string, unknown>[]>([]);
+  modal = input.required<TSdSelectModalInfo<ISdSelectModal<T>>>();
+
+  value = model<TSelectModeValue<K>[M]>();
+  selectedItems = model<T[]>([]);
+
   disabled = input(false, { transform: booleanAttribute });
   required = input(false, { transform: booleanAttribute });
-  modal = input<TSdSelectModalInfo<any>>();
-  modalOptions = input<ISdModalOptions>();
-  size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  selectMode = input<M>("single" as M);
+  modalOptions = input<ISdModalOptions>();
+
+  searchIcon = input(tablerSearch);
 
-  protected readonly tablerSearch = tablerSearch;
   protected readonly tablerEraser = tablerEraser;
 
   _hasValue = computed(() => {
@@ -190,48 +191,29 @@ export class SdModalSelectButtonControl {
   }
 
   onEraseClick(): void {
-    if (this.selectMode() === "multi") {
-      this.value.set([]);
-    } else {
-      this.value.set(undefined);
-    }
+    this.value.set((this.selectMode() === "multi" ? [] : undefined) as any);
     this.selectedItems.set([]);
   }
 
   async onSearchClick(): Promise<void> {
-    const modalInfo = this.modal();
-    if (modalInfo == null) return;
-
-    const currentValue = this.value();
-    const selectedItemKeys: any[] =
-      this.selectMode() === "multi"
-        ? (currentValue as any[] | undefined) ?? []
-        : currentValue != null
-          ? [currentValue]
-          : [];
-
-    const result = await this._sdModal.showAsync(
-      {
-        title: modalInfo.title,
-        type: modalInfo.type,
-        inputs: {
-          ...modalInfo.inputs,
-          selectMode: this.selectMode(),
-          selectedItemKeys,
-        } as any,
+    const modal = this.modal();
+    const result = await this._sdModal.showAsync({
+      ...modal,
+      inputs: {
+        selectMode: this.selectMode(),
+        selectedItemKeys: (this.selectMode() === "multi"
+          ? ((this.value() as any[] | undefined) ?? [])
+          : [this.value()]
+        ).filterExists(),
+        ...modal.inputs,
       },
-      this.modalOptions(),
-    );
-
-    if (result == null) return;
-
-    const typedResult = result as ISelectModalOutputResult<any>;
+    });
 
-    if (this.selectMode() === "multi") {
-      this.value.set(typedResult.selectedItemKeys);
-    } else {
-      this.value.set(typedResult.selectedItemKeys[0]);
+    if (result) {
+      const newValue =
+        this.selectMode() === "multi" ? result.selectedItemKeys : result.selectedItemKeys[0];
+      this.value.set(newValue);
+      this.selectedItems.set(result.selectedItems);
     }
-    this.selectedItems.set(typedResult.selectedItems);
   }
 }

package/src/ui/form/editor/sd-tiptap-editor.control.ts

@@ -24,6 +24,40 @@ import TextAlign from "@tiptap/extension-text-align";
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 
+interface TiptapActiveStates {
+  h1: boolean;
+  h2: boolean;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strike: boolean;
+  bulletList: boolean;
+  orderedList: boolean;
+  blockquote: boolean;
+  codeBlock: boolean;
+  alignLeft: boolean;
+  alignCenter: boolean;
+  alignRight: boolean;
+  alignJustify: boolean;
+}
+
+const DEFAULT_ACTIVE_STATES: TiptapActiveStates = {
+  h1: false,
+  h2: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  bulletList: false,
+  orderedList: false,
+  blockquote: false,
+  codeBlock: false,
+  alignLeft: false,
+  alignCenter: false,
+  alignRight: false,
+  alignJustify: false,
+};
+
 const DEFAULT_EXTENSIONS: AnyExtension[] = [
   StarterKit,
   TextStyle,
@@ -251,7 +285,7 @@ export class SdTiptapEditorControl {
     "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
   ];
 
-  activeStates: WritableSignal<Record<string, boolean>> = signal({});
+  activeStates: WritableSignal<TiptapActiveStates> = signal(DEFAULT_ACTIVE_STATES);
   activeColor = signal("");
   activeBgColor = signal("");
   colorPickerMode: "text" | "bg" | undefined;

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

@@ -78,7 +78,7 @@ import { SdGapControl } from "../../layout/sd-gap.control";
   },
 })
 export class SdSelectItemControl<T> {
-  protected readonly _parentControl = inject<SdSelectControl<T>>(
+  protected readonly _parentControl = inject<SdSelectControl<any, T>>(
     forwardRef(() => SdSelectControl),
   );
   private readonly _elRef = inject(ElementRef<HTMLElement>);

package/src/ui/form/select/sd-select.control.ts

@@ -26,7 +26,10 @@ import { NgIcon } from "@ng-icons/core";
 import { tablerCaretDown } from "@ng-icons/tabler-icons";
 import { tabbable } from "tabbable";
 
-export type TSelectModeValue<T> = T | T[] | undefined;
+export type TSelectModeValue<T> = {
+  multi: T[];
+  single: T;
+};
 
 @Component({
   selector: "sd-select",
@@ -175,9 +178,9 @@ export type TSelectModeValue<T> = T | T[] | undefined;
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdSelectControl<T> {
-  selectMode = input<"single" | "multi">("single");
-  value = model<TSelectModeValue<T>>();
+export class SdSelectControl<M extends "single" | "multi", T> {
+  selectMode = input("single" as M);
+  value = model<TSelectModeValue<any>[M]>();
   placeholder = input<string>();
   disabled = input(false, { transform: booleanAttribute });
   inline = input(false, { transform: booleanAttribute });

package/src/ui/layout/dock/sd-dock.control.ts

@@ -2,6 +2,7 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   effect,
   ElementRef,
   inject,
@@ -87,6 +88,9 @@ import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-even
 })
 export class SdDockControl {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private _dragCleanup: (() => void) | undefined;
 
   key = input<string>();
   position = input<"top" | "bottom" | "right" | "left">("top");
@@ -97,6 +101,10 @@ export class SdDockControl {
   private readonly _config = useSdSystemConfigResource<{ size?: string }>({ key: this.key });
 
   constructor() {
+    this._destroyRef.onDestroy(() => {
+      this._dragCleanup?.();
+    });
+
     effect(() => {
       const conf = this._config.value();
       if (this.resizable() && conf && conf.size != null) {
@@ -151,8 +159,7 @@ export class SdDockControl {
       e.stopPropagation();
       e.preventDefault();
 
-      document.removeEventListener("mousemove", doDrag);
-      document.removeEventListener("mouseup", stopDrag);
+      this._dragCleanup?.();
 
       if (this.key() != null) {
         const newConf: { size?: string } = {};
@@ -167,5 +174,11 @@ export class SdDockControl {
 
     document.addEventListener("mousemove", doDrag);
     document.addEventListener("mouseup", stopDrag);
+
+    this._dragCleanup = () => {
+      document.removeEventListener("mousemove", doDrag);
+      document.removeEventListener("mouseup", stopDrag);
+      this._dragCleanup = undefined;
+    };
   }
 }

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

@@ -136,9 +136,10 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
   toolTplRef = contentChild<any, TemplateRef<void>>("toolTpl", { read: TemplateRef });
   titleTplRef = contentChild<any, TemplateRef<void>>("titleTpl", { read: TemplateRef });
 
-  isAllSelected = computed(() =>
-    this.kanbanControls().length > 0 && this.kanbanControls().every((ctrl) => ctrl.selected()),
-  );
+  isAllSelected = computed(() => {
+    const selectableControls = this.kanbanControls().filter((ctrl) => ctrl.selectable());
+    return selectableControls.length > 0 && selectableControls.every((ctrl) => ctrl.selected());
+  });
 
   dragKanban = computed(() => this._boardControl.dragKanban());
 
@@ -161,6 +162,7 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
       this._boardControl.selectedValues.update((v) => {
         const r = [...v];
         for (const ctrl of this.kanbanControls()) {
+          if (!ctrl.selectable()) continue;
           if (ctrl.value() == null) continue;
           if (!v.includes(ctrl.value()!)) {
             r.push(ctrl.value()!);
@@ -171,6 +173,7 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
     } else {
       this._boardControl.selectedValues.update((v) => {
         const kanbanValues = this.kanbanControls()
+          .filter((ctrl) => ctrl.selectable())
           .map((ctrl) => ctrl.value())
           .filter((v2): v2 is T => v2 != null);
         const result = v.filter((item) => !kanbanValues.includes(item));

package/src/ui/navigation/pagination/sd-pagination.control.ts

@@ -67,7 +67,7 @@ export class SdPaginationControl {
   visiblePageCount = input(10, { transform: numberAttribute });
 
   private readonly groupIndex = computed(() => {
-    return Math.floor(this.currentPage() / this.visiblePageCount());
+    return Math.floor(this.currentPage() / Math.max(this.visiblePageCount(), 1));
   });
 
   hasPrev = computed(() => {
@@ -82,7 +82,7 @@ export class SdPaginationControl {
     if (totalPageCount === 0) {
       return false;
     }
-    const lastGroupIndex = Math.floor((totalPageCount - 1) / this.visiblePageCount());
+    const lastGroupIndex = Math.floor((totalPageCount - 1) / Math.max(this.visiblePageCount(), 1));
     return this.groupIndex() < lastGroupIndex;
   });
 
@@ -112,7 +112,8 @@ export class SdPaginationControl {
   }
 
   goToPrevGroup(): void {
-    this.currentPage.set((this.groupIndex() - 1) * this.visiblePageCount());
+    if (!this.hasPrev()) return;
+    this.currentPage.set((this.groupIndex() - 1) * Math.max(this.visiblePageCount(), 1));
   }
 
   goToFirst(): void {
@@ -120,6 +121,7 @@ export class SdPaginationControl {
   }
 
   goToLast(): void {
+    if (this.totalPageCount() === 0) return;
     this.currentPage.set(this.totalPageCount() - 1);
   }
 }

package/src/ui/navigation/sidebar/sd-sidebar-container.control.ts

@@ -87,6 +87,6 @@ export class SdSidebarContainerControl {
   }
 
   onBackdropClick(): void {
-    this.toggle.update((v) => !v);
+    this.toggle.set(false);
   }
 }

package/src/ui/overlay/dropdown/sd-dropdown-popup.control.ts

@@ -102,7 +102,7 @@ export class SdDropdownPopupControl {
     const divEl = el.firstElementChild as HTMLElement;
 
     if (divEl.clientHeight > 300) {
-      el.style.height = "18.75rem";
+      el.style.height = "300px";
     } else {
       el.style.height = "";
     }

package/src/ui/overlay/modal/sd-modal.control.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   effect,
   ElementRef,
   inject,
@@ -62,6 +63,7 @@ export class SdModalControl {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _activatedModal = inject(SdActivatedModalProvider, { optional: true });
   private readonly _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+  private readonly _destroyRef = inject(DestroyRef);
 
   open = model(false);
   key = input<string | undefined>(undefined);
@@ -147,6 +149,11 @@ export class SdModalControl {
         void this._saveConfig();
       }
     };
+
+    this._destroyRef.onDestroy(() => {
+      document.removeEventListener("mousemove", this._onDocumentMouseMove);
+      document.removeEventListener("mouseup", this._onDocumentMouseUp);
+    });
   }
 
   onResizeMouseDown(event: MouseEvent, dir: string): void {
@@ -262,6 +269,8 @@ export class SdModalControl {
         maxZ = z;
       }
     }
+    const currentZ = parseInt(hostEl.style.zIndex, 10);
+    if (currentZ >= maxZ) return;
     hostEl.style.zIndex = String(maxZ + 1);
   }