@simplysm/angular 14.0.1 → 14.0.5

package/src/ui/navigation/collapse/sd-collapse-icon.control.ts

@@ -0,0 +1,51 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  numberAttribute,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgIcon } from "@ng-icons/core";
+import { tablerChevronRight } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-collapse-icon",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgIcon],
+  template: `
+    <ng-icon [svg]="icons.tablerChevronRight" />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-collapse-icon {
+        display: inline-block;
+
+        > ng-icon {
+          display: block;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[style.transform]": "transformStyle()",
+    "[style.transition]": "transitionStyle()",
+  },
+})
+export class SdCollapseIconControl {
+  open = input(false, { transform: booleanAttribute });
+  openRotate = input(90, { transform: numberAttribute });
+
+  icons = { tablerChevronRight };
+
+  transformStyle = computed(() => {
+    return this.open() ? `rotate(${this.openRotate()}deg)` : "";
+  });
+
+  transitionStyle = computed(() => {
+    return this.open() ? "transform 0.1s ease-out" : "transform 0.1s ease-in";
+  });
+}

package/src/ui/navigation/collapse/sd-collapse.control.ts

@@ -0,0 +1,75 @@
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  input,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-event.plugin";
+
+@Component({
+  selector: "sd-collapse",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <div
+      #contentEl
+      class="_content"
+      [style.margin-top]="contentMarginTop()"
+      [style.transition]="contentTransition()"
+      (sdResize)="onContentResize($any($event))"
+    >
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-collapse {
+        display: block;
+        overflow: hidden;
+      }
+    `,
+  ],
+})
+export class SdCollapseControl {
+  open = input(false, { transform: booleanAttribute });
+
+  private readonly _contentElRef =
+    viewChild.required<ElementRef<HTMLElement>>("contentEl");
+
+  contentHeight = signal(0);
+
+  contentMarginTop = computed(() => {
+    return this.open() ? "" : `-${this.contentHeight()}px`;
+  });
+
+  contentTransition = computed(() => {
+    return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
+  });
+
+  constructor() {
+    afterNextRender(() => {
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    });
+
+    effect(() => {
+      // Re-measure height on open transition to handle stale values from closed state
+      this.open();
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    });
+  }
+
+  onContentResize(event: ISdResizeEvent): void {
+    if (event.heightChanged) {
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    }
+  }
+}

package/src/ui/navigation/menu-utils.ts

@@ -0,0 +1,36 @@
+export interface ISdMenu {
+  title: string;
+  codeChain: string[];
+  url?: string;
+  icon?: string;
+  children?: ISdMenu[];
+}
+
+export function getMenuRouterLinkOption(
+  menu: ISdMenu,
+): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+  if (menu.children !== undefined || menu.url != null) {
+    return undefined;
+  }
+
+  const relNav = menu.codeChain.join("/");
+  const n = relNav.split("?")[0];
+  const q = relNav.split("?")[1] as string | undefined;
+  const qp =
+    q == null
+      ? undefined
+      : (Object.fromEntries(new URLSearchParams(q)) as Record<string, string>);
+
+  return {
+    link: "/home/" + n,
+    queryParams: qp,
+  };
+}
+
+export function getIsMenuSelected(
+  menu: ISdMenu,
+  fullPageCode: string | undefined,
+  customFn?: (menu: ISdMenu) => boolean,
+): boolean {
+  return customFn ? customFn(menu) : fullPageCode === menu.codeChain.join(".");
+}

package/src/ui/navigation/pagination/sd-pagination.control.ts

@@ -0,0 +1,125 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  numberAttribute,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdAnchorControl } from "../../form/button/sd-anchor.control";
+import { NgIcon } from "@ng-icons/core";
+import {
+  tablerChevronLeft,
+  tablerChevronRight,
+  tablerChevronsLeft,
+  tablerChevronsRight,
+} from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-pagination",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdAnchorControl, NgIcon],
+  template: `
+    <sd-anchor class="nav-first" [disabled]="!hasPrev()" (click)="goToFirst()">
+      <ng-icon [svg]="icons.tablerChevronsLeft" />
+    </sd-anchor>
+    <sd-anchor class="nav-prev-group" [disabled]="!hasPrev()" (click)="goToPrevGroup()">
+      <ng-icon [svg]="icons.tablerChevronLeft" />
+    </sd-anchor>
+
+    @for (page of displayPages(); track page) {
+      <sd-anchor
+        class="page-anchor"
+        [style.text-decoration]="page === currentPage() + 1 ? 'underline' : ''"
+        (click)="goToPage(page - 1)"
+      >{{ page }}</sd-anchor>
+    }
+
+    <sd-anchor class="nav-next-group" [disabled]="!hasNext()" (click)="goToNextGroup()">
+      <ng-icon [svg]="icons.tablerChevronRight" />
+    </sd-anchor>
+    <sd-anchor class="nav-last" [disabled]="!hasNext()" (click)="goToLast()">
+      <ng-icon [svg]="icons.tablerChevronsRight" />
+    </sd-anchor>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-pagination {
+        > sd-anchor {
+          display: inline-block;
+          padding: var(--gap-xs);
+        }
+      }
+    `,
+  ],
+  host: {
+    class: "flex-row gap-xs",
+  },
+})
+export class SdPaginationControl {
+  icons = { tablerChevronsLeft, tablerChevronLeft, tablerChevronRight, tablerChevronsRight };
+
+  currentPage = model(0);
+  totalPageCount = input(0, { transform: numberAttribute });
+  visiblePageCount = input(10, { transform: numberAttribute });
+
+  private readonly groupIndex = computed(() => {
+    return Math.floor(this.currentPage() / this.visiblePageCount());
+  });
+
+  hasPrev = computed(() => {
+    if (this.totalPageCount() === 0) {
+      return false;
+    }
+    return this.groupIndex() > 0;
+  });
+
+  hasNext = computed(() => {
+    const totalPageCount = this.totalPageCount();
+    if (totalPageCount === 0) {
+      return false;
+    }
+    const lastGroupIndex = Math.floor((totalPageCount - 1) / this.visiblePageCount());
+    return this.groupIndex() < lastGroupIndex;
+  });
+
+  displayPages = computed(() => {
+    const totalPageCount = this.totalPageCount();
+    if (totalPageCount === 0) {
+      return [] as number[];
+    }
+
+    const visiblePageCount = this.visiblePageCount();
+    const startPage = this.groupIndex() * visiblePageCount + 1;
+    const endPage = Math.min(startPage + visiblePageCount - 1, totalPageCount);
+
+    const pages: number[] = [];
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  goToPage(page: number): void {
+    this.currentPage.set(page);
+  }
+
+  goToNextGroup(): void {
+    this.currentPage.set((this.groupIndex() + 1) * this.visiblePageCount());
+  }
+
+  goToPrevGroup(): void {
+    this.currentPage.set((this.groupIndex() - 1) * this.visiblePageCount());
+  }
+
+  goToFirst(): void {
+    this.currentPage.set(0);
+  }
+
+  goToLast(): void {
+    this.currentPage.set(this.totalPageCount() - 1);
+  }
+}

package/src/ui/navigation/sidebar/sd-sidebar-container.control.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 SdSidebarContainerControl {
+  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.update((v) => !v);
+  }
+}

package/src/ui/navigation/sidebar/sd-sidebar-menu.control.ts

@@ -0,0 +1,129 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { useFullPageCodeSignal } from "../../../core/utils/useFullPageCodeSignal";
+import {
+  getMenuRouterLinkOption as menuRouterLinkOption,
+  getIsMenuSelected as menuIsSelected,
+} from "../menu-utils";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdTypedTemplateDirective } from "../../../core/directives/sd-typed-template.directive";
+import { SdRouterLinkDirective } from "../../../core/directives/sd-router-link.directive";
+import { SdListControl } from "../../data/list/sd-list.control";
+import { SdListItemControl } from "../../data/list/sd-list-item.control";
+import { NgIcon } from "@ng-icons/core";
+
+@Component({
+  selector: "sd-sidebar-menu",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    SdTypedTemplateDirective,
+    SdRouterLinkDirective,
+    SdListControl,
+    SdListItemControl,
+    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"
+          [sd-router-link]="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 SdSidebarMenuControl {
+  menus = input<ISdSidebarMenu[]>([]);
+  layout = input<"accordion" | "flat">();
+  getMenuIsSelectedFn = input<(menu: ISdSidebarMenu) => boolean>();
+
+  fullPageCode = useFullPageCodeSignal();
+
+  rootLayout = computed(() => this.layout() ?? (this.menus().length <= 3 ? "flat" : "accordion"));
+
+  getMenuRouterLinkOption(
+    menu: ISdSidebarMenu,
+  ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+    return menuRouterLinkOption(menu);
+  }
+
+  getIsMenuSelected(menu: ISdSidebarMenu): boolean {
+    return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
+  }
+
+  onMenuClick(menu: ISdSidebarMenu): void {
+    if (menu.url != null) {
+      window.open(menu.url, "_blank");
+    }
+  }
+
+  protected readonly itemTemplateType!: {
+    menus: ISdSidebarMenu[];
+    depth: number;
+  };
+}
+
+export interface ISdSidebarMenu {
+  title: string;
+  codeChain: string[];
+  url?: string;
+  icon?: string;
+  children?: ISdSidebarMenu[];
+}

package/src/ui/navigation/sidebar/sd-sidebar-user.control.ts

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from "@angular/core";
+import { SdCollapseIconControl } from "../collapse/sd-collapse-icon.control";
+import { SdCollapseControl } from "../collapse/sd-collapse.control";
+import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive";
+import { SdListControl } from "../../data/list/sd-list.control";
+import { SdListItemControl } from "../../data/list/sd-list-item.control";
+
+@Component({
+  selector: "sd-sidebar-user",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdCollapseIconControl,
+    SdCollapseControl,
+    SdRippleDirective,
+    SdListControl,
+    SdListItemControl,
+  ],
+  template: `
+    <div class="p-lg">
+      <ng-content />
+    </div>
+    @if (userMenu()?.title) {
+      <div class="_menu-button" tabindex="0" (click)="onMenuOpenButtonClick()" (keydown.enter)="onMenuOpenButtonClick()" [sd-ripple]="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 SdSidebarUserControl {
+  userMenu = input<ISidebarUserMenu>();
+
+  menuOpen = signal(false);
+
+  onMenuOpenButtonClick(): void {
+    this.menuOpen.update((v) => !v);
+  }
+}
+
+export interface ISidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}

package/src/ui/navigation/sidebar/sd-sidebar.control.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdSidebarContainerControl } from "./sd-sidebar-container.control";
+
+@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 SdSidebarControl {
+  private readonly _parentControl = inject<SdSidebarContainerControl>(
+    forwardRef(() => SdSidebarContainerControl),
+  );
+
+  toggle = computed(() => this._parentControl.toggle());
+}