@3ddv/software-division-components 2.0.0 → 2.0.1

package/backoffice/checkbox/checkbox.component.css

@@ -1,193 +0,0 @@
-.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-primary);
-  --sdc-checkbox-label-size: var(--text-base);
-  --sdc-checkbox-label-weight: var(--font-semibold);
-  --sdc-checkbox-label-gap: var(--space-6);
-  --sdc-checkbox-label-width: auto;
-  --sdc-checkmark-container-background: var(--color-pure-white);
-  --sdc-checkmark-container-border-color: var(--color-neutral-300);
-  --sdc-checkmark-container-border-width: var(--border-default);
-  --sdc-checkmark-container-border-radius: var(--radius-sm);
-  --sdc-checkmark-container-size: var(--space-5);
-  --sdc-checkmark-element-color: var(--color-primary);
-  --sdc-checkmark-element-border-radius: var(--radius-full);
-  --sdc-checkmark-element-line-width: var(--border-4);
-  --sdc-checkbox-error-color: var(--color-danger);
-  --sdc-checkbox-error-text-size: var(--text-xs);
-  --sdc-checkbox-error-gap: var(--space-1);
-
-  width: max-content;
-  font-size: var(--sdc-checkbox-label-size);
-  color: hsl(var(--sdc-checkbox-label-color));
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.component-container {
-  display: block;
-  position: relative;
-  cursor: pointer;
-}
-
-.checkbox-label {
-  display: block;
-  width: var(--sdc-checkbox-label-width);
-}
-
-/* Hide the browser's default checkbox */
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-/* Custom checkmark */
-.checkmark {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: var(--sdc-checkmark-container-size);
-  width: var(--sdc-checkmark-container-size);
-  background-color: hsl(var(--sdc-checkmark-container-background));
-  border: var(--sdc-checkmark-container-border-width) solid hsl(var(--sdc-checkmark-container-border-color));
-  border-radius: var(--sdc-checkmark-container-border-radius);
-}
-
-.sdc-checkbox-label-right .checkbox-label {
-  --sdc-checkbox-label-width: var(--space-24);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sdc-checkbox-label-left.sdc-checkbox .component-container {
-  padding-left: calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap));
-}
-
-.sdc-checkbox-label-right.sdc-checkbox .component-container {
-  padding-right: calc(var(--sdc-checkmark-container-size) + var(--sdc-checkbox-label-gap));
-}
-
-.sdc-checkbox-label-left .checkmark {
-  left: 0;
-  right: auto;
-}
-
-.sdc-checkbox-label-right .checkmark {
-  left: auto;
-  right: 0;
-}
-
-/* Hover state */
-.sdc-checkbox:hover .checkbox-input ~ .checkmark {
-  --sdc-checkmark-container-border-color: var(--sdc-checkmark-element-color);
-}
-
-/* Checked state */
-.checkbox-input:checked ~ .checkmark {
-  background-color: hsl(var(--sdc-checkmark-container-background));
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.checkbox-input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.checkmark:after {
-  top: calc(var(--sdc-checkmark-container-size) * 0.07);
-  left: calc(var(--sdc-checkmark-container-size) * 0.3);
-  height: calc(var(--sdc-checkmark-container-size) * 0.6);
-  width: calc(var(--sdc-checkmark-container-size) * 0.4);
-  border: solid hsl(var(--sdc-checkmark-element-color));
-  border-width: 0 var(--sdc-checkmark-element-line-width) var(--sdc-checkmark-element-line-width) 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-/* Error styles */
-.sdc-checkbox-error {
-  color: hsl(var(--sdc-checkbox-error-color));
-  font-size: var(--sdc-checkbox-error-text-size);
-  line-height: 1rem;
-  padding-top: var(--sdc-checkbox-error-gap);
-}
-
-/* Variant */
-.variant-primary.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-primary);
-  --sdc-checkmark-element-color: var(--color-primary);
-}
-
-.variant-secondary.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-secondary);
-  --sdc-checkmark-element-color: var(--color-secondary);
-}
-
-.variant-alternative.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-alternative);
-  --sdc-checkmark-element-color: var(--color-alternative);
-}
-
-.variant-success.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-success);
-  --sdc-checkmark-element-color: var(--color-success);
-}
-
-.variant-warning.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-warning);
-  --sdc-checkmark-element-color: var(--color-warning);
-}
-
-.variant-danger.sdc-checkbox {
-  --sdc-checkbox-label-color: var(--color-danger);
-  --sdc-checkmark-element-color: var(--color-danger);
-}
-
-/* Size variations */
-.size-sm.sdc-checkbox {
-  --sdc-checkbox-label-size: var(--text-sm);
-  --sdc-checkbox-label-gap: var(--space-1);
-  --sdc-checkmark-container-size: var(--space-4);
-  --sdc-checkmark-element-line-width: var(--border-3);
-
-  & .checkmark:after {
-    top: calc(var(--sdc-checkmark-container-size) * 0.07);
-    left: calc(var(--sdc-checkmark-container-size) * 0.3);
-    height: calc(var(--sdc-checkmark-container-size) * 0.5);
-    width: calc(var(--sdc-checkmark-container-size) * 0.35);
-  }
-}
-
-.size-md.sdc-checkbox {
-  --sdc-checkbox-label-size: var(--text-base);
-  --sdc-checkbox-label-gap: var(--space-2);
-  --sdc-checkmark-container-size: var(--space-5);
-  --sdc-checkmark-element-line-width: var(--border-4);
-}
-
-.size-lg.sdc-checkbox {
-  --sdc-checkbox-label-size: var(--text-lg);
-  --sdc-checkbox-label-gap: var(--space-3);
-  --sdc-checkmark-container-size: var(--space-6);
-  --sdc-checkmark-element-line-width: var(--border-4);
-}
-
-.size-xl.sdc-checkbox {
-  --sdc-checkbox-label-size: var(--text-xl);
-  --sdc-checkbox-label-gap: var(--space-4);
-  --sdc-checkmark-container-size: var(--space-7);
-  --sdc-checkmark-element-line-width: var(--border-4);
-}

package/backoffice/checkbox/checkbox.component.html

@@ -1,23 +0,0 @@
-<div [class]="computedClass()">
-  <label class="component-container" [for]="name()">
-    <span class="checkbox-label">{{ label() }}</span>
-
-    <input
-      class="checkbox-input"
-      [id]="name()"
-      [formControl]="control()"
-      type="checkbox"
-      [name]="name()"
-      [value]="value()"
-      [checked]="isChecked()" />
-
-    <span class="checkmark"></span>
-  </label>
-
-  <!-- Error message  -->
-  @if (showError()) {
-    <div class="sdc-checkbox-error">
-      {{ currentErrorMessage() }}
-    </div>
-  }
-</div>

package/backoffice/checkbox/checkbox.component.ts

@@ -1,252 +0,0 @@
-import { ThemeClass } from '@3ddv/software-division-components/shared';
-import { Component, computed, input, OnDestroy, OnInit, signal } from '@angular/core';
-import { FormControl, FormSubmittedEvent, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
-export type CheckboxStyleClasses = ReturnType<(typeof CheckboxComponent.prototype)['styleClass']>;
-
-/**
- * A customizable checkbox component.
- *
- * This component supports various configurations and exposes all Spartan UI checkbox functionality.
- * All HTML checkbox attributes and events are automatically forwarded to the inner checkbox element.
- *
- * @since 1.0.0-alpha.1
- */
-@Component({
-  standalone: true,
-  selector: 'sdc-checkbox',
-  styleUrls: ['./checkbox.component.css'],
-  templateUrl: './checkbox.component.html',
-  imports: [ReactiveFormsModule],
-})
-export class CheckboxComponent implements OnInit, OnDestroy {
-  private readonly allowedVariants = [
-    'variant-primary',
-    'variant-secondary',
-    'variant-alternative',
-    'variant-success',
-    'variant-warning',
-    'variant-danger',
-  ] as const;
-  private readonly allowedSizes = ['size-sm', 'size-md', 'size-lg', 'size-xl'] as const;
-
-  /**
-   * The current theme applied to the component.
-   */
-  public readonly theme = input<ThemeClass>('theme-sdc');
-
-  /**
-   * Predefined styles to apply to the component.
-   * Can be a single class or multiple classes from different categories.
-   */
-  public readonly styleClass = input<((typeof this.allowedVariants)[number] | (typeof this.allowedSizes)[number])[]>(
-    []
-  );
-
-  // Computed signal that validates and filters the styleClass checkbox
-  private readonly _validatedStyleClass = computed(() => {
-    const value = this.styleClass();
-
-    if (!Array.isArray(value)) {
-      return [];
-    }
-
-    const validValues = value.filter(style => {
-      return (
-        (this.allowedVariants as readonly string[]).includes(style) ||
-        (this.allowedSizes as readonly string[]).includes(style)
-      );
-    });
-
-    const invalidValues = value.filter(style => {
-      return (
-        !(this.allowedVariants as readonly string[]).includes(style) &&
-        !(this.allowedSizes as readonly string[]).includes(style)
-      );
-    });
-
-    if (invalidValues.length > 0) {
-      throw new Error(
-        `CheckboxComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
-          ...this.allowedVariants,
-          ...this.allowedSizes,
-        ].join(', ')}`
-      );
-    }
-
-    return validValues;
-  });
-
-  /**
-   * Additional CSS classes to apply to the component.
-   */
-  public readonly className = input<string>('');
-
-  /**
-   * Whether the component is disabled.
-   */
-  public readonly disabled = input<boolean>(false);
-
-  /**
-   * The label text to display above or to the left of the checkbox.
-   * Only visible when a value is provided.
-   */
-  public readonly label = input.required<string>();
-
-  /**
-   * The position of the label relative to the checkbox.
-   */
-  public readonly labelPosition = input<'left' | 'right'>('left');
-
-  /**
-   * The name of the form control.
-   */
-  public readonly name = input.required<string>();
-
-  /**
-   * The FormControl instance to bind to this checkbox.
-   * This allows the component to access form state without circular dependencies.
-   */
-  public readonly control = input.required<FormControl>();
-
-  /**
-   * The value of the checkbox.
-   */
-  public readonly value = input.required<string>();
-
-  /**
-   * Whether the checkbox is checked.
-   */
-  public readonly isChecked = signal<boolean>(false);
-
-  /**
-   * Computed class string that combines theme and user classes.
-   */
-  protected readonly computedClass = computed(() => {
-    const themeClass = this.theme();
-    const styleClass = this._validatedStyleClass();
-    const className = this.className();
-    const labelClass = this.labelPosition() === 'left' ? 'sdc-checkbox-label-left' : 'sdc-checkbox-label-right';
-    const checkedClass = this.isChecked() ? 'sdc-checkbox-checked' : '';
-    return ['sdc-checkbox', themeClass, ...styleClass, className, labelClass, checkedClass].filter(Boolean).join(' ');
-  });
-
-  /**
-   * Custom error message to override the validator's error message.
-   */
-  public readonly errorMessage = input<string>('');
-
-  /**
-   * Controls when errors are displayed.
-   * - 'after-submit': Show errors only after form submission (default)
-   * - 'always': Show errors immediately when validation fails
-   */
-  public readonly errorDisplayMode = input<'always' | 'after-submit'>('after-submit');
-
-  /**
-   * The state of the form control.
-   */
-  public readonly controlState = signal<{
-    invalid: boolean;
-    errors: ValidationErrors | null;
-    isFormSubmitted: boolean;
-  }>({ errors: null, invalid: false, isFormSubmitted: false });
-
-  /**
-   * Computed signal to get the current error message.
-   */
-  protected readonly currentErrorMessage = computed(() => {
-    const customMessage = this.errorMessage();
-    const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
-
-    if (hasErrors && customMessage && customMessage.trim().length > 0) {
-      return customMessage;
-    }
-
-    // If no custom message, try to get validation error from the form control state
-    if (hasErrors) {
-      const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
-      return this.getValidatorErrorMessage(firstErrorKey);
-    }
-
-    return '';
-  });
-
-  /**
-   * Computed signal to determine if there's an error to display.
-   */
-  protected readonly showError = computed(() => {
-    const errorMode = this.errorDisplayMode();
-
-    // For validation errors, respect the error display mode
-    if (this.controlState()?.invalid) {
-      if (errorMode === 'always') {
-        // Show errors when component is touched and invalid
-        return true;
-      } else if (errorMode === 'after-submit') {
-        // Show errors when form is submitted, regardless of touch/focus state
-        return this.controlState()?.isFormSubmitted;
-      }
-    }
-
-    return false;
-  });
-
-  /**
-   * Subscriptions to the control's value changes.
-   */
-  private readonly subscriptions: (Subscription | undefined)[] = [];
-
-  ngOnInit(): void {
-    this.isChecked.set(this.control()?.value === this.value());
-
-    const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
-      // We do not reset this signal because it is used to show the errors
-      // When a form is submitted at least once, we want to show the errors
-      if (event instanceof FormSubmittedEvent) {
-        this.controlState.set({
-          ...this.controlState(),
-          isFormSubmitted: true,
-          errors: this.control()?.errors || null,
-        });
-
-        // We add this because the statusChanges event is not triggered when the form is submitted
-        if (event.source.status === 'INVALID') {
-          this.controlState.set({ ...this.controlState(), invalid: true });
-        }
-      }
-    });
-
-    // Listen to changes on this specific checkbox's control
-    const valueChangesSubscription = this.control()?.valueChanges.subscribe(value => {
-      this.isChecked.set(value === this.value());
-    });
-
-    const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
-      if (status === 'INVALID') {
-        this.controlState.set({ ...this.controlState(), invalid: true });
-      }
-
-      this.controlState.set({ ...this.controlState(), errors: this.control()?.errors || null });
-    });
-
-    this.subscriptions.push(formEventsSubscription, valueChangesSubscription, statusChangesSubscription);
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
-  }
-
-  /**
-   * Gets the error message for a specific validator error.
-   */
-  private getValidatorErrorMessage(errorKey: string): string {
-    switch (errorKey) {
-      case 'required':
-        return 'This field is required.';
-      default:
-        return 'This field is required.';
-    }
-  }
-}

package/backoffice/checkbox/index.ts

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

package/backoffice/checkbox/ng-package.json

@@ -1 +0,0 @@
-{ "lib": { "entryFile": "public-api.ts" } }

package/backoffice/checkbox/public-api.ts

@@ -1 +0,0 @@
-export * from './checkbox.component';