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

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

@@ -1,243 +0,0 @@
-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/backoffice/radio/index.ts

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

package/backoffice/radio/ng-package.json

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

package/backoffice/radio/public-api.ts

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

package/backoffice/radio/radio.component.css

@@ -1,143 +0,0 @@
-.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/backoffice/radio/radio.component.html

@@ -1,15 +0,0 @@
-<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/backoffice/radio/radio.component.ts

@@ -1,154 +0,0 @@
-import { ThemeClass } from '@3ddv/software-division-components/shared';
-import { Component, computed, input, OnDestroy, OnInit, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
-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());
-  }
-}