@3ddv/software-division-components 2.0.0 → 2.0.2

package/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/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/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar-multi.ts

@@ -1,183 +0,0 @@
-import { buttonVariants } from '@3ddv/software-division-components/generic/button';
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-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';
-
-@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/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar.ts

@@ -1,171 +0,0 @@
-import { buttonVariants } from '@3ddv/software-division-components/generic/button';
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-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';
-
-@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/backoffice/datepicker/ui/ui-date-picker-helm/src/index.ts

@@ -1,16 +0,0 @@
-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/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.token.ts

@@ -1,43 +0,0 @@
-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/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.ts

@@ -1,177 +0,0 @@
-import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  booleanAttribute,
-  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 { 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/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.token.ts

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