@simplysm/angular 14.0.30 → 14.0.33

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

@@ -1,184 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from "@angular/core";
-import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
-import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
-
-@Component({
-  selector: "sd-dock",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [],
-  host: {
-    "[attr.data-sd-position]": "position()",
-    "[attr.data-sd-resizable]": "resizable()",
-    "(sdResize)": "onHostResize($any($event))",
-  },
-  template: `
-    <ng-content></ng-content>
-    @if (resizable()) {
-      <div class="_resize-bar" (mousedown)="onResizeBarMousedown($event)"></div>
-    }
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-dock {
-        display: block;
-        position: absolute;
-        overflow: auto;
-
-        &[data-sd-resizable="true"] {
-          > ._resize-bar {
-            position: absolute;
-          }
-
-          &[data-sd-position="top"] {
-            > ._resize-bar {
-              bottom: 0;
-              left: 0;
-              width: 100%;
-              height: 2px;
-              cursor: ns-resize;
-            }
-          }
-
-          &[data-sd-position="bottom"] {
-            > ._resize-bar {
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 2px;
-              cursor: ns-resize;
-            }
-          }
-
-          &[data-sd-position="left"] {
-            > ._resize-bar {
-              top: 0;
-              right: 0;
-              height: 100%;
-              width: 2px;
-              cursor: ew-resize;
-            }
-          }
-
-          &[data-sd-position="right"] {
-            > ._resize-bar {
-              top: 0;
-              left: 0;
-              height: 100%;
-              width: 2px;
-              cursor: ew-resize;
-            }
-          }
-        }
-      }
-    `,
-  ],
-})
-export class SdDock {
-  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");
-  resizable = input(false, { transform: booleanAttribute });
-
-  size = signal(0);
-
-  private readonly _config = injectSdSystemConfigResource<{ size?: string }>({ key: this.key });
-
-  constructor() {
-    this._destroyRef.onDestroy(() => {
-      this._dragCleanup?.();
-    });
-
-    effect(() => {
-      const conf = this._config.value();
-      if (this.resizable() && conf && conf.size != null) {
-        if (["right", "left"].includes(this.position())) {
-          this._elRef.nativeElement.style.width = conf.size;
-        }
-        if (["top", "bottom"].includes(this.position())) {
-          this._elRef.nativeElement.style.height = conf.size;
-        }
-      }
-    });
-  }
-
-  assignStyle(style: Partial<CSSStyleDeclaration>) {
-    Object.assign(this._elRef.nativeElement.style, style);
-  }
-
-  onHostResize(event: SdResizeEvent) {
-    if (["top", "bottom"].includes(this.position()) && event.heightChanged) {
-      this.size.set(this._elRef.nativeElement.clientHeight);
-    }
-    if (["right", "left"].includes(this.position()) && event.widthChanged) {
-      this.size.set(this._elRef.nativeElement.clientWidth);
-    }
-  }
-
-  onResizeBarMousedown(event: MouseEvent) {
-    const thisEl = this._elRef.nativeElement;
-
-    const startX = event.clientX;
-    const startY = event.clientY;
-    const startHeight = thisEl.clientHeight;
-    const startWidth = thisEl.clientWidth;
-
-    const doDrag = (e: MouseEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      if (this.position() === "bottom") {
-        thisEl.style.height = `${Math.max(0, startHeight - e.clientY + startY)}px`;
-      } else if (this.position() === "right") {
-        thisEl.style.width = `${Math.max(0, startWidth - e.clientX + startX)}px`;
-      } else if (this.position() === "top") {
-        thisEl.style.height = `${Math.max(0, startHeight + e.clientY - startY)}px`;
-      } else {
-        // left
-        thisEl.style.width = `${Math.max(0, startWidth + e.clientX - startX)}px`;
-      }
-    };
-
-    const stopDrag = (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this._dragCleanup?.();
-
-      if (this.key() != null) {
-        const newConf: { size?: string } = {};
-        if (["right", "left"].includes(this.position())) {
-          newConf.size = thisEl.style.width;
-        } else {
-          newConf.size = thisEl.style.height;
-        }
-        this._config.set(newConf);
-      }
-    };
-
-    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-board.ts

@@ -1,74 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  model,
-  output,
-  signal,
-  ViewEncapsulation,
-} from "@angular/core";
-
-@Component({
-  selector: "sd-kanban-board",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [],
-  host: {
-    "(document:dragend)": "onDocumentDragEnd()",
-  },
-  template: `
-    <ng-content></ng-content>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      @use "../../../../scss/commons/mixins";
-
-      sd-kanban-board {
-        display: inline-flex;
-        flex-wrap: nowrap;
-        white-space: nowrap;
-        height: 100%;
-        @include mixins.flex-direction(row, var(--gap-lg));
-      }
-    `,
-  ],
-})
-export class SdKanbanBoard<L, T> {
-  dragKanban = signal<SdKanbanDragRef<L, T> | undefined>(undefined);
-
-  selectedValues = model<T[]>([]);
-
-  drop = output<SdKanbanBoardDropInfo<L, T>>();
-
-  onDropTo(target: SdKanbanDropTarget<L, T>) {
-    if (this.dragKanban() == null) return;
-
-    this.drop.emit({
-      sourceKanbanValue: this.dragKanban()!.value(),
-      targetLaneValue: target.targetLaneValue(),
-      targetKanbanValue: target.targetKanbanValue?.(),
-    });
-
-    this.dragKanban.set(undefined);
-  }
-
-  onDocumentDragEnd() {
-    this.dragKanban.set(undefined);
-  }
-}
-
-export interface SdKanbanBoardDropInfo<L, T> {
-  sourceKanbanValue?: T;
-  targetLaneValue?: L;
-  targetKanbanValue?: T;
-}
-
-export interface SdKanbanDragRef<_L, T> {
-  value(): T | undefined;
-  heightOnDrag(): number;
-}
-
-export interface SdKanbanDropTarget<L, T> {
-  targetLaneValue(): L | undefined;
-  targetKanbanValue?(): T | undefined;
-}

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

@@ -1,213 +0,0 @@
-import { NgTemplateOutlet } from "@angular/common";
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  contentChildren,
-  forwardRef,
-  inject,
-  input,
-  model,
-  signal,
-  TemplateRef,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdBusyContainer } from "../../overlay/busy/sd-busy-container";
-import { SdCheckbox } from "../../form/checkbox/sd-checkbox";
-import {
-  SdKanbanBoard,
-  type SdKanbanDropTarget,
-} from "./sd-kanban-board";
-import { SdKanban } from "./sd-kanban";
-import { SdAnchor } from "../../form/button/sd-anchor";
-import { NgIcon } from "@ng-icons/core";
-import { tablerEye, tablerEyeOff } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-kanban-lane",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon],
-  host: {
-    "class": "flex-column p-default gap-default",
-    "[attr.data-sd-drag-over]": "dragOvered()",
-    "(dragover)": "onDragOver($event)",
-    "(dragleave)": "onDragLeave($event)",
-    "(drop)": "onDragDrop($event)",
-  },
-  template: `
-    @if (useCollapse() || titleTplRef()) {
-      <div>
-        @if (useCollapse()) {
-          <sd-anchor [theme]="'info'" (click)="onToggleCollapseButtonClick()">
-            <ng-icon [svg]="collapse() ? tablerEyeOff : tablerEye" />
-          </sd-anchor>
-        }
-
-        @if (titleTplRef()) {
-          <div style="display: inline-block;" class="pl-default">
-            <ng-template [ngTemplateOutlet]="titleTplRef() ?? null" />
-          </div>
-        }
-      </div>
-    }
-
-    <div class="flex-fill">
-      <sd-busy-container [busy]="busy()" style="min-height: 3em" [type]="'bar'">
-        @if (selectableKanbanLength() > 0 || toolTplRef()) {
-          <div class="tx-center mb-xl">
-            @if (selectableKanbanLength() > 0) {
-              <sd-checkbox
-                style="float: left"
-                [inline]="true"
-                [theme]="'white'"
-                [value]="isAllSelected()"
-                (valueChange)="onSelectAllButtonClick($event)"
-              />
-            }
-            <ng-template [ngTemplateOutlet]="toolTplRef() ?? null" />
-          </div>
-        }
-
-        @if (!collapse()) {
-          <ng-content></ng-content>
-        }
-
-        <div
-          class="_drop-position"
-          [style.height]="dragOvered() ? (dragKanban()?.heightOnDrag() ?? 0) + 'px' : '0px'"
-          [style.display]="dragKanban() ? 'block' : 'none'"
-        ></div>
-      </sd-busy-container>
-    </div>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-kanban-lane {
-        > .flex-fill {
-          > sd-busy-container {
-            padding: var(--gap-xl) var(--gap-lg);
-            background: var(--theme-gray-lightest);
-            border-radius: var(--border-radius-default);
-            height: 100%;
-
-            > ._drop-position {
-              pointer-events: none;
-              border-radius: var(--border-radius-default);
-              background: var(--trans-light);
-
-              height: 0;
-              margin-bottom: 0;
-              visibility: hidden;
-              transition: 0.1s linear;
-              transition-property: height, margin-bottom, visibility;
-            }
-          }
-        }
-
-        &[data-sd-drag-over="true"] {
-          > .flex-fill > sd-busy-container > ._drop-position {
-            margin-bottom: var(--gap-lg);
-            visibility: visible;
-          }
-        }
-      }
-    `,
-  ],
-})
-export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
-    forwardRef(() => SdKanbanBoard),
-  );
-
-  busy = input(false, { transform: booleanAttribute });
-
-  useCollapse = input(false, { transform: booleanAttribute });
-
-  collapse = model(false);
-
-  value = input<L>();
-
-  kanbanControls = contentChildren<SdKanban<L, T>>(SdKanban, { descendants: true });
-
-  toolTplRef = contentChild<any, TemplateRef<void>>("toolTpl", { read: TemplateRef });
-  titleTplRef = contentChild<any, TemplateRef<void>>("titleTpl", { read: TemplateRef });
-
-  isAllSelected = computed(() => {
-    const selectableControls = this.kanbanControls().filter((ctrl) => ctrl.selectable());
-    return selectableControls.length > 0 && selectableControls.every((ctrl) => ctrl.selected());
-  });
-
-  dragKanban = computed(() => this._boardControl.dragKanban());
-
-  dragOvered = signal(false);
-
-  selectableKanbanLength = computed(
-    () => this.kanbanControls().filter((ctrl) => ctrl.selectable()).length,
-  );
-
-  targetLaneValue() {
-    return this.value();
-  }
-
-  onToggleCollapseButtonClick() {
-    this.collapse.update((v) => !v);
-  }
-
-  onSelectAllButtonClick(val: boolean) {
-    if (val) {
-      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()!);
-          }
-        }
-        return r.length === v.length ? v : r;
-      });
-    } 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));
-        return result.length === v.length ? v : result;
-      });
-    }
-  }
-
-  onDragOver(event: DragEvent) {
-    if (this._boardControl.dragKanban() == null) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.dragOvered.set(true);
-  }
-
-  onDragLeave(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.dragOvered.set(false);
-  }
-
-  onDragDrop(event: DragEvent) {
-    if (this._boardControl.dragKanban() == null) return;
-    this.dragOvered.set(false);
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    this._boardControl.onDropTo(this);
-  }
-
-  protected readonly tablerEyeOff = tablerEyeOff;
-  protected readonly tablerEye = tablerEye;
-}

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

@@ -1,227 +0,0 @@
-import {
-  afterNextRender,
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  forwardRef,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from "@angular/core";
-import {
-  SdKanbanBoard,
-  type SdKanbanDragRef,
-  type SdKanbanDropTarget,
-} from "./sd-kanban-board";
-import { SdKanbanLane } from "./sd-kanban-lane";
-import { SdEvents } from "../../../core/directives/sd-events";
-import type { SdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
-
-@Component({
-  selector: "sd-kanban",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdEvents],
-  host: {
-    "[attr.data-sd-dragging-this]": "dragKanban() === thisRef",
-    "[attr.data-sd-dragging]": "dragKanban() != null",
-    "[attr.data-sd-drag-over]": "dragOvered()",
-    "(document:drop.capture)": "onDocumentDrop()",
-    "(click)": "onHostClick($event)",
-  },
-  template: `
-    <div
-      class="_drag-position"
-      [style.height]="cardHeight() + 'px'"
-      (dragover)="onDragOver($event)"
-      (dragleave)="onDragLeave($event)"
-      (drop)="onDragDrop($event)"
-    ></div>
-    <div
-      class="_drop-position"
-      [style.height]="dragOvered() ? (dragKanban()?.heightOnDrag() ?? 0) + 'px' : '0px'"
-      [style.display]="dragKanban() ? 'block' : 'none'"
-    ></div>
-    <div
-      class="card"
-      [class]="contentClass()"
-      [draggable]="draggable()"
-      (dragstart)="onCardDragStart()"
-      (sdResize)="onCardResize($event)"
-    >
-      <ng-content></ng-content>
-    </div>
-  `,
-  styles: [
-    /* language=SCSS */ `
-      sd-kanban {
-        position: relative;
-        display: block;
-
-        &[data-sd-dragging-this="true"] {
-          display: none;
-        }
-
-        > ._drag-position {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          pointer-events: none;
-        }
-
-        &[data-sd-dragging="true"] {
-          > ._drag-position {
-            pointer-events: auto;
-          }
-
-          > .card {
-            pointer-events: none;
-            cursor: pointer;
-          }
-        }
-
-        > ._drop-position {
-          border-radius: var(--border-radius-default);
-          background: var(--trans-light);
-
-          height: 0;
-          margin-bottom: 0;
-          visibility: hidden;
-          transition: 0.1s linear;
-          transition-property: height, margin-bottom, visibility;
-        }
-
-        &[data-sd-drag-over="true"] {
-          > ._drop-position {
-            margin-bottom: var(--gap-lg);
-            visibility: visible;
-          }
-        }
-
-        > .card {
-          white-space: normal;
-          user-select: none;
-          margin-bottom: var(--gap-lg);
-        }
-      }
-    `,
-  ],
-})
-export class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T> {
-  private readonly _boardControl = inject<SdKanbanBoard<L, T>>(
-    forwardRef(() => SdKanbanBoard),
-  );
-  private readonly _laneControl = inject<SdKanbanLane<L, T>>(
-    forwardRef(() => SdKanbanLane),
-  );
-  private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  readonly thisRef = this;
-
-  value = input<T>();
-
-  laneValue = computed(() => this._laneControl.value());
-
-  selectable = input(false, { transform: booleanAttribute });
-  draggable = input(false, { transform: booleanAttribute });
-
-  selected = computed(
-    () => this.value() != null && this._boardControl.selectedValues().includes(this.value()!),
-  );
-  dragKanban = computed(() => this._boardControl.dragKanban());
-
-  contentClass = input<string>();
-
-  dragOvered = signal(false);
-
-  heightOnDrag = signal(0);
-
-  cardHeight = signal(0);
-
-  constructor() {
-    afterNextRender(() => {
-      const card = this._elRef.nativeElement.querySelector(".card");
-      if (card != null) {
-        const marginBottom = getComputedStyle(card).marginBottom;
-        this.cardHeight.set(card.clientHeight + (parseInt(marginBottom) || 0));
-      }
-    });
-  }
-
-  targetLaneValue() {
-    return this._laneControl.value();
-  }
-
-  targetKanbanValue() {
-    return this.value();
-  }
-
-  onHostClick(event: MouseEvent) {
-    if (event.shiftKey) {
-      if (!this.selectable()) return;
-      if (this.value() == null) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      this._boardControl.selectedValues.update((v) => {
-        const r = [...v];
-        if (v.includes(this.value()!)) {
-          return r.filter((item) => item !== this.value());
-        } else {
-          r.push(this.value()!);
-          return r;
-        }
-      });
-    }
-  }
-
-  onDocumentDrop() {
-    this.dragOvered.set(false);
-  }
-
-  onCardResize(event: SdResizeEvent) {
-    const marginBottom = getComputedStyle(event.target as HTMLElement).marginBottom;
-    this.cardHeight.set(
-      (event.target as HTMLElement).clientHeight + (parseInt(marginBottom) || 0),
-    );
-  }
-
-  onCardDragStart() {
-    if (!this.draggable()) return;
-
-    this.heightOnDrag.set(this._elRef.nativeElement.offsetHeight);
-    this._boardControl.dragKanban.set(this);
-  }
-
-  onDragOver(event: DragEvent) {
-    if (this._boardControl.dragKanban() == null) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.dragOvered.set(true);
-  }
-
-  onDragLeave(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.dragOvered.set(false);
-  }
-
-  onDragDrop(event: DragEvent) {
-    if (this._boardControl.dragKanban() == null) return;
-    this.dragOvered.set(false);
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    this._boardControl.onDropTo(this);
-  }
-}