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

package/projects/software-division-components/src/backoffice/datepicker/datepicker.component.css

@@ -0,0 +1,262 @@
+/*
+* This dialog in rendered at the root of the DOM.
+* For the styles to apply to the dialog, we need to apply the theme-sdc class
+* to the dialog container located here:
+* /src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts
+*/
+
+.sdc-datepicker {
+  --sdc-datepicker-label-color: var(--color-neutral-700);
+  --sdc-datepicker-label-size: var(--text-base);
+  --sdc-datepicker-label-weight: var(--font-semibold);
+  --sdc-datepicker-label-gap: var(--space-6);
+  --sdc-datepicker-label-width: auto;
+  --sdc-datepicker-input-width: 100%;
+  --sdc-datepicker-input-background: var(--color-pure-white);
+  --sdc-datepicker-input-border-color: var(--color-neutral-300);
+  --sdc-datepicker-input-border-width: var(--border-default);
+  --sdc-datepicker-input-border-radius: var(--radius-full);
+  --sdc-datepicker-input-padding-vertical: var(--space-2);
+  --sdc-datepicker-input-padding-horizontal: var(--space-3);
+  --sdc-datepicker-input-text-color: var(--color-neutral-900);
+  --sdc-datepicker-input-text-size: var(--text-base);
+  --sdc-datepicker-input-text-weight: var(--font-medium);
+  --sdc-datepicker-input-border-hover: var(--color-neutral-500);
+  --sdc-datepicker-input-focus-ring-width: var(--border-default);
+  --sdc-datepicker-input-focus-ring-color: var(--color-primary);
+  --sdc-datepicker-input-focus-ring-offset: var(--border-2);
+  --sdc-datepicker-placeholder-color: var(--color-neutral-500);
+  --sdc-datepicker-placeholder-size: var(--text-sm);
+  --sdc-datepicker-placeholder-weight: var(--font-medium);
+  --sdc-datepicker-hint-color: var(--color-neutral-600);
+  --sdc-datepicker-hint-size: var(--text-xs);
+  --sdc-datepicker-error-color: var(--color-danger);
+  --sdc-datepicker-error-size: var(--text-xs);
+  --sdc-datepicker-calendar-background: var(--color-pure-white);
+  --sdc-datepicker-calendar-border-color: var(--color-neutral-200);
+  --sdc-datepicker-calendar-border-width: var(--border-default);
+  --sdc-datepicker-calendar-border-radius: var(--radius-lg);
+  --sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --sdc-datepicker-calendar-padding: var(--space-4);
+  --sdc-datepicker-month-year-text-color: var(--color-neutral-900);
+  --sdc-datepicker-month-year-text-size: var(--text-base);
+  --sdc-datepicker-month-year-text-weight: var(--font-semibold);
+  --sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);
+  --sdc-datepicker-month-year-padding: var(--space-2);
+  --sdc-datepicker-month-year-button-background: var(--color-pure-white);
+  --sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);
+  --sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);
+  --sdc-datepicker-day-button-disabled-background: transparent;
+  --sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);
+  --sdc-datepicker-day-button-background: transparent;
+  --sdc-datepicker-day-button-text-color: var(--color-neutral-900);
+  --sdc-datepicker-day-button-text-size: var(--text-sm);
+  --sdc-datepicker-day-button-text-weight: var(--font-semibold);
+  --sdc-datepicker-day-button-border-radius: var(--radius-md);
+  --sdc-datepicker-day-button-padding: var(--space-2);
+  --sdc-datepicker-day-button-hover-background: var(--color-secondary);
+  --sdc-datepicker-day-button-hover-text-color: var(--color-pure-white);
+}
+
+.component-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sdc-datepicker-label-gap);
+  width: var(--sdc-datepicker-input-width);
+}
+
+.component-container hlm-date-picker {
+  width: var(--sdc-datepicker-input-width);
+}
+
+/* Label styles */
+.sdc-datepicker-label {
+  font-weight: var(--sdc-datepicker-label-weight);
+  font-size: var(--sdc-datepicker-label-size);
+  color: hsl(var(--sdc-datepicker-label-color));
+  width: var(--sdc-datepicker-label-width);
+  padding-left: var(--sdc-datepicker-input-padding-horizontal);
+  line-height: 1.25rem;
+  display: block;
+}
+
+.component-container:has(.sdc-datepicker-label.left) {
+  padding-left: 0;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Date picker input styles */
+.sdc-datepicker button[brnpopovertrigger] {
+  width: var(--sdc-datepicker-input-width);
+  background: var(--sdc-datepicker-input-background);
+  border: var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));
+  border-radius: var(--sdc-datepicker-input-border-radius);
+  padding: var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);
+  color: hsl(var(--sdc-datepicker-input-text-color));
+  font-size: var(--sdc-datepicker-input-text-size);
+  font-weight: var(--sdc-datepicker-input-text-weight);
+  cursor: pointer;
+  outline: none;
+}
+
+.sdc-datepicker-placeholder {
+  color: hsl(var(--sdc-datepicker-placeholder-color));
+  font-size: var(--sdc-datepicker-placeholder-size);
+  font-weight: var(--sdc-datepicker-placeholder-weight);
+}
+
+/* Focus and hover state */
+.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled) {
+  border-color: hsl(var(--sdc-datepicker-input-border-hover));
+}
+
+.sdc-datepicker button[brnpopovertrigger][data-state='open'] {
+  outline: var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));
+  outline-offset: var(--sdc-datepicker-input-focus-ring-offset);
+}
+
+/* Disabled state */
+.sdc-datepicker button[brnpopovertrigger]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: hsl(var(--color-neutral-100));
+}
+
+/* Error state */
+.sdc-datepicker-error {
+  color: hsl(var(--sdc-datepicker-error-color));
+  font-size: var(--sdc-datepicker-error-size);
+  line-height: 1rem;
+}
+
+/* Hint message styles */
+.sdc-datepicker-hint {
+  color: hsl(var(--sdc-datepicker-hint-color));
+  font-size: var(--sdc-datepicker-hint-size);
+  line-height: 1rem;
+}
+
+/* Calendar styles */
+.sdc-datepicker div[brncalendar] {
+  background: hsl(var(--sdc-datepicker-calendar-background));
+  border: var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));
+  border-radius: var(--sdc-datepicker-calendar-border-radius);
+  box-shadow: var(--sdc-datepicker-calendar-shadow);
+  padding: var(--sdc-datepicker-calendar-padding);
+}
+
+/* Month/Year selector styles */
+.sdc-datepicker div[brncalendarheader] {
+  color: hsl(var(--sdc-datepicker-month-year-text-color));
+  font-size: var(--sdc-datepicker-month-year-text-size);
+  font-weight: var(--sdc-datepicker-month-year-text-weight);
+  padding: var(--sdc-datepicker-month-year-padding);
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton],
+.sdc-datepicker button[brncalendarnextbutton] {
+  cursor: pointer;
+  color: hsl(var(--sdc-datepicker-month-year-text-color));
+  background: hsl(var(--sdc-datepicker-month-year-button-background));
+  transition: all 0.2s ease;
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton]:disabled,
+.sdc-datepicker button[brncalendarnextbutton]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  color: hsl(var(--color-neutral-100));
+}
+
+.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),
+.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled) {
+  color: hsl(var(--sdc-datepicker-month-year-button-text-color-hover));
+  background: hsl(var(--sdc-datepicker-month-year-button-background-hover));
+}
+
+/* Day button styles */
+.sdc-datepicker button[brncalendarcellbutton] {
+  background: hsl(var(--sdc-datepicker-day-button-background));
+  color: hsl(var(--sdc-datepicker-day-button-text-color));
+  font-size: var(--sdc-datepicker-day-button-text-size);
+  font-weight: var(--sdc-datepicker-day-button-text-weight);
+  border-radius: var(--sdc-datepicker-day-button-border-radius);
+  padding: var(--sdc-datepicker-day-button-padding);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled) {
+  background-color: hsl(var(--sdc-datepicker-day-button-hover-background));
+  color: hsl(var(--sdc-datepicker-day-button-hover-text-color));
+}
+
+/* .sdc-datepicker button[brncalendarcellbutton][data-selected] {
+  background-color: hsl(var(--sdc-datepicker-day-button-selected-background));
+  color: hsl(var(--sdc-datepicker-day-button-selected-text-color));
+}
+
+.sdc-datepicker button[brncalendarcellbutton][data-today] {
+  background-color: hsl(var(--sdc-datepicker-day-button-today-background));
+  color: hsl(var(--sdc-datepicker-day-button-today-text-color));
+  border: var(--sdc-datepicker-day-button-today-border-width) solid
+    hsl(var(--sdc-datepicker-day-button-today-border-color));
+} */
+
+.sdc-datepicker button[brncalendarcellbutton]:disabled {
+  background-color: hsl(var(--sdc-datepicker-day-button-disabled-background));
+  color: hsl(var(--sdc-datepicker-day-button-disabled-text-color));
+  cursor: not-allowed;
+}
+
+/* Variant styles */
+.variant-primary.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-primary);
+}
+
+.variant-secondary.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-secondary);
+}
+
+.variant-alternative.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-alternative);
+}
+
+.variant-success.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-success);
+}
+
+.variant-warning.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-warning);
+}
+
+.variant-danger.sdc-datepicker {
+  --sdc-datepicker-day-button-hover-background: var(--color-danger);
+}
+
+/* Radius variations */
+.radius-default.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-default);
+  --sdc-datepicker-day-button-border-radius: var(--radius-default);
+}
+
+.radius-sm.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-sm);
+  --sdc-datepicker-day-button-border-radius: var(--radius-sm);
+}
+
+.radius-md.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-md);
+  --sdc-datepicker-day-button-border-radius: var(--radius-md);
+}
+
+.radius-lg.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-lg);
+  --sdc-datepicker-day-button-border-radius: var(--radius-lg);
+}
+
+.radius-xl.sdc-datepicker {
+  --sdc-datepicker-input-border-radius: var(--radius-xl);
+  --sdc-datepicker-day-button-border-radius: var(--radius-xl);
+}

package/projects/software-division-components/src/backoffice/datepicker/datepicker.component.html

@@ -0,0 +1,40 @@
+<div [class]="computedClass()">
+  <div class="component-container">
+    <!-- Label positioned above or to the left -->
+    @if (showLabel()) {
+      <label [class]="labelClass()" [for]="name()">
+        {{ label() }}
+      </label>
+    }
+
+    <!-- The styleClass is applied to the date picker's dialog -->
+    <hlm-date-picker
+      [styleClass]="computedClass()"
+      [id]="name()"
+      [min]="minDate()!"
+      [max]="maxDate()!"
+      [date]="safeDate()"
+      [formatDate]="formatDate()"
+      [autoCloseOnSelect]="autoCloseOnSelect()"
+      [disabled]="disabled()"
+      (changed)="handleDateChange($event)">
+      @if (placeholder()) {
+        <span class="sdc-datepicker-placeholder">{{ placeholder() }}</span>
+      }
+    </hlm-date-picker>
+  </div>
+
+  <!-- Error message  -->
+  @if (showError()) {
+    <div class="sdc-datepicker-error">
+      {{ currentErrorMessage() }}
+    </div>
+  }
+
+  <!-- Hint message -->
+  @if (hint() && hint().trim().length > 0 && !showError()) {
+    <div class="sdc-datepicker-hint">
+      {{ hint() }}
+    </div>
+  }
+</div>

package/projects/software-division-components/src/backoffice/datepicker/datepicker.component.ts

@@ -0,0 +1,366 @@
+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/projects/software-division-components/src/backoffice/datepicker/index.ts

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

package/{backoffice/datepicker/public-api.d.ts → projects/software-division-components/src/backoffice/datepicker/public-api.ts}

@@ -1,2 +1,2 @@
+// Export the main form component
 export * from './datepicker.component';
-//# sourceMappingURL=public-api.d.ts.map