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

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

@@ -0,0 +1,167 @@
+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 { HlmIcon } from '../../../ui-icon-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/projects/software-division-components/src/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/projects/software-division-components/src/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/projects/software-division-components/src/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;
+			}
+		}
+	});
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { HlmPopoverClose } from './lib/hlm-popover-close';
+import { HlmPopoverContent } from './lib/hlm-popover-content';
+
+export * from './lib/hlm-popover-close';
+export * from './lib/hlm-popover-content';
+
+export const HlmPopoverImports = [HlmPopoverContent, HlmPopoverClose] as const;
+
+@NgModule({
+	imports: [...HlmPopoverImports],
+	exports: [...HlmPopoverImports],
+})
+export class HlmPopoverModule {}

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

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmPopoverClose],[brnPopoverClose][hlm]',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPopoverClose {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,30 @@
+import { Directive, ElementRef, Renderer2, computed, effect, inject, input, signal } from '@angular/core';
+import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmPopoverContent],[brnPopoverContent][hlm]',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmPopoverContent {
+	private readonly _stateProvider = injectExposesStateProvider({ host: true });
+	public state = this._stateProvider.state ?? signal('closed');
+	private readonly _renderer = inject(Renderer2);
+	private readonly _element = inject(ElementRef);
+
+	constructor() {
+		effect(() => {
+			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+		});
+	}
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'relative border-border w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			this.userClass(),
+		),
+	);
+}

package/projects/software-division-components/src/backoffice/index.ts

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

package/projects/software-division-components/src/backoffice/input/index.ts

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

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

@@ -0,0 +1,319 @@
+/* Base styles */
+.sdc-input {
+  --sdc-input-label-color: var(--color-neutral-700);
+  --sdc-input-label-size: var(--text-base);
+  --sdc-input-label-weight: var(--font-semibold);
+  --sdc-input-label-gap: var(--space-6);
+  --sdc-input-field-background: var(--color-pure-white);
+  --sdc-input-field-border-color: var(--color-neutral-300);
+  --sdc-input-field-border-width: var(--border-default);
+  --sdc-input-field-border-radius: var(--radius-full);
+  --sdc-input-field-text-color: var(--color-neutral-900);
+  --sdc-input-field-text-size: var(--text-base);
+  --sdc-input-field-placeholder-size: var(--text-sm);
+  --sdc-input-field-placeholder-color: var(--color-neutral-300);
+  --sdc-input-field-placeholder-weight: var(--font-medium);
+  --sdc-input-field-vertical-padding: var(--space-2);
+  --sdc-input-field-horizontal-padding: var(--space-3);
+  --sdc-input-field-height: auto;
+  --sdc-input-field-width: 100%;
+  --sdc-input-focus-ring-width: var(--border-2);
+  --sdc-input-focus-ring-color: var(--color-primary);
+  --sdc-input-focus-ring-offset: var(--border-2);
+  --sdc-input-error-color: var(--color-danger);
+  --sdc-input-error-text-size: var(--text-xs);
+  --sdc-input-hint-color: var(--color-neutral-500);
+  --sdc-input-hint-size: var(--text-xs);
+}
+
+/* Label styles */
+.sdc-input-label {
+  font-weight: var(--sdc-input-label-weight);
+  color: hsl(var(--sdc-input-label-color));
+  font-size: var(--sdc-input-label-size);
+  padding-left: var(--sdc-input-field-horizontal-padding);
+  line-height: 1.25rem;
+  display: block;
+}
+
+/* Label positioning - left position changes layout to horizontal */
+.component-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sdc-input-label-gap);
+  width: var(--sdc-input-field-width);
+}
+
+.component-container:has(.sdc-input-label.left) {
+  padding-left: 0;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Input field styles */
+.sdc-input-field {
+  width: var(--sdc-input-field-width);
+  height: var(--sdc-input-field-height);
+  padding: var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding);
+  background: hsl(var(--sdc-input-field-background));
+  border: var(--sdc-input-field-border-width) solid hsl(var(--sdc-input-field-border-color));
+  border-radius: var(--sdc-input-field-border-radius);
+  color: hsl(var(--sdc-input-field-text-color));
+  font-size: var(--sdc-input-field-text-size);
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+textarea.sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-xl);
+}
+
+/* Textarea resize controls */
+.resize-none textarea.sdc-input-field {
+  resize: none;
+}
+
+.resize-both textarea.sdc-input-field {
+  resize: both;
+}
+
+.resize-horizontal textarea.sdc-input-field {
+  resize: horizontal;
+}
+
+.resize-vertical textarea.sdc-input-field {
+  resize: vertical;
+}
+
+/* Input states styles */
+.sdc-input-field:focus {
+  border-color: hsl(var(--sdc-input-field-border-color));
+  box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
+}
+
+.sdc-input-field:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: hsl(var(--color-neutral-100));
+}
+
+/* Error styles */
+.sdc-input-error {
+  color: hsl(var(--sdc-input-error-color));
+  font-size: var(--sdc-input-error-text-size);
+  line-height: 1rem;
+  padding: var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding);
+}
+
+.has-error .sdc-input-field {
+  border-color: hsl(var(--sdc-input-error-color));
+}
+
+/* Size variations */
+.size-sm .sdc-input-field {
+  --sdc-input-field-height: var(--space-8);
+  --sdc-input-field-vertical-padding: var(--space-2);
+  --sdc-input-field-horizontal-padding: var(--space-3);
+  --sdc-input-field-text-size: var(--text-sm);
+  --sdc-input-field-placeholder-size: var(--text-xs);
+}
+
+.size-md .sdc-input-field {
+  --sdc-input-field-height: var(--space-10);
+  --sdc-input-field-vertical-padding: var(--space-3);
+  --sdc-input-field-horizontal-padding: var(--space-4);
+  --sdc-input-field-text-size: var(--text-base);
+  --sdc-input-field-placeholder-size: var(--text-sm);
+}
+
+.size-lg .sdc-input-field {
+  --sdc-input-field-height: var(--space-11);
+  --sdc-input-field-vertical-padding: var(--space-4);
+  --sdc-input-field-horizontal-padding: var(--space-5);
+  --sdc-input-field-text-size: var(--text-lg);
+  --sdc-input-field-placeholder-size: var(--text-base);
+}
+
+.size-xl .sdc-input-field {
+  --sdc-input-field-height: var(--space-12);
+  --sdc-input-field-vertical-padding: var(--space-5);
+  --sdc-input-field-horizontal-padding: var(--space-6);
+  --sdc-input-field-text-size: var(--text-xl);
+  --sdc-input-field-placeholder-size: var(--text-lg);
+}
+
+/* Radius variations */
+.radius-sm .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-sm);
+}
+
+.radius-default .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-default);
+}
+
+.radius-md .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-md);
+}
+
+.radius-lg .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-lg);
+}
+
+.radius-xl .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-xl);
+}
+
+.radius-2xl .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-2xl);
+}
+
+.radius-full .sdc-input-field {
+  --sdc-input-field-border-radius: var(--radius-full);
+}
+
+/* Border variations */
+.border-0 .sdc-input-field {
+  --sdc-input-field-border-width: var(--border-0);
+}
+
+.border-default .sdc-input-field {
+  --sdc-input-field-border-width: var(--border-default);
+}
+
+.border-2 .sdc-input-field {
+  --sdc-input-field-border-width: var(--border-2);
+}
+
+.border-4 .sdc-input-field {
+  --sdc-input-field-border-width: var(--border-4);
+}
+
+.border-8 .sdc-input-field {
+  --sdc-input-field-border-width: var(--border-8);
+}
+
+/* Focus states */
+.variant-primary .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-primary) / 0.1);
+}
+
+.variant-secondary .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-secondary) / 0.1);
+}
+
+.variant-alternative .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-alternative) / 0.1);
+}
+
+.variant-success .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-success) / 0.1);
+}
+
+.variant-warning .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-warning) / 0.1);
+}
+
+.variant-danger .sdc-input-field:focus {
+  box-shadow: 0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-danger) / 0.1);
+}
+
+/* Focus ring for accessibility */
+.sdc-input-field:focus-visible {
+  outline: var(--sdc-input-focus-ring-width) solid hsl(var(--sdc-input-focus-ring-color));
+  outline-offset: var(--sdc-input-focus-ring-offset);
+}
+
+/* Variant */
+.variant-primary .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-primary);
+}
+
+.variant-secondary .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-secondary);
+}
+
+.variant-alternative .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-alternative);
+}
+
+.variant-success .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-success);
+}
+
+.variant-warning .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-warning);
+}
+
+.variant-danger .sdc-input-field:focus-visible {
+  --sdc-input-focus-ring-color: var(--color-danger);
+}
+
+/* Hover states */
+.sdc-input-field:hover:not(:disabled) {
+  border-color: hsl(var(--color-neutral-400));
+}
+
+/* Placeholder styles */
+.sdc-input-field::placeholder {
+  color: hsl(var(--sdc-input-field-placeholder-color));
+  font-size: var(--sdc-input-field-placeholder-size);
+  font-weight: var(--sdc-input-field-placeholder-weight);
+  opacity: 1;
+}
+
+/* Input container for positioning the icon */
+.input-container {
+  position: relative;
+  width: 100%;
+  flex: 1;
+}
+
+/* Info icon - Hint */
+.sdc-input-hint {
+  color: hsl(var(--sdc-input-hint-color));
+  font-size: var(--sdc-input-hint-size);
+  line-height: 1rem;
+  padding-left: var(--sdc-input-field-horizontal-padding);
+}
+
+.info-icon {
+  height: calc(var(--sdc-input-field-height) - (var(--sdc-input-field-height) * 0.25));
+  position: absolute;
+  top: 50%;
+  right: var(--space-3);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--sdc-input-hint-color));
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Size-specific positioning */
+.size-sm .info-icon {
+  right: var(--space-3);
+}
+
+.size-md .info-icon {
+  right: var(--space-4);
+}
+
+.size-lg .info-icon {
+  right: var(--space-5);
+}
+
+.size-xl .info-icon {
+  right: var(--space-6);
+}
+
+.info-icon-symbol {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.info-icon-svg {
+  width: 16px;
+  height: 16px;
+}

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

@@ -0,0 +1,51 @@
+<div [class]="computedClass()">
+  <div class="component-container">
+    <!-- Label positioned above or to the left -->
+    @if (showLabel()) {
+      <label [class]="labelClass()" [for]="name()">
+        {{ label() }}
+      </label>
+    }
+
+    <div class="input-container">
+      @if (isTextarea()) {
+        <textarea
+          [rows]="textareaRows()"
+          [cols]="textareaCols()"
+          [id]="name()"
+          [name]="name()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          (focus)="handleFocus($event)"
+          (blur)="handleBlur($event)"
+          (input)="handleInput($event)"
+          class="sdc-input-field"></textarea>
+      } @else {
+        <input
+          [id]="name()"
+          [name]="name()"
+          [type]="type()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          (focus)="handleFocus($event)"
+          (blur)="handleBlur($event)"
+          (input)="handleInput($event)"
+          class="sdc-input-field" />
+      }
+    </div>
+  </div>
+
+  <!-- Error message  -->
+  @if (showError()) {
+    <div class="sdc-input-error">
+      {{ currentErrorMessage() }}
+    </div>
+  }
+
+  <!-- Hint message -->
+  @if (hint() && hint().trim().length > 0 && !showError()) {
+    <div class="sdc-input-hint">
+      {{ hint() }}
+    </div>
+  }
+</div>