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

package/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/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/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/src/backoffice/index.ts

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

package/src/backoffice/input/index.ts

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

package/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/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>