@origostudio/origo-design 0.0.53 → 0.0.55

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

@@ -0,0 +1,325 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+  ElementRef,
+  viewChildren,
+  viewChild,
+  ViewContainerRef,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+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 StepItem {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  optional?: boolean;
+  disabled?: boolean;
+  completed?: boolean;
+}
+
+export interface StepChangeEvent {
+  activeStep: string;
+  previousStep?: string;
+  index: number;
+}
+
+export interface StepperProps {
+  steps?: Array<StepItem>;
+  value?: string;
+  linear?: boolean;
+  readonly?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  completedSteps?: Array<string>;
+  disabled?: boolean;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+export const StepperContractSchema: Record<
+  keyof StepperProps,
+  'string' | 'number' | 'boolean' | 'array' | 'object'
+> = {
+  steps: 'array',
+  value: 'string',
+  linear: 'boolean',
+  readonly: 'boolean',
+  orientation: 'string',
+  completedSteps: 'array',
+  disabled: 'boolean',
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+};
+
+@Component({
+  selector: 'origo-stepper',
+  standalone: true,
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-stepper]': 'true',
+    '[class.origo-stepper--vertical]': "orientation() === 'vertical'",
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class StepperComponent implements OrigoAdapter<StepperProps>, IContainerComponent {
+  static readonly contractSchema = StepperContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<StepperProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+
+  stepButtons = viewChildren<ElementRef<HTMLButtonElement>>('stepButton');
+
+  valueChange = output<string>();
+  stepChange = output<StepChangeEvent>();
+  next = output<string>();
+  previous = output<string>();
+  complete = output<void>();
+  stepClick = output<StepItem>();
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private platformId = inject(PLATFORM_ID);
+
+  protected props = computed(() =>
+    coerceContractProps<StepperProps>(this.contract().props, StepperContractSchema)
+  );
+
+  computedAriaLabel = computed(() => {
+    const label = this.props()['aria-label'];
+    return label !== undefined && label !== null ? String(label) : 'Stepper';
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.props()['aria-describedby'];
+    return desc !== undefined && desc !== null ? String(desc) : undefined;
+  });
+
+  orientation = computed<'horizontal' | 'vertical'>(() => {
+    return this.props().orientation === 'vertical' ? 'vertical' : 'horizontal';
+  });
+
+  linear = computed<boolean>(() => {
+    return !!this.props().linear;
+  });
+
+  readonly = computed<boolean>(() => {
+    return !!this.props().readonly;
+  });
+
+  computedDisabled = computed<boolean>(() => {
+    return !!this.props().disabled;
+  });
+
+  computedSteps = computed<StepItem[]>(() => {
+    const rawSteps = this.props().steps;
+    if (!Array.isArray(rawSteps)) return [];
+
+    return rawSteps
+      .filter(s => s != null && s.key != null && s.label != null)
+      .map(s => ({
+        key: String(s.key),
+        label: String(s.label),
+        description: s.description ? String(s.description) : undefined,
+        icon: s.icon ? String(s.icon) : undefined,
+        optional: !!s.optional,
+        disabled: !!s.disabled,
+        completed: !!s.completed,
+      }));
+  });
+
+  activeStepKey = computed<string>(() => {
+    const val = this.props().value;
+    if (val && typeof val === 'string') return val;
+
+    const steps = this.computedSteps();
+    return steps.length > 0 ? steps[0].key : '';
+  });
+
+  activeStepIndex = computed<number>(() => {
+    const key = this.activeStepKey();
+    const steps = this.computedSteps();
+    const index = steps.findIndex(s => s.key === key);
+    return index >= 0 ? index : 0;
+  });
+
+  completedStepKeys = computed<Set<string>>(() => {
+    const set = new Set<string>();
+    const rawCompleted = this.props().completedSteps;
+    if (Array.isArray(rawCompleted)) {
+      for (const k of rawCompleted) {
+        if (k != null) set.add(String(k));
+      }
+    }
+    for (const step of this.computedSteps()) {
+      if (step.completed) {
+        set.add(step.key);
+      }
+    }
+    return set;
+  });
+
+  isStepCompleted(step: StepItem): boolean {
+    return this.completedStepKeys().has(step.key);
+  }
+
+  isStepActive(index: number): boolean {
+    return index === this.activeStepIndex();
+  }
+
+  isStepDisabled(step: StepItem, index: number): boolean {
+    if (this.computedDisabled() || this.readonly()) return true;
+    if (step.disabled) return true;
+
+    if (!this.linear()) return false;
+
+    // In linear mode, step at index is enabled if:
+    // 1) index <= activeStepIndex
+    // OR 2) all preceding steps 0..index-1 are completed
+    if (index <= this.activeStepIndex()) return false;
+
+    const steps = this.computedSteps();
+    for (let i = 0; i < index; i++) {
+      if (!this.isStepCompleted(steps[i])) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  onStepClick(step: StepItem, index: number) {
+    if (this.isStepDisabled(step, index)) return;
+
+    const previousStep = this.activeStepKey();
+    if (previousStep === step.key) {
+      this.stepClick.emit(step);
+      return;
+    }
+
+    this.experienceAdapter.updateState(this.contract().id, 'value', step.key);
+    this.experienceAdapter.updateState(this.contract().id, 'activeStep', step.key);
+
+    const changeEvent: StepChangeEvent = {
+      activeStep: step.key,
+      previousStep,
+      index,
+    };
+
+    const contractId = this.contract().id;
+    if (contractId) {
+      this.experienceAdapter.dispatchCapability(contractId, 'stepChange', changeEvent);
+      this.experienceAdapter.dispatchCapability(contractId, 'valueChange', step.key);
+      this.experienceAdapter.dispatchCapability(contractId, 'stepClick', step);
+    }
+
+    this.valueChange.emit(step.key);
+    this.stepChange.emit(changeEvent);
+    this.stepClick.emit(step);
+  }
+
+  goNext() {
+    const steps = this.computedSteps();
+    if (steps.length === 0) return;
+    const currIndex = this.activeStepIndex();
+    if (currIndex < steps.length - 1) {
+      const nextStep = steps[currIndex + 1];
+      this.onStepClick(nextStep, currIndex + 1);
+      this.next.emit(nextStep.key);
+    } else {
+      this.complete.emit();
+      const contractId = this.contract().id;
+      if (contractId) {
+        this.experienceAdapter.dispatchCapability(contractId, 'complete', undefined);
+      }
+    }
+  }
+
+  goPrevious() {
+    const steps = this.computedSteps();
+    const currIndex = this.activeStepIndex();
+    if (currIndex > 0) {
+      const prevStep = steps[currIndex - 1];
+      this.onStepClick(prevStep, currIndex - 1);
+      this.previous.emit(prevStep.key);
+    }
+  }
+
+  onKeyDown(event: KeyboardEvent, index: number) {
+    const steps = this.computedSteps();
+    if (steps.length === 0) return;
+
+    let nextIndex = index;
+    const isVertical = this.orientation() === 'vertical';
+
+    const isRtl =
+      isPlatformBrowser(this.platformId) &&
+      typeof window !== 'undefined' &&
+      event.target instanceof Element
+        ? window.getComputedStyle(event.target).direction === 'rtl'
+        : false;
+
+    if (!isVertical) {
+      if (event.key === 'ArrowRight') {
+        nextIndex = isRtl ? index - 1 : index + 1;
+        event.preventDefault();
+      } else if (event.key === 'ArrowLeft') {
+        nextIndex = isRtl ? index + 1 : index - 1;
+        event.preventDefault();
+      } else if (event.key === 'Home') {
+        nextIndex = 0;
+        event.preventDefault();
+      } else if (event.key === 'End') {
+        nextIndex = steps.length - 1;
+        event.preventDefault();
+      }
+    } else {
+      if (event.key === 'ArrowDown') {
+        nextIndex = index + 1;
+        event.preventDefault();
+      } else if (event.key === 'ArrowUp') {
+        nextIndex = index - 1;
+        event.preventDefault();
+      } else if (event.key === 'Home') {
+        nextIndex = 0;
+        event.preventDefault();
+      } else if (event.key === 'End') {
+        nextIndex = steps.length - 1;
+        event.preventDefault();
+      }
+    }
+
+    if (nextIndex < 0) nextIndex = steps.length - 1;
+    if (nextIndex >= steps.length) nextIndex = 0;
+
+    if (nextIndex !== index) {
+      setTimeout(() => {
+        const buttons = this.stepButtons();
+        if (buttons && buttons[nextIndex]) {
+          buttons[nextIndex].nativeElement.focus();
+        }
+      });
+    }
+  }
+}

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

@@ -1,27 +1,59 @@
 <div
-  class="origo-tabs__list"
-  role="tablist"
-  [attr.aria-label]="computedAriaLabel()"
-  [attr.aria-describedby]="computedAriaDescribedBy()"
+  class="origo-tabs__container"
+  [class.origo-tabs--vertical]="computedOrientation() === 'vertical'"
+  [class.origo-tabs--scrollable]="computedScrollable()"
 >
-  @for (tab of computedTabs(); track tab.key; let i = $index) {
-    <button
-      #tabButton
-      type="button"
-      role="tab"
-      class="origo-tabs__tab"
-      [class.origo-tabs__tab--active]="computedActiveTab() === tab.key"
-      [attr.aria-selected]="computedActiveTab() === tab.key"
-      [attr.aria-controls]="'tabpanel-' + tab.key"
-      [attr.id]="'tab-' + tab.key"
-      [attr.tabindex]="
-        computedActiveTab() === tab.key || (computedActiveTab() == null && i === 0) ? 0 : -1
-      "
-      [disabled]="tab.disabled"
-      (click)="onTabClick(tab)"
-      (keydown)="onKeyDown($event, i)"
-    >
-      <span class="origo-tabs__label" [innerHTML]="tab.label"></span>
-    </button>
-  }
+  <div
+    class="origo-tabs__list"
+    role="tablist"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+    [attr.aria-orientation]="computedOrientation()"
+  >
+    @for (tab of computedTabs(); track tab.key; let i = $index) {
+      <button
+        #tabButton
+        type="button"
+        role="tab"
+        class="origo-tabs__tab"
+        [class.origo-tabs__tab--active]="computedActiveTab() === tab.key"
+        [attr.aria-selected]="computedActiveTab() === tab.key"
+        [attr.aria-controls]="'tabpanel-' + tab.key"
+        [attr.id]="'tab-' + tab.key"
+        [attr.tabindex]="
+          computedActiveTab() === tab.key || (computedActiveTab() == null && i === 0) ? 0 : -1
+        "
+        [disabled]="tab.disabled"
+        (click)="onTabClick(tab)"
+        (keydown)="onKeyDown($event, i)"
+      >
+        @if (tab.icon) {
+          <span class="origo-tabs__icon" aria-hidden="true">{{ tab.icon }}</span>
+        }
+        <span class="origo-tabs__label" [innerHTML]="tab.label"></span>
+        @if (tab.badge) {
+          <span class="origo-tabs__badge">{{ tab.badge }}</span>
+        }
+        @if (tab.closable) {
+          <button
+            type="button"
+            class="origo-tabs__close"
+            [attr.aria-label]="'Close ' + tab.label"
+            (click)="onTabClose($event, tab)"
+          >
+            ×
+          </button>
+        }
+      </button>
+    }
+  </div>
+
+  <div
+    class="origo-tabs__panels"
+    role="region"
+    [attr.id]="computedActiveTab() ? 'tabpanel-' + computedActiveTab() : null"
+  >
+    <ng-container #vc></ng-container>
+    <ng-content></ng-content>
+  </div>
 </div>

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

@@ -1,49 +1,147 @@
 :host {
   display: block;
-  width: 100%;
+  box-sizing: border-box;
+  inline-size: 100%;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.origo-tabs__container {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+
+  &.origo-tabs--vertical {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .origo-tabs__list {
+      flex-direction: column;
+      border-block-end: none;
+      border-inline-end: var(--origo-border-width-default) solid var(--origo-color-border-default);
+    }
+
+    .origo-tabs__tab {
+      inline-size: 100%;
+      justify-content: flex-start;
+      border-block-end: none;
+      border-inline-end: var(--origo-border-width-thick) solid transparent;
+
+      &.origo-tabs__tab--active {
+        border-block-end-color: transparent;
+        border-inline-end-color: var(--origo-color-surface-primary);
+      }
+    }
+  }
+
+  &.origo-tabs--scrollable .origo-tabs__list {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
 }
 
 .origo-tabs__list {
   display: flex;
-  border-block-end: 1px solid var(--color-border, #e0e0e0);
+  border-block-end: var(--origo-border-width-default) solid var(--origo-color-border-default);
   margin: 0;
   padding: 0;
-  gap: var(--spacing-sm, 8px);
+  gap: var(--origo-spacing-sm);
+  background-color: transparent;
 }
 
 .origo-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
   background: none;
   border: none;
-  border-block-end: 2px solid transparent;
-  padding-inline: var(--spacing-md, 16px);
-  padding-block: var(--spacing-sm, 12px);
+  border-block-end: var(--origo-border-width-thick) solid transparent;
+  padding-inline: var(--origo-spacing-md);
+  padding-block: var(--origo-spacing-sm);
   font-family: inherit;
-  font-size: 14px;
-  color: var(--color-text-secondary, #666666);
+  font-size: var(--origo-typography-button-font-size);
+  color: var(--origo-color-text-muted);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--origo-duration-fast) ease;
   white-space: nowrap;
   outline: none;
 
   &:hover:not(:disabled) {
-    color: var(--color-text, #333333);
-    background-color: var(--color-surface-hover, #f5f5f5);
+    color: var(--origo-color-text-primary);
+    background-color: var(--origo-color-surface-subtle);
   }
 
   &:focus-visible {
-    background-color: var(--color-surface-hover, #f5f5f5);
-    border-radius: 4px 4px 0 0;
-    box-shadow: inset 0 0 0 2px var(--color-primary, #1976d2);
+    background-color: var(--origo-color-surface-subtle);
+    border-radius: var(--origo-radius-sm) var(--origo-radius-sm) 0 0;
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: -2px;
   }
 
   &.origo-tabs__tab--active {
-    color: var(--color-primary, #1976d2);
-    border-block-end-color: var(--color-primary, #1976d2);
+    color: var(--origo-color-surface-primary);
+    border-block-end-color: var(--origo-color-surface-primary);
     font-weight: 500;
   }
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--origo-opacity-disabled);
+    color: var(--origo-color-text-disabled);
+  }
+}
+
+.origo-tabs__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.origo-tabs__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--origo-spacing-xs);
+  padding-block: var(--origo-spacing-base-1);
+  border-radius: var(--origo-radius-full);
+  background-color: var(--origo-color-surface-subtle);
+  color: var(--origo-color-text-primary);
+  font-size: var(--origo-typography-caption-font-size);
+  font-weight: 600;
+}
+
+.origo-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-inline-start: var(--origo-spacing-xs);
+  cursor: pointer;
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-button-font-size);
+  line-height: 1;
+  border-radius: var(--origo-radius-sm);
+
+  &:hover {
+    color: var(--origo-color-text-danger);
+    background-color: var(--origo-color-surface-subtle);
+  }
+
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
   }
 }
+
+.origo-tabs__panels {
+  display: block;
+  padding-block: var(--origo-spacing-sm);
+}