@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/navigation/tab/sd-tab-item.control.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdTabControl } from "./sd-tab.control";
+
+@Component({
+  selector: "sd-tab-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-selected]": "isSelected()",
+    "(click)": "onClick()",
+  },
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-tab-item {
+        display: inline-block;
+        padding: var(--gap-sm) var(--gap-default);
+        cursor: pointer;
+        margin-bottom: -2px;
+
+        border-bottom: 2px solid transparent !important;
+        font-weight: bold;
+        color: var(--theme-gray-default);
+
+        &[data-sd-selected="true"] {
+          border-bottom: 3px solid var(--theme-primary-default) !important;
+          color: var(--theme-primary-default);
+        }
+      }
+    `,
+  ],
+})
+export class SdTabItemControl {
+  private readonly _parentControl = inject<SdTabControl>(forwardRef(() => SdTabControl));
+
+  value = input<any>();
+
+  isSelected = computed(() => this._parentControl.value() === this.value());
+
+  onClick() {
+    this._parentControl.value.set(this.value());
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, model, ViewEncapsulation } from "@angular/core";
+
+@Component({
+  selector: "sd-tab",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  styles: [
+    /* language=SCSS */ `
+      sd-tab {
+        display: block;
+        border-bottom: 2px solid var(--theme-gray-lighter);
+
+        padding: 0 calc(var(--gap-default) + 1px) 0 calc(var(--gap-default) - 1px);
+      }
+    `,
+  ],
+  template: `
+    <ng-content></ng-content>
+  `,
+})
+export class SdTabControl {
+  value = model<any>();
+}

package/src/ui/navigation/tab/sd-tabview-item.control.ts

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdTabviewControl } from "./sd-tabview.control";
+
+@Component({
+  selector: "sd-tabview-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  styles: [
+    /* language=SCSS */ `
+      sd-tabview-item {
+        display: none;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+
+        &[data-sd-selected="true"] {
+          display: block;
+        }
+      }
+    `,
+  ],
+  template: `
+    <ng-content></ng-content>
+  `,
+  host: {
+    "[attr.data-sd-selected]": "isSelected()",
+  },
+})
+export class SdTabviewItemControl<T> {
+  value = input.required<T>();
+  header = input<string>();
+
+  private readonly _parentControl = inject<SdTabviewControl<T>>(
+    forwardRef(() => SdTabviewControl),
+  );
+
+  isSelected = computed(() => this._parentControl.value() === this.value());
+}

package/src/ui/navigation/tab/sd-tabview.control.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChildren,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdTabItemControl } from "./sd-tab-item.control";
+import { SdTabControl } from "./sd-tab.control";
+import { SdTabviewItemControl } from "./sd-tabview-item.control";
+
+@Component({
+  selector: "sd-tabview",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdTabControl, SdTabItemControl],
+  host: {
+    class: "flex-column fill",
+  },
+  template: `
+    <sd-tab [(value)]="value">
+      @for (itemControl of itemControls(); track itemControl.value()) {
+        <sd-tab-item [value]="itemControl.value()">
+          {{ itemControl.header() || itemControl.value() }}
+        </sd-tab-item>
+      }
+    </sd-tab>
+
+    <div class="flex-fill">
+      <ng-content />
+    </div>
+  `,
+})
+export class SdTabviewControl<T> {
+  value = model<T>();
+
+  itemControls = contentChildren<SdTabviewItemControl<T>>(SdTabviewItemControl);
+}

package/src/ui/navigation/topbar/sd-topbar-container.control.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
+
+@Component({
+  selector: "sd-topbar-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-topbar-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+    `,
+  ],
+})
+export class SdTopbarContainerControl {}

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

@@ -0,0 +1,165 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  viewChildren,
+  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 { SdDropdownControl } from "../../overlay/dropdown/sd-dropdown.control";
+import { SdDropdownPopupControl } from "../../overlay/dropdown/sd-dropdown-popup.control";
+import { SdListControl } from "../../data/list/sd-list.control";
+import { SdListItemControl } from "../../data/list/sd-list-item.control";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+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,
+    SdTypedTemplateDirective,
+    SdRouterLinkDirective,
+    SdDropdownControl,
+    SdDropdownPopupControl,
+    SdListControl,
+    SdListItemControl,
+    SdButtonControl,
+    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"
+          [sd-router-link]="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 SdTopbarMenuControl {
+  menus = input<ISdTopbarMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: ISdTopbarMenu) => boolean>();
+
+  fullPageCode = useFullPageCodeSignal();
+
+  private readonly _dropdowns = viewChildren(SdDropdownControl);
+
+  getMenuRouterLinkOption(
+    menu: ISdTopbarMenu,
+  ): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+    return menuRouterLinkOption(menu);
+  }
+
+  getIsMenuSelected(menu: ISdTopbarMenu): boolean {
+    return menuIsSelected(menu, this.fullPageCode(), this.getMenuIsSelectedFn());
+  }
+
+  onMenuClick(menu: ISdTopbarMenu, 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: ISdTopbarMenu[];
+    depth: number;
+    dropdownIndex: number;
+  };
+
+  protected readonly tablerCaretDown = tablerCaretDown;
+}
+
+export interface ISdTopbarMenu {
+  title: string;
+  codeChain: string[];
+  url?: string;
+  icon?: string;
+  children?: ISdTopbarMenu[];
+}

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

@@ -0,0 +1,58 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdownControl } from "../../overlay/dropdown/sd-dropdown.control";
+import { SdDropdownPopupControl } from "../../overlay/dropdown/sd-dropdown-popup.control";
+import { SdListControl } from "../../data/list/sd-list.control";
+import { SdListItemControl } from "../../data/list/sd-list-item.control";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+
+@Component({
+  selector: "sd-topbar-user",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    SdDropdownControl,
+    SdDropdownPopupControl,
+    SdListControl,
+    SdListItemControl,
+    SdButtonControl,
+  ],
+  template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-content />
+      </sd-button>
+      <sd-dropdown-popup>
+        <sd-list>
+          @for (menu of menus(); track menu.title) {
+            <sd-list-item (click)="onMenuClick(menu)">
+              {{ menu.title }}
+            </sd-list-item>
+          }
+        </sd-list>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [],
+})
+export class SdTopbarUserControl {
+  menus = input.required<ISdTopbarUserMenu[]>();
+
+  private readonly _dropdown = viewChild(SdDropdownControl);
+
+  onMenuClick(menu: ISdTopbarUserMenu): void {
+    menu.onClick();
+    this._dropdown()?.open.set(false);
+  }
+}
+
+export interface ISdTopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}

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

@@ -0,0 +1,94 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdSidebarContainerControl } from "../sidebar/sd-sidebar-container.control";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+import { NgIcon } from "@ng-icons/core";
+import { tablerMenu2 } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-topbar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButtonControl, NgIcon],
+  host: {
+    "class": "flex-row gap-default cross-align-center main-align-start"
+  },
+  template: `
+    @if (hasSidebar()) {
+      <sd-button
+        [theme]="'link-primary'"
+        [buttonClass]="'p-sm-default'"
+        (click)="onToggleButtonClick()"
+      >
+        <ng-icon [svg]="tablerMenu2" />
+      </sd-button>
+    }
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-topbar {
+        min-height: var(--topbar-height);
+        overflow-x: auto;
+        overflow-y: hidden;
+        user-select: none;
+
+        background: var(--control-color);
+        color: var(--text-trans-default);
+        border-bottom: 1px solid var(--border-color-lighter);
+        padding-left: var(--gap-sm);
+
+        @each $h in (h1, h2, h3, h4, h5, h6) {
+          > #{$h} {
+            padding-right: var(--gap-xl);
+          }
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: var(--trans-light);
+        }
+
+        &::-webkit-scrollbar-corner {
+          background-color: var(--trans-light);
+        }
+
+        &::-webkit-scrollbar {
+          width: var(--gap-sm);
+          height: var(--gap-sm);
+          background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--trans-default);
+        }
+      }
+    `,
+  ],
+})
+export class SdTopbarControl {
+  private readonly _injectedSidebarContainer = inject(SdSidebarContainerControl, {
+    optional: true,
+  });
+
+  sidebarContainer = input<SdSidebarContainerControl>();
+
+  hasSidebar = computed(
+    () => this.sidebarContainer() != null || this._injectedSidebarContainer != null,
+  );
+
+  onToggleButtonClick(): void {
+    const sc = this.sidebarContainer() ?? this._injectedSidebarContainer;
+    if (sc != null) {
+      sc.toggle.update((v) => !v);
+    }
+  }
+
+  protected readonly tablerMenu2 = tablerMenu2;
+}