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

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

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

package/src/backoffice/input/index.ts

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

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