dasar-ui 1.1.0 → 1.3.0

package/projects/dasar-ui/src/lib/components/dasar-pivot-table/dasar-pivot-table.html

@@ -1,163 +0,0 @@
-<div
-  class="dasar-pivot-container appearance-{{ appearance }} size-{{ size }} spacing-{{ spacing }}"
->
-  <!-- Top Table Header Slot (Optional Toolbar) -->
-  @if (providedHeader) {
-    <ng-container *ngTemplateOutlet="providedHeader.templateRef"></ng-container>
-  }
-
-  <div class="dasar-pivot-wrapper">
-    <table class="dasar-pivot-table hoverable">
-      <!-- HEADER ROW -->
-      <thead>
-        <tr>
-          <th class="corner-cell">
-            <div class="corner-labels">
-              @if (colLabel) {
-                <span class="col-label">{{ colLabel }}</span>
-              }
-              @if (rowLabel) {
-                <span class="row-label">{{ rowLabel }}</span>
-              }
-            </div>
-          </th>
-
-          @for (col of colHeaders; track col) {
-            <th scope="col" class="col-header">
-              @if (colHeaderTemplate) {
-                <ng-container
-                  *ngTemplateOutlet="colHeaderTemplate.templateRef; context: { $implicit: col }"
-                ></ng-container>
-              } @else {
-                {{ col }}
-              }
-            </th>
-          }
-          @if (showRowTotals) {
-            <th scope="col" class="total-header">Total</th>
-          }
-        </tr>
-      </thead>
-
-      <!-- CUSTOM BODY SLOT -->
-      @if (providedBody) {
-        <ng-container *ngTemplateOutlet="providedBody.templateRef"></ng-container>
-      }
-      <!-- STANDARD BODY -->
-      @else if (data.length > 0 && !loading) {
-        <tbody>
-          @for (row of rowHeaders; track row; let i = $index) {
-            <tr
-              class="dasar-table-row"
-              (click)="handleRowClick(row, i, $event)"
-              (dblclick)="handleRowDblclick(row, i, $event)"
-              (contextmenu)="handleRowContextMenu(row, i, $event)"
-            >
-              <!-- Row Header -->
-              <th scope="row" class="row-header">
-                @if (rowHeaderTemplate) {
-                  <ng-container
-                    *ngTemplateOutlet="rowHeaderTemplate.templateRef; context: { $implicit: row }"
-                  ></ng-container>
-                } @else {
-                  {{ row }}
-                }
-              </th>
-
-              <!-- Data Cells (With custom styling functions) -->
-              @for (col of colHeaders; track col) {
-                <td
-                  class="data-cell"
-                  [ngClass]="cellClassFn ? cellClassFn(matrix[row][col], row, col) : ''"
-                  [ngStyle]="cellStyleFn ? cellStyleFn(matrix[row][col], row, col) : null"
-                >
-                  @if (cellTemplate) {
-                    <ng-container
-                      *ngTemplateOutlet="
-                        cellTemplate.templateRef;
-                        context: { $implicit: matrix[row][col], row: row, col: col }
-                      "
-                    ></ng-container>
-                  } @else {
-                    {{ matrix[row][col] !== null ? matrix[row][col] : emptyText }}
-                  }
-                </td>
-              }
-
-              <!-- Row Total Cell -->
-              @if (showRowTotals) {
-                <td class="total-cell row-total">
-                  {{ rowTotals[row] !== null ? rowTotals[row] : emptyText }}
-                </td>
-              }
-            </tr>
-
-            <!-- Expanded Row Slot -->
-            @if (expandedRows.has(row) && providedExpanded) {
-              <tr class="dasar-table-expanded-row state-row">
-                <td
-                  [attr.colspan]="colHeaders.length + (showRowTotals ? 2 : 1)"
-                  class="expanded-cell"
-                >
-                  <ng-container
-                    *ngTemplateOutlet="providedExpanded.templateRef; context: { $implicit: row }"
-                  ></ng-container>
-                </td>
-              </tr>
-            }
-          }
-        </tbody>
-      }
-
-      <!-- FOOTER ROW -->
-      @if (showColTotals && rowHeaders.length > 0 && !loading && !providedBody) {
-        <tfoot>
-          <tr>
-            <th scope="row" class="total-header">Grand Total</th>
-            @for (col of colHeaders; track col) {
-              <td class="total-cell col-total">
-                {{ colTotals[col] !== null ? colTotals[col] : emptyText }}
-              </td>
-            }
-            @if (showRowTotals) {
-              <td class="total-cell grand-total">
-                {{ grandTotal !== null ? grandTotal : emptyText }}
-              </td>
-            }
-          </tr>
-        </tfoot>
-      }
-    </table>
-
-    <!-- Loading State -->
-    @if (loading) {
-      <div class="state-cell">
-        <div class="state-content">
-          <div class="dasar-spinner"></div>
-          <p>{{ loadingText }}</p>
-        </div>
-      </div>
-    }
-
-    <!-- Empty State -->
-    @if (data.length === 0 && !loading) {
-      @if (providedEmpty) {
-        <ng-container *ngTemplateOutlet="providedEmpty.templateRef"></ng-container>
-      } @else {
-        <div class="state-cell">
-          <div class="empty-content">
-            <h5>{{ emptyTitle }}</h5>
-            <p>{{ emptyDescription }}</p>
-          </div>
-        </div>
-      }
-    }
-  </div>
-
-  <!-- Pagination Slot (Bottom Toolbar) -->
-  @if (providedPagination) {
-    <div class="dasar-table-pagination">
-      <ng-container *ngTemplateOutlet="providedPagination.templateRef"></ng-container>
-    </div>
-  }
-</div>

package/projects/dasar-ui/src/lib/components/dasar-pivot-table/dasar-pivot-table.scss

@@ -1,283 +0,0 @@
-@use '../../styles/theme.scss' as *;
-
-.dasar-pivot-container {
-  /* Inherit Table Variables */
-  --dt-primary: var(--theme-primary-color);
-  --dt-primary-hover: var(--theme-primary-hover-color);
-  --dt-primary-surface: var(--theme-primary-surface-color);
-  --dt-text-inverse: var(--theme-text-inverse-color);
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: var(--radius-md, $dasar-radius-md);
-  overflow: hidden;
-  background-color: var(--theme-bg-surface-color);
-
-  &.appearance-outline {
-    border: 1px solid var(--theme-border-strong-color);
-  }
-
-  &.appearance-filled {
-    background-color: var(--theme-bg-default-color);
-    border: 1px solid transparent;
-  }
-
-  &.appearance-elevated {
-    border: none;
-    box-shadow:
-      0 10px 25px -5px rgba(0, 0, 0, 0.1),
-      0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  }
-
-  &.appearance-borderless {
-    border: none;
-    border-radius: $dasar-radius-none;
-    background-color: transparent;
-  }
-
-  /* --- Sizing --- */
-  &.size-sm {
-    font-size: 13px;
-  }
-  &.size-md {
-    font-size: 14px;
-  }
-  &.size-lg {
-    font-size: 16px;
-  }
-
-  /* --- Spacing --- */
-  &.spacing-compact .dasar-pivot-table {
-    th,
-    td {
-      padding: $dasar-space-base $dasar-space-3;
-    }
-  }
-  &.spacing-normal .dasar-pivot-table {
-    th,
-    td {
-      padding: $dasar-space-4 $dasar-space-5;
-    }
-  }
-  &.spacing-relaxed .dasar-pivot-table {
-    th,
-    td {
-      padding: $dasar-space-6 $dasar-space-8;
-    }
-  }
-}
-
-.dasar-pivot-wrapper {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.dasar-pivot-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  text-align: left;
-  font-size: inherit;
-  color: var(--theme-text-primary-color);
-
-  th,
-  td {
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-
-  /* --- Top Headers --- */
-  thead {
-    background-color: var(--dt-primary);
-
-    th {
-      font-weight: var(--font-weight-semibold, $dasar-font-weight-semibold);
-      color: var(--dt-text-inverse);
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      border-bottom: 1px solid var(--dt-primary-hover);
-    }
-  }
-
-  /* --- Top Left Corner --- */
-  .corner-cell {
-    background-color: var(--dt-primary);
-    position: sticky;
-    left: 0;
-    top: 0;
-    z-index: 15;
-    min-width: 120px;
-    vertical-align: top;
-    border-right: 1px solid var(--dt-primary-hover);
-  }
-
-  .corner-labels {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--dt-text-inverse);
-    opacity: 0.9;
-
-    .col-label {
-      text-align: right;
-    }
-    .row-label {
-      text-align: left;
-      margin-top: $dasar-space-base;
-    }
-  }
-
-  /* --- Body & Rows --- */
-  tbody {
-    tr.dasar-table-row {
-      border-bottom: 1px solid var(--theme-border-subtle-color);
-      transition:
-        background-color 0.2s ease,
-        box-shadow 0.2s ease;
-      background-color: var(--theme-bg-surface-color);
-
-      &:last-child:not(.expanded) {
-        border-bottom: none;
-      }
-    }
-  }
-
-  /* --- Row Headers (Left Column) --- */
-  .row-header {
-    background-color: var(--theme-bg-surface-color);
-    font-weight: var(--font-weight-semibold, $dasar-font-weight-semibold);
-    position: sticky;
-    left: 0;
-    z-index: 5;
-    box-shadow: 1px 0 0 0 var(--theme-border-subtle-color);
-    transition:
-      background-color 0.2s ease,
-      box-shadow 0.2s ease;
-  }
-
-  /* --- Data Cells --- */
-  .data-cell {
-    text-align: right;
-  }
-
-  /* --- Hover State (Matches Table Hover) --- */
-  &.hoverable tbody tr.dasar-table-row:not(.state-row):hover {
-    background-color: var(--dt-primary-surface);
-    cursor: pointer;
-
-    .row-header {
-      background-color: var(--dt-primary-surface);
-      box-shadow:
-        inset $dasar-space-0-5 0 0 0 var(--dt-primary),
-        1px 0 0 0 var(--theme-border-subtle-color);
-    }
-  }
-
-  /* --- Totals --- */
-  .total-header {
-    font-weight: var(--font-weight-bold, $dasar-font-weight-bold);
-  }
-
-  thead .total-header {
-    background-color: var(--dt-primary-hover);
-    color: var(--dt-text-inverse);
-  }
-
-  .total-cell {
-    background-color: var(--theme-bg-hover-color);
-    font-weight: var(--font-weight-semibold, $dasar-font-weight-semibold);
-    text-align: right;
-  }
-
-  tfoot {
-    tr {
-      border-top: 1px solid var(--theme-border-strong-color);
-    }
-
-    .total-header {
-      background-color: var(--theme-bg-hover-color);
-      position: sticky;
-      left: 0;
-      z-index: 5;
-      box-shadow: 1px 0 0 0 var(--theme-border-subtle-color);
-    }
-  }
-
-  .grand-total {
-    background-color: var(--dt-primary-surface);
-    color: var(--dt-primary);
-    font-weight: var(--font-weight-bold, $dasar-font-weight-bold);
-  }
-}
-
-/* --- State & Utility Classes --- */
-.state-row {
-  background-color: transparent !important;
-  &:hover {
-    background-color: transparent !important;
-    cursor: default !important;
-  }
-}
-
-.state-cell {
-  text-align: center;
-  padding: $dasar-space-8 !important;
-}
-
-.state-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: $dasar-space-3;
-  color: var(--theme-text-secondary-color);
-}
-
-.dasar-spinner {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--theme-border-subtle-color);
-  border-top-color: var(--dt-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: $dasar-space-1;
-  h5 {
-    margin: 0;
-    font-weight: var(--font-weight-semibold, $dasar-font-weight-semibold);
-    color: var(--theme-text-primary-color);
-    font-size: 16px;
-  }
-  p {
-    margin: 0;
-    color: var(--theme-text-secondary-color);
-    font-size: 14px;
-  }
-}
-
-.dasar-table-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: $dasar-space-3 $dasar-space-4;
-  border-top: 1px solid var(--theme-border-subtle-color);
-  background-color: var(--theme-bg-surface-color);
-}

package/projects/dasar-ui/src/lib/components/dasar-pivot-table/dasar-pivot-table.ts

@@ -1,230 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  OnChanges,
-  SimpleChanges,
-  Directive,
-  ContentChild,
-  TemplateRef,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-// --- Types ---
-export type DasarPivotAggregator = 'sum' | 'count' | 'avg' | 'min' | 'max';
-export type DasarPivotTableAppearance = 'outline' | 'filled' | 'elevated' | 'borderless';
-export type DasarPivotTableSpacing = 'compact' | 'normal' | 'relaxed';
-export type DasarPivotTableSize = 'sm' | 'md' | 'lg';
-export type DasarPivotTableSortDirection = 'asc' | 'desc' | null;
-
-export interface DasarPivotTableSortEvent {
-  key: string;
-  direction: DasarPivotTableSortDirection;
-}
-
-@Directive({ selector: '[pivot-cell-template]', standalone: true })
-export class DasarPivotCellTemplate {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-row-header-template]', standalone: true })
-export class DasarPivotRowHeaderTemplate {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-col-header-template]', standalone: true })
-export class DasarPivotColHeaderTemplate {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-header-slot]', standalone: true })
-export class DasarPivotTableHeaderSlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-body-slot]', standalone: true })
-export class DasarPivotTableBodySlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-empty-slot]', standalone: true })
-export class DasarPivotTableEmptySlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-pagination-slot]', standalone: true })
-export class DasarPivotTablePaginationSlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-@Directive({ selector: '[pivot-expanded-slot]', standalone: true })
-export class DasarPivotTableExpandedSlot {
-  constructor(public templateRef: TemplateRef<any>) {}
-}
-
-@Component({
-  selector: 'dasar-pivot-table',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './dasar-pivot-table.html',
-  styleUrls: ['./dasar-pivot-table.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DasarPivotTable implements OnChanges {
-  @ContentChild(DasarPivotRowHeaderTemplate) rowHeaderTemplate?: DasarPivotRowHeaderTemplate;
-  @ContentChild(DasarPivotColHeaderTemplate) colHeaderTemplate?: DasarPivotColHeaderTemplate;
-  @ContentChild(DasarPivotCellTemplate) cellTemplate?: DasarPivotCellTemplate;
-  @ContentChild(DasarPivotTableHeaderSlot) providedHeader?: DasarPivotTableHeaderSlot;
-  @ContentChild(DasarPivotTableBodySlot) providedBody?: DasarPivotTableBodySlot;
-  @ContentChild(DasarPivotTableEmptySlot) providedEmpty?: DasarPivotTableEmptySlot;
-  @ContentChild(DasarPivotTablePaginationSlot) providedPagination?: DasarPivotTablePaginationSlot;
-  @ContentChild(DasarPivotTableExpandedSlot) providedExpanded?: DasarPivotTableExpandedSlot;
-
-  @Input({ required: true }) data: any[] = [];
-  @Input({ required: true }) rowField!: string;
-  @Input({ required: true }) colField!: string;
-  @Input() valField: string = '';
-  @Input() aggregator: DasarPivotAggregator = 'sum';
-  @Input() rowLabel: string = '';
-  @Input() colLabel: string = '';
-  @Input() showRowTotals: boolean = true;
-  @Input() showColTotals: boolean = true;
-  @Input() emptyText: string = '-';
-  @Input() appearance: DasarPivotTableAppearance = 'outline';
-  @Input() spacing: DasarPivotTableSpacing = 'normal';
-  @Input() size: DasarPivotTableSize = 'md';
-  @Input() loading: boolean = false;
-  @Input() emptyTitle: string = 'Data empty';
-  @Input() emptyDescription: string = 'No records found';
-  @Input() loadingText: string = 'loading...';
-  @Input() sortKey: string | null = null;
-  @Input() sortDirection: DasarPivotTableSortDirection = null;
-  @Input() cellClassFn?: (
-    val: number | null,
-    row: string,
-    col: string,
-  ) => string | string[] | Record<string, boolean>;
-  @Input() cellStyleFn?: (val: number | null, row: string, col: string) => Record<string, string>;
-
-  @Output() rowClick = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() rowDblclick = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() rowContextMenu = new EventEmitter<{ row: any; index: number; event: MouseEvent }>();
-  @Output() sortChange = new EventEmitter<DasarPivotTableSortEvent>();
-  @Output() rowExpandChange = new EventEmitter<{ row: any; index: number; expanded: boolean }>();
-
-  rowHeaders: string[] = [];
-  colHeaders: string[] = [];
-  matrix: Record<string, Record<string, number | null>> = {};
-  rowTotals: Record<string, number | null> = {};
-  colTotals: Record<string, number | null> = {};
-  grandTotal: number | null = null;
-  expandedRows = new Set<string>();
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (
-      changes['data'] ||
-      changes['rowField'] ||
-      changes['colField'] ||
-      changes['valField'] ||
-      changes['aggregator']
-    ) {
-      this.buildPivotMatrix();
-    }
-  }
-
-  private buildPivotMatrix() {
-    if (!this.data || !this.data.length) {
-      this.resetState();
-      return;
-    }
-    const rowSet = new Set<string>();
-    const colSet = new Set<string>();
-    const grouped = new Map<string, any[]>();
-
-    for (const item of this.data) {
-      const rVal = String(item[this.rowField] ?? 'Unknown');
-      const cVal = String(item[this.colField] ?? 'Unknown');
-      rowSet.add(rVal);
-      colSet.add(cVal);
-      const key = `${rVal}::${cVal}`;
-      if (!grouped.has(key)) grouped.set(key, []);
-      grouped.get(key)!.push(item);
-    }
-
-    this.rowHeaders = Array.from(rowSet).sort();
-    this.colHeaders = Array.from(colSet).sort();
-
-    this.matrix = {};
-    this.rowTotals = {};
-    this.colTotals = {};
-    const allDataForGrandTotal: any[] = [];
-
-    for (const r of this.rowHeaders) {
-      this.matrix[r] = {};
-      const rowData: any[] = [];
-      for (const c of this.colHeaders) {
-        const items = grouped.get(`${r}::${c}`) || [];
-        rowData.push(...items);
-        allDataForGrandTotal.push(...items);
-        this.matrix[r][c] = this.aggregate(items);
-        if (!this.colTotals[c]) this.colTotals[c] = 0;
-      }
-      this.rowTotals[r] = this.aggregate(rowData);
-    }
-
-    for (const c of this.colHeaders) {
-      const colData = this.data.filter((item) => String(item[this.colField] ?? 'Unknown') === c);
-      this.colTotals[c] = this.aggregate(colData);
-    }
-    this.grandTotal = this.aggregate(allDataForGrandTotal);
-  }
-
-  private aggregate(items: any[]): number | null {
-    if (!items || items.length === 0) return null;
-    if (this.aggregator === 'count') return items.length;
-    const values = items.map((i) => Number(i[this.valField]) || 0);
-    switch (this.aggregator) {
-      case 'sum':
-        return values.reduce((a, b) => a + b, 0);
-      case 'avg':
-        return values.reduce((a, b) => a + b, 0) / values.length;
-      case 'max':
-        return Math.max(...values);
-      case 'min':
-        return Math.min(...values);
-      default:
-        return null;
-    }
-  }
-
-  private resetState() {
-    this.rowHeaders = [];
-    this.colHeaders = [];
-    this.matrix = {};
-    this.rowTotals = {};
-    this.colTotals = {};
-    this.grandTotal = null;
-  }
-
-  // --- Event Handlers ---
-  handleRowClick(row: string, index: number, event: MouseEvent) {
-    this.rowClick.emit({ row, index, event });
-  }
-
-  handleRowDblclick(row: string, index: number, event: MouseEvent) {
-    this.rowDblclick.emit({ row, index, event });
-  }
-
-  handleRowContextMenu(row: string, index: number, event: MouseEvent) {
-    this.rowContextMenu.emit({ row, index, event });
-  }
-}
-
-export const DasarPivotTableComponent = [
-  DasarPivotTable,
-  DasarPivotCellTemplate,
-  DasarPivotRowHeaderTemplate,
-  DasarPivotColHeaderTemplate,
-  DasarPivotTableHeaderSlot,
-  DasarPivotTableBodySlot,
-  DasarPivotTableEmptySlot,
-  DasarPivotTablePaginationSlot,
-  DasarPivotTableExpandedSlot,
-] as const;

package/projects/dasar-ui/src/lib/components/dasar-radio/dasar-radio.html

@@ -1 +0,0 @@
-<p>dasar-radio works!</p>

package/projects/dasar-ui/src/lib/components/dasar-radio/dasar-radio.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DasarRadio } from './dasar-radio';
-
-describe('DasarRadio', () => {
-  let component: DasarRadio;
-  let fixture: ComponentFixture<DasarRadio>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DasarRadio],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DasarRadio);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});