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

package/projects/consumer-app/src/app/app.component.html

@@ -1,11 +0,0 @@
-<header class="app-header">
-  <h1>{{ title }}</h1>
-  <nav class="app-navigation">
-    <a routerLink="/table" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Table</a>
-    <a routerLink="/form" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Form</a>
-  </nav>
-</header>
-
-<main class="app-content">
-  <router-outlet></router-outlet>
-</main>

package/projects/consumer-app/src/app/app.component.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, CommonModule],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-})
-export class AppComponent {
-  title = 'Test SDC Library';
-}

package/projects/consumer-app/src/app/app.config.ts

@@ -1,8 +0,0 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
-};

package/projects/consumer-app/src/app/app.routes.ts

@@ -1,9 +0,0 @@
-import { Routes } from '@angular/router';
-import { FormComponent } from './form/form.component';
-import { TableComponent } from './table/table.component';
-
-export const routes: Routes = [
-  { path: '', redirectTo: '/table', pathMatch: 'full' },
-  { path: 'table', component: TableComponent },
-  { path: 'form', component: FormComponent },
-];

package/projects/consumer-app/src/app/form/form.component.css

@@ -1,82 +0,0 @@
-/* Override radio component label width */
-::ng-deep:root .theme-sdc.sdc-radio.sdc-radio-label-left .radio-label {
-  --sdc-radio-label-width: 8rem;
-}
-
-.filters-form [name='events'] {
-  grid-area: events;
-}
-
-.filters-form [name='status'] {
-  grid-area: status;
-}
-
-.filters-form [name='amenity'] {
-  grid-area: amenity;
-}
-
-.filters-form [name='section'] {
-  grid-area: section;
-}
-
-.filters-form [name='account'] {
-  grid-area: account;
-}
-
-.filters-form [name='fromDate'] {
-  grid-area: fromDate;
-}
-
-.filters-form [name='toDate'] {
-  grid-area: toDate;
-}
-
-.filters-form .submit {
-  grid-area: submit;
-  display: flex;
-  align-items: center;
-  padding-right: 6rem;
-}
-
-.filters-form {
-  display: grid;
-  grid-gap: 2rem 1.25rem;
-  padding-right: 10rem;
-  grid-template-areas:
-    'events events events events status amenity amenity'
-    'section section account account fromDate toDate submit';
-}
-
-h1 {
-  font-size: x-large;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
-h2 {
-  font-size: large;
-  font-weight: bold;
-}
-
-hr {
-  margin: 1rem 0;
-}
-
-.card.theme-sdc {
-  background: hsl(var(--color-pure-white));
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 2rem;
-}
-
-.variants-form .row-section {
-  display: flex;
-  justify-content: space-between;
-  padding-top: 2rem;
-  gap: 1.25rem;
-}
-
-.variants-form .submit {
-  width: 5rem;
-}

package/projects/consumer-app/src/app/form/form.component.html

@@ -1,196 +0,0 @@
-<h1>Filters Form</h1>
-
-<sdc-datepicker></sdc-datepicker>
-
-<form [formGroup]="filtersForm" class="filters-form card theme-sdc" (ngSubmit)="onFiltersSubmit()">
-  <sdc-input
-    [styleClass]="radioStyleClasses"
-    name="events"
-    [control]="filtersForm.get('events')"
-    label="Events"
-    labelPosition="left"
-    placeholder="Select Event"
-    type="text" />
-
-  <sdc-input
-    name="status"
-    [control]="filtersForm.get('status')"
-    label="All"
-    labelPosition="left"
-    placeholder="Select Event"
-    type="text" />
-
-  <sdc-input
-    name="amenity"
-    [control]="filtersForm.get('amenity')"
-    label="Premium Space"
-    labelPosition="left"
-    placeholder="Premium Space Name"
-    type="text" />
-
-  <sdc-input
-    name="section"
-    [control]="filtersForm.get('section')"
-    label="Section"
-    labelPosition="left"
-    placeholder="Section"
-    type="text" />
-
-  <sdc-input name="account" [control]="filtersForm.get('account')" label="Account" labelPosition="left" type="text" />
-
-  <sdc-datepicker
-    [minDate]="filtersFormMinDate"
-    name="fromDate"
-    [control]="filtersForm.get('fromDate')"
-    label="From"
-    labelPosition="left"
-    [autoCloseOnSelect]="true"
-    placeholder="dd/mm/aaaa" />
-
-  <sdc-datepicker
-    [minDate]="filtersFormMinDate"
-    name="toDate"
-    [control]="filtersForm.get('toDate')"
-    label="To"
-    labelPosition="left"
-    [autoCloseOnSelect]="true"
-    placeholder="dd/mm/aaaa" />
-
-  <div class="submit">
-    <sdc-button className="submit-button" [styleClass]="['variant-secondary', 'size-circle-md']" type="submit"
-      >O</sdc-button
-    >
-  </div>
-</form>
-
-<br />
-<br />
-<br />
-
-<h1>Variants Examples Form</h1>
-<form [formGroup]="variantsExamplesForm" class="variants-form card theme-sdc" (ngSubmit)="onVariantsExamplesSubmit()">
-  <h2>Inputs</h2>
-  <hr />
-  <sdc-input
-    hint="Enter your full name"
-    name="name"
-    [control]="variantsExamplesForm.get('name')"
-    errorMessage="This is a custom error message"
-    label="Full Name (Always Show Errors)"
-    labelPosition="top"
-    placeholder="Enter your full name"
-    type="text"
-    [isTextarea]="true"
-    [textareaRows]="3"
-    [textareaCols]="30"
-    [textareaResize]="'none'"
-    errorDisplayMode="always" />
-
-  <div class="row-section">
-    <sdc-input
-      hint="Enter only numbers"
-      name="age"
-      [control]="variantsExamplesForm.get('age')"
-      label="Age (Numbers Only)"
-      labelPosition="left"
-      placeholder="Enter your age"
-      type="number"
-      errorDisplayMode="always" />
-
-    <sdc-input
-      hint="We'll never share your email with anyone else"
-      name="email"
-      [control]="variantsExamplesForm.get('email')"
-      label="Email Address (After Submit)"
-      labelPosition="left"
-      placeholder="Enter your email address"
-      type="email"
-      errorDisplayMode="after-submit" />
-  </div>
-
-  <br />
-  <br />
-
-  <h2>Radio Group</h2>
-  <hr />
-  <sdc-radio
-    label="Primary"
-    name="type"
-    value="primary"
-    [control]="variantsExamplesForm.get('type')"
-    [styleClass]="['size-sm']" />
-  <sdc-radio
-    label="Secondary"
-    name="type"
-    value="secondary"
-    [control]="variantsExamplesForm.get('type')"
-    [styleClass]="['size-md']" />
-  <sdc-radio
-    label="Alternative"
-    name="type"
-    value="alternative"
-    [control]="variantsExamplesForm.get('type')"
-    [styleClass]="['size-lg']" />
-  <sdc-radio
-    label="Success"
-    name="type"
-    value="success"
-    [control]="variantsExamplesForm.get('type')"
-    [styleClass]="['size-xl']" />
-
-  <br />
-  <br />
-
-  <h2>Checkbox</h2>
-  <hr />
-  <sdc-checkbox
-    label="Checkbox 1"
-    labelPosition="left"
-    name="checkbox1"
-    value="checkbox1"
-    [control]="variantsExamplesForm.get('checkbox1')"
-    [styleClass]="['variant-primary', 'size-sm']" />
-  <sdc-checkbox
-    label="Checkbox 2"
-    labelPosition="left"
-    name="checkbox2"
-    value="checkbox2"
-    [control]="variantsExamplesForm.get('checkbox2')"
-    [styleClass]="['variant-secondary', 'size-md']" />
-  <sdc-checkbox
-    label="Checkbox 3"
-    labelPosition="left"
-    name="checkbox3"
-    value="checkbox3"
-    [control]="variantsExamplesForm.get('checkbox3')"
-    [styleClass]="['variant-alternative', 'size-lg']" />
-  <sdc-checkbox
-    label="Checkbox 4"
-    labelPosition="left"
-    name="checkbox4"
-    value="checkbox4"
-    [control]="variantsExamplesForm.get('checkbox4')"
-    [styleClass]="['variant-primary', 'size-xl']" />
-
-  <br />
-  <br />
-
-  <h2>Datepicker</h2>
-  <hr />
-  <sdc-datepicker
-    [minDate]="minDate"
-    [maxDate]="maxDate"
-    name="birthday"
-    [control]="variantsExamplesForm.get('birthday')"
-    label="Birthday"
-    labelPosition="top"
-    [autoCloseOnSelect]="true"
-    placeholder="Select your birthday" />
-
-  <br />
-  <br />
-
-  <div class="submit">
-    <sdc-button [styleClass]="['variant-secondary', 'size-md']" type="submit"> Submit </sdc-button>
-  </div>
-</form>

package/projects/consumer-app/src/app/form/form.component.ts

@@ -1,101 +0,0 @@
-import {
-  ButtonComponent,
-  CheckboxComponent,
-  DatePickerComponent,
-  InputComponent,
-  RadioComponent,
-  RadioStyleClasses,
-} from '@3ddv/software-division-components';
-import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-
-@Component({
-  selector: 'app-form',
-  standalone: true,
-  imports: [
-    CommonModule,
-    InputComponent,
-    ButtonComponent,
-    RadioComponent,
-    CheckboxComponent,
-    DatePickerComponent,
-    ReactiveFormsModule,
-  ],
-  templateUrl: './form.component.html',
-  styleUrl: './form.component.css',
-})
-export class FormComponent {
-  private readonly _formBuilder = inject(FormBuilder);
-
-  // Styles classes
-  public radioStyleClasses: RadioStyleClasses = ['variant-primary', 'size-md'];
-
-  // Filters form
-  public filtersForm = this._formBuilder.group({
-    events: [''],
-    status: [''],
-    amenity: [''],
-    section: [''],
-    account: [''],
-    fromDate: [undefined, Validators.required],
-    toDate: [undefined, Validators.required],
-  });
-
-  public filtersFormMinDate = new Date();
-
-  onFiltersSubmit(): void {
-    console.log(this.filtersForm.get('toDate')?.getRawValue());
-
-    if (this.filtersForm.valid) {
-      console.log('Form submitted successfully:', this.filtersForm.value);
-    } else {
-      console.log('Form is invalid, marking all as touched');
-      this.filtersForm.markAllAsTouched();
-
-      // Log validation errors for each field
-      Object.keys(this.filtersForm.controls).forEach(key => {
-        const control = this.filtersForm.get(key);
-        if (control?.errors) {
-          console.log(`${key} field errors:`, control.errors);
-        }
-      });
-    }
-  }
-
-  // Variants examples form
-  public variantsExamplesForm = this._formBuilder.group({
-    name: ['', [Validators.required, Validators.minLength(2)]],
-    age: ['', [Validators.required]],
-    email: ['', [Validators.required, Validators.email]],
-    type: ['primary', [Validators.required]],
-    checkbox1: [false, [Validators.requiredTrue]],
-    checkbox2: [true, [Validators.requiredTrue]],
-    checkbox3: [true, [Validators.requiredTrue]],
-    checkbox4: [true, [Validators.requiredTrue]],
-    birthday: [undefined, Validators.required],
-  });
-
-  /** The minimum date */
-  public minDate = new Date(2025, 8, 23);
-
-  /** The maximum date */
-  public maxDate = new Date(2025, 8, 27);
-
-  onVariantsExamplesSubmit(): void {
-    if (this.variantsExamplesForm.valid) {
-      console.log('Form submitted successfully:', this.variantsExamplesForm.value);
-    } else {
-      console.log('Form is invalid, marking all as touched');
-      this.variantsExamplesForm.markAllAsTouched();
-
-      // Log validation errors for each field
-      Object.keys(this.variantsExamplesForm.controls).forEach(key => {
-        const control = this.variantsExamplesForm.get(key);
-        if (control?.errors) {
-          console.log(`${key} field errors:`, control.errors);
-        }
-      });
-    }
-  }
-}

package/projects/consumer-app/src/app/table/action-column.component.ts

@@ -1,46 +0,0 @@
-import { ButtonComponent } from '@3ddv/software-division-components';
-import { Component, input, output } from '@angular/core';
-
-@Component({
-  selector: 'app-action-column',
-  standalone: true,
-  imports: [ButtonComponent],
-  template: `
-    <sdc-button
-      [theme]="theme()"
-      [styleClass]="['variant-secondary', 'size-sm']"
-      [className]="className()"
-      (onClick)="onActionClick.emit($event)"
-    >
-      {{ buttonText() }}
-    </sdc-button>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-})
-export class ActionColumnComponent {
-  /**
-   * The theme to apply to the button component
-   */
-  public readonly theme = input<'theme-sdc'>('theme-sdc');
-
-  /**
-   * Additional CSS classes to apply to the button
-   */
-  public readonly className = input<string>('');
-
-  /**
-   * The text to display on the button
-   */
-  public readonly buttonText = input<string>('Details');
-
-  /**
-   * Event emitted when the action button is clicked
-   */
-  public readonly onActionClick = output<MouseEvent>();
-}

package/projects/consumer-app/src/app/table/table.component.css

@@ -1,3 +0,0 @@
-/* ::ng-deep:root .theme-sdc.sdc-button.status-button {
-  padding: 5rem;
-} */

package/projects/consumer-app/src/app/table/table.component.html

@@ -1,17 +0,0 @@
-<main>
-  <div>
-    <sdc-table
-      [maxVisiblePages]="maxVisiblePages"
-      [showFirstLastButtons]="showFirstLastButtons"
-      [data]="data"
-      [columns]="columns"
-      [showSelection]="showSelection"
-      [enableSort]="enableSort"
-      [theme]="currentTheme"
-      (sortingChange)="onSortingChange($event)"
-      (selectionChange)="onSelectionChange($event)"
-      (exportClick)="exportTransactions($event)"
-      [exportButtonText]="'Export Transactions'"
-      [pageSize]="5"></sdc-table>
-  </div>
-</main>