@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog.service.ts

@@ -0,0 +1,59 @@
+import type { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable, signal, type TemplateRef } from '@angular/core';
+import {
+  BrnDialog,
+  type BrnDialogOptions,
+  BrnDialogRef,
+  BrnDialogService,
+  cssClassesToArray,
+  DEFAULT_BRN_DIALOG_OPTIONS,
+} from '@spartan-ng/brain/dialog';
+import { HlmDialogContent } from './hlm-dialog-content';
+import { hlmDialogOverlayClass } from './hlm-dialog-overlay';
+
+export type HlmDialogOptions<DialogContext = unknown> = BrnDialogOptions & {
+  contentClass?: string;
+  context?: DialogContext;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HlmDialogService {
+  public ref = signal<BrnDialogRef<any> | null>(null);
+  public component = signal<BrnDialog | null>(null);
+  private readonly _brnDialogService = inject(BrnDialogService);
+
+  public open(
+    component: ComponentType<unknown> | TemplateRef<unknown>,
+    options?: Partial<HlmDialogOptions>
+  ): { reference: BrnDialogRef<any>; component: ComponentType<unknown> | TemplateRef<unknown> } {
+    if (options) {
+      options.panelClass = 'dialog-overlay-margin';
+    } else {
+      options = { panelClass: 'dialog-overlay-margin' };
+    }
+
+    const mergedOptions = {
+      ...DEFAULT_BRN_DIALOG_OPTIONS,
+      ...options,
+      backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''} dialog-container`),
+      context: {
+        ...(typeof options?.context === 'object' && options?.context !== null ? options.context : {}),
+        $component: component,
+        $dynamicComponentClass: options?.contentClass,
+      },
+    };
+    const reference = this._brnDialogService.open(HlmDialogContent, undefined, mergedOptions.context, mergedOptions);
+    this.ref.set(reference);
+    return { reference, component };
+  }
+
+  public close(): void {
+    if (!this.ref()) {
+      return;
+    }
+
+    this.ref()?.close();
+  }
+}

package/src/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { BrnDialog, BrnDialogOverlay, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { HlmDialogOverlay } from './hlm-dialog-overlay';
+
+@Component({
+  selector: 'hlm-dialog',
+
+  imports: [BrnDialogOverlay, HlmDialogOverlay],
+  providers: [
+    {
+      provide: BrnDialog,
+      useExisting: forwardRef(() => HlmDialog),
+    },
+    provideBrnDialogDefaultOptions({
+      hasBackdrop: true,
+      disableClose: false,
+      closeOnBackdropClick: true,
+      closeOnOutsidePointerEvents: true,
+      scrollStrategy: 'reposition',
+      attachPositions: [{ originX: 'center', originY: 'center', overlayX: 'center', overlayY: 'center' }],
+    }),
+  ],
+  template: `
+    <brn-dialog-overlay hlm />
+    <ng-content />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'hlmDialog',
+})
+export class HlmDialog extends BrnDialog {}

package/src/generic/dialog/package.json

@@ -0,0 +1,9 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  },
+  "dependencies": {
+    "dialog": "link:@spartan-ng/helm/dialog",
+    "icon": "link:../../../../shared/libs/ui-icon-helm/src/index.ts"
+  }
+}

package/src/generic/dialog/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './dialog.component';
+export { HlmDialogService as DialogService } from './libs/ui-dialog-helm/src/lib/hlm-dialog.service';

package/src/generic/dialog/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@spartan-ng/helm/dialog": ["./libs/ui-dialog-helm/src/index.ts"]
+    }
+  }
+}

package/src/generic/dialog/ui/dialog-close-button/dialog-close-button.component.html

@@ -0,0 +1 @@
+<button brnDialogClose type="button">Close</button>

package/src/generic/dialog/ui/dialog-close-button/dialog-close-button.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
+
+@Component({
+  selector: 'app-dialog-close-button',
+  imports: [BrnDialogClose],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './dialog-close-button.component.html',
+  styleUrls: ['./dialog-close-button.component.css'],
+})
+export class DialogCloseButtonComponent {
+  public readonly closed = output<void>();
+
+  protected close(): void {
+    this.closed.emit();
+  }
+}

package/src/generic/dialog/ui/dialog-footer/dialog-footer.component.html

@@ -0,0 +1,3 @@
+<hlm-dialog-footer>
+  <ng-content />
+</hlm-dialog-footer>

package/src/generic/dialog/ui/dialog-footer/dialog-footer.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmDialogFooter } from '../../libs/ui-dialog-helm/src';
+
+@Component({
+  selector: 'app-dialog-footer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HlmDialogFooter],
+  templateUrl: './dialog-footer.component.html',
+  styleUrls: ['./dialog-footer.component.css'],
+})
+export class DialogFooterComponent {}

package/src/generic/dialog/ui/dialog-header/dialog-header.component.html

@@ -0,0 +1,8 @@
+<hlm-dialog-header>
+  @if (title()) {
+    <h3 hlmDialogTitle>{{ title() }}</h3>
+  }
+  @if (description()) {
+    <h3 hlmDialogDescription>{{ description() }}</h3>
+  }
+</hlm-dialog-header>

package/src/generic/dialog/ui/dialog-header/dialog-header.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmDialogDescription, HlmDialogHeader, HlmDialogTitle } from '../../libs/ui-dialog-helm/src';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-dialog-header',
+  imports: [HlmDialogHeader, HlmDialogTitle, HlmDialogDescription],
+  templateUrl: './dialog-header.component.html',
+  styleUrls: ['./dialog-header.component.css'],
+})
+export class DialogHeaderComponent {
+  public title = input<string>('');
+  public description = input<string>('');
+}

package/src/generic/drawer/drawer.component.html

@@ -0,0 +1 @@
+<div>drawer component!</div>

package/src/generic/drawer/drawer.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sdc-drawer',
+  standalone: true,
+  templateUrl: './drawer.component.html',
+})
+export class DrawerComponent {}

package/src/generic/drawer/drawer.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DrawerService {
+  constructor() {}
+}

package/src/generic/drawer/drawer.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { DrawerComponent } from './drawer.component';
+
+const meta: Meta<DrawerComponent> = {
+  title: 'Generic/Drawer',
+  component: DrawerComponent,
+  id: 'Drawer',
+};
+
+export default meta;
+
+type Story = StoryObj<DrawerComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/generic/drawer/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/generic/drawer/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/generic/drawer/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './drawer.component';
+export * from './drawer.service';

package/src/generic/icon/icon.component.css

@@ -0,0 +1,7 @@
+.app-svg-icon svg {
+  fill: var(--icon-color, currentColor);
+  stroke: var(--icon-color, currentColor);
+  stroke-width: var(--icon-stroke-width, 1);
+  width: 100%;
+  height: 100%;
+}

package/src/generic/icon/icon.component.html

@@ -0,0 +1,3 @@
+@if (svgContent(); as content) {
+  <span class="inline-block app-svg-icon" [innerHTML]="content"></span>
+}

package/src/generic/icon/icon.component.ts

@@ -0,0 +1,86 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { map, Observable, shareReplay } from 'rxjs';
+
+@Component({
+  selector: 'sdc-svg-icon',
+  templateUrl: './icon.component.html',
+  styleUrl: './icon.component.css',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'className()',
+  },
+})
+export class SvgIconComponent {
+  // DI
+  private readonly http = inject(HttpClient);
+  private readonly cache = new Map<string, Observable<string>>();
+  private readonly sanitizer = inject(DomSanitizer);
+  private readonly elementRef = inject(ElementRef);
+
+  // INPUTS / OUTPUTS
+  public readonly name = input.required<string>();
+  public readonly iconFolder = input<string>();
+  public readonly className = input<string>('');
+  public readonly color = input<string>('currentColor');
+  public readonly strokeWidth = input<number>(1);
+
+  // STATE
+  public readonly svgContent = signal<SafeHtml | null>(null);
+
+  public constructor() {
+    effect(() => {
+      this.getIcon(this.name()).subscribe({
+        next: svg => {
+          const element = this.elementRef.nativeElement as HTMLElement;
+
+          // Apply dynamic properties
+          element.style.setProperty('--icon-color', this.color());
+          element.style.setProperty('--icon-stroke-width', this.strokeWidth().toString());
+
+          this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(svg));
+        },
+        error: (error: unknown) => {
+          console.error('Failed to load icon:', error);
+          // Optional: set a minimal fallback SVG or clear content
+          this.svgContent.set(
+            this.sanitizer.bypassSecurityTrustHtml(
+              `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m0 4h.01"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>`
+            )
+          );
+        },
+      });
+    });
+  }
+
+  public getIcon(name: string): Observable<string> {
+    if (!this.cache.has(name)) {
+      const folder = this.iconFolder() ?? 'assets';
+      const icon$ = this.http.get(`/${folder}/${name}.svg`, { responseType: 'text' }).pipe(
+        map(svg => this.sanitizeSvg(svg)),
+        shareReplay({ bufferSize: 1, refCount: true })
+      );
+
+      this.cache.set(name, icon$);
+    }
+
+    return this.cache.get(name)!;
+  }
+
+  private sanitizeSvg(svg: string): string {
+    // Remove any existing width/height attributes to make the SVG more flexible
+    return svg.replace(/width="([^"]+)"/, '').replace(/height="([^"]+)"/, '');
+  }
+}

package/src/generic/icon/icon.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { SvgIconComponent } from './icon.component';
+
+const meta: Meta<SvgIconComponent> = {
+  title: 'Generic/Icon',
+  component: SvgIconComponent,
+  id: 'Icon',
+};
+
+export default meta;
+
+type Story = StoryObj<SvgIconComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/generic/icon/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/generic/icon/lib/ui-icon-helm/src/index.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { HlmIcon } from './lib/hlm-icon';
+
+export * from './lib/hlm-icon';
+export * from './lib/hlm-icon.token';
+
+@NgModule({
+  imports: [HlmIcon],
+  exports: [HlmIcon],
+})
+export class HlmIconModule {}

package/src/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.token.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, ValueProvider, inject } from '@angular/core';
+import type { IconSize } from './hlm-icon';
+
+export interface HlmIconConfig {
+  size: IconSize;
+}
+
+const defaultConfig: HlmIconConfig = {
+  size: 'base',
+};
+
+const HlmIconConfigToken = new InjectionToken<HlmIconConfig>('HlmIconConfig');
+
+export function provideHlmIconConfig(config: Partial<HlmIconConfig>): ValueProvider {
+  return { provide: HlmIconConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmIconConfig(): HlmIconConfig {
+  return inject(HlmIconConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.ts

@@ -0,0 +1,36 @@
+import { Directive, computed, input } from '@angular/core';
+import { injectHlmIconConfig } from './hlm-icon.token';
+
+export type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | (Record<never, never> & string);
+
+@Directive({
+  selector: 'ng-icon[hlm]',
+  standalone: true,
+  host: {
+    '[style.--ng-icon__size]': '_computedSize()',
+  },
+})
+export class HlmIcon {
+  private readonly _config = injectHlmIconConfig();
+  public readonly size = input<IconSize>(this._config.size);
+
+  protected readonly _computedSize = computed(() => {
+    const size = this.size();
+
+    switch (size) {
+      case 'xs':
+        return '12px';
+      case 'sm':
+        return '16px';
+      case 'base':
+        return '24px';
+      case 'lg':
+        return '32px';
+      case 'xl':
+        return '48px';
+      default: {
+        return size;
+      }
+    }
+  });
+}

package/src/generic/icon/package.json

@@ -0,0 +1,9 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  },
+  "dependencies": {
+    "dialog": "link:@spartan-ng/helm/dialog",
+    "icon": "link:../../../../shared/libs/ui-icon-helm/src/index.ts"
+  }
+}

package/src/generic/icon/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './icon.component';

package/src/generic/icon/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@spartan-ng/helm/icon": ["./libs/ui/ui-icon-helm/src/index.ts"]
+    }
+  }
+}

package/src/generic/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/generic/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "./public-api.ts"
+    }
+  }
+}

package/src/generic/public-api.ts

@@ -0,0 +1,8 @@
+export * from './add-digital-wallet';
+export * from './braintree';
+export * from './button';
+export * from './carousel';
+export * from './dialog';
+export * from './drawer';
+export * from './icon';
+export * from './select';

package/src/generic/select/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/generic/select/lib/hlm-select-content.ts

@@ -0,0 +1,29 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { hlm, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmSelectContent], hlm-select-content',
+
+  host: {
+    '[class]': '_computedClass()',
+    '[attr.data-state]': '_stateProvider?.state() ?? "open"',
+    '[attr.data-side]': '_sideProvider?.side() ?? "bottom"',
+  },
+})
+export class HlmSelectContent {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  public readonly stickyLabels = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  protected readonly _stateProvider = injectExposesStateProvider({ optional: true });
+  protected readonly _sideProvider = injectExposedSideProvider({ optional: true });
+
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'w-full relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      this.userClass()
+    )
+  );
+}

package/src/generic/select/lib/hlm-select-group.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnSelectGroup } from '@spartan-ng/brain/select';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmSelectGroup], hlm-select-group',
+
+  hostDirectives: [BrnSelectGroup],
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmSelectGroup {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() => hlm(this.userClass()));
+}

package/src/generic/select/lib/hlm-select-label.ts

@@ -0,0 +1,26 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnSelectLabel } from '@spartan-ng/brain/select';
+import type { ClassValue } from 'clsx';
+import { HlmSelectContent } from './hlm-select-content';
+
+@Directive({
+  selector: '[hlmSelectLabel], hlm-select-label',
+
+  hostDirectives: [BrnSelectLabel],
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmSelectLabel {
+  private readonly _selectContent = inject(HlmSelectContent);
+  private readonly _stickyLabels = computed(() => this._selectContent.stickyLabels());
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'text-muted-foreground px-2 py-1.5 text-xs',
+      this._stickyLabels() ? 'sticky top-0 bg-popover block z-[2]' : '',
+      this.userClass()
+    )
+  );
+}

package/src/generic/select/lib/hlm-select-option.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnSelectOption } from '@spartan-ng/brain/select';
+import type { ClassValue } from 'clsx';
+import { HlmIcon } from '../../icon/lib/ui-icon-helm/src';
+
+@Component({
+  selector: 'hlm-option',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnSelectOption, inputs: ['disabled', 'value'] }],
+  providers: [provideIcons({ lucideCheck })],
+  host: {
+    '[class]': '_computedClass()',
+  },
+  template: `
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      @if (this._brnSelectOption.selected()) {
+        <ng-icon aria-hidden="true" hlm name="lucideCheck" size="sm" />
+      }
+    </span>
+
+    <ng-content />
+  `,
+  imports: [NgIcon, HlmIcon],
+})
+export class HlmSelectOption {
+  protected readonly _brnSelectOption = inject(BrnSelectOption, { host: true });
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'overflow-hidden text-ellipsis whitespace-nowrap hover:bg-accent data-[active]:bg-accent data-[active]:text-white [&>ng-icon]:text-white relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+      this.userClass()
+    )
+  );
+}

package/src/generic/select/lib/hlm-select-scroll-down.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { ClassValue } from 'clsx';
+import { HlmIcon } from '../../icon/lib/ui-icon-helm/src';
+
+@Component({
+  selector: 'hlm-select-scroll-down',
+
+  imports: [NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideChevronDown })],
+  host: {
+    '[class]': '_computedClass()',
+  },
+  template: ` <ng-icon class="ml-2" hlm name="lucideChevronDown" size="sm" /> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmSelectScrollDown {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm('flex cursor-default items-center justify-center py-1', this.userClass())
+  );
+}