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

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

@@ -0,0 +1,23 @@
+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';
+import { HlmIcon } from '../../icon/lib/ui-icon-helm/src';
+
+@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())
+  );
+}

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

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, inject, 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 { BrnSelect, BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { cva } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { HlmIcon } from '../../icon/lib/ui-icon-helm/src';
+
+export const selectTriggerVariants = cva(
+  `border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-6 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:size-4`,
+  {
+    variants: {
+      error: {
+        auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
+        true: 'text-destructive border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+      },
+    },
+    defaultVariants: {
+      error: 'auto',
+    },
+  }
+);
+
+@Component({
+  selector: 'hlm-select-trigger',
+  imports: [BrnSelectTrigger, NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideChevronDown })],
+  template: `
+    <button #button brnSelectTrigger hlmInput type="button" [attr.data-size]="size()" [class]="_computedClass()">
+      <ng-content />
+      @if (_icon()) {
+        <ng-content select="ng-icon" />
+      } @else {
+        <ng-icon class="ml-2 flex-none" hlm name="lucideChevronDown" size="sm" />
+      }
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmSelectTrigger {
+  protected readonly _icon = contentChild(HlmIcon);
+
+  protected readonly _brnSelect = inject(BrnSelect, { optional: true });
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+  public readonly size = input<'default' | 'sm'>('default');
+
+  protected readonly _computedClass = computed(() =>
+    hlm(selectTriggerVariants({ error: this._brnSelect?.errorState() }), this.userClass())
+  );
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: 'hlm-select-value,[hlmSelectValue], brn-select-value[hlm]',
+
+  host: {
+    '[class]': '_computedClass()',
+  },
+})
+export class HlmSelectValue {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm('line-clamp-1 flex items-center gap-2 overflow-hidden text-ellipsis', this.userClass())
+  );
+}

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

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

package/src/generic/select/lib/index.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { HlmSelect } from './hlm-select';
+import { HlmSelectContent } from './hlm-select-content';
+import { HlmSelectGroup } from './hlm-select-group';
+import { HlmSelectLabel } from './hlm-select-label';
+import { HlmSelectOption } from './hlm-select-option';
+import { HlmSelectScrollDown } from './hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './hlm-select-scroll-up';
+import { HlmSelectTrigger } from './hlm-select-trigger';
+import { HlmSelectValue } from './hlm-select-value';
+
+export * from './hlm-select';
+export * from './hlm-select-content';
+export * from './hlm-select-group';
+export * from './hlm-select-label';
+export * from './hlm-select-option';
+export * from './hlm-select-scroll-down';
+export * from './hlm-select-scroll-up';
+export * from './hlm-select-trigger';
+export * from './hlm-select-value';
+
+export const HlmSelectImports = [
+  HlmSelectContent,
+  HlmSelectTrigger,
+  HlmSelectOption,
+  HlmSelectValue,
+  HlmSelect,
+  HlmSelectScrollUp,
+  HlmSelectScrollDown,
+  HlmSelectLabel,
+  HlmSelectGroup,
+] as const;
+
+@NgModule({
+  imports: [...HlmSelectImports],
+  exports: [...HlmSelectImports],
+})
+export class HlmSelectModule {}

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

@@ -0,0 +1,2 @@
+export * from './select.component';
+export * from './types';

package/src/generic/select/select.component.css

@@ -0,0 +1,65 @@
+/* inline-block w-full */
+.select-root {
+  display: inline-block;
+  width: 100%;
+}
+
+/* shared between both triggers:
+   flex justify-between items-center rounded-full focus:outline-none focus:ring-2 focus:ring-accent
+   w-full overflow-hidden text-white text-xs text-center text-ellipsis whitespace-nowrap
+*/
+.select-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 25px !important; /* rounded-full */
+  outline: none; /* focus:outline-none */
+  width: 100%; /* w-full */
+  overflow: hidden; /* overflow-hidden */
+  color: #ffffff; /* text-white */
+  font-size: 0.75rem; /* text-xs */
+  text-align: center; /* text-center */
+  white-space: nowrap; /* whitespace-nowrap */
+  text-overflow: ellipsis; /* text-ellipsis */
+}
+
+/* focus:ring-2 focus:ring-accent */
+.select-trigger:focus,
+.select-trigger:focus-visible {
+  outline: none;
+  /* Replace --accent (or --ring-accent) with your theme token if different */
+  box-shadow: 0 0 0 2px var(--accent, var(--ring-accent, #0ea5e9));
+}
+
+/* FIRST trigger: lg:hidden + base flex */
+.select-trigger--sm {
+  display: flex; /* visible by default (mobile) */
+}
+
+/* SECOND trigger: hidden + lg:flex */
+.select-trigger--lg {
+  display: none; /* hidden on mobile */
+}
+
+/* lg breakpoint = 1024px (Tailwind's default) */
+@media (min-width: 1024px) {
+  /* lg:hidden */
+  .select-trigger--sm {
+    display: none;
+    /* the original also had lg:font-medium lg:text-sm, but it's hidden at lg */
+    font-weight: 500; /* lg:font-medium (has no effect since hidden) */
+    font-size: 0.875rem; /* lg:text-sm (has no effect since hidden) */
+  }
+
+  /* hidden lg:flex + lg:font-medium lg:text-sm */
+  .select-trigger--lg {
+    display: flex; /* lg:flex */
+    font-weight: 500; /* lg:font-medium */
+    font-size: 0.875rem; /* lg:text-sm */
+  }
+}
+
+/* content full-width toggle */
+.full-width {
+  width: 100%;
+}

package/src/generic/select/select.component.html

@@ -0,0 +1,19 @@
+<hlm-select
+  class="select-root"
+  [value]="defaultValue()?.value"
+  [placeholder]="placeholder()"
+  (valueChange)="valueChange.emit($event)">
+  <hlm-select-trigger class="select-trigger select-trigger--sm" size="sm" [ngClass]="variantClasses">
+    <hlm-select-value [ngClass]="variantClasses" />
+  </hlm-select-trigger>
+
+  <hlm-select-trigger class="select-trigger select-trigger--lg" size="default" [ngClass]="variantClasses">
+    <hlm-select-value [ngClass]="variantClasses" />
+  </hlm-select-trigger>
+
+  <hlm-select-content [class]="fullWidth() ? 'full-width' : ''" [ngClass]="variantClasses">
+    @for (option of options(); track idx + option.label; let idx = $index) {
+      <hlm-option [ngClass]="variantClasses" [value]="option.value">{{ option.label }}</hlm-option>
+    }
+  </hlm-select-content>
+</hlm-select>

package/src/generic/select/select.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
+import { HlmSelectImports } from './lib';
+import { SelectOptions } from './types';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'sdc-select',
+  imports: [CommonModule, BrnSelectImports, HlmSelectImports],
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.css'],
+})
+export class SelectComponent {
+  public placeholder = input('');
+  public variant = input('light');
+  public options = input.required<SelectOptions[]>();
+  public fullWidth = input(false);
+  public defaultValue = input<SelectOptions[][number]>();
+  public readonly valueChange = output<unknown>();
+
+  protected get variantClasses(): string {
+    return this.variant() === 'dark' ? 'bg-black text-white' : 'bg-white text-black';
+  }
+}

package/src/generic/select/types.ts

@@ -0,0 +1,4 @@
+export interface SelectOptions {
+  label: string;
+  value: unknown;
+}

package/src/private-exports.ts

@@ -0,0 +1 @@
+export { validateStylesForComponent } from './utils/';

package/src/public-api.ts

@@ -0,0 +1,10 @@
+// NOTE: This will determine what is publicly available from within the library to application consumers
+// Be careful with what you expose
+
+export * from './backoffice';
+export * from './dvm';
+export * from './generic';
+export { applyGlobalCssVariables } from './shared/apply-theme-variables';
+export { provideSdc } from './shared/lib-provider';
+export { provideScreenObserver, ScreenObserver, type SCREENS_TOKEN } from './shared/screen-observer';
+export type * from './shared/types';

package/src/shared/apply-theme-variables/apply-theme-variables.ts

@@ -0,0 +1,35 @@
+import { ApplicationRef } from '@angular/core';
+import { filter, first } from 'rxjs';
+
+/** * Declares CSS variables globally based on the 'theme' and 'dvmStyles' property of the configuration. */
+export function applyGlobalCssVariables(appRef: ApplicationRef, theme: Record<string, string>): void {
+  // First application of the theme
+  applyGlobalCssVariablesToNodes(theme);
+
+  appRef.isStable
+    .pipe(
+      filter(stable => stable),
+      first()
+    )
+    // Second application of the theme when the application is stable
+    .subscribe(() => applyGlobalCssVariablesToNodes(theme));
+}
+
+function applyGlobalCssVariablesToNodes(theme: Record<string, string>) {
+  // Grab elements from the DOM
+  const documentElement = document.documentElement;
+  const root: HTMLElement | null = document.querySelector(':root');
+
+  if (root) {
+    // Get theme in a new object
+    const mergedStyles = Object.assign({}, theme);
+
+    for (const [key, value] of Object.entries(mergedStyles)) {
+      // For each of the styles, declare a new CSS variable on root element
+      if (typeof value === 'string') {
+        root.style.setProperty('--' + key, value);
+        documentElement.style.setProperty('--' + key, value);
+      }
+    }
+  }
+}

package/src/shared/apply-theme-variables/index.ts

@@ -0,0 +1 @@
+export * from './apply-theme-variables';

package/src/shared/format-value.pipe.ts

@@ -0,0 +1,23 @@
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  pure: true,
+  standalone: true,
+  name: 'formatValue',
+})
+export class FormatValuePipe implements PipeTransform {
+  private currencyPipe = inject(CurrencyPipe);
+  private datePipe = inject(DatePipe);
+
+  public transform(value: string, pipe: any): string {
+    switch (pipe) {
+      case 'currency':
+        return this.currencyPipe.transform(value) ?? '';
+      case 'date':
+        return this.datePipe.transform(value) ?? '';
+      default:
+        return value ?? '';
+    }
+  }
+}

package/src/shared/index.ts

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

package/src/shared/lib-provider/config-token.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { NgSdComponentsConfig } from '../types';
+
+export const NG_SD_COMPONENTS_CONFIG = new InjectionToken<NgSdComponentsConfig>('NgSdComponentsConfig');

package/src/shared/lib-provider/index.ts

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

package/src/shared/lib-provider/provide-sdc.ts

@@ -0,0 +1,24 @@
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { Provider } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { NgSdComponentsConfig } from '../types';
+import { NG_SD_COMPONENTS_CONFIG } from './config-token';
+
+/**
+ * Provides all necessary dependencies for the library:
+ * - Angular Pipes (`DatePipe`, `CurrencyPipe`)
+ * - Animations
+ * - CommonModule
+ */
+export function provideSdc(config?: NgSdComponentsConfig): Provider[] {
+  // const preset = config?.theme === 'generic' ? GenericTheme : Aura;
+  // if config.theme is generic, pass a theme, otherwise, pass another theme
+  const providers = [
+    DatePipe,
+    CurrencyPipe,
+    { provide: NG_SD_COMPONENTS_CONFIG, useValue: config ?? 'generic' },
+    provideAnimationsAsync() as unknown as Provider,
+  ];
+
+  return [...providers];
+}

package/src/shared/lib-provider/public-api.ts

@@ -0,0 +1 @@
+export { provideSdc } from './provide-sdc';

package/src/shared/public-api.ts

@@ -0,0 +1,6 @@
+export * from './apply-theme-variables';
+export * from './format-value.pipe';
+export * from './lib-provider';
+export * from './screen-observer';
+export * from './theme-provider';
+export * from './types';

package/src/shared/screen-observer/index.ts

@@ -0,0 +1,2 @@
+export * from './provide-screen-observer';
+export * from './screen-observer';

package/src/shared/screen-observer/provide-screen-observer.ts

@@ -0,0 +1,17 @@
+// screen-helper.providers.ts
+import { InjectionToken, Provider } from '@angular/core';
+import { Size } from '../../types/sizes.type';
+import { ScreenObserver } from './screen-observer';
+
+export const SCREENS_TOKEN = new InjectionToken<Record<Size, string>>('SCREENS_TOKEN');
+
+export function provideScreenObserver(screens: Record<Size, string>): Provider[] {
+  return [
+    { provide: SCREENS_TOKEN, useValue: screens },
+    {
+      provide: ScreenObserver,
+      deps: [SCREENS_TOKEN],
+      useFactory: (cfg: Record<Size, string>) => new ScreenObserver(cfg),
+    },
+  ];
+}

package/src/shared/screen-observer/screen-observer.ts

@@ -0,0 +1,56 @@
+import { computed, Signal, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { fromEvent, startWith } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Size, SIZE_ORDER } from '../../types/sizes.type';
+
+export class ScreenObserver {
+  // SIGNALS
+  private readonly _size = signal<Size>('md');
+
+  // CLASS PROPERTIES
+  private readonly breakpoints: Record<Size, number>;
+  public readonly size: Signal<Size> = this._size;
+  public readonly index!: Signal<number>;
+
+  public constructor(screens: Record<Partial<Size>, string>) {
+    this.breakpoints = Object.fromEntries(
+      Object.entries(screens).map(([k, v]) => [k, Number(v.replace('px', ''))])
+    ) as Record<Size, number>;
+
+    const resize$ = fromEvent(window, 'resize').pipe(
+      startWith(null),
+      map(() => this.getSize())
+    );
+
+    this.size = toSignal(resize$, { initialValue: this.getSize() });
+    this.index = computed(() => SIZE_ORDER.indexOf(this.size()));
+  }
+
+  public getSize(): Size {
+    const w = window.innerWidth;
+    if (w >= this.breakpoints?.['2xl']) return '2xl';
+    if (w >= this.breakpoints?.['xl']) return 'xl';
+    if (w >= this.breakpoints?.['lg']) return 'lg';
+    if (w >= this.breakpoints?.['md']) return 'md';
+    if (w >= this.breakpoints?.['sm']) return 'sm';
+    if (w >= this.breakpoints?.['xs']) return 'xs';
+    return 'xxs';
+  }
+
+  public isBiggerThan(screen: Size): boolean {
+    return window.innerWidth >= this.breakpoints?.[screen];
+  }
+
+  public isSmallerThan(screen: Size): boolean {
+    return window.innerWidth < this.breakpoints?.[screen];
+  }
+
+  public isBiggerThan$(screen: Size): boolean {
+    return this.index() >= SIZE_ORDER.indexOf(screen);
+  }
+
+  public isSmallerThan$(screen: Size): boolean {
+    return this.index() < SIZE_ORDER.indexOf(screen);
+  }
+}

package/src/shared/screen-observer/sizable-base.ts

@@ -0,0 +1,70 @@
+import { computed, Directive, input } from '@angular/core';
+import { Size, SIZE_ORDER } from '../../types/sizes.type';
+
+@Directive()
+export abstract class SizableBase<TSupported extends Size> {
+  // Inputs shared by sizable components
+  public readonly size = input<Size>('md');
+  public readonly styleClass = input<string[]>([]);
+  public readonly className = input<string>('');
+
+  /** Component-specific config */
+  protected abstract readonly supportedSizes: readonly TSupported[];
+  protected abstract readonly fallbackSize: TSupported;
+
+  /** Floor any Size to the nearest supported size. */
+  protected normalizeSize = (s: Size): TSupported => {
+    const wantedIdx = SIZE_ORDER.indexOf(s);
+    if (wantedIdx === -1) return this.fallbackSize;
+    for (let i = wantedIdx; i >= 0; i--) {
+      const candidate = SIZE_ORDER[i];
+      if (this.supportedSizes.includes(candidate as TSupported)) {
+        return candidate as TSupported;
+      }
+    }
+    return this.fallbackSize;
+  };
+
+  /** Base validator: by default only allow universal size-* tokens. Subclasses widen this. */
+  protected validateStyleClass(classes: readonly string[]): string[] {
+    const allowedSizes = SIZE_ORDER.map(s => `size-${s}`);
+    return (classes ?? []).filter(c => allowedSizes.includes(c));
+  }
+
+  /** Validated styleClass as a signal; logs dropped tokens (same behavior you had). */
+  protected readonly _validatedStyleClass = computed(() => {
+    const classes = this.styleClass() ?? [];
+    const valid = this.validateStyleClass(classes);
+    if (valid.length !== classes.length) {
+      const invalid = classes.filter(c => !valid.includes(c));
+      if (invalid.length) {
+        console.warn(`${this.constructor.name}: Ignored invalid styleClass: ${invalid.join(', ')}`);
+      }
+    }
+    return valid;
+  });
+
+  /** Effective size: last size-* override wins; else normalized [size] input. */
+  protected readonly _effectiveSize = computed<TSupported>(() => {
+    const sc = this._validatedStyleClass();
+    const rawOverride = sc
+      .filter(c => c.startsWith('size-'))
+      .slice(-1)[0]
+      ?.replace(/^size-/, '') as Size | undefined;
+
+    if (rawOverride) return this.normalizeSize(rawOverride);
+    return this.normalizeSize(this.size());
+  });
+
+  /**
+   * Build final host classes:
+   * - keep ALL validated non-size tokens (align/orientation etc.) — nothing dropped
+   * - inject exactly one normalized `size-*` (matching your working code)
+   * - append `className` unchanged
+   */
+  protected buildHostClass(baseClasses: readonly string[]): string {
+    const nonSize = this._validatedStyleClass().filter(c => !c.startsWith('size-'));
+    const normalized = this._effectiveSize();
+    return [...baseClasses, `size-${normalized}`, ...nonSize, this.className()].filter(Boolean).join(' ');
+  }
+}

package/src/shared/theme-provider/generic-theme.ts

@@ -0,0 +1 @@
+//

package/src/shared/theme-provider/index.ts

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

package/src/shared/theme-provider/public-api.ts

@@ -0,0 +1 @@
+export * from './theme-provider.directive';

package/src/shared/theme-provider/theme-provider.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, HostBinding, Inject } from '@angular/core';
+import { NG_SD_COMPONENTS_CONFIG } from '../lib-provider/config-token';
+import { type NgSdComponentsConfig } from '../types';
+
+@Directive({
+  standalone: true,
+  selector: '[themeProvider]',
+})
+export class ThemeProviderDirective {
+  @HostBinding('class') class: string = '';
+  theme: string = '';
+
+  constructor(@Inject(NG_SD_COMPONENTS_CONFIG) private configuration: NgSdComponentsConfig) {
+    this.theme = this.configuration.theme;
+    this.class = `theme-${this.theme}`;
+  }
+}