@origostudio/origo-design 0.0.53 → 0.0.55

package/packages/angular-renderer/src/components/primitives/pagination/pagination.component.ts

@@ -0,0 +1,275 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import {
+  OrigoAdapter,
+  ContainerComponent as IContainerComponent,
+  coerceContractProps,
+} from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface PageChangeEvent {
+  page: number;
+  first: number;
+  rows: number;
+  pageCount: number;
+}
+
+export interface RowsChangeEvent {
+  rows: number;
+  first: number;
+}
+
+export interface PaginationProps {
+  first?: number;
+  rows?: number;
+  totalRecords?: number;
+  pageLinkSize?: number;
+  rowsPerPageOptions?: number[];
+  showFirstLastIcon?: boolean;
+  showPageLinks?: boolean;
+  template?: string;
+  disabled?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  variant?: string;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+export const PaginationContractSchema: Record<
+  keyof PaginationProps,
+  'string' | 'number' | 'boolean' | 'array' | 'object'
+> = {
+  first: 'number',
+  rows: 'number',
+  totalRecords: 'number',
+  pageLinkSize: 'number',
+  rowsPerPageOptions: 'array',
+  showFirstLastIcon: 'boolean',
+  showPageLinks: 'boolean',
+  template: 'string',
+  disabled: 'boolean',
+  size: 'string',
+  variant: 'string',
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+};
+
+@Component({
+  selector: 'origo-pagination',
+  standalone: true,
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-pagination]': 'true',
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class PaginationComponent implements OrigoAdapter<PaginationProps>, IContainerComponent {
+  static readonly contractSchema = PaginationContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<PaginationProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+
+  pageChange = output<PageChangeEvent>();
+  rowsChange = output<RowsChangeEvent>();
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  protected props = computed(() =>
+    coerceContractProps<PaginationProps>(this.contract().props, PaginationContractSchema)
+  );
+
+  computedFirst = computed(() => {
+    const f = Number(this.props().first ?? 0);
+    return isNaN(f) || f < 0 ? 0 : f;
+  });
+
+  computedRows = computed(() => {
+    const r = Number(this.props().rows ?? 10);
+    return isNaN(r) || r <= 0 ? 10 : r;
+  });
+
+  computedTotalRecords = computed(() => {
+    const t = Number(this.props().totalRecords ?? 0);
+    return isNaN(t) || t < 0 ? 0 : t;
+  });
+
+  computedPageLinkSize = computed(() => {
+    const s = Number(this.props().pageLinkSize ?? 5);
+    return isNaN(s) || s <= 0 ? 5 : s;
+  });
+
+  computedRowsPerPageOptions = computed<number[]>(() => {
+    const opts = this.props().rowsPerPageOptions;
+    if (!Array.isArray(opts)) return [];
+    return opts.map(item => Number(item)).filter(n => !isNaN(n) && n > 0);
+  });
+
+  computedShowFirstLastIcon = computed(() => {
+    return this.props().showFirstLastIcon !== false;
+  });
+
+  computedShowPageLinks = computed(() => {
+    return this.props().showPageLinks !== false;
+  });
+
+  computedDisabled = computed(() => {
+    return !!this.props().disabled;
+  });
+
+  computedAriaLabel = computed(() => {
+    const label = this.props()['aria-label'];
+    return label !== undefined && label !== null ? String(label) : 'Pagination';
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.props()['aria-describedby'];
+    return desc !== undefined && desc !== null ? String(desc) : undefined;
+  });
+
+  pageCount = computed(() => {
+    const rows = this.computedRows();
+    const total = this.computedTotalRecords();
+    return rows > 0 ? Math.ceil(total / rows) : 0;
+  });
+
+  pageIndex = computed(() => {
+    const rows = this.computedRows();
+    const first = this.computedFirst();
+    return rows > 0 ? Math.floor(first / rows) : 0;
+  });
+
+  isFirstPage = computed(() => {
+    return this.pageIndex() <= 0;
+  });
+
+  isLastPage = computed(() => {
+    const count = this.pageCount();
+    return count === 0 || this.pageIndex() >= count - 1;
+  });
+
+  visiblePageLinks = computed<number[]>(() => {
+    const totalPages = this.pageCount();
+    const linkSize = this.computedPageLinkSize();
+
+    if (totalPages <= 0) return [];
+    if (totalPages <= linkSize) {
+      return Array.from({ length: totalPages }, (_, i) => i);
+    }
+
+    const current = this.pageIndex();
+    const half = Math.floor(linkSize / 2);
+    let start = Math.max(0, current - half);
+    let end = start + linkSize - 1;
+
+    if (end >= totalPages) {
+      end = totalPages - 1;
+      start = Math.max(0, end - linkSize + 1);
+    }
+
+    const pages: number[] = [];
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  changePage(targetIndex: number) {
+    if (this.computedDisabled()) return;
+
+    const count = this.pageCount();
+    const clampedIndex = Math.max(0, Math.min(targetIndex, Math.max(0, count - 1)));
+    if (clampedIndex === this.pageIndex()) return;
+
+    const rows = this.computedRows();
+    const first = clampedIndex * rows;
+
+    this.experienceAdapter.updateState(this.contract().id, 'first', first);
+
+    const event: PageChangeEvent = {
+      page: clampedIndex,
+      first,
+      rows,
+      pageCount: count,
+    };
+
+    const contractId = this.contract().id;
+    if (contractId) {
+      this.experienceAdapter.dispatchCapability(contractId, 'pageChange', event);
+    }
+
+    this.pageChange.emit(event);
+  }
+
+  onFirst() {
+    this.changePage(0);
+  }
+
+  onPrevious() {
+    this.changePage(this.pageIndex() - 1);
+  }
+
+  onNext() {
+    this.changePage(this.pageIndex() + 1);
+  }
+
+  onLast() {
+    this.changePage(this.pageCount() - 1);
+  }
+
+  onPageSelect(pageIndex: number) {
+    this.changePage(pageIndex);
+  }
+
+  onRowsSelect(event: Event) {
+    if (this.computedDisabled()) return;
+
+    const target = event.target as HTMLSelectElement;
+    const newRows = Number(target.value);
+    if (isNaN(newRows) || newRows <= 0) return;
+
+    this.experienceAdapter.updateState(this.contract().id, 'rows', newRows);
+    this.experienceAdapter.updateState(this.contract().id, 'first', 0);
+
+    const rowsEvent: RowsChangeEvent = {
+      rows: newRows,
+      first: 0,
+    };
+
+    const pageCount = newRows > 0 ? Math.ceil(this.computedTotalRecords() / newRows) : 0;
+    const pageEvent: PageChangeEvent = {
+      page: 0,
+      first: 0,
+      rows: newRows,
+      pageCount,
+    };
+
+    const contractId = this.contract().id;
+    if (contractId) {
+      this.experienceAdapter.dispatchCapability(contractId, 'rowsChange', rowsEvent);
+      this.experienceAdapter.dispatchCapability(contractId, 'pageChange', pageEvent);
+    }
+
+    this.rowsChange.emit(rowsEvent);
+    this.pageChange.emit(pageEvent);
+  }
+}

package/packages/angular-renderer/src/components/primitives/stepper/stepper.component.html

@@ -0,0 +1,68 @@
+<div
+  class="origo-stepper__container"
+  [class.origo-stepper--vertical]="orientation() === 'vertical'"
+  [class.origo-stepper--horizontal]="orientation() === 'horizontal'"
+>
+  <div
+    class="origo-stepper__list"
+    role="tablist"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+    [attr.aria-orientation]="orientation()"
+  >
+    @for (step of computedSteps(); track step.key; let i = $index; let last = $last) {
+      <div class="origo-stepper__item" [class.origo-stepper__item--active]="isStepActive(i)">
+        <button
+          #stepButton
+          type="button"
+          role="tab"
+          class="origo-stepper__step"
+          [class.origo-stepper__step--active]="isStepActive(i)"
+          [class.origo-stepper__step--completed]="isStepCompleted(step)"
+          [class.origo-stepper__step--disabled]="isStepDisabled(step, i)"
+          [disabled]="isStepDisabled(step, i)"
+          [attr.aria-selected]="isStepActive(i)"
+          [attr.aria-controls]="'step-panel-' + step.key"
+          [attr.id]="'step-tab-' + step.key"
+          [attr.tabindex]="isStepActive(i) ? 0 : -1"
+          (click)="onStepClick(step, i)"
+          (keydown)="onKeyDown($event, i)"
+        >
+          <span class="origo-stepper__indicator" aria-hidden="true">
+            @if (isStepCompleted(step)) {
+              <span class="origo-stepper__check">✓</span>
+            } @else if (step.icon) {
+              <span class="origo-stepper__icon">{{ step.icon }}</span>
+            } @else {
+              <span class="origo-stepper__number">{{ i + 1 }}</span>
+            }
+          </span>
+
+          <span class="origo-stepper__content">
+            <span class="origo-stepper__label">{{ step.label }}</span>
+            @if (step.description) {
+              <span class="origo-stepper__description">{{ step.description }}</span>
+            }
+          </span>
+        </button>
+
+        @if (!last) {
+          <div
+            class="origo-stepper__connector"
+            [class.origo-stepper__connector--completed]="isStepCompleted(step)"
+            aria-hidden="true"
+          ></div>
+        }
+      </div>
+    }
+  </div>
+
+  <div
+    class="origo-stepper__panels"
+    role="region"
+    [attr.id]="activeStepKey() ? 'step-panel-' + activeStepKey() : null"
+  >
+    <ng-container #vc></ng-container>
+    <ng-content></ng-content>
+  </div>
+</div>

package/packages/angular-renderer/src/components/primitives/stepper/stepper.component.scss

@@ -0,0 +1,167 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.origo-stepper__container {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+
+  &.origo-stepper--vertical {
+    .origo-stepper__list {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .origo-stepper__item {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .origo-stepper__connector {
+      inline-size: var(--origo-border-width-thick);
+      min-block-size: var(--origo-spacing-lg);
+      margin-inline-start: var(--origo-spacing-md);
+      margin-block: var(--origo-spacing-xs);
+    }
+  }
+}
+
+.origo-stepper__list {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding: 0;
+  margin: 0;
+  gap: var(--origo-spacing-sm);
+}
+
+.origo-stepper__item {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+
+  &:last-child {
+    flex: 0 0 auto;
+  }
+}
+
+.origo-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-sm);
+  background: none;
+  border: none;
+  padding-block: var(--origo-spacing-sm);
+  padding-inline: var(--origo-spacing-sm);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--origo-typography-button-font-size);
+  color: var(--origo-color-text-muted);
+  border-radius: var(--origo-radius-sm);
+  transition: all var(--origo-duration-fast) ease;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: var(--origo-color-surface-subtle);
+    color: var(--origo-color-text-primary);
+  }
+
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: 2px;
+  }
+
+  &.origo-stepper__step--active {
+    color: var(--origo-color-surface-primary);
+    font-weight: 600;
+
+    .origo-stepper__indicator {
+      background-color: var(--origo-color-surface-primary);
+      border-color: var(--origo-color-surface-primary);
+      color: var(--origo-color-text-inverse);
+    }
+  }
+
+  &.origo-stepper__step--completed:not(.origo-stepper__step--active) {
+    .origo-stepper__indicator {
+      background-color: var(--origo-color-surface-primary);
+      border-color: var(--origo-color-surface-primary);
+      color: var(--origo-color-text-inverse);
+    }
+  }
+
+  &:disabled,
+  &.origo-stepper__step--disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    color: var(--origo-color-text-disabled);
+
+    .origo-stepper__indicator {
+      border-color: var(--origo-color-border-default);
+      color: var(--origo-color-text-disabled);
+    }
+  }
+}
+
+.origo-stepper__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--origo-spacing-xl);
+  block-size: var(--origo-spacing-xl);
+  border-radius: var(--origo-radius-full);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  background-color: var(--origo-color-surface-default);
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-button-font-size);
+  font-weight: 600;
+  flex-shrink: 0;
+  transition: all var(--origo-duration-fast) ease;
+}
+
+.origo-stepper__content {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: start;
+}
+
+.origo-stepper__label {
+  font-size: var(--origo-typography-button-font-size);
+  line-height: var(--origo-typography-button-line-height);
+}
+
+.origo-stepper__description {
+  font-size: var(--origo-typography-caption-font-size);
+  color: var(--origo-color-text-muted);
+}
+
+.origo-stepper__connector {
+  flex: 1 1 auto;
+  block-size: var(--origo-border-width-default);
+  background-color: var(--origo-color-border-default);
+  margin-inline: var(--origo-spacing-sm);
+  transition: background-color var(--origo-duration-fast) ease;
+
+  &.origo-stepper__connector--completed {
+    background-color: var(--origo-color-surface-primary);
+  }
+}
+
+.origo-stepper__panels {
+  display: block;
+  padding-block: var(--origo-spacing-md);
+}