@simplysm/angular 14.0.1 → 14.0.4

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

@@ -0,0 +1,143 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  input,
+  model,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { SdCollapseControl } from "../../navigation/collapse/sd-collapse.control";
+import { SdCollapseIconControl } from "../../navigation/collapse/sd-collapse-icon.control";
+import { SdListControl } from "./sd-list.control";
+import { setupRipple } from "../../../core/utils/setups/setupRipple";
+
+@Component({
+  selector: "sd-list-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCollapseControl, SdCollapseIconControl, NgTemplateOutlet, NgIcon],
+  template: `
+    <div class="_content" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+      @if (selectedIcon() !== undefined && !hasChildren()) {
+        <ng-icon
+          [class.tx-theme-primary-default]="selected()"
+          [class.tx-trans-lightest]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <ng-content select="sd-list" />
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-list-item {
+        display: block;
+
+        > ._content {
+          display: flex;
+          align-items: center;
+          padding: var(--gap-sm) var(--gap-default);
+          cursor: pointer;
+          gap: var(--gap-sm);
+
+          > ._label {
+            flex: 1;
+          }
+        }
+
+        &:hover > ._content {
+          background: var(--trans-lighter);
+        }
+
+        &[data-sd-selected="true"] > ._content {
+          background: var(--trans-lighter);
+          font-weight: bold;
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._content {
+            cursor: default;
+          }
+
+          &:hover > ._content {
+            background: transparent;
+          }
+        }
+
+        &[data-sd-layout="flat"] {
+          > ._content {
+            font-size: 0.85em;
+            opacity: 0.7;
+            cursor: default;
+          }
+
+          &:hover > ._content {
+            background: transparent;
+          }
+        }
+
+        &[data-sd-has-children="false"] {
+          > ._content {
+            padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-layout]": "layout()",
+    "[attr.data-sd-selected]": "selected()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-has-children]": "hasChildren()",
+  },
+})
+export class SdListItemControl {
+  layout = input<"accordion" | "flat">("accordion");
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  selectedIcon = input<string>();
+  readonly = input(false, { transform: booleanAttribute });
+
+  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
+
+  private readonly _childLists = contentChildren(SdListControl);
+
+  hasChildren = computed(() => this._childLists().length > 0);
+
+  childrenOpen = computed(() => {
+    return this.layout() === "flat" ? true : this.open();
+  });
+
+  constructor() {
+    setupRipple(() => !this.readonly() && !(this.layout() === "flat" && this.hasChildren()));
+  }
+
+  onContentClick(): void {
+    if (this.readonly()) return;
+    if (this.layout() === "accordion" && this.hasChildren()) {
+      this.open.update((v) => !v);
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-list",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-list {
+        display: block;
+        user-select: none;
+        background: var(--control-color);
+
+        &[data-sd-inset="true"] {
+          background: transparent;
+
+          sd-list {
+            background: transparent;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-inset]": "inset()",
+  },
+})
+export class SdListControl {
+  inset = input(false, { transform: booleanAttribute });
+}

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

@@ -0,0 +1,26 @@
+import {
+  booleanAttribute,
+  contentChild,
+  Directive,
+  input,
+  TemplateRef,
+} from "@angular/core";
+
+@Directive({
+  selector: "sd-sheet-column",
+  standalone: true,
+})
+export class SdSheetColumnDirective {
+  key = input.required<string>();
+  header = input<string | string[]>("");
+  width = input<string>();
+  fixed = input(false, { transform: booleanAttribute });
+  hidden = input(false, { transform: booleanAttribute });
+  collapse = input(false, { transform: booleanAttribute });
+  disableSorting = input(false, { transform: booleanAttribute });
+  disableResizing = input(false, { transform: booleanAttribute });
+  ordering = input(0);
+
+  cellTplRef = contentChild<TemplateRef<void>>("cellTpl");
+  summaryTplRef = contentChild<TemplateRef<void>>("summaryTpl");
+}

package/src/ui/data/sheet/sd-sheet-config.modal.ts

@@ -0,0 +1,252 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISdModal } from "../../overlay/modal/sd-modal.provider";
+import type { ISdSheetConfig } from "./types";
+import type { SdSheetColumnDirective } from "./sd-sheet-column.directive";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerArrowUp, tablerArrowDown } from "@ng-icons/tabler-icons";
+
+interface IConfigItem {
+  key: string;
+  header: string;
+  fixed: boolean;
+  hidden: boolean;
+  width: string;
+  ordering: number;
+}
+
+@Component({
+  selector: "sd-sheet-config-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButtonControl, SdCheckboxControl, NgIcon],
+  template: `
+    <div class="_sd-sheet-config-modal">
+      <table class="_config-table">
+        <thead>
+          <tr>
+            <th>Fix</th>
+            <th>Order</th>
+            <th>Header</th>
+            <th>Width</th>
+            <th>Hidden</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (item of _items(); track item.key; let idx = $index) {
+            <tr>
+              <td>
+                <sd-checkbox
+                  [value]="item.fixed"
+                  (click)="onFixedToggle(idx)"
+                  [inline]="true"
+                  [inset]="true"
+                />
+              </td>
+              <td class="_order-col">
+                <sd-button
+                  [disabled]="!canMoveUp(idx)"
+                  (click)="onMoveUp(idx)"
+                >
+                  <ng-icon [svg]="_icons.tablerArrowUp" />
+                </sd-button>
+                <sd-button
+                  [disabled]="!canMoveDown(idx)"
+                  (click)="onMoveDown(idx)"
+                >
+                  <ng-icon [svg]="_icons.tablerArrowDown" />
+                </sd-button>
+              </td>
+              <td>{{ item.header }}</td>
+              <td>
+                <input
+                  type="text"
+                  class="_width-input"
+                  [value]="item.width"
+                  (input)="onWidthChange(idx, $event)"
+                />
+              </td>
+              <td>
+                <sd-checkbox
+                  [value]="item.hidden"
+                  (click)="onHiddenToggle(idx)"
+                  [inline]="true"
+                  [inset]="true"
+                />
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+      <div class="_actions">
+        <sd-button [theme]="'primary'" (click)="onOk()">OK</sd-button>
+        <sd-button (click)="onCancel()">Cancel</sd-button>
+        <sd-button (click)="onReset()">Reset</sd-button>
+      </div>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-sheet-config-modal {
+        display: block;
+        padding: var(--gap-default);
+
+        > ._sd-sheet-config-modal {
+          > ._config-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: var(--gap-default);
+
+            th,
+            td {
+              border: 1px solid var(--trans-lighter);
+              padding: var(--gap-sm) var(--gap-default);
+              text-align: left;
+            }
+
+            th {
+              background: var(--theme-secondary-lightest);
+              font-weight: bold;
+            }
+
+            ._order-col {
+              white-space: nowrap;
+            }
+
+            ._width-input {
+              width: 80px;
+              padding: 2px 4px;
+              border: 1px solid var(--trans-lighter);
+            }
+          }
+
+          > ._actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--gap-sm);
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSheetConfigModal implements ISdModal<ISdSheetConfig | undefined> {
+  initialized = signal(true);
+  close = output<ISdSheetConfig | undefined>();
+
+  controls = input.required<readonly SdSheetColumnDirective[]>();
+  config = input.required<ISdSheetConfig | undefined>();
+
+  _icons = { tablerArrowUp, tablerArrowDown };
+
+  private readonly _initialItems = computed((): IConfigItem[] => {
+    const cfg = this.config();
+    const controls = this.controls();
+    return controls
+      .map((ctrl): IConfigItem => {
+        const key = ctrl.key();
+        const cfgCol = cfg?.columnRecord[key];
+        return {
+          key,
+          header: Array.isArray(ctrl.header()) ? (ctrl.header() as string[]).join(" > ") : (ctrl.header() as string),
+          fixed: cfgCol?.fixed ?? ctrl.fixed(),
+          hidden: cfgCol?.hidden ?? ctrl.hidden(),
+          width: cfgCol?.width ?? ctrl.width() ?? "",
+          ordering: cfgCol?.ordering ?? ctrl.ordering(),
+        };
+      })
+      .sort((a, b) => a.ordering - b.ordering);
+  });
+
+  private readonly _editItems = signal<IConfigItem[] | undefined>(undefined);
+
+  _items = computed((): IConfigItem[] => {
+    return this._editItems() ?? this._initialItems();
+  });
+
+  onFixedToggle(idx: number): void {
+    const items = [...this._items()];
+    items[idx] = { ...items[idx], fixed: !items[idx].fixed };
+    this._editItems.set(items);
+  }
+
+  onHiddenToggle(idx: number): void {
+    const items = [...this._items()];
+    items[idx] = { ...items[idx], hidden: !items[idx].hidden };
+    this._editItems.set(items);
+  }
+
+  onWidthChange(idx: number, event: Event): void {
+    const inputEl = event.target as HTMLInputElement;
+    const items = [...this._items()];
+    items[idx] = { ...items[idx], width: inputEl.value };
+    this._editItems.set(items);
+  }
+
+  canMoveUp(idx: number): boolean {
+    if (idx <= 0) return false;
+    const items = this._items();
+    const current = items[idx];
+    const above = items[idx - 1];
+    // Cannot move non-fixed above fixed
+    if (!current.fixed && above.fixed) return false;
+    return true;
+  }
+
+  canMoveDown(idx: number): boolean {
+    const items = this._items();
+    if (idx >= items.length - 1) return false;
+    const current = items[idx];
+    const below = items[idx + 1];
+    // Cannot move fixed below non-fixed
+    if (current.fixed && !below.fixed) return false;
+    return true;
+  }
+
+  onMoveUp(idx: number): void {
+    if (!this.canMoveUp(idx)) return;
+    const items = [...this._items()];
+    [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
+    this._editItems.set(items);
+  }
+
+  onMoveDown(idx: number): void {
+    if (!this.canMoveDown(idx)) return;
+    const items = [...this._items()];
+    [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
+    this._editItems.set(items);
+  }
+
+  onOk(): void {
+    const items = this._items();
+    const columnRecord: ISdSheetConfig["columnRecord"] = {};
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      columnRecord[item.key] = {
+        fixed: item.fixed,
+        hidden: item.hidden,
+        width: item.width !== "" ? item.width : undefined,
+        ordering: i,
+      };
+    }
+    this.close.emit({ columnRecord });
+  }
+
+  onCancel(): void {
+    this.close.emit(undefined);
+  }
+
+  onReset(): void {
+    this.close.emit({ columnRecord: {} });
+  }
+}