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

package/src/backoffice/datepicker/datepicker.component.ts

@@ -1,366 +0,0 @@
-import { Component, computed, input, OnDestroy, OnInit, output, signal } from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormSubmittedEvent,
-  PristineChangeEvent,
-  ReactiveFormsModule,
-  TouchedChangeEvent,
-  ValidationErrors,
-} from '@angular/forms';
-import { BrnNativeDateAdapter, provideDateAdapter } from '@spartan-ng/brain/date-time';
-import { Subscription } from 'rxjs';
-import { ThemeClass } from '../../shared/types';
-import { HlmDatePicker } from './ui/ui-date-picker-helm/src';
-
-export type DatePickerStyleClasses = ReturnType<(typeof DatePickerComponent.prototype)['styleClass']>;
-
-/**
- * A customizable datepicker component built on Spartan UI datepicker component.
- *
- * This component supports various configurations and exposes all native datepicker functionality.
- * All HTML datepicker attributes and events are automatically forwarded to the inner datepicker element.
- *
- * @since 1.0.0-alpha.1
- */
-@Component({
-  standalone: true,
-  selector: 'sdc-datepicker',
-  styleUrls: ['./datepicker.component.css'],
-  templateUrl: './datepicker.component.html',
-  imports: [ReactiveFormsModule, HlmDatePicker],
-  providers: [provideDateAdapter(BrnNativeDateAdapter)],
-})
-export class DatePickerComponent implements OnInit, OnDestroy {
-  private readonly allowedVariants = [
-    'variant-primary',
-    'variant-secondary',
-    'variant-alternative',
-    'variant-success',
-    'variant-warning',
-    'variant-danger',
-  ] as const;
-  private readonly allowedRadius = ['radius-default', 'radius-sm', 'radius-md', 'radius-lg', 'radius-xl'] as const;
-
-  /**
-   * The current theme applied to the component.
-   */
-  public readonly theme = input<ThemeClass>('theme-sdc');
-
-  /**
-   * Predefined styles to apply to the component.
-   * Can be a single class or multiple classes from different categories.
-   */
-  public readonly styleClass = input<((typeof this.allowedVariants)[number] | (typeof this.allowedRadius)[number])[]>(
-    []
-  );
-
-  // Computed signal that validates and filters the styleClass datepicker
-  private readonly _validatedStyleClass = computed(() => {
-    const value = this.styleClass();
-
-    if (!Array.isArray(value)) {
-      return [];
-    }
-
-    const validValues = value.filter(style => {
-      return (
-        (this.allowedVariants as readonly string[]).includes(style) ||
-        (this.allowedRadius as readonly string[]).includes(style)
-      );
-    });
-
-    const invalidValues = value.filter(style => {
-      return (
-        !(this.allowedVariants as readonly string[]).includes(style) &&
-        !(this.allowedRadius as readonly string[]).includes(style)
-      );
-    });
-
-    if (invalidValues.length > 0) {
-      throw new Error(
-        `DatePickerComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
-          ...this.allowedVariants,
-          ...this.allowedRadius,
-        ].join(', ')}`
-      );
-    }
-
-    return validValues;
-  });
-
-  /**
-   * Additional CSS classes to apply to the component.
-   */
-  public readonly className = input<string>('');
-
-  /**
-   * The label text to be displayed.
-   * Only visible when a value is provided.
-   */
-  public readonly label = input<string>('');
-
-  /**
-   * The position of the label relative to the datepicker.
-   * 'top' places the label above the datepicker, 'left' places it to the left.
-   */
-  public readonly labelPosition = input<'top' | 'left'>('top');
-
-  /**
-   * The placeholder text for the datepicker.
-   */
-  public readonly placeholder = input<string>('');
-
-  /**
-   * Whether the component is disabled.
-   */
-  public readonly disabled = input<boolean>(false);
-
-  /**
-   * The hint text for the datepicker.
-   */
-  public readonly hint = input<string>('');
-
-  /**
-   * The name of the form control.
-   */
-  public readonly name = input<string>('');
-
-  /**
-   * The maximum date for the datepicker.
-   */
-  public readonly maxDate = input<Date | null>(null);
-
-  /**
-   * The minimum date for the datepicker.
-   */
-  public readonly minDate = input<Date | null>(null);
-
-  /**
-   * Whether the datepicker should close when a date is selected.
-   */
-  public readonly autoCloseOnSelect = input<boolean>(false);
-
-  /**
-   * Custom error message to override the validator's error message.
-   */
-  public readonly errorMessage = input<string>('');
-
-  /**
-   * Controls when errors are displayed.
-   * - 'after-submit': Show errors only after form submission (default)
-   * - 'always': Show errors immediately when validation fails
-   */
-  public readonly errorDisplayMode = input<'always' | 'after-submit'>('after-submit');
-
-  /**
-   * The FormControl instance to bind to this datepicker.
-   * This allows the component to access form state without circular dependencies.
-   */
-  public readonly control = input<AbstractControl<null | undefined> | FormControl | null>(null);
-
-  /**
-   * Callback function to format the date display.
-   * Receives a Date object and returns a formatted string.
-   */
-  public readonly formatDate = input<(date: Date) => string>(this.defaultFormatDate);
-
-  /**
-   * Component subscriptions.
-   */
-  private subscriptions: (Subscription | undefined)[] = [];
-
-  /**
-   * The current selected date value.
-   */
-  public readonly date = signal<Date | undefined>(undefined);
-
-  /**
-   * Computed signal that ensures the date is always either a valid Date object or undefined.
-   * This prevents null values from being passed to the Spartan calendar component.
-   */
-  protected readonly safeDate = computed(() => {
-    if (this.date() instanceof Date || this.date() === undefined) {
-      return this.date();
-    }
-
-    throw new Error('DatePickerComponent: date must be a valid Date object or undefined');
-  });
-
-  /**
-   * The state of the form control.
-   */
-  public readonly controlState = signal<{
-    invalid: boolean;
-    touched: boolean;
-    dirty: boolean;
-    errors: ValidationErrors | null | undefined;
-    value: Date | undefined;
-    isFormSubmitted: boolean;
-  }>({ invalid: false, touched: false, dirty: false, errors: null, value: undefined, isFormSubmitted: false });
-
-  /**
-   * Event emitted when the date value changes.
-   */
-  public readonly dateChange = output<Date | null>();
-
-  /**
-   * Computed class string that combines theme and user classes.
-   */
-  protected readonly computedClass = computed(() => {
-    const themeClass = this.theme();
-    const styleClass = this._validatedStyleClass();
-    const className = this.className();
-    const errorClass = this.showError() ? 'has-error' : '';
-
-    return ['sdc-datepicker', themeClass, ...styleClass, className, errorClass].filter(Boolean).join(' ');
-  });
-
-  /**
-   * Computed class string for the label positioning.
-   */
-  protected readonly labelClass = computed(() => {
-    const position = this.labelPosition();
-    return position === 'left' ? 'sdc-datepicker-label left' : 'sdc-datepicker-label top';
-  });
-
-  /**
-   * Computed signal to determine if the label should be visible.
-   */
-  protected readonly showLabel = computed(() => {
-    return this.label() && this.label().trim().length > 0;
-  });
-
-  /**
-   * Computed signal to get the current error message.
-   */
-  protected readonly currentErrorMessage = computed(() => {
-    const customMessage = this.errorMessage();
-    const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
-
-    if (hasErrors && customMessage && customMessage.trim().length > 0) {
-      return customMessage;
-    }
-
-    // If no custom message, try to get validation error from the form control state
-    if (hasErrors) {
-      const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
-      const firstErrorValue = this.controlState()?.errors?.[firstErrorKey];
-      return this.getValidatorErrorMessage(firstErrorKey, firstErrorValue);
-    }
-
-    return '';
-  });
-
-  /**
-   * Computed signal to determine if there's an error to display.
-   */
-  protected readonly showError = computed(() => {
-    const errorMode = this.errorDisplayMode();
-
-    // For validation errors, respect the error display mode
-    if (this.controlState()?.invalid) {
-      if (errorMode === 'always') {
-        // Show errors when component is touched and invalid
-        return this.controlState()?.touched || this.controlState()?.dirty || this.controlState()?.isFormSubmitted;
-      } else if (errorMode === 'after-submit') {
-        // Show errors when form is submitted, regardless of touch/focus state
-        return this.controlState()?.isFormSubmitted;
-      }
-    }
-
-    return false;
-  });
-
-  ngOnInit(): void {
-    // Validate the name datepicker
-    if ((this.control() || this.showLabel()) && !this.name()) {
-      throw new Error('DatePickerComponent: name is required when control or label inputs are present');
-    }
-
-    // Initialize the date value from the form control if it exists
-    if (this.control()) {
-      const initialValue = this.control()?.value;
-      // Ensure we start with undefined, if no value is provided
-      this.date.set(initialValue instanceof Date ? initialValue : undefined);
-    }
-
-    const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
-      // We do not reset this signal because it is used to show the errors
-      // When a form is submitted at least once, we want to show the errors
-      if (event instanceof FormSubmittedEvent) {
-        this.controlState.set({ ...this.controlState(), isFormSubmitted: true });
-
-        // We add this because the statusChanges event is not triggered when the form is submitted
-        if (event.source.status === 'INVALID') {
-          this.controlState.set({ ...this.controlState(), invalid: true });
-        }
-      }
-
-      if (event instanceof TouchedChangeEvent) {
-        this.controlState.set({ ...this.controlState(), touched: event.touched });
-      }
-
-      if (event instanceof PristineChangeEvent) {
-        this.controlState.set({ ...this.controlState(), dirty: !event.pristine });
-      }
-
-      this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
-    });
-
-    const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
-      if (status === 'INVALID') {
-        this.controlState.set({ ...this.controlState(), invalid: true });
-      }
-
-      this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
-    });
-
-    this.subscriptions.push(formEventsSubscription, statusChangesSubscription);
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-  }
-
-  private defaultFormatDate(date: Date): string {
-    return date.toLocaleDateString('en-GB', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-    });
-  }
-
-  /**
-   * Handles date change events from the Spartan date picker.
-   */
-  protected handleDateChange(date: Date | null): void {
-    // Convert null to undefined for the signal to prevent null values
-    const dateValue = date instanceof Date ? date : undefined;
-    this.date.set(dateValue);
-    this.dateChange.emit(date);
-
-    // Update the form control value if it exists
-    const control = this.control();
-    if (control) {
-      control.setValue(date);
-      control.markAsDirty();
-      control.markAsTouched();
-      this.controlState.set({ ...this.controlState(), value: dateValue });
-    }
-  }
-
-  /**
-   * Gets the error message for a specific validator error.
-   */
-  private getValidatorErrorMessage(errorKey: string, errorValue: any): string {
-    switch (errorKey) {
-      case 'required':
-        return 'This field is required.';
-      case 'pattern':
-        return 'Please enter a valid value.';
-      default:
-        return 'Please enter a valid value.';
-    }
-  }
-}

package/src/backoffice/datepicker/index.ts

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

package/src/backoffice/datepicker/public-api.ts

@@ -1,2 +0,0 @@
-// Export the main form component
-export * from './datepicker.component';

package/src/backoffice/datepicker/story/datepicker.stories.ts

@@ -1,32 +0,0 @@
-import { FormControl, Validators } from '@angular/forms';
-import type { Meta, StoryObj } from '@storybook/angular';
-import { DatePickerComponent } from '../datepicker.component';
-
-const meta: Meta<DatePickerComponent> = {
-  title: 'Backoffice/DatePicker',
-  component: DatePickerComponent,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<DatePickerComponent>;
-
-// Basic input with default settings
-export const Default: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('', [Validators.required, Validators.email]),
-    },
-    template: `
-      <sdc-datepicker
-        label="Email Address"
-        placeholder="Enter your email address"
-        type="email"
-        [formControl]="formControl"
-      />
-    `,
-  }),
-};

package/src/backoffice/datepicker/ui/ui-calendar-helm/src/index.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { HlmCalendar } from './lib/hlm-calendar';
-import { HlmCalendarMulti } from './lib/hlm-calendar-multi';
-
-export * from './lib/hlm-calendar';
-export * from './lib/hlm-calendar-multi';
-
-export const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti] as const;
-
-@NgModule({
-	imports: [...HlmCalendarImports],
-	exports: [...HlmCalendarImports],
-})
-export class HlmCalendarModule {}

package/src/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar-multi.ts

@@ -1,183 +0,0 @@
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  booleanAttribute,
-  computed,
-  input,
-  model,
-  numberAttribute,
-  viewChild,
-} from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import {
-  BrnCalendarCell,
-  BrnCalendarCellButton,
-  BrnCalendarGrid,
-  BrnCalendarHeader,
-  BrnCalendarMulti,
-  BrnCalendarNextButton,
-  BrnCalendarPreviousButton,
-  BrnCalendarWeek,
-  BrnCalendarWeekday,
-  Weekday,
-  injectBrnCalendarI18n,
-} from '@spartan-ng/brain/calendar';
-import { hlm } from '@spartan-ng/brain/core';
-import { injectDateAdapter } from '@spartan-ng/brain/date-time';
-import type { ClassValue } from 'clsx';
-import { buttonVariants } from '../../../../../../generic/button/ui/ui-button-helm/src';
-import { HlmIcon } from '../../../ui-icon-helm/src';
-
-@Component({
-  selector: 'hlm-calendar-multi',
-  imports: [
-    BrnCalendarMulti,
-    BrnCalendarHeader,
-    BrnCalendarNextButton,
-    BrnCalendarPreviousButton,
-    BrnCalendarWeekday,
-    BrnCalendarWeek,
-    BrnCalendarCellButton,
-    BrnCalendarCell,
-    BrnCalendarGrid,
-    NgIcon,
-    HlmIcon,
-  ],
-  viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
-  template: `
-    <div
-      brnCalendarMulti
-      [min]="min()"
-      [max]="max()"
-      [minSelection]="minSelection()"
-      [maxSelection]="maxSelection()"
-      [disabled]="disabled()"
-      [(date)]="date"
-      [dateDisabled]="dateDisabled()"
-      [weekStartsOn]="weekStartsOn()"
-      [defaultFocusedDate]="defaultFocusedDate()"
-      [class]="_computedCalenderClass()">
-      <div class="inline-flex flex-col space-y-4">
-        <!-- Header -->
-        <div class="space-y-4">
-          <div class="relative flex items-center justify-center pt-1">
-            <div brnCalendarHeader class="text-sm font-medium">
-              {{ _heading() }}
-            </div>
-
-            <div class="flex items-center space-x-1">
-              <button
-                brnCalendarPreviousButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute left-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
-                <ng-icon hlm name="lucideChevronLeft" size="sm" />
-              </button>
-
-              <button
-                brnCalendarNextButton
-                class="ring-offset-background focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground absolute right-1 inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md border bg-transparent p-0 text-sm font-medium opacity-50 transition-colors hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
-                <ng-icon hlm name="lucideChevronRight" size="sm" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <table class="w-full border-collapse space-y-1" brnCalendarGrid>
-          <thead>
-            <tr class="flex">
-              <th
-                *brnCalendarWeekday="let weekday"
-                scope="col"
-                class="text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal"
-                [attr.aria-label]="_i18n.labelWeekday(weekday)">
-                {{ _i18n.formatWeekdayName(weekday) }}
-              </th>
-            </tr>
-          </thead>
-
-          <tbody role="rowgroup">
-            <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
-              @for (date of week; track _dateAdapter.getTime(date)) {
-                <td
-                  brnCalendarCell
-                  class="data-[selected]:data-[outside]:bg-accent/50 data-[selected]:bg-accent relative h-8 w-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:data-[selected]:rounded-l-md last:data-[selected]:rounded-r-md [&:has([aria-selected].day-range-end)]:rounded-r-md">
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
-                    {{ _dateAdapter.getDate(date) }}
-                  </button>
-                </td>
-              }
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HlmCalendarMulti<T> {
-  public readonly calendarClass = input<ClassValue>('');
-
-  protected readonly _computedCalenderClass = computed(() => hlm('rounded-md border p-3', this.calendarClass()));
-
-  /** Access the calendar i18n */
-  protected readonly _i18n = injectBrnCalendarI18n();
-
-  /** Access the date time adapter */
-  protected readonly _dateAdapter = injectDateAdapter<T>();
-
-  /** The minimum date that can be selected.*/
-  public readonly min = input<T>();
-
-  /** The maximum date that can be selected. */
-  public readonly max = input<T>();
-
-  /** The minimum selectable dates.  */
-  public readonly minSelection = input<number, NumberInput>(undefined, {
-    transform: numberAttribute,
-  });
-
-  /** The maximum selectable dates.  */
-  public readonly maxSelection = input<number, NumberInput>(undefined, {
-    transform: numberAttribute,
-  });
-
-  /** Determine if the date picker is disabled. */
-  public readonly disabled = input<boolean, BooleanInput>(false, {
-    transform: booleanAttribute,
-  });
-
-  /** The selected value. */
-  public readonly date = model<T[]>();
-
-  /** Whether a specific date is disabled. */
-  public readonly dateDisabled = input<(date: T) => boolean>(() => false);
-
-  /** The day the week starts on */
-  public readonly weekStartsOn = input<Weekday, NumberInput>(0, {
-    transform: (v: unknown) => numberAttribute(v) as Weekday,
-  });
-
-  /** The default focused date. */
-  public readonly defaultFocusedDate = input<T>();
-
-  /** Access the calendar directive */
-  private readonly _calendar = viewChild.required(BrnCalendarMulti);
-
-  /** Get the heading for the current month and year */
-  protected readonly _heading = computed(() =>
-    this._i18n.formatHeader(
-      this._dateAdapter.getMonth(this._calendar().focusedDate()),
-      this._dateAdapter.getYear(this._calendar().focusedDate())
-    )
-  );
-
-  protected readonly _btnClass = hlm(
-    buttonVariants({ variant: 'ghost' }),
-    'size-8 p-0 font-normal aria-selected:opacity-100',
-    'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
-    'data-[today]:bg-accent data-[today]:text-accent-foreground',
-    'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-    'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50'
-  );
-}