@origostudio/origo-design 0.0.55 → 0.0.56

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

@@ -0,0 +1,76 @@
+:host {
+  display: contents;
+}
+
+.origo-drawer {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: var(--origo-color-surface-overlay, var(--origo-color-surface-primary));
+  color: var(--origo-color-text-primary);
+  box-shadow: var(--origo-shadow-xl, var(--origo-shadow-lg));
+  overflow: hidden;
+  outline: none;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    border-block-end: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+    background-color: var(--origo-color-surface-secondary);
+    gap: var(--origo-space-sm);
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--origo-font-size-lg);
+    font-weight: var(--origo-font-weight-semibold);
+    color: var(--origo-color-text-primary);
+    line-height: var(--origo-line-height-tight);
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--origo-color-text-secondary);
+    border-radius: var(--origo-radius-sm);
+    padding-inline: var(--origo-space-xs);
+    padding-block: var(--origo-space-xs);
+    cursor: pointer;
+    font-size: var(--origo-font-size-md);
+    line-height: 1;
+    margin-inline-start: auto;
+
+    &:hover {
+      background-color: var(--origo-color-action-hover);
+      color: var(--origo-color-text-primary);
+    }
+
+    &:focus-visible {
+      outline: var(--origo-border-width-focus) solid var(--origo-color-focus-ring);
+      outline-offset: var(--origo-space-xxs);
+    }
+  }
+
+  &__content {
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    flex: 1 1 auto;
+    overflow-y: auto;
+    color: var(--origo-color-text-primary);
+  }
+
+  &__footer {
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    border-block-start: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+    background-color: var(--origo-color-surface-secondary);
+  }
+}

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

@@ -0,0 +1,248 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  viewChild,
+  ViewContainerRef,
+  TemplateRef,
+  computed,
+  effect,
+  DestroyRef,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import {
+  OrigoAdapter,
+  ContainerComponent,
+  coerceContractProps,
+} from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+import { OrigoOverlayService } from '../../../lib/overlay/overlay.service';
+import { OrigoOverlayConfig, OrigoOverlayRef } from '../../../lib/overlay/overlay.models';
+
+let drawerCounter = 0;
+
+export interface DrawerProps {
+  visible?: boolean;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  modal?: boolean;
+  dismissible?: boolean;
+  closeOnEscape?: boolean;
+  blockScroll?: boolean;
+  size?: string;
+  header?: string;
+  footer?: string;
+  closable?: boolean;
+  data?: unknown;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+export const DrawerContractSchema = {
+  permissions: 'object',
+  rules: 'object',
+  metadata: 'object',
+  'aria-label': 'string',
+  'aria-describedby': 'string',
+  visible: 'boolean',
+  position: 'string',
+  modal: 'boolean',
+  dismissible: 'boolean',
+  closeOnEscape: 'boolean',
+  blockScroll: 'boolean',
+  size: 'string',
+  header: 'string',
+  footer: 'string',
+  closable: 'boolean',
+  data: 'object',
+} as const;
+
+@Component({
+  selector: 'origo-drawer',
+  standalone: true,
+  templateUrl: './drawer.component.html',
+  styleUrls: ['./drawer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-drawer-host]': 'true',
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class DrawerComponent implements OrigoAdapter<DrawerProps>, ContainerComponent {
+  static readonly contractSchema = DrawerContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<DrawerProps>>();
+  vc = viewChild('vc', { read: ViewContainerRef });
+
+  drawerTemplate = viewChild('drawerTemplate', { read: TemplateRef });
+
+  visibleChange = output<boolean>();
+  open = output<void>();
+  close = output<void>();
+  show = output<void>();
+  hide = output<void>();
+
+  private overlayService = inject(OrigoOverlayService);
+  private destroyRef = inject(DestroyRef);
+  private vcr = inject(ViewContainerRef);
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  private readonly id = ++drawerCounter;
+  readonly headerId = `origo-drawer-header-${this.id}`;
+
+  private overlayRef: OrigoOverlayRef | null = null;
+  private isOpen = false;
+
+  coercedProps = computed(() =>
+    coerceContractProps<DrawerProps>(this.contract()?.props ?? {}, DrawerContractSchema)
+  );
+
+  computedVisible = computed(() => !!this.coercedProps().visible);
+  computedPosition = computed(() => this.coercedProps().position ?? 'left');
+  computedModal = computed(() => this.coercedProps().modal !== false);
+  computedDismissible = computed(() => this.coercedProps().dismissible !== false);
+  computedCloseOnEscape = computed(() => this.coercedProps().closeOnEscape !== false);
+  computedSize = computed(() => this.coercedProps().size ?? '320px');
+  computedHeader = computed(() => this.coercedProps().header);
+  computedFooter = computed(() => this.coercedProps().footer);
+  computedClosable = computed(() => this.coercedProps().closable !== false);
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract()?.props?.['aria-label'];
+    return label !== undefined && label !== null ? String(label) : 'Drawer';
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract()?.props?.['aria-describedby'];
+    return desc !== undefined && desc !== null ? String(desc) : undefined;
+  });
+
+  constructor() {
+    effect(() => {
+      const visible = this.computedVisible();
+      if (visible && !this.isOpen) {
+        this.openDrawer();
+      } else if (!visible && this.isOpen) {
+        this.closeDrawer(false);
+      }
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.cleanup();
+    });
+  }
+
+  private openDrawer(): void {
+    if (this.isOpen) return;
+
+    const tpl = this.drawerTemplate();
+    if (!tpl) return;
+
+    const pos = this.computedPosition();
+    const size = this.computedSize();
+
+    let alignment: 'start' | 'end' | 'top' | 'bottom' = 'start';
+    let width: string | undefined = size;
+    let height: string | undefined = '100%';
+
+    switch (pos) {
+      case 'right':
+        alignment = 'end';
+        width = size;
+        height = '100%';
+        break;
+      case 'top':
+        alignment = 'top';
+        width = '100%';
+        height = size;
+        break;
+      case 'bottom':
+        alignment = 'bottom';
+        width = '100%';
+        height = size;
+        break;
+      case 'left':
+      default:
+        alignment = 'start';
+        width = size;
+        height = '100%';
+        break;
+    }
+
+    const config: OrigoOverlayConfig = {
+      position: {
+        type: 'global',
+        position: alignment,
+        width,
+        height,
+      },
+      hasBackdrop: this.computedModal(),
+      backdropClass: 'origo-drawer-backdrop',
+      panelClass: ['origo-overlay-pane--drawer', `origo-overlay-pane--drawer-${pos}`],
+      closeOnBackdropClick: this.computedDismissible(),
+      closeOnOutsideClick: this.computedDismissible(),
+      closeOnEscape: this.computedCloseOnEscape(),
+      trapFocus: this.computedModal(),
+      viewContainerRef: this.vcr,
+    };
+
+    this.overlayRef = this.overlayService.create(config, this.destroyRef);
+    this.overlayRef.open(tpl, this.vcr);
+    this.isOpen = true;
+
+    this.open.emit();
+    this.show.emit();
+    this.experienceAdapter.updateState(this.contract().id, 'visible', true);
+    this.experienceAdapter.dispatchCapability(this.contract().id, 'open', undefined);
+    this.experienceAdapter.dispatchCapability(this.contract().id, 'show', undefined);
+
+    this.overlayRef.afterClosed().then(result => {
+      if (this.isOpen) {
+        this.isOpen = false;
+        this.visibleChange.emit(false);
+        this.close.emit();
+        this.hide.emit();
+        this.experienceAdapter.updateState(this.contract().id, 'visible', false);
+        this.experienceAdapter.dispatchCapability(this.contract().id, 'close', result);
+        this.experienceAdapter.dispatchCapability(this.contract().id, 'hide', result);
+      }
+    });
+  }
+
+  private closeDrawer(notify = true): void {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+
+    if (this.overlayRef?.isOpen) {
+      this.overlayRef.close();
+    }
+
+    if (notify) {
+      this.visibleChange.emit(false);
+      this.close.emit();
+      this.hide.emit();
+      this.experienceAdapter.updateState(this.contract().id, 'visible', false);
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'close', undefined);
+      this.experienceAdapter.dispatchCapability(this.contract().id, 'hide', undefined);
+    }
+  }
+
+  onClose(): void {
+    this.closeDrawer(true);
+  }
+
+  private cleanup(): void {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+    this.isOpen = false;
+  }
+}

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

@@ -0,0 +1,13 @@
+<origo-dialog
+  [contract]="coercedModalContract()"
+  (visibleChange)="visibleChange.emit($event)"
+  (open)="open.emit()"
+  (close)="close.emit()"
+  (maximize)="maximize.emit($event)"
+  (restore)="restore.emit()"
+  (dragEnd)="dragEnd.emit($event)"
+  (resizeEnd)="resizeEnd.emit($event)"
+>
+  <ng-container #vc></ng-container>
+  <ng-content></ng-content>
+</origo-dialog>

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

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

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

@@ -0,0 +1,56 @@
+import {
+  Component,
+  input,
+  output,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  viewChild,
+  ViewContainerRef,
+  computed,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter, ContainerComponent } from '../../../adapters/web/adapter';
+import { DialogComponent, DialogProps, DialogContractSchema } from '../dialog/dialog.component';
+
+export type ModalProps = DialogProps;
+export const ModalContractSchema = DialogContractSchema;
+
+@Component({
+  selector: 'origo-modal',
+  standalone: true,
+  imports: [DialogComponent],
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-modal-host]': 'true',
+    '[attr.data-testid]': 'contract().id',
+  },
+})
+export class ModalComponent implements OrigoAdapter<ModalProps>, ContainerComponent {
+  static readonly contractSchema = ModalContractSchema;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<ModalProps>>();
+  vc = viewChild('vc', { read: ViewContainerRef });
+
+  visibleChange = output<boolean>();
+  open = output<void>();
+  close = output<void>();
+  maximize = output<boolean>();
+  restore = output<void>();
+  dragEnd = output<{ x: number; y: number }>();
+  resizeEnd = output<{ width: number; height: number }>();
+
+  coercedModalContract = computed(() => {
+    const origContract = this.contract();
+    return {
+      ...origContract,
+      props: {
+        ...(origContract?.props ?? {}),
+        modal: true, // Architectural invariant: modal is always strictly true
+      },
+    };
+  });
+}

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

@@ -0,0 +1,41 @@
+<div
+  #triggerWrapper
+  class="origo-popover__trigger-wrapper"
+  [attr.aria-expanded]="isOpen()"
+  [attr.aria-haspopup]="'dialog'"
+  (click)="toggle()"
+>
+  <ng-content select="[slot=trigger],[trigger]"></ng-content>
+</div>
+
+<ng-template #popoverTemplate>
+  <div
+    role="dialog"
+    class="origo-popover"
+    [attr.data-testid]="contract().id"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+  >
+    @if (computedTitle() || computedShowClose()) {
+      <div class="origo-popover__header">
+        @if (computedTitle()) {
+          <div class="origo-popover__title">{{ computedTitle() }}</div>
+        }
+        @if (computedShowClose()) {
+          <button
+            type="button"
+            class="origo-popover__close"
+            aria-label="Close popover"
+            (click)="closePopover()"
+          >
+            <span class="origo-popover__close-icon">✕</span>
+          </button>
+        }
+      </div>
+    }
+    <div class="origo-popover__content">
+      <ng-container #vc></ng-container>
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,77 @@
+:host {
+  display: inline-block;
+}
+
+.origo-popover {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--origo-color-surface-overlay, var(--origo-color-surface-primary));
+  color: var(--origo-color-text-primary);
+  border-radius: var(--origo-radius-md);
+  box-shadow: var(--origo-shadow-lg);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+  overflow: hidden;
+  outline: none;
+  min-inline-size: var(--origo-overlay-min-width, var(--origo-size-dropdown-min-width, 11.25rem));
+  max-inline-size: min(90vw, var(--origo-overlay-max-width, 22.5rem));
+
+  &__trigger-wrapper {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-sm);
+    border-block-end: var(--origo-border-width-default) solid var(--origo-color-border-subtle);
+    background-color: var(--origo-color-surface-secondary);
+    gap: var(--origo-space-sm);
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--origo-font-size-md);
+    font-weight: var(--origo-font-weight-semibold);
+    color: var(--origo-color-text-primary);
+    line-height: var(--origo-line-height-tight);
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--origo-color-text-secondary);
+    border-radius: var(--origo-radius-sm);
+    padding-inline: var(--origo-space-xs);
+    padding-block: var(--origo-space-xs);
+    cursor: pointer;
+    font-size: var(--origo-font-size-md);
+    line-height: 1;
+    margin-inline-start: auto;
+
+    &:hover {
+      background-color: var(--origo-color-action-hover);
+      color: var(--origo-color-text-primary);
+    }
+
+    &:focus-visible {
+      outline: var(--origo-border-width-focus) solid var(--origo-color-focus-ring);
+      outline-offset: var(--origo-space-xxs);
+    }
+  }
+
+  &__content {
+    padding-inline: var(--origo-space-md);
+    padding-block: var(--origo-space-md);
+    flex: 1 1 auto;
+    overflow-y: auto;
+    color: var(--origo-color-text-primary);
+  }
+}