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

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "deleteDestPath": true,
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["./tailwind.config.js", "./styles.css"],
+  "allowedNonPeerDependencies": ["rxjs-interop"]
+}

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@3ddv/software-division-components",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "main": "./fesm2022/3ddv-software-division-components.mjs",
-  "module": "fesm2022/3ddv-software-division-components.mjs",
-  "typings": "index.d.ts",
+  "module": "./fesm2022/3ddv-software-division-components.mjs",
+  "typings": "./index.d.ts",
   "type": "module",
-  "gitHead": "1aa2389f41049ce3d06f9acdc641155a98109ff9",
+  "gitHead": "d48bf6af7e7fdb63e91b92046d2e8734b9bf808b",
+  "scripts": {
+    "storybook": "echo \"cwd: $(pwd)\" && ng run software-division-components:storybook",
+    "build-storybook": "ng run software-division-components:build-storybook",
+    "chromatic": "npx chromatic --project-token=chpt_9e3636db2de59d1"
+  },
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -146,9 +151,6 @@
     "./generic/icon": {
       "types": "./generic/icon/index.d.ts",
       "default": "./fesm2022/generic/icon/index.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
     }
   },
   "repository": {
@@ -179,9 +181,36 @@
       "optional": false
     }
   },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@compodoc/compodoc": "^1.1.26",
+    "@spartan-ng/cli": "^0.0.1-alpha.499",
+    "@storybook/addon-a11y": "^8.4.6",
+    "@storybook/addon-designs": "^8.0.4",
+    "@storybook/addon-docs": "^8.4.6",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.6",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/angular": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/builder-vite": "^8.4.6",
+    "@storybook/test": "^8.4.5",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@takuma-ru/auto-story-generator": "^0.3.3",
+    "auto-angular-story-generator": "^0.1.11",
+    "chromatic": "^11.20.0",
+    "postcss": "^8.5.6",
+    "storybook-addon-jsdoc-to-mdx": "^1.0.4",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.0.2",
+    "tailwindcss-animate": "^1.0.6",
+    "tslib": "^2.3.0"
+  },
   "sideEffects": false,
   "dependencies": {
-    "rxjs-interop": "link:@angular/core/rxjs-interop",
-    "tslib": "^2.3.0"
+    "rxjs-interop": "link:@angular/core/rxjs-interop"
   }
-}
+}

package/src/backoffice/checkbox/checkbox.component.css

@@ -0,0 +1,193 @@
+.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/src/backoffice/checkbox/checkbox.component.html

@@ -0,0 +1,23 @@
+<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/src/backoffice/checkbox/checkbox.component.ts

@@ -0,0 +1,252 @@
+import { Component, computed, input, OnDestroy, OnInit, signal } from '@angular/core';
+import { FormControl, FormSubmittedEvent, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { ThemeClass } from '../../shared/types';
+
+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/src/backoffice/checkbox/index.ts

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

package/src/backoffice/checkbox/public-api.ts

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