@3ddv/software-division-components 2.0.0-beta.0 → 2.0.1

package/backoffice/radio/story/radio.stories.ts

@@ -1,287 +0,0 @@
-import { FormControl } from '@angular/forms';
-import type { Meta, StoryObj } from '@storybook/angular';
-import { RadioComponent } from '../radio.component';
-
-const meta: Meta<RadioComponent> = {
-  title: 'Backoffice/Radio',
-  component: RadioComponent,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<RadioComponent>;
-
-// Basic radio with default settings
-export const Default: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('option1'),
-    },
-    template: `
-      <sdc-radio
-        label="Option 1"
-        name="default-group"
-        value="option1"
-        [control]="formControl"
-      />
-    `,
-  }),
-};
-
-// Radio group with multiple options
-export const RadioGroup: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('option1'),
-    },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <sdc-radio
-          label="Option 1"
-          name="group1"
-          value="option1"
-          [control]="formControl"
-        />
-        <sdc-radio
-          label="Option 2"
-          name="group1"
-          value="option2"
-          [control]="formControl"
-        />
-        <sdc-radio
-          label="Option 3"
-          name="group1"
-          value="option3"
-          [control]="formControl"
-        />
-      </div>
-    `,
-  }),
-};
-
-// Radio with label on the right
-export const LabelRight: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('option1'),
-    },
-    template: `
-      <sdc-radio
-        label="Option with right label"
-        labelPosition="right"
-        name="right-label"
-        value="option1"
-        [control]="formControl"
-      />
-    `,
-  }),
-};
-
-// Radio with different themes
-export const ThemeVariations: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <sdc-radio
-          label="SDC Theme"
-          theme="theme-sdc"
-          name="theme-sdc"
-          value="sdc"
-          [control]="sdcControl"
-        />
-        <sdc-radio
-          label="Backoffice Theme"
-          theme="theme-backoffice"
-          name="theme-backoffice"
-          value="backoffice"
-          [control]="backofficeControl"
-        />
-      </div>
-    `,
-    props: {
-      sdcControl: new FormControl('sdc'),
-      backofficeControl: new FormControl('backoffice'),
-    },
-  }),
-};
-
-// Radio with different style classes (variants and sizes)
-export const StyleVariations: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem; width: 400px;">
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Primary Variant</h4>
-          <sdc-radio
-            label="Primary Option"
-            [styleClass]="['variant-primary', 'size-md']"
-            name="primary-group"
-            value="primary"
-            [control]="primaryControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Secondary Variant</h4>
-          <sdc-radio
-            label="Secondary Option"
-            [styleClass]="['variant-secondary', 'size-md']"
-            name="secondary-group"
-            value="secondary"
-            [control]="secondaryControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Alternative Variant</h4>
-          <sdc-radio
-            label="Alternative Option"
-            [styleClass]="['variant-alternative', 'size-md']"
-            name="alternative-group"
-            value="alternative"
-            [control]="alternativeControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Success Variant</h4>
-          <sdc-radio
-            label="Success Option"
-            [styleClass]="['variant-success', 'size-md']"
-            name="success-group"
-            value="success"
-            [control]="successControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Warning Variant</h4>
-          <sdc-radio
-            label="Warning Option"
-            [styleClass]="['variant-warning', 'size-md']"
-            name="warning-group"
-            value="warning"
-            [control]="warningControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Danger Variant</h4>
-          <sdc-radio
-            label="Danger Option"
-            [styleClass]="['variant-danger', 'size-md']"
-            name="danger-group"
-            value="danger"
-            [control]="dangerControl"
-          />
-        </div>
-      </div>
-    `,
-    props: {
-      primaryControl: new FormControl('primary'),
-      secondaryControl: new FormControl('secondary'),
-      alternativeControl: new FormControl('alternative'),
-      successControl: new FormControl('success'),
-      warningControl: new FormControl('warning'),
-      dangerControl: new FormControl('danger'),
-    },
-  }),
-};
-
-// Radio with different sizes
-export const SizeVariations: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 1rem; width: 400px;">
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Small Size</h4>
-          <sdc-radio
-            label="Small Radio"
-            [styleClass]="['size-sm']"
-            name="size-sm"
-            value="small"
-            [control]="smallControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Medium Size</h4>
-          <sdc-radio
-            label="Medium Radio"
-            [styleClass]="['size-md']"
-            name="size-md"
-            value="medium"
-            [control]="mediumControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Large Size</h4>
-          <sdc-radio
-            label="Large Radio"
-            [styleClass]="['size-lg']"
-            name="size-lg"
-            value="large"
-            [control]="largeControl"
-          />
-        </div>
-        
-        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-          <h4 style="margin: 0; color: #666;">Extra Large Size</h4>
-          <sdc-radio
-            label="Extra Large Radio"
-            [styleClass]="['size-xl']"
-            name="size-xl"
-            value="xl"
-            [control]="xlControl"
-          />
-        </div>
-      </div>
-    `,
-    props: {
-      smallControl: new FormControl('small'),
-      mediumControl: new FormControl('medium'),
-      largeControl: new FormControl('large'),
-      xlControl: new FormControl('xl'),
-    },
-  }),
-};
-
-// Disabled radio
-export const Disabled: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('option1'),
-    },
-    template: `
-      <sdc-radio
-        label="Disabled Option"
-        name="disabled-group"
-        value="option1"
-        [disabled]="true"
-        [control]="formControl"
-      />
-    `,
-  }),
-};
-
-// Radio with custom className
-export const CustomClassName: Story = {
-  render: () => ({
-    props: {
-      formControl: new FormControl('option1'),
-    },
-    template: `
-      <sdc-radio
-        label="Custom Styled Option"
-        name="custom-group"
-        value="option1"
-        className="border-2 border-blue-500 p-2 rounded"
-        [control]="formControl"
-      />
-    `,
-  }),
-};

package/backoffice/table/_components/pagination/pagination.component.css

@@ -1,117 +0,0 @@
-.pagination {
-  --sdc-pagination-padding: var(--space-6) 0;
-  --sdc-pagination-background: var(--color-neutral-100);
-  --sdc-pagination-button-text-size: var(--text-sm);
-  --sdc-pagination-button-text-weight: var(--font-bold);
-  --sdc-pagination-button-background: var(--color-pure-white);
-  --sdc-pagination-button-foreground: var(--color-neutral-700);
-  --sdc-pagination-button-hover-background: var(--color-primary);
-  --sdc-pagination-button-hover-foreground: var(--color-pure-white);
-  --sdc-pagination-button-active-background: var(--color-primary);
-  --sdc-pagination-button-active-foreground: var(--color-pure-white);
-  --sdc-pagination-button-disabled-background: var(--color-neutral-200);
-  --sdc-pagination-button-disabled-foreground: var(--color-neutral-500);
-  --sdc-pagination-button-gap: var(--space-2);
-  --sdc-pagination-button-width: var(--space-8);
-  --sdc-pagination-button-height: var(--space-8);
-  --sdc-pagination-button-border-radius: var(--radius-full);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative; /* For the export button */
-  background: hsl(var(--sdc-pagination-background));
-  padding: var(--sdc-pagination-padding);
-}
-
-.pagination-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--sdc-pagination-button-gap);
-}
-
-/* Pagination buttons */
-.pagination-button {
-  width: var(--sdc-pagination-button-width);
-  height: var(--sdc-pagination-button-height);
-  background: hsl(var(--sdc-pagination-button-background));
-  border-radius: var(--sdc-pagination-button-border-radius);
-  font-size: var(--sdc-pagination-button-text-size);
-  font-weight: var(--sdc-pagination-button-text-weight);
-  transition: all 0.15s ease-in-out;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-button.first-page {
-  margin-right: var(--space-8);
-}
-
-.pagination-button.last-page {
-  margin-left: var(--space-8);
-}
-
-.pagination-button:not(.active) {
-  background: hsl(var(--sdc-pagination-button-background));
-  color: hsl(var(--sdc-pagination-button-foreground));
-  border-color: none;
-}
-
-.pagination-button:not(.active):hover:not(:disabled) {
-  background: hsl(var(--sdc-pagination-button-hover-background));
-  color: hsl(var(--sdc-pagination-button-hover-foreground));
-}
-
-.pagination-button.active {
-  background: hsl(var(--sdc-pagination-button-active-background));
-  color: hsl(var(--sdc-pagination-button-active-foreground));
-  border-color: none;
-}
-
-.pagination-button:disabled {
-  background: hsl(var(--sdc-pagination-button-disabled-background));
-  color: hsl(var(--sdc-pagination-button-disabled-foreground));
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.pagination-nav-button {
-  background: hsl(var(--sdc-pagination-button-background));
-  color: hsl(var(--color-neutral-500));
-  border: none;
-}
-
-.pagination-nav-button:hover:not(:disabled) {
-  background: hsl(var(--sdc-pagination-button-hover-background));
-}
-
-/* No data state */
-.no-data-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: var(--space-4);
-}
-
-.no-data-text {
-  color: hsl(var(--color-neutral-500));
-  font-size: var(--text-sm);
-}
-
-/* Export button */
-.export-button {
-  position: absolute;
-  right: var(--space-6); /* same as pagination-container */
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .pagination-container {
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-}

package/backoffice/table/_components/pagination/pagination.component.html

@@ -1,55 +0,0 @@
-<div class="pagination" [class]="theme()">
-  <!-- Pagination Controls -->
-  <div class="pagination-controls">
-    <!-- First Page Button (conditional) -->
-    @if (showFirstLastButtons()) {
-      <button
-        class="pagination-button first-page"
-        [disabled]="!table().getCanPreviousPage()"
-        (click)="table().setPageIndex(0)">
-        1
-      </button>
-    }
-
-    @if (table().getRowCount() > 0) {
-      <!-- Previous Page Button -->
-      <button class="pagination-button" [disabled]="!table().getCanPreviousPage()" (click)="table().previousPage()">
-        <ng-icon hlm name="lucideChevronLeft" size="base" />
-      </button>
-
-      <!-- Page Numbers -->
-      @for (pageIndex of getVisiblePageNumbers(); track pageIndex) {
-        <button
-          class="pagination-button"
-          [class.active]="pageIndex === table().getState().pagination.pageIndex"
-          (click)="table().setPageIndex(pageIndex)">
-          {{ pageIndex + 1 }}
-        </button>
-      }
-
-      <!-- Next Page Button -->
-      <button class="pagination-button" [disabled]="!table().getCanNextPage()" (click)="table().nextPage()">
-        <ng-icon hlm name="lucideChevronRight" size="base" />
-      </button>
-
-      <!-- Last Page Button (conditional) -->
-      @if (showFirstLastButtons()) {
-        <button
-          class="pagination-button last-page"
-          [disabled]="!table().getCanNextPage()"
-          (click)="table().setPageIndex(table().getPageCount() - 1)">
-          {{ table().getPageCount() }}
-        </button>
-      }
-    } @else {
-      <div class="no-data-container">
-        <div class="no-data-text">No Data</div>
-      </div>
-    }
-  </div>
-
-  <!-- Added Export button to match the design -->
-  <div class="export-button">
-    <sdc-button (click)="onExportClick()">{{ exportButtonText() }}</sdc-button>
-  </div>
-</div>

package/backoffice/table/_components/pagination/pagination.component.ts

@@ -1,79 +0,0 @@
-import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
-import { HlmIconModule } from '@3ddv/software-division-components/generic/icon';
-import { ThemeClass } from '@3ddv/software-division-components/shared';
-import { Component, input, output } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
-import { Table } from '@tanstack/angular-table';
-
-@Component({
-  selector: 'sdc-pagination',
-  imports: [NgIcon, HlmIconModule, ButtonComponent],
-  providers: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
-  templateUrl: './pagination.component.html',
-  styleUrl: './pagination.component.css',
-})
-export class PaginationComponent {
-  public readonly table = input.required<Table<any>>();
-  public readonly maxVisiblePages = input<number>(7);
-  public readonly showFirstLastButtons = input<boolean>(false);
-  public readonly theme = input.required<ThemeClass>();
-  public readonly exportButtonText = input<string>('Export');
-  public readonly exportClick = output<{ selectedRows: any[]; allRows: any[] }>();
-
-  protected getVisiblePageNumbers(): number[] {
-    const currentPage = this.table().getState().pagination.pageIndex;
-    const totalPages = this.table().getPageCount();
-    const maxVisible = this.maxVisiblePages();
-
-    if (totalPages <= maxVisible) {
-      // If total pages is less than or equal to maxVisible, show all pages
-      return Array.from({ length: totalPages }, (_, i) => i);
-    }
-
-    // Calculate the sliding window of pages to show
-    const pages: number[] = [];
-
-    // Calculate the center position for the window
-    const centerPosition = Math.floor(maxVisible / 2);
-
-    // Calculate the start page of the window
-    let startPage = Math.max(0, currentPage - centerPosition);
-
-    // Adjust start page if we're near the end
-    if (startPage + maxVisible > totalPages) {
-      startPage = Math.max(0, totalPages - maxVisible);
-    }
-
-    // Generate the page numbers for the window
-    for (let i = 0; i < maxVisible; i++) {
-      pages.push(startPage + i);
-    }
-
-    return pages;
-  }
-
-  protected onExportClick() {
-    const tableState = this.table().getState();
-    const selectedRows = tableState.rowSelection;
-    const allRows = this.table()
-      .getRowModel()
-      .rows.map(row => row.original);
-
-    // Get the actual selected row data
-    const selectedRowData = Object.keys(selectedRows)
-      .filter(key => selectedRows[key])
-      .map(rowId => {
-        const row = this.table()
-          .getRowModel()
-          .rows.find(r => r.id === rowId);
-        return row ? row.original : null;
-      })
-      .filter(Boolean);
-
-    this.exportClick.emit({
-      selectedRows: selectedRowData,
-      allRows: allRows,
-    });
-  }
-}

package/backoffice/table/_components/selection-table-head/selection-table-head.component.html

@@ -1,6 +0,0 @@
-<input
-  class="block px-1 selection-header"
-  type="checkbox"
-  [checked]="getIsAllVisibleRowsSelected()"
-  [indeterminate]="getIsSomeVisibleRowsSelected()"
-  (change)="toggleAllVisibleRowsSelected()" />

package/backoffice/table/_components/selection-table-head/selection-table-head.component.ts

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { type HeaderContext, injectFlexRenderContext } from '@tanstack/angular-table';
-
-@Component({
-  templateUrl: './selection-table-head.component.html',
-  styleUrl: './selection-table-head.component.css',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SelectionTableHeadComponent<T> {
-  context = injectFlexRenderContext<HeaderContext<T, unknown>>();
-
-  getIsAllVisibleRowsSelected(): boolean {
-    const visibleRows = this.context.table.getRowModel().rows;
-    return visibleRows.length > 0 && visibleRows.every(row => row.getIsSelected());
-  }
-
-  getIsSomeVisibleRowsSelected(): boolean {
-    const visibleRows = this.context.table.getRowModel().rows;
-    const selectedCount = visibleRows.filter(row => row.getIsSelected()).length;
-    return selectedCount > 0 && selectedCount < visibleRows.length;
-  }
-
-  toggleAllVisibleRowsSelected(): void {
-    const visibleRows = this.context.table.getRowModel().rows;
-    const allSelected = this.getIsAllVisibleRowsSelected();
-
-    visibleRows.forEach(row => {
-      if (allSelected) {
-        row.toggleSelected(false);
-      } else {
-        row.toggleSelected(true);
-      }
-    });
-  }
-}

package/backoffice/table/_components/selection-table-row/selection-table-row.component.html

@@ -1,5 +0,0 @@
-<input
-  class="block px-1"
-  type="checkbox"
-  [checked]="context.row.getIsSelected()"
-  (change)="context.row.getToggleSelectedHandler()($event)" />

package/backoffice/table/_components/selection-table-row/selection-table-row.component.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { type CellContext, injectFlexRenderContext } from '@tanstack/angular-table';
-
-@Component({
-  templateUrl: './selection-table-row.component.html',
-  styleUrl: './selection-table-row.component.css',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SelectionTableRowComponent<T> {
-  context = injectFlexRenderContext<CellContext<T, unknown>>();
-}

package/backoffice/table/_components/sort-header-button/sort-header-button.component.css

@@ -1,14 +0,0 @@
-.sort-button {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  text-transform: capitalize;
-  cursor: pointer;
-}
-
-.sort-icon {
-  display: inline-block;
-  margin-left: 0.25rem;
-  width: 1rem;
-  height: 1rem;
-}

package/backoffice/table/_components/sort-header-button/sort-header-button.component.html

@@ -1,11 +0,0 @@
-<button class="sort-button" (click)="onSortClick()" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
-  <span class="capitalize">
-    {{ columnName() }}
-  </span>
-  <span class="sort-icon">
-    <!-- Sort Icon -->
-    @if (enableSorting() && iconName()) {
-      <ng-icon hlm size="sm" [name]="iconName()" aria-hidden="true" />
-    }
-  </span>
-</button>

package/backoffice/table/_components/sort-header-button/sort-header-button.component.ts

@@ -1,55 +0,0 @@
-import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
-import { HlmIconModule } from '@3ddv/software-division-components/generic/icon';
-import { Component, input, output, signal } from '@angular/core';
-import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideArrowDown, lucideArrowUp, lucideArrowUpDown } from '@ng-icons/lucide';
-
-@Component({
-  selector: 'sdc-table-head-sort-button',
-  imports: [NgIcon, ButtonComponent, HlmIconModule],
-  providers: [provideIcons({ lucideArrowUpDown, lucideArrowUp, lucideArrowDown })],
-  templateUrl: './sort-header-button.component.html',
-  styleUrl: './sort-header-button.component.css',
-})
-export class SortTableHeadButtonComponent {
-  public readonly isSorted = input<boolean>(false);
-  public readonly columnName = input.required<string>();
-  public readonly sortDirection = input.required<'asc' | 'desc' | false>();
-  public readonly enableSorting = input<boolean>(false);
-
-  public readonly sortClick = output<void>();
-
-  protected isHovered = signal(false);
-
-  protected onSortClick() {
-    if (this.enableSorting()) {
-      this.sortClick.emit();
-    }
-  }
-
-  protected onMouseEnter() {
-    if (this.enableSorting()) {
-      this.isHovered.set(true);
-    }
-  }
-
-  protected onMouseLeave() {
-    if (this.enableSorting()) {
-      this.isHovered.set(false);
-    }
-  }
-
-  protected iconName() {
-    // Show active sort arrow when sorted
-    if (this.isSorted()) {
-      return this.sortDirection() === 'asc' ? 'lucideArrowDown' : 'lucideArrowUp';
-    }
-
-    if (this.isHovered()) {
-      return 'lucideArrowUpDown';
-    }
-
-    // No icon when not sorted and not hovering
-    return '';
-  }
-}