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

package/src/backoffice/input/story/input.stories.ts

@@ -0,0 +1,243 @@
+import { FormControl, Validators } from '@angular/forms';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { InputComponent } from '../input.component';
+
+const meta: Meta<InputComponent> = {
+  title: 'Backoffice/Input',
+  component: InputComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+// Basic input with default settings
+export const Default: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl('', [Validators.required, Validators.email]),
+    },
+    template: `
+      <sdc-input
+        label="Email Address"
+        placeholder="Enter your email address"
+        type="email"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with label on the left
+export const LabelLeft: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl('', [Validators.required, Validators.email]),
+    },
+    template: `
+      <sdc-input
+        label="Email Address"
+        labelPosition="left"
+        placeholder="Enter your email address"
+        type="email"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with validation errors
+export const WithValidation: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl('invalid-email', [Validators.required, Validators.email]),
+    },
+    template: `
+      <sdc-input
+        label="Email Address"
+        placeholder="Enter your email address"
+        type="email"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with custom error message
+export const CustomErrorMessage: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl('invalid-email', [Validators.required, Validators.email]),
+    },
+    template: `
+      <sdc-input
+        label="Email Address"
+        placeholder="Enter your email address"
+        type="email"
+        errorMessage="Please provide a valid business email address"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with debounce
+export const WithDebounce: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl(''),
+    },
+    template: `
+      <sdc-input
+        label="Search"
+        placeholder="Type to search..."
+        type="text"
+        [debounce]="500"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Number-only input (type="text" with number restriction)
+export const NumberOnly: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl('', [Validators.required, Validators.min(0), Validators.max(120)]),
+    },
+    template: `
+      <sdc-input
+        label="Age"
+        placeholder="Enter your age"
+        type="text"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with different themes
+export const ThemeVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem; width: 300px;">
+        <sdc-input
+          label="SDC Theme"
+          theme="theme-sdc"
+          placeholder="SDC themed input"
+          [formControl]="sdcControl"
+        />
+        <sdc-input
+          label="Backoffice Theme"
+          theme="theme-backoffice"
+          placeholder="Backoffice themed input"
+          [formControl]="backofficeControl"
+        />
+      </div>
+    `,
+    props: {
+      sdcControl: new FormControl(''),
+      backofficeControl: new FormControl(''),
+    },
+  }),
+};
+
+// Input with different style classes
+export const StyleVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem; width: 300px;">
+        <sdc-input
+          label="Primary Variant"
+          [styleClass]="['variant-primary', 'size-lg', 'radius-lg']"
+          placeholder="Primary styled input"
+          [formControl]="primaryControl"
+        />
+        <sdc-input
+          label="Success Variant"
+          [styleClass]="['variant-success', 'size-md', 'radius-md']"
+          placeholder="Success styled input"
+          [formControl]="successControl"
+        />
+        <sdc-input
+          label="Warning Variant"
+          [styleClass]="['variant-warning', 'size-sm', 'radius-sm']"
+          placeholder="Warning styled input"
+          [formControl]="warningControl"
+        />
+      </div>
+    `,
+    props: {
+      primaryControl: new FormControl(''),
+      successControl: new FormControl(''),
+      warningControl: new FormControl(''),
+    },
+  }),
+};
+
+// Disabled input
+export const Disabled: Story = {
+  render: () => ({
+    props: {
+      formControl: new FormControl({ value: 'Disabled value', disabled: true }),
+    },
+    template: `
+      <sdc-input
+        label="Disabled Input"
+        placeholder="This input is disabled"
+        [disabled]="true"
+        [formControl]="formControl"
+      />
+    `,
+  }),
+};
+
+// Input with different types
+export const TypeVariations: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem; width: 300px;">
+        <sdc-input
+          label="Text Input"
+          type="text"
+          placeholder="Enter text"
+          [formControl]="textControl"
+        />
+        <sdc-input
+          label="Password Input"
+          type="password"
+          placeholder="Enter password"
+          [formControl]="passwordControl"
+        />
+        <sdc-input
+          label="Number Input"
+          type="number"
+          placeholder="Enter number"
+          [formControl]="numberControl"
+        />
+        <sdc-input
+          label="Tel Input"
+          type="tel"
+          placeholder="Enter phone number"
+          [formControl]="telControl"
+        />
+        <sdc-input
+          label="URL Input"
+          type="url"
+          placeholder="Enter URL"
+          [formControl]="urlControl"
+        />
+      </div>
+    `,
+    props: {
+      textControl: new FormControl(''),
+      passwordControl: new FormControl(''),
+      numberControl: new FormControl(''),
+      telControl: new FormControl(''),
+      urlControl: new FormControl(''),
+    },
+  }),
+};

package/src/backoffice/package.json

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

package/src/backoffice/public-api.ts

@@ -0,0 +1,5 @@
+export * from './checkbox';
+export * from './datepicker';
+export * from './input';
+export * from './radio';
+export * from './table';

package/src/backoffice/radio/index.ts

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

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

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

package/src/backoffice/radio/radio.component.css

@@ -0,0 +1,143 @@
+.sdc-radio {
+  --sdc-radio-label-color: var(--color-neutral-700);
+  --sdc-radio-label-size: var(--text-base);
+  --sdc-radio-label-weight: var(--font-semibold);
+  --sdc-radio-label-gap: var(--space-6);
+  --sdc-radio-label-width: auto;
+  --sdc-radio-container-background: var(--color-pure-white);
+  --sdc-radio-container-border-color: var(--color-neutral-300);
+  --sdc-radio-container-border-width: var(--border-default);
+  --sdc-radio-container-border-radius: var(--radius-full);
+  --sdc-radio-container-size: var(--space-5);
+  --sdc-radio-element-background: var(--color-primary);
+  --sdc-radio-element-border-radius: var(--radius-full);
+  --sdc-radio-element-size: 50%;
+
+  display: flex;
+  align-items: center;
+  gap: var(--sdc-radio-label-gap);
+  padding: var(--sdc-radio-container-padding);
+  cursor: pointer;
+}
+
+.radio-input {
+  position: absolute;
+  opacity: 0;
+  border-radius: var(--sdc-radio-container-border-radius);
+  cursor: pointer;
+}
+
+.radio-container {
+  order: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: hsl(var(--sdc-radio-container-background));
+  border: var(--sdc-radio-container-border-width) solid hsl(var(--sdc-radio-container-border-color));
+  border-radius: var(--sdc-radio-container-border-radius);
+  width: var(--sdc-radio-container-size);
+  height: var(--sdc-radio-container-size);
+}
+
+/* Label */
+.radio-label {
+  font-weight: var(--sdc-radio-label-weight);
+  font-size: var(--sdc-radio-label-size);
+  color: hsl(var(--sdc-radio-label-color));
+  white-space: nowrap;
+  width: var(--sdc-radio-label-width);
+}
+
+.sdc-radio-label-left .radio-label {
+  --sdc-radio-label-width: var(--space-24);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sdc-radio-label-left .radio-container {
+  order: 1;
+}
+
+/* Checked state */
+.sdc-radio-checked .radio-container {
+  --sdc-radio-container-border-color: var(--sdc-radio-element-background);
+}
+
+.sdc-radio-checked .radio-element {
+  background-color: hsl(var(--sdc-radio-element-background));
+  border-radius: var(--sdc-radio-element-border-radius);
+  width: var(--sdc-radio-element-size);
+  height: var(--sdc-radio-element-size);
+}
+
+.sdc-radio-checked .radio-label {
+  --sdc-radio-label-color: var(--sdc-radio-element-background);
+}
+
+/* Hover state */
+.sdc-radio:hover .radio-input ~ .radio-container {
+  --sdc-radio-container-border-color: var(--sdc-radio-element-background);
+}
+
+/* Variant */
+.variant-primary.sdc-radio-checked .radio-container,
+.variant-primary.sdc-radio-checked .radio-element,
+.variant-primary.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-primary);
+}
+
+.variant-secondary.sdc-radio-checked .radio-container,
+.variant-secondary.sdc-radio-checked .radio-element,
+.variant-secondary.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-secondary);
+}
+
+.variant-alternative.sdc-radio-checked .radio-container,
+.variant-alternative.sdc-radio-checked .radio-element,
+.variant-alternative.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-alternative);
+}
+
+.variant-success.sdc-radio-checked .radio-container,
+.variant-success.sdc-radio-checked .radio-element,
+.variant-success.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-success);
+}
+
+.variant-warning.sdc-radio-checked .radio-container,
+.variant-warning.sdc-radio-checked .radio-element,
+.variant-warning.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-warning);
+}
+
+.variant-danger.sdc-radio-checked .radio-container,
+.variant-danger.sdc-radio-checked .radio-element,
+.variant-danger.sdc-radio-checked .radio-label {
+  --sdc-radio-element-background: var(--color-danger);
+}
+
+/* Size variations */
+.size-sm.sdc-radio {
+  --sdc-radio-container-size: var(--space-4);
+  --sdc-radio-label-size: var(--text-sm);
+
+  .radio-container {
+    height: calc(var(--sdc-radio-container-size) * 0.98);
+  }
+}
+
+.size-md.sdc-radio {
+  --sdc-radio-container-size: var(--space-5);
+  --sdc-radio-label-size: var(--text-base);
+}
+
+.size-lg.sdc-radio {
+  --sdc-radio-container-size: var(--space-6);
+  --sdc-radio-label-size: var(--text-lg);
+}
+
+.size-xl.sdc-radio {
+  --sdc-radio-container-size: var(--space-7);
+  --sdc-radio-label-size: var(--text-xl);
+}

package/src/backoffice/radio/radio.component.html

@@ -0,0 +1,15 @@
+<label [class]="computedClass()" [for]="name() + '-' + value()">
+  <input
+    class="radio-input"
+    [id]="name() + '-' + value()"
+    [formControl]="control()"
+    type="radio"
+    [name]="name()"
+    [value]="value()" />
+
+  <span class="radio-container">
+    <span class="radio-element"></span>
+  </span>
+
+  <span class="radio-label">{{ label() }}</span>
+</label>

package/src/backoffice/radio/radio.component.ts

@@ -0,0 +1,154 @@
+import { Component, computed, input, OnDestroy, OnInit, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { ThemeClass } from '../../shared/types';
+
+export type RadioStyleClasses = ReturnType<(typeof RadioComponent.prototype)['styleClass']>;
+
+/**
+ * A customizable radio component.
+ *
+ * This component supports various configurations and exposes all Spartan UI radio functionality.
+ * All HTML radio attributes and events are automatically forwarded to the inner radio element.
+ *
+ * @since 1.0.0-alpha.1
+ */
+@Component({
+  standalone: true,
+  selector: 'sdc-radio',
+  styleUrls: ['./radio.component.css'],
+  templateUrl: './radio.component.html',
+  imports: [ReactiveFormsModule],
+})
+export class RadioComponent 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 radio
+  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(
+        `RadioComponent: 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 radio.
+   * Only visible when a value is provided.
+   */
+  public readonly label = input.required<string>();
+
+  /**
+   * The position of the label relative to the radio.
+   */
+  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 radio.
+   * This allows the component to access form state without circular dependencies.
+   */
+  public readonly control = input.required<FormControl>();
+
+  /**
+   * The value of the radio button.
+   */
+  public readonly value = input.required<string>();
+
+  /**
+   * Whether the radio 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-radio-label-left' : 'sdc-radio-label-right';
+    const checkedClass = this.isChecked() ? 'sdc-radio-checked' : '';
+    return ['sdc-radio', themeClass, ...styleClass, className, labelClass, checkedClass].filter(Boolean).join(' ');
+  });
+
+  /**
+   * Subscriptions to the control's value changes.
+   */
+  private readonly subscriptions: (Subscription | undefined)[] = [];
+
+  ngOnInit(): void {
+    this.isChecked.set(this.control()?.value === this.value());
+
+    // Listen to changes on this specific radio's control
+    const valueChangesSubscription = this.control()?.valueChanges.subscribe(value => {
+      this.isChecked.set(value === this.value());
+    });
+
+    this.subscriptions.push(valueChangesSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+  }
+}