@simplysm/angular 14.2.2 → 14.2.4

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

@@ -46,6 +46,7 @@ import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
 import { useSheetCellStyling } from "./useSheetCellStyling";
 import { useSheetFocusIndicator } from "./useSheetFocusIndicator";
 import { injectSheetSelectRowIndicator } from "./injectSheetSelectRowIndicator";
+import { injectSheetDragSelection } from "./injectSheetDragSelection";
 import { SdModalProvider } from "../../core/modal/sd-modal.provider";
 import { SdSheetConfigModal } from "./sd-sheet-config.modal";
 import { SdEvents } from "../../core/events/sd-events";
@@ -68,7 +69,7 @@ import { SdEvents } from "../../core/events/sd-events";
     { directive: SdEvents, outputs: ["keydown.capture", "focus.capture", "blur.capture"] },
   ],
   host: {
-    "class": "flex-column fill",
+    class: "flex-column fill",
     "[attr.data-sd-inset]": "inset()",
     "[attr.data-sd-focus-mode]": "focusMode()",
     "(keydown.capture)": "onKeydownCapture($event)",
@@ -262,6 +263,7 @@ import { SdEvents } from "../../core/events/sd-events";
                     [canChangeFn]="selection.getCanChangeFn(item)"
                     (valueChange)="selection.toggle(item)"
                     (mousedown)="onSelectorMouseDown($event, rowIdx)"
+                    (pointerdown)="onSelectorPointerDown($event, rowIdx)"
                     [inline]="true"
                     [theme]="'white'"
                     [disabled]="_selectable !== true"
@@ -370,7 +372,7 @@ import { SdEvents } from "../../core/events/sd-events";
         border-radius: $border-radius;
 
         > ._tool {
-          background-color: var(--sd-bg-control);
+          background-color: var(--sd-bg-canvas);
           border-top-left-radius: $border-radius;
           border-top-right-radius: $border-radius;
           border-bottom: 1px solid $border-color-dark;
@@ -501,7 +503,7 @@ import { SdEvents } from "../../core/events/sd-events";
 
             > tbody > tr > td {
               font-family: var(--sd-font-family-field);
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               vertical-align: top;
 
               &._fixed {
@@ -717,6 +719,13 @@ export class SdSheet<TItem> {
     trackByFn: this.trackByFn,
   });
 
+  // Drag(paint) selection
+  private readonly _dragSelection = injectSheetDragSelection<TItem>({
+    domAccessor: this.domAccessor,
+    displayItems: this.displayItems,
+    selection: this.selection,
+  });
+
   // Icons
   icons = {
     tablerSettings,
@@ -853,6 +862,10 @@ export class SdSheet<TItem> {
     });
   }
 
+  onSelectorPointerDown(event: PointerEvent, r: number): void {
+    this._dragSelection.onSelectorPointerDown(event, r);
+  }
+
   onSelectorMouseDown(event: MouseEvent, r: number): void {
     if (!event.shiftKey) return;
     event.preventDefault();

package/src/features/editor/sd-tiptap-editor.ts

@@ -276,7 +276,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
               display: flex;
               align-items: center;
               justify-content: center;
-              background-color: var(--sd-bg-control);
+              background-color: var(--sd-bg-content);
               font-size: 0.625rem;
             }
           }

package/src/features/theme/sd-theme-provider.ts

@@ -12,9 +12,6 @@ export const SD_THEMES = [
 
 export type SdThemeName = (typeof SD_THEMES)[number]["value"];
 
-// 밀도 축 — 테마와 직교(DEC-007). compact 는 치수 토큰 그룹(sd-density-compact)만 덮는다.
-export type SdDensity = "normal" | "compact";
-
 @Injectable({ providedIn: "root" })
 export class SdThemeProvider {
   readonly themes: readonly { value: SdThemeName; label: string }[] = SD_THEMES;
@@ -22,8 +19,6 @@ export class SdThemeProvider {
   // 라이트(기본) / 블루프린트(도면) / IDE 다크
   theme = signal<SdThemeName>("light");
 
-  density = signal<SdDensity>("normal");
-
   readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
 
   fontSize = signal<number>(12);
@@ -39,10 +34,6 @@ export class SdThemeProvider {
       }
     });
 
-    effect(() => {
-      document.body.classList.toggle("sd-density-compact", this.density() === "compact");
-    });
-
     effect(() => {
       document.documentElement.style.fontSize = `${this.fontSize()}px`;
     });

package/src/features/theme/sd-theme-selector.ts

@@ -8,7 +8,6 @@ import {
 import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
 import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
 import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
 import { NgIcon } from "@ng-icons/core";
 import { SdThemeProvider } from "./sd-theme-provider";
 import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
@@ -18,7 +17,7 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  imports: [SdDropdown, SdDropdownPopup, SdButton, NgIcon],
   template: `
     <sd-dropdown>
       <sd-button [inline]="true" [theme]="'link-gray'">
@@ -65,14 +64,6 @@ import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
               }
             </div>
           </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>compact</span>
-            <sd-switch
-              [inline]="true"
-              [value]="_sdTheme.density() === 'compact'"
-              (valueChange)="_sdTheme.density.set($event ? 'compact' : 'normal')"
-            />
-          </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>

package/src/features/visual/sd-label.ts

@@ -57,9 +57,7 @@ import {
   ],
 })
 export class SdLabel {
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   color = input<string>();
   clickable = input(false, { transform: booleanAttribute });
 }

package/src/features/visual/sd-note.ts

@@ -57,9 +57,7 @@ import {
   ],
 })
 export class SdNote {
-  theme = input<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
-  >();
+  theme = input<"primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
   size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
 }

package/src/features/visual/sd-progress.ts

@@ -70,7 +70,7 @@ import { PercentPipe } from "@angular/common";
         &[data-sd-inset="true"] {
           border-radius: 0;
           border: none;
-          background-color: var(--sd-bg-control);
+          background-color: var(--sd-bg-track);
         }
       }
     `,
@@ -80,7 +80,7 @@ export class SdProgress {
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
   theme = input.required<
-    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+    "primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
   >();
 
   value = input.required<number>();

package/src/layout/sidebar/sd-sidebar.ts

@@ -17,9 +17,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
   host: {
     "[attr.data-sd-toggle]": "toggle()",
   },
-  template: `
-    <ng-content />
-  `,
+  template: ` <ng-content /> `,
   styles: [
     /* language=SCSS */ `
       @use "../../../scss/commons/mixins";
@@ -32,6 +30,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         left: 0;
         width: var(--sd-sidebar-width);
         height: 100%;
+        background-color: var(--sd-bg-canvas);
         border-right: 1px solid var(--sd-bd-soft);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {

package/src/layout/topbar/sd-topbar.ts

@@ -42,6 +42,7 @@ import { tablerMenu2 } from "@ng-icons/tabler-icons";
         overflow-y: hidden;
         user-select: none;
 
+        background-color: var(--sd-bg-canvas);
         color: var(--sd-tx-default);
         border-bottom: 1px solid var(--sd-bd-soft);
         padding-left: var(--sd-gap-xs);