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

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

@@ -0,0 +1,287 @@
+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/src/backoffice/table/_components/pagination/pagination.component.css

@@ -0,0 +1,117 @@
+.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/src/backoffice/table/_components/pagination/pagination.component.html

@@ -0,0 +1,55 @@
+<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/src/backoffice/table/_components/pagination/pagination.component.ts

@@ -0,0 +1,79 @@
+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';
+import { ButtonComponent } from '../../../../generic/button';
+import { ThemeClass } from '../../../../shared/types';
+import { HlmIconModule } from '../../ui/ui-icon-helm/src';
+
+@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/src/backoffice/table/_components/selection-table-head/selection-table-head.component.html

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

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

@@ -0,0 +1,36 @@
+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/src/backoffice/table/_components/selection-table-row/selection-table-row.component.html

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

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

@@ -0,0 +1,12 @@
+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/src/backoffice/table/_components/sort-header-button/sort-header-button.component.css

@@ -0,0 +1,14 @@
+.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/src/backoffice/table/_components/sort-header-button/sort-header-button.component.html

@@ -0,0 +1,11 @@
+<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/src/backoffice/table/_components/sort-header-button/sort-header-button.component.ts

@@ -0,0 +1,55 @@
+import { Component, input, output, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideArrowDown, lucideArrowUp, lucideArrowUpDown } from '@ng-icons/lucide';
+import { ButtonComponent } from '../../../../generic/button';
+import { HlmIconModule } from '../../ui/ui-icon-helm/src';
+
+@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 '';
+  }
+}