@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,184 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import { injectSdSystemConfigResource } from "../../core/config/injectSdSystemConfigResource";
+import type { SdResizeEvent } from "../../core/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/layout/sidebar/sd-sidebar-container.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, effect, inject, signal, ViewEncapsulation } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { NavigationStart, Router } from "@angular/router";
+import { filter } from "rxjs";
+
+@Component({
+  selector: "sd-sidebar-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-toggle]": "toggle()",
+  },
+  template: `
+    <ng-content />
+    <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/variables";
+
+      sd-sidebar-container {
+        display: block;
+        position: relative;
+        height: 100%;
+        padding-left: var(--sidebar-width);
+        transition: padding-left 0.1s ease-out;
+
+        &[data-sd-toggle="true"] {
+          padding-left: 0;
+          transition: padding-left 0.1s ease-in;
+        }
+
+        > ._backdrop {
+          display: none;
+        }
+      }
+
+      @media all and (max-width: variables.$breakpoint-mobile) {
+        sd-sidebar-container {
+          padding-left: 0;
+
+          > ._backdrop {
+            position: absolute;
+            display: block;
+            z-index: calc(var(--z-index-sidebar) - 1);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--background-rev-color);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease-in-out;
+          }
+
+          &[data-sd-toggle="true"] {
+            > ._backdrop {
+              opacity: 0.6;
+              pointer-events: auto;
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSidebarContainer {
+  private readonly _router = inject(Router, { optional: true });
+
+  toggle = signal(false);
+
+  private readonly _navStart = this._router
+    ? toSignal(this._router.events.pipe(filter((e) => e instanceof NavigationStart)))
+    : undefined;
+
+  constructor() {
+    const navStart = this._navStart;
+    if (navStart) {
+      effect(() => {
+        if (navStart()) {
+          this.toggle.set(false);
+        }
+      });
+    }
+  }
+
+  onBackdropClick(): void {
+    this.toggle.set(false);
+  }
+}

package/src/layout/sidebar/sd-sidebar-menu.ts

@@ -0,0 +1,122 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
+import {
+  type SdMenu,
+  getMenuRouterLinkOption as menuRouterLinkOption,
+  getIsMenuSelected as menuIsSelected,
+} from "../../core/routing/menu-utils";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdTypedTemplate } from "../../core/template/sd-typed-template";
+import { SdRouterLink } from "../../core/routing/sd-router-link";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+import { NgIcon } from "@ng-icons/core";
+
+@Component({
+  selector: "sd-sidebar-menu",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    SdTypedTemplate,
+    SdRouterLink,
+    SdList,
+    SdListItem,
+    NgIcon,
+  ],
+  host: {
+    "class": "flex-column fill",
+    "[attr.data-sd-root-layout]": "rootLayout()",
+  },
+  template: `
+    <div class="control-header p-default">MENU</div>
+
+    <sd-list class="flex-fill" [inset]="true">
+      <ng-template
+        [ngTemplateOutlet]="itemTpl"
+        [ngTemplateOutletContext]="{ menus: menus(), depth: 0 }"
+      ></ng-template>
+    </sd-list>
+
+    <ng-template #itemTpl [typed]="itemTemplateType" let-currMenus="menus" let-depth="depth">
+      @for (menu of currMenus; track menu.codeChain.join(".")) {
+        <sd-list-item
+          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
+          [sdRouterLink]="getMenuRouterLinkOption(menu)"
+          (click)="onMenuClick(menu)"
+          [selected]="getIsMenuSelected(menu)"
+          [layout]="depth === 0 ? rootLayout() : 'accordion'"
+        >
+          @if (menu.icon) {
+            <ng-icon [svg]="menu.icon" />
+            &nbsp;
+          }
+          {{ menu.title }}
+          @if (menu.children) {
+            <sd-list [inset]="true">
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{
+                  menus: menu.children,
+                  depth: depth + 1,
+                }"
+              ></ng-template>
+            </sd-list>
+          }
+        </sd-list-item>
+      }
+    </ng-template>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-sidebar-menu {
+        > sd-list[data-sd-inset="true"] {
+          sd-list {
+            background: var(--trans-lightest);
+          }
+
+          > sd-list-item > ._content {
+            padding-block: var(--gap-default);
+          }
+        }
+
+        &:not([data-sd-root-layout="accordion"]) {
+          > sd-list[data-sd-inset="true"] > sd-list-item > sd-collapse > ._content > sd-list {
+            background: transparent;
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSidebarMenu {
+  menus = input<SdMenu[]>([]);
+  layout = input<"accordion" | "flat">();
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+
+  fullPageCode = injectFullPageCodeSignal();
+
+  rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"));
+
+  getMenuRouterLinkOption(
+    menu: SdMenu,
+  ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+    return menuRouterLinkOption(menu);
+  }
+
+  getIsMenuSelected(menu: SdMenu): boolean {
+    return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
+  }
+
+  onMenuClick(menu: SdMenu): void {
+    if (menu.url != null) {
+      window.open(menu.url, "_blank");
+    }
+  }
+
+  protected readonly itemTemplateType!: {
+    menus: SdMenu[];
+    depth: number;
+  };
+}

package/src/layout/sidebar/sd-sidebar-user.ts

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from "@angular/core";
+import { SdCollapseIcon } from "../../controls/collapse/sd-collapse-icon";
+import { SdCollapse } from "../../controls/collapse/sd-collapse";
+import { SdRipple } from "../../core/ripple/sd-ripple";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+
+@Component({
+  selector: "sd-sidebar-user",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdCollapseIcon,
+    SdCollapse,
+    SdRipple,
+    SdList,
+    SdListItem,
+  ],
+  template: `
+    <div class="p-lg">
+      <ng-content />
+    </div>
+    @if (userMenu()?.title) {
+      <div class="_menu-button" tabindex="0" (click)="onMenuOpenButtonClick()" (keydown.enter)="onMenuOpenButtonClick()" [sdRipple]="true">
+        {{ userMenu()?.title }}
+        <sd-collapse-icon [open]="menuOpen()" style="float: right;" [openRotate]="180" />
+      </div>
+    }
+
+    @if (userMenu()?.title) {
+      <sd-collapse [open]="menuOpen()">
+        <sd-list [inset]="true">
+          @for (menu of userMenu()?.menus; track menu.title) {
+            <sd-list-item (click)="menu.onClick()">
+              {{ menu.title }}
+            </sd-list-item>
+          }
+        </sd-list>
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-sidebar-user {
+        display: block;
+
+        > ._menu-button {
+          display: block;
+          cursor: pointer;
+          user-select: none;
+
+          padding: var(--gap-default);
+
+          &:hover {
+            background: var(--trans-lighter);
+          }
+        }
+
+        > sd-collapse > ._content > sd-list {
+          background: var(--trans-lightest);
+          padding: var(--gap-xs) 0;
+        }
+      }
+    `,
+  ],
+})
+export class SdSidebarUser {
+  userMenu = input<SdSidebarUserMenu>();
+
+  menuOpen = signal(false);
+
+  onMenuOpenButtonClick(): void {
+    this.menuOpen.update((v) => !v);
+  }
+}
+
+export interface SdSidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}

package/src/layout/sidebar/sd-sidebar.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdSidebarContainer } from "./sd-sidebar-container";
+
+@Component({
+  selector: "sd-sidebar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-toggle]": "toggle()",
+  },
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+      @use "../../../scss/commons/variables";
+
+      sd-sidebar {
+        position: absolute;
+        z-index: var(--z-index-sidebar);
+        top: 0;
+        left: 0;
+        width: var(--sidebar-width);
+        height: 100%;
+        background: var(--control-color);
+        border-right: 1px solid var(--border-color-lighter);
+
+        @media not all and (max-width: variables.$breakpoint-mobile) {
+          transition: transform 0.1s ease-out;
+
+          &[data-sd-toggle="true"] {
+            transform: translateX(-100%);
+            transition: transform 0.1s ease-in;
+          }
+        }
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          transition: transform 0.3s ease-in;
+          transform: translateX(-100%);
+
+          &[data-sd-toggle="true"] {
+            transform: none;
+            transition: transform 0.3s ease-out;
+            @include mixins.elevation(16);
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSidebar {
+  private readonly _parentControl = inject<SdSidebarContainer>(
+    forwardRef(() => SdSidebarContainer),
+  );
+
+  toggle = computed(() => this._parentControl.toggle());
+}

package/src/layout/topbar/sd-topbar-menu.ts

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  viewChildren,
+  ViewEncapsulation,
+} from "@angular/core";
+import { injectFullPageCodeSignal } from "../../core/routing/injectFullPageCodeSignal";
+import {
+  type SdMenu,
+  getMenuRouterLinkOption as menuRouterLinkOption,
+  getIsMenuSelected as menuIsSelected,
+} from "../../core/routing/menu-utils";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdTypedTemplate } from "../../core/template/sd-typed-template";
+import { SdRouterLink } from "../../core/routing/sd-router-link";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdList } from "../../controls/list/sd-list";
+import { SdListItem } from "../../controls/list/sd-list-item";
+import { SdButton } from "../../controls/button/sd-button";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCaretDown } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-topbar-menu",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    SdTypedTemplate,
+    SdRouterLink,
+    SdDropdown,
+    SdDropdownPopup,
+    SdList,
+    SdListItem,
+    SdButton,
+    NgIcon,
+  ],
+  host: {
+    "class": "flex-row gap-sm",
+  },
+  template: `
+    @for (menu of menus(); track menu.codeChain.join("."); let i = $index) {
+      <sd-dropdown>
+        <sd-button [theme]="'link-gray'">
+          @if (menu.icon) {
+            <ng-icon [svg]="menu.icon" />
+          }
+          {{ menu.title }}
+          <ng-icon [svg]="tablerCaretDown" />
+        </sd-button>
+        <sd-dropdown-popup>
+          <sd-list [inset]="true">
+            @if (menu.children) {
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{ menus: menu.children, depth: 0, dropdownIndex: i }"
+              ></ng-template>
+            } @else {
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{ menus: [menu], depth: 0, dropdownIndex: i }"
+              ></ng-template>
+            }
+          </sd-list>
+        </sd-dropdown-popup>
+      </sd-dropdown>
+    }
+
+    <ng-template
+      #itemTpl
+      [typed]="itemTemplateType"
+      let-currMenus="menus"
+      let-depth="depth"
+      let-dropdownIndex="dropdownIndex"
+    >
+      @for (menu of currMenus; track menu.codeChain.join(".")) {
+        <sd-list-item
+          [style.padding-left.em]="depth > 0 ? (depth + 1) * 0.5 : undefined"
+          [style.padding-block]="depth === 0 ? 'var(--gap-default)' : undefined"
+          [sdRouterLink]="getMenuRouterLinkOption(menu)"
+          (click)="onMenuClick(menu, dropdownIndex)"
+          [selected]="getIsMenuSelected(menu)"
+          [open]="true"
+        >
+          @if (menu.icon) {
+            <ng-icon [svg]="menu.icon" />
+            &nbsp;
+          }
+          {{ menu.title }}
+          @if (menu.children) {
+            <sd-list [inset]="true">
+              <ng-template
+                [ngTemplateOutlet]="itemTpl"
+                [ngTemplateOutletContext]="{
+                  menus: menu.children,
+                  depth: depth + 1,
+                  dropdownIndex: dropdownIndex,
+                }"
+              ></ng-template>
+            </sd-list>
+          }
+        </sd-list-item>
+      }
+    </ng-template>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-topbar-menu {
+        sd-dropdown-popup {
+          sd-list[data-sd-inset="true"] {
+            sd-list {
+              background: var(--trans-lightest);
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdTopbarMenu {
+  menus = input<SdMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+
+  fullPageCode = injectFullPageCodeSignal();
+
+  private readonly _dropdowns = viewChildren(SdDropdown);
+
+  getMenuRouterLinkOption(
+    menu: SdMenu,
+  ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+    return menuRouterLinkOption(menu);
+  }
+
+  getIsMenuSelected(menu: SdMenu): boolean {
+    return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
+  }
+
+  onMenuClick(menu: SdMenu, dropdownIndex: number): void {
+    if (menu.url != null) {
+      window.open(menu.url, "_blank");
+    }
+
+    if (menu.children === undefined) {
+      this._dropdowns()[dropdownIndex].open.set(false);
+    }
+  }
+
+  protected readonly itemTemplateType!: {
+    menus: SdMenu[];
+    depth: number;
+    dropdownIndex: number;
+  };
+
+  protected readonly tablerCaretDown = tablerCaretDown;
+}