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

package/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

package/.storybook/main.ts

@@ -0,0 +1,78 @@
+import path from 'path';
+import { StorybookConfig } from '@storybook/angular';
+
+// Resolve @3ddv/software-division-components subpaths to source when building Storybook,
+// since package.json "exports" point at dist/fesm2022 which does not exist in source.
+const projectRoot = path.resolve(process.cwd(), 'projects/software-division-components');
+// All package subpaths that point at dist/fesm2022; alias to source public-api.ts for Storybook.
+// Do not alias '.' so Webpack does not match subpath requests (e.g. /shared) against the root alias.
+const flatExportKeys = [
+  './utils',
+  './shared',
+  './backoffice/checkbox',
+  './backoffice/datepicker',
+  './backoffice/input',
+  './backoffice/radio',
+  './backoffice/table',
+  './generic/select',
+  './generic/add-digital-wallet',
+  './generic/braintree',
+  './generic/button',
+  './generic/dialog',
+  './generic/drawer',
+  './generic/icon',
+  './dvm/cart-item',
+  './dvm/cart',
+  './dvm/legend',
+  './dvm/loader',
+  './dvm/neighbors',
+  './dvm/popover',
+  './dvm/stepper',
+  './dvm/map-loader',
+  './dvm/ticket-info-item',
+];
+const packageAliases: Record<string, string> = {};
+for (const key of flatExportKeys) {
+  const subpath = key.replace(/^\.\//, '');
+  const aliasKey = `@3ddv/software-division-components${key.slice(1)}`; // /utils, /shared, ...
+  packageAliases[aliasKey] = path.join(projectRoot, subpath, 'public-api.ts');
+}
+
+// Configuration taken from https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga
+const config: StorybookConfig = {
+  stories: [
+    '../backoffice/**/*.mdx',
+    '../backoffice/**/*.stories.ts',
+    '../dvm/**/*.mdx',
+    '../dvm/**/*.stories.ts',
+    '../generic/**/*.mdx',
+    '../generic/**/*.stories.ts',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-designs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-jsdoc-to-mdx',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {},
+    },
+  },
+  webpackFinal: (webpackConfig) => {
+    webpackConfig.resolve = webpackConfig.resolve ?? {};
+    webpackConfig.resolve.alias = { ...webpackConfig.resolve.alias, ...packageAliases };
+    return webpackConfig;
+  },
+};
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/jpg" href="/3ddv-logo.jpg" />

package/.storybook/preview.ts

@@ -0,0 +1,30 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { applicationConfig, type Preview } from '@storybook/angular';
+import { provideSdc } from '../shared';
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [provideSdc()],
+    }),
+    withThemeByClassName({
+      themes: {
+        light: 'light-theme',
+        dark: 'dark-theme',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+// setCompodocJson(docJson);
+export default preview;

package/.storybook/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "angularCompilerOptions": {
+    "strictTemplates": true
+  },
+  "exclude": ["../**/*.spec.ts","../backoffice/index.ts","../dvm/index.ts","../generic/index.ts"],
+  "include": [
+    "../backoffice/**/*.ts",
+    "../backoffice/**/*.css",
+    "../dvm/**/*.ts",
+    "../dvm/**/*.css",
+    "../generic/**/*.ts",
+    "../generic/**/*.css",
+    "../shared/**/*.ts",
+    "../shared/**/*.css",
+    "../utils/**/*.ts",
+    "../src/**/*.ts",
+    "./preview.ts"
+  ],
+  "files": ["./typings.d.ts"]
+}

package/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.4.6](https://bitbucket.org/mmc-istari/ticketing-598-software-division-components-npm/compare/v1.4.5...v1.4.6) (2026-01-28)
+
+**Note:** Version bump only for package @3ddv/software-division-components

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mobile Media Content
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/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/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/backoffice/checkbox/checkbox.component.ts

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

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

package/backoffice/checkbox/ng-package.json

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

package/backoffice/checkbox/public-api.ts

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