@simplysm/angular 14.0.41 → 14.0.43

package/src/controls/input/sd-date-range-picker.ts

@@ -68,14 +68,7 @@ export class SdDateRangePicker {
 
   handleDatePeriodTypeChanged(): void {
     if (this.periodType() === "월") {
-      const fromDate = this.from();
-      if (fromDate) {
-        const firstOfMonth = fromDate.setDay(1);
-        this.from.set(firstOfMonth);
-        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
-      } else {
-        this.to.set(undefined);
-      }
+      this._syncMonthRange();
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     }
@@ -83,14 +76,7 @@ export class SdDateRangePicker {
 
   handleFromDateChanged(): void {
     if (this.periodType() === "월") {
-      const fromDate = this.from();
-      if (fromDate) {
-        const firstOfMonth = fromDate.setDay(1);
-        this.from.set(firstOfMonth);
-        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
-      } else {
-        this.to.set(undefined);
-      }
+      this._syncMonthRange();
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     } else if (
@@ -102,4 +88,15 @@ export class SdDateRangePicker {
       this.to.set(this.from());
     }
   }
+
+  private _syncMonthRange(): void {
+    const fromDate = this.from();
+    if (fromDate) {
+      const firstOfMonth = fromDate.setDay(1);
+      this.from.set(firstOfMonth);
+      this.to.set(firstOfMonth.addMonths(1).addDays(-1));
+    } else {
+      this.to.set(undefined);
+    }
+  }
 }

package/src/controls/input/sd-numpad.ts

@@ -42,7 +42,7 @@ import { tablerArrowLeft, tablerEraser } from "@ng-icons/tabler-icons";
               <sd-button
                 [size]="'lg'"
                 [theme]="'primary'"
-                [disabled]="required() && value() === undefined"
+                [disabled]="required() && value() == undefined"
                 (click)="onButtonClick('ENT')"
               >
                 ENT

package/src/controls/input/sd-textarea.ts

@@ -204,7 +204,7 @@ export class SdTextarea {
 
       if (this.validatorFn()) {
         const message = this.validatorFn()!(this.value());
-        if (message !== undefined) {
+        if (message != null) {
           errorMessages.push(message);
         }
       }

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -105,10 +105,10 @@ function createStringHandler(type: "text" | "password" | "email" | "color"): Tex
 
       if (type !== "color") {
         const str = value as string;
-        if (opts.minlength !== undefined && opts.minlength > str.length) {
+        if (opts.minlength != null && opts.minlength > str.length) {
           errors.push(`문자의 길이가 ${opts.minlength}보다 길거나 같아야 합니다.`);
         }
-        if (opts.maxlength !== undefined && opts.maxlength < str.length) {
+        if (opts.maxlength != null && opts.maxlength < str.length) {
           errors.push(`문자의 길이가 ${opts.maxlength}보다 짧거나 같아야 합니다.`);
         }
 

package/src/controls/input/sd-textfield.ts

@@ -30,7 +30,7 @@ import {
         <span class="tx-trans-light">****</span>
       } @else {
         @if (controlValue()) {
-          <pre>{{ controlValueText() ?? controlValue() }} </pre>
+          <pre>{{ controlValueText() ? controlValueText() : " " }}</pre>
         } @else if (placeholder()) {
           <span class="tx-trans-lighter">{{ placeholder() }}</span>
         } @else {
@@ -274,7 +274,7 @@ import {
     `,
   ],
   host: {
-    "[attr.data-sd-type]": "controlType()",
+    "[attr.data-sd-type]": "type()",
     "[attr.data-sd-disabled]": "disabled()",
     "[attr.data-sd-readonly]": "readonly()",
     "[attr.data-sd-inline]": "inline()",
@@ -336,7 +336,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     if (value == null) return undefined;
     return this._handler().toDisplayText(value, {
       minDigits: this.minDigits(),
-    });
+    }) ?? this.controlValue();
   });
 
   constructor() {
@@ -356,7 +356,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
 
       if (this.validatorFn()) {
         const message = this.validatorFn()!(value);
-        if (message !== undefined) {
+        if (message != null) {
           errorMessages.push(message);
         }
       }
@@ -372,7 +372,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
       return;
     }
     const parsed = this._handler().parse(inputEl.value, { format: this.format() });
-    if (parsed === undefined) {
+    if (parsed == null) {
       inputEl.value = this.controlValue();
       return;
     }
@@ -387,7 +387,7 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
       return;
     }
     const parsed = this._handler().parse(text, { format: this.format() });
-    if (parsed === undefined) {
+    if (parsed == null) {
       const inputEl = event.target as HTMLInputElement;
       inputEl.value = this.controlValue();
       return;

package/src/controls/list/sd-list-item.ts

@@ -15,20 +15,17 @@ import { NgIcon } from "@ng-icons/core";
 import { SdCollapse } from "../collapse/sd-collapse";
 import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
 import { SdList } from "./sd-list";
-import { setupRipple } from "../../core/ripple/setupRipple";
+import { SdRipple } from "../../core/ripple/sd-ripple";
 
 @Component({
   selector: "sd-list-item",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon],
+  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple],
   template: `
-    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
-      @if (layout() === "accordion" && hasChildren()) {
-        <sd-collapse-icon [open]="open()" />
-      }
-      @if (selectedIcon() !== undefined && !hasChildren()) {
+    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()" [sdRipple]="!readonly() && !(layout() === 'flat' && hasChildren())">
+      @if (selectedIcon() != null && !hasChildren()) {
         <ng-icon
           [class.tx-theme-primary-default]="selected()"
           [class.tx-trans-lightest]="!selected()"
@@ -43,6 +40,9 @@ import { setupRipple } from "../../core/ripple/setupRipple";
           <ng-template [ngTemplateOutlet]="toolTpl()!" />
         </div>
       }
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
     </div>
     @if (hasChildren()) {
       <sd-collapse [open]="childrenOpen()">
@@ -57,54 +57,72 @@ import { setupRipple } from "../../core/ripple/setupRipple";
 
         > ._content {
           display: flex;
-          align-items: center;
           padding: var(--gap-sm) var(--gap-default);
           cursor: pointer;
-          gap: var(--gap-sm);
+          gap: var(--gap-xs);
 
           > ._label {
-            flex: 1;
+            flex: 1 1 auto;
+            overflow: auto;
           }
         }
 
-        &:hover > ._content {
-          background: var(--trans-lighter);
-        }
-
         &[data-sd-selected="true"] > ._content {
           background: var(--trans-lighter);
           font-weight: bold;
         }
 
+        &[data-sd-has-selected-icon="true"][data-sd-selected="true"] > ._content {
+          color: var(--text-trans-default);
+
+          &:hover {
+            background: var(--trans-lighter);
+          }
+        }
+
         &[data-sd-readonly="true"] {
           > ._content {
             cursor: default;
           }
+        }
 
-          &:hover > ._content {
-            background: transparent;
+        &[data-sd-layout="accordion"] {
+          &:not([data-sd-readonly="true"]) {
+            > ._content:hover {
+              background: var(--trans-lighter);
+            }
+          }
+
+          > sd-collapse > ._content > sd-list {
+            padding: var(--gap-xs) 0;
           }
         }
 
-        &[data-sd-layout="flat"] {
+        &[data-sd-layout="flat"][data-sd-has-children="true"] {
           > ._content {
-            font-size: 0.85em;
-            opacity: 0.7;
+            display: block;
+            background: transparent;
             cursor: default;
+            font-size: var(--font-size-sm);
+            opacity: 0.7;
           }
+        }
+      }
 
-          &:hover > ._content {
-            background: transparent;
-          }
+      .sd-theme-mobile > sd-list-item {
+        > ._content:hover {
+          background: transparent;
         }
       }
     `,
   ],
   host: {
     "[attr.data-sd-layout]": "layout()",
+    "[attr.data-sd-open]": "open()",
     "[attr.data-sd-selected]": "selected()",
     "[attr.data-sd-readonly]": "readonly()",
     "[attr.data-sd-has-children]": "hasChildren()",
+    "[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
   },
 })
 export class SdListItem {
@@ -126,10 +144,6 @@ export class SdListItem {
     return this.layout() === "flat" ? true : this.open();
   });
 
-  constructor() {
-    setupRipple(() => !this.readonly() && this.layout() !== "flat");
-  }
-
   onContentClick(): void {
     if (this.readonly()) return;
     if (this.layout() === "accordion" && this.hasChildren()) {

package/src/controls/list/sd-list.ts

@@ -18,7 +18,8 @@ import {
   styles: [
     /* language=SCSS */ `
       sd-list {
-        display: block;
+        display: flex;
+        flex-direction: column;
         user-select: none;
         background: var(--control-color);
 

package/src/controls/select/sd-select-button.ts

@@ -17,24 +17,21 @@ import { setupRipple } from "../../core/ripple/setupRipple";
   styles: [
     /* language=SCSS */ `
       sd-select-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: var(--gap-sm) var(--gap-default);
+        display: block;
+        background: var(--control-color);
+        font-weight: bold;
         cursor: pointer;
-        border-left: 1px solid var(--trans-lighter);
-        position: relative;
-        overflow: hidden;
+        color: var(--theme-primary-default);
+        transition: background 0.1s linear;
 
         &:hover {
-          background: var(--trans-lighter);
+          color: var(--theme-primary-darker);
+          background: var(--theme-gray-lightest);
         }
       }
     `,
   ],
-  host: {
-    "[attr.tabindex]": "0",
-  },
+  host: {},
 })
 export class SdSelectButton {
   constructor() {

package/src/controls/select/sd-select-item.ts

@@ -23,11 +23,12 @@ import { SdGap } from "../gap/sd-gap";
   standalone: true,
   imports: [SdCheckbox, SdGap],
   template: `
-    <div class="_content" tabindex="0" (click)="onClick()" (keydown)="onKeydown($event)">
-      @if (_parentControl.selectMode() === "multi") {
-        <sd-checkbox [value]="isSelected()" [inline]="true" />
-        <sd-gap [width]="'sm'" />
-      }
+    @if (_parentControl.selectMode() === "multi") {
+      <sd-checkbox [value]="isSelected()" [inline]="true" />
+      <sd-gap [width]="'sm'" />
+    }
+
+    <div class="_content" style="display: inline-block;">
       <ng-content />
     </div>
   `,
@@ -37,32 +38,33 @@ import { SdGap } from "../gap/sd-gap";
 
       sd-select-item {
         display: block;
+        padding: var(--gap-sm) var(--gap-default);
+        cursor: pointer;
+        transition: background 0.1s ease-in;
+        background: var(--control-color);
+
+        &:hover {
+          transition: background 0.1s ease-out;
+          background: rgba(0, 0, 0, 0.07);
+        }
 
-        > ._content {
-          padding: var(--gap-sm) var(--gap-default);
-          cursor: pointer;
-
-          &:hover {
-            background: var(--trans-lighter);
-          }
-
-          &:focus {
-            outline: none;
-            background: var(--trans-lighter);
-          }
+        &:focus {
+          outline: none;
+          transition: background 0.1s ease-out;
+          background: rgba(0, 0, 0, 0.07);
         }
 
-        &[data-sd-selected="true"] > ._content {
-          background: var(--trans-lighter);
+        &[data-sd-selected="true"] {
+          color: var(--theme-primary-default);
           font-weight: bold;
+          background: rgba(0, 0, 0, 0.07);
         }
 
         &[data-sd-disabled="true"] {
-          > ._content {
-            opacity: 0.3;
-            cursor: default;
-            pointer-events: none;
-          }
+          background: var(--theme-gray-default);
+          opacity: 0.3;
+          cursor: default;
+          pointer-events: none;
         }
 
         &[data-sd-hidden="true"] {
@@ -72,9 +74,13 @@ import { SdGap } from "../gap/sd-gap";
     `,
   ],
   host: {
+    "[attr.tabindex]": "'0'",
+    "[attr.data-sd-select-mode]": "_parentControl.selectMode()",
     "[attr.data-sd-selected]": "isSelected()",
     "[attr.data-sd-disabled]": "disabled()",
     "[attr.data-sd-hidden]": "hidden()",
+    "(click)": "onClick($event)",
+    "(keydown)": "onKeydown($event)",
   },
 })
 export class SdSelectItem<T> {
@@ -84,7 +90,7 @@ export class SdSelectItem<T> {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _destroyRef = inject(DestroyRef);
 
-  value = input.required<T>();
+  value = input<T | undefined>(undefined);
   disabled = input(false, { transform: booleanAttribute });
   hidden = input(false, { transform: booleanAttribute });
 
@@ -95,7 +101,7 @@ export class SdSelectItem<T> {
     const itemValue = this.value();
     if (this._parentControl.selectMode() === "multi") {
       const arr = parentValue as T[] | undefined;
-      return arr != null && arr.includes(itemValue);
+      return arr != null && arr.includes(itemValue as T);
     }
     return parentValue === itemValue;
   });
@@ -116,7 +122,9 @@ export class SdSelectItem<T> {
     });
   }
 
-  onClick(): void {
+  onClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
     if (this.disabled()) return;
     this._parentControl.selectItem(this.value());
   }