@simplysm/angular 14.0.42 → 14.0.43

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());
   }

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

@@ -51,10 +51,10 @@ export type SelectModeValue<T> = {
     <sd-dropdown [disabled]="disabled()" [(open)]="dropdownOpen">
       <div class="_sd-select-control" [sdRipple]="!disabled()">
         <div class="_sd-select-control-content" #contentEl>
-          @if (_selectedItemContentHTML() !== undefined) {
+          @if (_selectedItemContentHTML() != null) {
             <div [innerHTML]="_selectedItemContentHTML()"></div>
           } @else if (placeholder()) {
-            <span class="tx-trans-lighter">{{ placeholder() }}</span>
+            <span class="sd-text-color-gray-default">{{ placeholder() }}</span>
           } @else {
             <span>&nbsp;</span>
           }
@@ -83,7 +83,7 @@ export type SelectModeValue<T> = {
           <ng-template [ngTemplateOutlet]="_beforeTpl()!" />
         }
         @if (_itemOfTpl(); as tpl) {
-          @for (item of _flatItems(); track item) {
+          @for (item of _flatItems(); track trackByFn()(item.data, item.index)) {
             <ng-template
               [ngTemplateOutlet]="tpl"
               [ngTemplateOutletContext]="{ $implicit: item.data, item: item.data, index: item.index, depth: item.depth }"
@@ -97,23 +97,33 @@ export type SelectModeValue<T> = {
   `,
   styles: [
     /* language=SCSS */ `
-      @use "../../../scss/commons/mixins";
-
       sd-select {
         display: block;
         position: relative;
+        width: 100%;
+        min-width: 10em;
 
         > sd-dropdown {
+          display: flex;
+          overflow: hidden;
+
+          border: 1px solid var(--trans-lighter);
+          border-radius: var(--border-radius-default);
+          background: var(--theme-secondary-lightest);
+
+          &:focus,
+          &:focus-within {
+            border-color: var(--theme-primary-default);
+          }
+
           > ._sd-select-control {
-            @include mixins.form-control-base();
             display: flex;
-            align-items: center;
+            position: relative;
+            gap: var(--gap-default);
+            flex-grow: 1;
+            padding: var(--gap-sm) var(--gap-default);
             cursor: pointer;
 
-            border: 1px solid var(--trans-lighter);
-            border-radius: var(--border-radius-default);
-            background: var(--theme-secondary-lightest);
-
             > ._sd-select-control-content {
               flex: 1;
               overflow: hidden;
@@ -122,45 +132,103 @@ export type SelectModeValue<T> = {
             }
 
             > ._sd-select-control-icon {
-              margin-left: var(--gap-sm);
               opacity: 0.3;
             }
+
+            &:hover > ._sd-select-control-icon,
+            &:focus > ._sd-select-control-icon,
+            &:active > ._sd-select-control-icon {
+              opacity: 1;
+            }
           }
 
-          &:focus-within > ._sd-select-control {
-            border-color: var(--theme-secondary-default);
+          > sd-select-button {
+            padding: var(--gap-sm);
+            border-left: 1px solid var(--theme-gray-lightest);
+
+            &:last-of-type {
+              border-top-right-radius: var(--border-radius-default);
+              border-bottom-right-radius: var(--border-radius-default);
+            }
           }
         }
 
-        &[data-sd-size="sm"] > sd-dropdown > ._sd-select-control {
-          padding: var(--gap-xs) var(--gap-sm);
-        }
+        &[data-sd-disabled="true"] {
+          > sd-dropdown {
+            background: var(--theme-gray-lightest);
 
-        &[data-sd-size="lg"] > sd-dropdown > ._sd-select-control {
-          padding: var(--gap-default) var(--gap-lg);
+            > ._sd-select-control {
+              color: var(--text-trans-light);
+              cursor: default;
+
+              > ._sd-select-control-icon {
+                display: none;
+              }
+            }
+          }
         }
 
         &[data-sd-inline="true"] {
           display: inline-block;
           width: auto;
+          vertical-align: top;
         }
 
-        &[data-sd-inset="true"] > sd-dropdown > ._sd-select-control {
-          border: none;
-          border-radius: 0;
+        &[data-sd-size="sm"] {
+          > sd-dropdown {
+            > ._sd-select-control {
+              padding: var(--gap-xs) var(--gap-sm);
+              gap: var(--gap-sm);
+            }
 
-          &:focus-within {
-            outline: 1px solid var(--theme-primary-default);
+            > sd-select-button {
+              padding: var(--gap-xs);
+            }
           }
         }
 
-        &[data-sd-disabled="true"] {
-          > sd-dropdown > ._sd-select-control {
-            background: var(--trans-lighter);
-            cursor: default;
+        &[data-sd-size="lg"] {
+          > sd-dropdown {
+            > ._sd-select-control {
+              padding: var(--gap-default) var(--gap-lg);
+              gap: var(--gap-lg);
+            }
 
-            > ._sd-select-control-icon {
-              display: none;
+            > sd-select-button {
+              padding: var(--gap-default);
+            }
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          min-width: auto;
+          border-radius: 0;
+
+          > sd-dropdown {
+            border: none;
+            border-radius: 0;
+
+            > sd-select-button {
+              border-radius: 0;
+            }
+
+            &:focus,
+            &:focus-within {
+              outline: 1px solid var(--theme-primary-default);
+              outline-offset: -1px;
+
+              > sd-select-button {
+                outline: 1px solid var(--theme-primary-default);
+                outline-offset: -1px;
+              }
+            }
+          }
+
+          &[data-sd-disabled="true"] > sd-dropdown {
+            background: var(--control-color);
+
+            > ._sd-select-control {
+              color: var(--text-trans-default);
             }
           }
         }
@@ -194,12 +262,13 @@ export class SdSelect<M extends "single" | "multi", T> {
   multiSelectionDisplayDirection = input<"vertical">();
 
   items = input<T[]>();
+  trackByFn = input<(item: T, index: number) => unknown>((item) => item);
   getChildrenFn = input<(item: T) => T[] | undefined>();
 
   contentClass = input<string>();
   contentStyle = input<string>();
 
-  dropdownOpen = signal(false);
+  dropdownOpen = model(false);
 
   protected readonly tablerCaretDown = tablerCaretDown;
 
@@ -225,9 +294,9 @@ export class SdSelect<M extends "single" | "multi", T> {
     const walk = (list: T[], depth: number) => {
       for (const item of list) {
         flat.push({ data: item, index: index++, depth });
-        if (getChildren !== undefined) {
+        if (getChildren != null) {
           const children = getChildren(item);
-          if (children !== undefined) {
+          if (children != null) {
             walk(children, depth + 1);
           }
         }
@@ -254,7 +323,7 @@ export class SdSelect<M extends "single" | "multi", T> {
         const popupEl = this._dropdownControl().popupElRef().nativeElement;
         const cls = this.contentClass();
         const addedClasses: string[] = [];
-        if (cls !== undefined) {
+        if (cls != null) {
           for (const c of cls.split(" ").filter(Boolean)) {
             popupEl.classList.add(c);
             addedClasses.push(c);
@@ -262,7 +331,7 @@ export class SdSelect<M extends "single" | "multi", T> {
         }
         const style = this.contentStyle();
         const addedStyleProps: string[] = [];
-        if (style !== undefined) {
+        if (style != null) {
           const tempEl = document.createElement("div");
           tempEl.style.cssText = style;
           for (let i = 0; i < tempEl.style.length; i++) {
@@ -330,12 +399,13 @@ export class SdSelect<M extends "single" | "multi", T> {
 
         const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
 
-        const separator = this.multiSelectionDisplayDirection() === "vertical" ? "<br>" : ", ";
+        const isVertical = this.multiSelectionDisplayDirection() === "vertical";
+        const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
         const htmlParts: string[] = [];
         for (const item of selectedItems) {
           const html = item.contentHTML();
           if (html !== "") {
-            htmlParts.push(html);
+            htmlParts.push(`<span style="display: inline">${html}</span>`);
           }
         }
         if (htmlParts.length > 0) {
@@ -360,24 +430,24 @@ export class SdSelect<M extends "single" | "multi", T> {
     });
   }
 
-  selectItem(itemValue: T): void {
+  selectItem(itemValue: T | undefined): void {
     this._setOrToggle(itemValue);
     if (this.selectMode() === "single") {
       this.closeDropdown();
     }
   }
 
-  toggleItem(itemValue: T): void {
+  toggleItem(itemValue: T | undefined): void {
     this._setOrToggle(itemValue);
   }
 
-  private _setOrToggle(itemValue: T): void {
+  private _setOrToggle(itemValue: T | undefined): void {
     if (this.selectMode() === "single") {
       this.value.set(itemValue);
     } else {
       this.value.update((v) => {
         const arr = (v as T[] | undefined) ?? [];
-        if (arr.includes(itemValue)) {
+        if (arr.includes(itemValue as T)) {
           return arr.filter((item) => item !== itemValue);
         } else {
           return [...arr, itemValue];

package/src/core/app-structure/sd-app-structure.utils.ts

@@ -28,7 +28,7 @@ export abstract class SdAppStructureUtils {
     permKeys: K[],
     permRecord: Record<string, boolean> | undefined,
   ): K[] {
-    if (permRecord === undefined) return [] as K[];
+    if (permRecord == null) return [] as K[];
 
     const result = [] as K[];
     for (const permKey of permKeys) {