@simplysm/angular 14.0.30 → 14.0.33

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

@@ -1,75 +0,0 @@
-import {
-  afterNextRender,
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  input,
-  signal,
-  viewChild,
-  ViewEncapsulation,
-} from "@angular/core";
-import type { SdResizeEvent } 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 SdCollapse {
-  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: SdResizeEvent): void {
-    if (event.heightChanged) {
-      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
-    }
-  }
-}

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

@@ -1,32 +0,0 @@
-import type { SdMenu } from "../../core/providers/sd-app-structure.types";
-
-export type { SdMenu } from "../../core/providers/sd-app-structure.types";
-
-export function getMenuRouterLinkOption(
-  menu: SdMenu,
-): { 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: SdMenu,
-  fullPageCode: string | undefined,
-  customFn?: (menu: SdMenu) => boolean,
-): boolean {
-  return customFn ? customFn(menu) : fullPageCode === menu.codeChain.join(".");
-}

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

@@ -1,127 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  numberAttribute,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdAnchor } from "../../form/button/sd-anchor";
-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: [SdAnchor, 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 SdPagination {
-  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() / Math.max(this.visiblePageCount(), 1));
-  });
-
-  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) / Math.max(this.visiblePageCount(), 1));
-    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) * Math.max(this.visiblePageCount(), 1));
-  }
-
-  goToPrevGroup(): void {
-    if (!this.hasPrev()) return;
-    this.currentPage.set((this.groupIndex() - 1) * Math.max(this.visiblePageCount(), 1));
-  }
-
-  goToFirst(): void {
-    this.currentPage.set(0);
-  }
-
-  goToLast(): void {
-    if (this.totalPageCount() === 0) return;
-    this.currentPage.set(this.totalPageCount() - 1);
-  }
-}

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

@@ -1,92 +0,0 @@
-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/ui/navigation/sidebar/sd-sidebar-menu.ts

@@ -1,122 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
-import { injectFullPageCodeSignal } from "../../../core/utils/injectFullPageCodeSignal";
-import {
-  type SdMenu,
-  getMenuRouterLinkOption as menuRouterLinkOption,
-  getIsMenuSelected as menuIsSelected,
-} from "../menu-utils";
-import { NgTemplateOutlet } from "@angular/common";
-import { SdTypedTemplate } from "../../../core/directives/sd-typed-template";
-import { SdRouterLink } from "../../../core/directives/sd-router-link";
-import { SdList } from "../../data/list/sd-list";
-import { SdListItem } from "../../data/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/ui/navigation/sidebar/sd-sidebar-user.ts

@@ -1,84 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from "@angular/core";
-import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
-import { SdCollapse } from "../collapse/sd-collapse";
-import { SdRipple } from "../../../core/directives/sd-ripple";
-import { SdList } from "../../data/list/sd-list";
-import { SdListItem } from "../../data/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/ui/navigation/sidebar/sd-sidebar.ts

@@ -1,67 +0,0 @@
-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());
-}