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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-<div [class]="computedClass()">
-  <div class="component-container">
-    <!-- Label positioned above or to the left -->
-    @if (showLabel()) {
-      <label [class]="labelClass()" [for]="name()">
-        {{ label() }}
-      </label>
-    }
-
-    <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>