@origostudio/origo-design 0.0.57 → 0.0.59

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

@@ -0,0 +1,140 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.origo-accordion__container {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  border: 1px solid var(--origo-color-border-subtle, #e2e8f0);
+  border-radius: var(--origo-radius-md, 6px);
+  background-color: var(--origo-color-surface-primary, #ffffff);
+  overflow: hidden;
+}
+
+.origo-accordion__item {
+  border-block-end: 1px solid var(--origo-color-border-subtle, #e2e8f0);
+
+  &:last-child {
+    border-block-end: none;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.origo-accordion__header {
+  margin: 0;
+  padding: 0;
+}
+
+.origo-accordion__header-btn {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding-block: var(--origo-spacing-sm, 12px);
+  padding-inline: var(--origo-spacing-md, 16px);
+  background: var(--origo-color-surface-primary, #ffffff);
+  border: none;
+  color: var(--origo-color-text-primary, #1e293b);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+
+  &:hover:not([disabled]) {
+    background-color: var(--origo-color-surface-hover, #f8fafc);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--origo-color-border-focus, #3b82f6);
+    outline-offset: -2px;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    color: var(--origo-color-text-disabled, #94a3b8);
+  }
+}
+
+.origo-accordion__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: var(--origo-spacing-sm, 8px);
+  flex-shrink: 0;
+}
+
+.origo-accordion__header-text {
+  flex: 1 1 auto;
+}
+
+.origo-accordion__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 2px;
+  padding-inline: var(--origo-spacing-xs, 6px);
+  margin-inline-end: var(--origo-spacing-sm, 8px);
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--origo-radius-full, 9999px);
+  background-color: var(--origo-color-surface-secondary, #f1f5f9);
+  color: var(--origo-color-text-secondary, #475569);
+}
+
+.origo-accordion__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: var(--origo-spacing-sm, 8px);
+  color: var(--origo-color-text-secondary, #64748b);
+  flex-shrink: 0;
+  transition: transform 200ms ease;
+}
+
+.origo-accordion__panel-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  > .origo-accordion__panel-body {
+    overflow: hidden;
+    min-block-size: 0;
+  }
+
+  &--expanded {
+    grid-template-rows: 1fr;
+  }
+}
+
+.origo-accordion__body-text {
+  padding-block: var(--origo-spacing-sm, 12px);
+  padding-inline: var(--origo-spacing-md, 16px);
+  color: var(--origo-color-text-secondary, #475569);
+  line-height: 1.5;
+  border-block-start: 1px solid var(--origo-color-border-subtle, #f1f5f9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .origo-accordion__panel-content {
+    transition: none !important;
+  }
+
+  .origo-accordion__header-btn,
+  .origo-accordion__chevron {
+    transition: none !important;
+  }
+}

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

@@ -0,0 +1,253 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  computed,
+  signal,
+  effect,
+  ViewEncapsulation,
+  inject,
+  viewChildren,
+  viewChild,
+  ElementRef,
+  ViewContainerRef,
+  PLATFORM_ID,
+} 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 AccordionItem {
+  key: string;
+  header: string;
+  content?: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  items?: AccordionItem[];
+  panels?: AccordionItem[]; // alias for items
+  value?: string | string[];
+  multiple?: boolean;
+  disabled?: boolean;
+  lazy?: boolean;
+  expandIcon?: string;
+  collapseIcon?: string;
+}
+
+export const AccordionContractSchema: Record<
+  string,
+  'string' | 'number' | 'boolean' | 'array' | 'object'
+> = {
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+  items: 'array',
+  panels: 'array',
+  multiple: 'boolean',
+  disabled: 'boolean',
+  lazy: 'boolean',
+  expandIcon: 'string',
+  collapseIcon: 'string',
+} as const;
+
+@Component({
+  selector: 'origo-accordion',
+  standalone: true,
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-accordion]': 'true',
+    '[class.origo-accordion--disabled]': 'computedDisabled()',
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class AccordionComponent implements OrigoAdapter<AccordionProps>, IContainerComponent {
+  static readonly contractSchema = AccordionContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<AccordionProps>>();
+  readonly vc = viewChild('vc', { read: ViewContainerRef });
+
+  headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
+
+  valueChange = output<string | string[]>();
+  open = output<string>();
+  close = output<string>();
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private platformId = inject(PLATFORM_ID);
+
+  protected internalExpandedKeys = signal<Set<string>>(new Set());
+  protected openedOnceKeys = signal<Set<string>>(new Set());
+
+  constructor() {
+    effect(() => {
+      const rawVal = this.props().value;
+      const isMulti = !!this.props().multiple;
+      const initial = new Set<string>();
+
+      if (rawVal !== undefined && rawVal !== null) {
+        if (Array.isArray(rawVal)) {
+          if (isMulti) {
+            rawVal.forEach(k => initial.add(String(k)));
+          } else if (rawVal.length > 0) {
+            initial.add(String(rawVal[0]));
+          }
+        } else if (
+          (typeof rawVal === 'string' || typeof rawVal === 'number') &&
+          String(rawVal).trim() !== ''
+        ) {
+          initial.add(String(rawVal));
+        }
+      }
+
+      this.internalExpandedKeys.set(initial);
+      this.openedOnceKeys.update(existing => {
+        const next = new Set(existing);
+        initial.forEach(k => next.add(k));
+        return next;
+      });
+    });
+  }
+
+  protected props = computed(() =>
+    coerceContractProps<AccordionProps>(this.contract().props, AccordionContractSchema)
+  );
+
+  computedAriaLabel = computed(() => {
+    const label = this.props()['aria-label'];
+    return label !== undefined && label !== null ? String(label) : undefined;
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.props()['aria-describedby'];
+    return desc !== undefined && desc !== null ? String(desc) : undefined;
+  });
+
+  computedDisabled = computed(() => {
+    return !!this.props().disabled;
+  });
+
+  computedItems = computed<AccordionItem[]>(() => {
+    const raw = this.props().items ?? this.props().panels;
+    if (!Array.isArray(raw)) return [];
+    return raw
+      .filter(item => item != null && item.key != null)
+      .map(item => ({
+        key: String(item.key),
+        header: item.header != null ? String(item.header) : '',
+        content: item.content != null ? String(item.content) : undefined,
+        icon: item.icon != null ? String(item.icon) : undefined,
+        badge: item.badge !== undefined && item.badge !== null ? item.badge : undefined,
+        disabled: !!item.disabled,
+      }));
+  });
+
+  computedExpandIcon = computed(() => this.props().expandIcon);
+  computedCollapseIcon = computed(() => this.props().collapseIcon);
+
+  isExpanded(item: AccordionItem): boolean {
+    return this.internalExpandedKeys().has(item.key);
+  }
+
+  isPanelRendered(item: AccordionItem): boolean {
+    if (!this.props().lazy) return true;
+    return this.openedOnceKeys().has(item.key) || this.isExpanded(item);
+  }
+
+  getHeaderId(item: AccordionItem, index: number): string {
+    const baseId = this.contract().id || 'origo-accordion';
+    return `${baseId}-header-${item.key || index}`;
+  }
+
+  getPanelId(item: AccordionItem, index: number): string {
+    const baseId = this.contract().id || 'origo-accordion';
+    return `${baseId}-panel-${item.key || index}`;
+  }
+
+  togglePanel(item: AccordionItem) {
+    if (this.computedDisabled() || item.disabled || !item.key) return;
+
+    const current = new Set(this.internalExpandedKeys());
+    const isCurrentlyExpanded = current.has(item.key);
+    const isMulti = !!this.props().multiple;
+    const contractId = this.contract().id;
+
+    if (isCurrentlyExpanded) {
+      current.delete(item.key);
+      this.close.emit(item.key);
+      if (contractId) {
+        this.experienceAdapter.dispatchCapability(contractId, 'close', { key: item.key });
+      }
+    } else {
+      if (!isMulti) {
+        current.clear();
+      }
+      current.add(item.key);
+      this.open.emit(item.key);
+      if (contractId) {
+        this.experienceAdapter.dispatchCapability(contractId, 'open', { key: item.key });
+      }
+    }
+
+    this.internalExpandedKeys.set(current);
+    this.openedOnceKeys.update(set => new Set(set).add(item.key));
+
+    const nextValue: string | string[] = isMulti
+      ? Array.from(current)
+      : (current.values().next().value ?? '');
+
+    this.valueChange.emit(nextValue);
+    if (contractId) {
+      this.experienceAdapter.updateState(contractId, 'value', nextValue);
+      this.experienceAdapter.dispatchCapability(contractId, 'valueChange', { value: nextValue });
+    }
+  }
+
+  onHeaderKeydown(event: KeyboardEvent, index: number) {
+    const items = this.computedItems();
+    if (items.length === 0) return;
+
+    let nextIndex = index;
+    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 = items.length - 1;
+      event.preventDefault();
+    } else {
+      return;
+    }
+
+    if (nextIndex < 0) nextIndex = items.length - 1;
+    if (nextIndex >= items.length) nextIndex = 0;
+
+    const buttons = this.headerButtons();
+    if (buttons && buttons[nextIndex]) {
+      buttons[nextIndex].nativeElement.focus();
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+<div class="origo-badge-wrapper" [class.origo-badge-wrapper--overlay]="hasContent()">
+  <div #contentWrapper class="origo-badge__content">
+    <ng-container #vc></ng-container>
+    <ng-content></ng-content>
+  </div>
+  <span
+    [class]="computedBadgeClasses()"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="ariaDescribedBy()"
+    [attr.tabindex]="isInteractive() ? 0 : null"
+    [attr.role]="isInteractive() ? 'button' : 'status'"
+    (click)="onClick($event)"
+    (keydown)="onKeyDown($event)"
+  >
+    @if (!isDot()) {
+      {{ displayValue() }}
+    }
+  </span>
+</div>

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

@@ -0,0 +1,158 @@
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.origo-badge-wrapper {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.origo-badge__content {
+  display: inline-flex;
+}
+
+.origo-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-weight: var(--origo-font-weight-semibold, 600);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  border-radius: var(--origo-radius-full, 9999px);
+  transition:
+    background-color var(--origo-motion-duration-fast, 150ms) ease,
+    color var(--origo-motion-duration-fast, 150ms) ease;
+}
+
+// Positioning as overlay when wrapping content
+.origo-badge-wrapper--overlay .origo-badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+// RTL Coordinate Inversion
+:host([dir='rtl']) .origo-badge-wrapper--overlay .origo-badge,
+[dir='rtl'] .origo-badge-wrapper--overlay .origo-badge {
+  transform: translate(-50%, -50%);
+}
+
+// Sizes
+.origo-badge--size-small {
+  font-size: 0.625rem;
+  min-inline-size: 1rem;
+  block-size: 1rem;
+  padding-inline: 0.25rem;
+  padding-block: 0.125rem;
+}
+
+.origo-badge--size-medium {
+  font-size: 0.75rem;
+  min-inline-size: 1.25rem;
+  block-size: 1.25rem;
+  padding-inline: 0.375rem;
+  padding-block: 0.125rem;
+}
+
+.origo-badge--size-large {
+  font-size: 0.875rem;
+  min-inline-size: 1.5rem;
+  block-size: 1.5rem;
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+}
+
+// Shapes
+.origo-badge--shape-rounded {
+  border-radius: var(--origo-radius-full, 9999px);
+}
+
+.origo-badge--shape-circle {
+  border-radius: 50%;
+  padding-inline: 0;
+  padding-block: 0;
+}
+
+.origo-badge--shape-square {
+  border-radius: var(--origo-radius-xs, 0.125rem);
+}
+
+// Dot Mode
+.origo-badge--dot {
+  min-inline-size: 0.5rem !important;
+  block-size: 0.5rem !important;
+  inline-size: 0.5rem !important;
+  padding-inline: 0 !important;
+  padding-block: 0 !important;
+  border-radius: 50% !important;
+}
+
+// Severity Variants
+.origo-badge--severity-primary {
+  background-color: var(--origo-color-primary, #2563eb);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+.origo-badge--severity-secondary {
+  background-color: var(--origo-color-surface-secondary, #e2e8f0);
+  color: var(--origo-color-text-secondary, #64748b);
+}
+
+.origo-badge--severity-info {
+  background-color: var(--origo-color-text-info, #1e40af);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+.origo-badge--severity-success {
+  background-color: var(--origo-color-text-success, #065f46);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+.origo-badge--severity-warn,
+.origo-badge--severity-warning {
+  background-color: var(--origo-color-text-warning, #92400e);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+.origo-badge--severity-error {
+  background-color: var(--origo-color-text-danger, #991b1b);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+.origo-badge--severity-contrast {
+  background-color: var(--origo-color-surface-inverse, #0f172a);
+  color: var(--origo-color-text-inverse, #ffffff);
+}
+
+// Interactive Mode
+.origo-badge--interactive {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.92);
+  }
+
+  &:focus-visible {
+    outline: var(--origo-border-width-focus, 2px) solid var(--origo-color-primary, #2563eb);
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .origo-badge {
+    transition: none !important;
+  }
+}