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

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

@@ -1,262 +0,0 @@
-/*
-* 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

@@ -1,40 +0,0 @@
-<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

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

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

package/projects/software-division-components/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"
-      />
-    `,
-  }),
-};