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

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

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

@@ -0,0 +1,14 @@
+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/projects/software-division-components/src/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar-multi.ts

@@ -0,0 +1,183 @@
+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'
+  );
+}

package/projects/software-division-components/src/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar.ts

@@ -0,0 +1,171 @@
+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 {
+  BrnCalendar,
+  BrnCalendarCell,
+  BrnCalendarCellButton,
+  BrnCalendarGrid,
+  BrnCalendarHeader,
+  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',
+  imports: [
+    BrnCalendar,
+    BrnCalendarHeader,
+    BrnCalendarNextButton,
+    BrnCalendarPreviousButton,
+    BrnCalendarWeekday,
+    BrnCalendarWeek,
+    BrnCalendarCellButton,
+    BrnCalendarCell,
+    BrnCalendarGrid,
+    NgIcon,
+    HlmIcon,
+  ],
+  viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
+  template: `
+    <div
+      brnCalendar
+      [min]="min()"
+      [max]="max()"
+      [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="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute left-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium 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="focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground text-popover-foreground absolute right-1 inline-flex size-8 items-center justify-center whitespace-nowrap rounded-md bg-transparent p-0 text-sm font-medium 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 size-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 HlmCalendar<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>();
+
+  /** 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(BrnCalendar);
+
+  /** 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 dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+    'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50'
+  );
+}

package/projects/software-division-components/src/backoffice/datepicker/ui/ui-date-picker-helm/src/index.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { HlmDatePicker } from './lib/hlm-date-picker';
+import { HlmDatePickerMulti } from './lib/hlm-date-picker-multi';
+
+export * from './lib/hlm-date-picker.token';
+
+export * from './lib/hlm-date-picker';
+export * from './lib/hlm-date-picker-multi';
+
+export const HlmDatePickerImports = [HlmDatePicker, HlmDatePickerMulti] as const;
+
+@NgModule({
+	imports: [...HlmDatePickerImports],
+	exports: [...HlmDatePickerImports],
+})
+export class HlmDatePickerModule {}

package/projects/software-division-components/src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.token.ts

@@ -0,0 +1,43 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerMultiConfig<T> {
+	/**
+	 * If true, the date picker will close when the max selection of dates is reached.
+	 */
+	autoCloseOnMaxSelection: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param dates
+	 * @returns formatted date
+	 */
+	formatDates: (dates: T[]) => string;
+
+	/**
+	 * Defines how the date should be transformed before saving to model/form.
+	 *
+	 * @param dates
+	 * @returns transformed date
+	 */
+	transformDates: (dates: T[]) => T[];
+}
+
+function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
+	return {
+		formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
+		transformDates: (dates) => dates,
+		autoCloseOnMaxSelection: false,
+	};
+}
+
+const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');
+
+export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
+	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerMultiConfig<T>(): HlmDatePickerMultiConfig<T> {
+	const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerMultiConfig<T>) : getDefaultConfig();
+}

package/projects/software-division-components/src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.ts

@@ -0,0 +1,177 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  numberAttribute,
+  output,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCalendar } from '@ng-icons/lucide';
+import { hlm } from '@spartan-ng/brain/core';
+import { BrnDialogState } from '@spartan-ng/brain/dialog';
+import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import { BrnPopover, BrnPopoverContent, BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+import type { ClassValue } from 'clsx';
+import { HlmCalendarMulti } from '../../../ui-calendar-helm/src';
+import { HlmIcon } from '../../../ui-icon-helm/src';
+import { HlmPopoverContent } from '../../../ui-popover-helm/src';
+import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
+
+export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmDatePickerMulti),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-date-picker-multi',
+  imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendarMulti],
+  providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+  template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+      </button>
+
+      <div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar-multi
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [minSelection]="minSelection()"
+          [maxSelection]="maxSelection()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `,
+  host: {
+    class: 'block',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmDatePickerMulti<T> implements ControlValueAccessor {
+  private readonly _config = injectHlmDatePickerMultiConfig<T>();
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+      !this.date() ? 'text-muted-foreground' : '',
+      this.userClass()
+    )
+  );
+
+  /** 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[]>();
+
+  /** If true, the date picker will close when the max selection of dates is reached.. */
+  public readonly autoCloseOnMaxSelection = input<boolean, BooleanInput>(this._config.autoCloseOnMaxSelection, {
+    transform: booleanAttribute,
+  });
+
+  /** Defines how the date should be displayed in the UI.  */
+  public readonly formatDates = input<(date: T[]) => string>(this._config.formatDates);
+
+  /** Defines how the date should be transformed before saving to model/form. */
+  public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);
+
+  protected readonly _popoverState = signal<BrnDialogState | null>(null);
+
+  protected readonly _state = computed(() => ({
+    disabled: signal(this.disabled()),
+  }));
+
+  protected readonly _formattedDate = computed(() => {
+    const dates = this.date();
+    return dates ? this.formatDates()(dates) : undefined;
+  });
+
+  public readonly changed = output<T[]>();
+
+  protected _onChange?: ChangeFn<T[]>;
+  protected _onTouched?: TouchFn;
+
+  protected _handleChange(value: T[] | undefined) {
+    if (value === undefined) return;
+
+    if (this._state().disabled()) return;
+    const transformedDate = this.transformDates()(value);
+
+    this.date.set(transformedDate);
+    this._onChange?.(transformedDate);
+    this.changed.emit(transformedDate);
+
+    if (this.autoCloseOnMaxSelection() && this.date()?.length === this.maxSelection()) {
+      this._popoverState.set('closed');
+    }
+  }
+
+  /** CONROL VALUE ACCESSOR */
+  writeValue(value: T[] | null): void {
+    // optional FormControl is initialized with null value
+    if (value === null) return;
+
+    this.date.set(this.transformDates()(value));
+  }
+
+  registerOnChange(fn: ChangeFn<T[]>): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._state().disabled.set(isDisabled);
+  }
+
+  open() {
+    this._popoverState.set('open');
+  }
+
+  close() {
+    this._popoverState.set('closed');
+  }
+}

package/projects/software-division-components/src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.token.ts

@@ -0,0 +1,43 @@
+import { inject, InjectionToken, ValueProvider } from '@angular/core';
+
+export interface HlmDatePickerConfig<T> {
+	/**
+	 * If true, the date picker will close when a date is selected.
+	 */
+	autoCloseOnSelect: boolean;
+
+	/**
+	 * Defines how the date should be displayed in the UI.
+	 *
+	 * @param date
+	 * @returns formatted date
+	 */
+	formatDate: (date: T) => string;
+
+	/**
+	 * Defines how the date should be transformed before saving to model/form.
+	 *
+	 * @param date
+	 * @returns transformed date
+	 */
+	transformDate: (date: T) => T;
+}
+
+function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
+	return {
+		formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
+		transformDate: (date) => date,
+		autoCloseOnSelect: false,
+	};
+}
+
+const HlmDatePickerConfigToken = new InjectionToken<HlmDatePickerConfig<unknown>>('HlmDatePickerConfig');
+
+export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerConfig<T>>): ValueProvider {
+	return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
+}
+
+export function injectHlmDatePickerConfig<T>(): HlmDatePickerConfig<T> {
+	const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
+	return injectedConfig ? (injectedConfig as HlmDatePickerConfig<T>) : getDefaultConfig();
+}