@simplysm/angular 14.0.1 → 14.0.5

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

@@ -0,0 +1,74 @@
+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 SdKanbanBoardControl<L, T> {
+  dragKanban = signal<ISdKanbanDragRef<L, T> | undefined>(undefined);
+
+  selectedValues = model<T[]>([]);
+
+  drop = output<ISdKanbanBoardDropInfo<L, T>>();
+
+  onDropTo(target: ISdKanbanDropTarget<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 ISdKanbanBoardDropInfo<L, T> {
+  sourceKanbanValue?: T;
+  targetLaneValue?: L;
+  targetKanbanValue?: T;
+}
+
+export interface ISdKanbanDragRef<_L, T> {
+  value(): T | undefined;
+  heightOnDrag(): number;
+}
+
+export interface ISdKanbanDropTarget<L, T> {
+  targetLaneValue(): L | undefined;
+  targetKanbanValue?(): T | undefined;
+}

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

@@ -0,0 +1,210 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  forwardRef,
+  inject,
+  input,
+  model,
+  signal,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdBusyContainerControl } from "../../overlay/busy/sd-busy-container.control";
+import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
+import {
+  SdKanbanBoardControl,
+  type ISdKanbanDropTarget,
+} from "./sd-kanban-board.control";
+import { SdKanbanControl } from "./sd-kanban.control";
+import { SdAnchorControl } from "../../form/button/sd-anchor.control";
+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: [SdBusyContainerControl, SdCheckboxControl, NgTemplateOutlet, SdAnchorControl, 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 SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
+  private readonly _boardControl = inject<SdKanbanBoardControl<L, T>>(
+    forwardRef(() => SdKanbanBoardControl),
+  );
+
+  busy = input(false, { transform: booleanAttribute });
+
+  useCollapse = input(false, { transform: booleanAttribute });
+
+  collapse = model(false);
+
+  value = input<L>();
+
+  kanbanControls = contentChildren<SdKanbanControl<L, T>>(SdKanbanControl, { descendants: true });
+
+  toolTplRef = contentChild<any, TemplateRef<void>>("toolTpl", { read: TemplateRef });
+  titleTplRef = contentChild<any, TemplateRef<void>>("titleTpl", { read: TemplateRef });
+
+  isAllSelected = computed(() =>
+    this.kanbanControls().length > 0 && this.kanbanControls().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.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()
+          .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.control.ts

@@ -0,0 +1,227 @@
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  SdKanbanBoardControl,
+  type ISdKanbanDragRef,
+  type ISdKanbanDropTarget,
+} from "./sd-kanban-board.control";
+import { SdKanbanLaneControl } from "./sd-kanban-lane.control";
+import { SdEventsDirective } from "../../../core/directives/sd-events.directive";
+import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+import { SdCardDirective } from "../sd-card.directive";
+
+@Component({
+  selector: "sd-kanban",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdEventsDirective, SdCardDirective],
+  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>
+    <sd-card
+      [class]="contentClass()"
+      [draggable]="draggable()"
+      (dragstart)="onCardDragStart()"
+      (sdResize)="onCardResize($event)"
+    >
+      <ng-content></ng-content>
+    </sd-card>
+  `,
+  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;
+          }
+
+          > sd-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;
+          }
+        }
+
+        > sd-card {
+          white-space: normal;
+          user-select: none;
+          margin-bottom: var(--gap-lg);
+        }
+      }
+    `,
+  ],
+})
+export class SdKanbanControl<L, T> implements ISdKanbanDragRef<L, T>, ISdKanbanDropTarget<L, T> {
+  private readonly _boardControl = inject<SdKanbanBoardControl<L, T>>(
+    forwardRef(() => SdKanbanBoardControl),
+  );
+  private readonly _laneControl = inject<SdKanbanLaneControl<L, T>>(
+    forwardRef(() => SdKanbanLaneControl),
+  );
+  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("sd-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: ISdResizeEvent) {
+    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);
+  }
+}

package/src/ui/layout/sd-card.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "sd-card,[sd-card]",
+  standalone: true,
+  host: {
+    class: "card",
+  },
+})
+export class SdCardDirective {}

package/src/ui/layout/sd-gap.control.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, ViewEncapsulation } from "@angular/core";
+
+@Component({
+  selector: "sd-gap",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-gap {
+        @each $key, $val in map.get(variables.$vars, gap) {
+          &[data-sd-height="#{$key}"] {
+            height: var(--gap-#{$key});
+          }
+
+          &[data-sd-width="#{$key}"] {
+            width: var(--gap-#{$key});
+          }
+        }
+      }
+    `,
+  ],
+  template: "",
+  host: {
+    "[attr.data-sd-height]": "height()",
+    "[style.height.px]": "heightPx()",
+    "[attr.data-sd-width]": "width()",
+    "[style.width.px]": "widthPx()",
+    "[style.width.em]": "widthEm()",
+  },
+})
+export class SdGapControl {
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+
+  height = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();
+  heightPx = input<number>();
+  width = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();
+  widthPx = input<number>();
+  widthEm = input<number>();
+
+  constructor() {
+    effect(() => {
+      if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
+        this._elRef.nativeElement.style.display = "none";
+      } else if (
+        this.width() !== undefined ||
+        this.widthPx() !== undefined ||
+        this.widthEm() !== undefined
+      ) {
+        this._elRef.nativeElement.style.display = "inline-block";
+      } else if (this.height() !== undefined || this.heightPx() !== undefined) {
+        this._elRef.nativeElement.style.display = "block";
+      } else {
+        this._elRef.nativeElement.style.display = "";
+      }
+    });
+  }
+}

package/src/ui/layout/sd-pane.directive.ts

@@ -0,0 +1,11 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "sd-pane,[sd-pane]",
+  standalone: true,
+  host: {
+    class: "fill",
+    style: "display: block;",
+  },
+})
+export class SdPaneDirective {}

package/src/ui/layout/view/sd-view-item.control.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdViewControl } from "./sd-view.control";
+
+@Component({
+  selector: "sd-view-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  styles: [
+    /* language=SCSS */ `
+      sd-view-item {
+        display: none;
+
+        &[data-sd-selected="true"] {
+          display: block;
+        }
+
+        sd-view[data-sd-fill="true"] & {
+          height: 100%;
+        }
+      }
+    `,
+  ],
+  template: `
+    <ng-content></ng-content>
+  `,
+  host: {
+    "[attr.data-sd-selected]": "isSelected()",
+  },
+})
+export class SdViewItemControl {
+  value = input<any>();
+
+  private readonly _parentControl = inject(SdViewControl);
+
+  isSelected = computed(() => this._parentControl.value() === this.value());
+}

package/src/ui/layout/view/sd-view.control.ts

@@ -0,0 +1,31 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, ViewEncapsulation } from "@angular/core";
+
+@Component({
+  selector: "sd-view",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  styles: [
+    /* language=SCSS */ `
+      sd-view {
+        display: block;
+        background: var(--control-color);
+
+        &[data-sd-fill="true"] {
+          height: 100%;
+        }
+      }
+    `,
+  ],
+  template: `
+    <ng-content></ng-content>
+  `,
+  host: {
+    "[attr.data-sd-fill]": "fill()",
+  },
+})
+export class SdViewControl {
+  value = input<any>();
+  fill = input(false, { transform: booleanAttribute });
+}