@3ddv/software-division-components 2.0.0 → 2.0.2

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

@@ -1,59 +0,0 @@
-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/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog.ts

@@ -1,31 +0,0 @@
-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/generic/dialog/ng-package.json

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

package/generic/dialog/public-api.ts

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

package/generic/dialog/tsconfig.json

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

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

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

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

@@ -1,17 +0,0 @@
-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/generic/dialog/ui/dialog-footer/dialog-footer.component.html

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-import {
-  HlmDialogDescription,
-  HlmDialogHeader,
-  HlmDialogTitle,
-} from '@3ddv/software-division-components/generic/dialog';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@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/generic/drawer/drawer.component.html

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

package/generic/drawer/drawer.component.ts

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

package/generic/drawer/drawer.service.ts

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

package/generic/drawer/drawer.stories.ts

@@ -1,31 +0,0 @@
-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/generic/drawer/index.ts

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

package/generic/drawer/ng-package.json

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

package/generic/drawer/public-api.ts

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

package/generic/icon/icon.component.css

@@ -1,7 +0,0 @@
-.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/generic/icon/icon.component.html

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

package/generic/icon/icon.component.ts

@@ -1,86 +0,0 @@
-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/generic/icon/icon.stories.ts

@@ -1,16 +0,0 @@
-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/generic/icon/index.ts

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

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

@@ -1,11 +0,0 @@
-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/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.token.ts

@@ -1,20 +0,0 @@
-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/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.ts

@@ -1,36 +0,0 @@
-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/generic/icon/ng-package.json

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

package/generic/icon/public-api.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of software-division-components
- */
-
-export * from './icon.component';
-export { HlmIcon, HlmIconModule } from './lib/ui-icon-helm/src';

package/generic/icon/tsconfig.json

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

package/generic/index.ts

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

package/generic/select/index.ts

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

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

@@ -1,29 +0,0 @@
-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/generic/select/lib/hlm-select-group.ts

@@ -1,17 +0,0 @@
-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/generic/select/lib/hlm-select-label.ts

@@ -1,26 +0,0 @@
-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/generic/select/lib/hlm-select-option.ts

@@ -1,37 +0,0 @@
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-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';
-
-@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/generic/select/lib/hlm-select-scroll-down.ts

@@ -1,24 +0,0 @@
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-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';
-
-@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())
-  );
-}

package/generic/select/lib/hlm-select-scroll-up.ts

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