@3ddv/software-division-components 1.5.0 → 2.0.0-beta.0

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

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

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

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

@@ -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();
+}

package/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts

@@ -0,0 +1,167 @@
+import { HlmIcon } from '@3ddv/software-division-components/generic/icon';
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  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 { HlmCalendar } from '../../../ui-calendar-helm/src';
+import { HlmPopoverContent } from '../../../ui-popover-helm/src';
+import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
+
+export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmDatePicker),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-date-picker',
+  imports: [NgIcon, HlmIcon, BrnPopover, BrnPopoverTrigger, BrnPopoverContent, HlmPopoverContent, HlmCalendar],
+  providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideIcons({ lucideCalendar })],
+  template: `
+    <brn-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+      <button type="button" [class]="_computedClass()" [disabled]="_state().disabled()" brnPopoverTrigger>
+        <span class="truncate">
+          @if (_formattedDate(); as formattedDate) {
+            {{ formattedDate }}
+          } @else {
+            <ng-content />
+          }
+        </span>
+
+        <ng-icon hlm size="sm" name="lucideCalendar" />
+      </button>
+
+      <div hlmPopoverContent [class]="styleClass()" class="w-auto p-0" *brnPopoverContent="let ctx">
+        <hlm-calendar
+          calendarClass="border-0 rounded-none"
+          [date]="date()"
+          [min]="min()"
+          [max]="max()"
+          [disabled]="_state().disabled()"
+          (dateChange)="_handleChange($event)" />
+      </div>
+    </brn-popover>
+  `,
+  host: {
+    class: 'block',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmDatePicker<T> implements ControlValueAccessor {
+  private readonly _config = injectHlmDatePickerConfig<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 transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background transition-colors border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground w-[280px] justify-start text-left font-normal cursor-default justify-between',
+      '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()
+    )
+  );
+
+  /**
+   * This is used to apply the theme-sdc class to the datepicker's dialog.
+   */
+  public readonly styleClass = input<string>('');
+
+  /** 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>();
+
+  /** If true, the date picker will close when a date is selected. */
+  public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
+    transform: booleanAttribute,
+  });
+
+  /** Defines how the date should be displayed in the UI.  */
+  public readonly formatDate = input<(date: T) => string>(this._config.formatDate);
+
+  /** Defines how the date should be transformed before saving to model/form. */
+  public readonly transformDate = input<(date: T) => T>(this._config.transformDate);
+
+  protected readonly _popoverState = signal<BrnDialogState | null>(null);
+
+  protected readonly _state = computed(() => ({
+    disabled: signal(this.disabled()),
+  }));
+
+  protected readonly _formattedDate = computed(() => {
+    const date = this.date();
+    return date ? this.formatDate()(date) : undefined;
+  });
+
+  public readonly changed = output<T>();
+
+  protected _onChange?: ChangeFn<T>;
+  protected _onTouched?: TouchFn;
+
+  protected _handleChange(value: T) {
+    if (this._state().disabled()) return;
+    const transformedDate = this.transformDate()(value);
+
+    this.date.set(transformedDate);
+    this._onChange?.(transformedDate);
+    this.changed.emit(transformedDate);
+
+    if (this.autoCloseOnSelect()) {
+      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.transformDate()(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-icon-helm/src/index.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { HlmIcon } from './lib/hlm-icon';
+
+export * from './lib/hlm-icon';
+export * from './lib/hlm-icon.token';
+
+@NgModule({
+	imports: [HlmIcon],
+	exports: [HlmIcon],
+})
+export class HlmIconModule {}

package/backoffice/datepicker/ui/ui-icon-helm/src/lib/hlm-icon.token.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, ValueProvider, inject } from '@angular/core';
+import type { IconSize } from './hlm-icon';
+
+export interface HlmIconConfig {
+	size: IconSize;
+}
+
+const defaultConfig: HlmIconConfig = {
+	size: 'base',
+};
+
+const HlmIconConfigToken = new InjectionToken<HlmIconConfig>('HlmIconConfig');
+
+export function provideHlmIconConfig(config: Partial<HlmIconConfig>): ValueProvider {
+	return { provide: HlmIconConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmIconConfig(): HlmIconConfig {
+	return inject(HlmIconConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,35 @@
+import { Directive, computed, input } from '@angular/core';
+import { injectHlmIconConfig } from './hlm-icon.token';
+
+export type IconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'none' | (Record<never, never> & string);
+
+@Directive({
+	selector: 'ng-icon[hlm]',
+	host: {
+		'[style.--ng-icon__size]': '_computedSize()',
+	},
+})
+export class HlmIcon {
+	private readonly _config = injectHlmIconConfig();
+	public readonly size = input<IconSize>(this._config.size);
+
+	protected readonly _computedSize = computed(() => {
+		const size = this.size();
+
+		switch (size) {
+			case 'xs':
+				return '12px';
+			case 'sm':
+				return '16px';
+			case 'base':
+				return '24px';
+			case 'lg':
+				return '32px';
+			case 'xl':
+				return '48px';
+			default: {
+				return size;
+			}
+		}
+	});
+}