@origostudio/origo-design 0.0.47 → 0.0.49

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

@@ -11,6 +11,9 @@ import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter, ContainerComponent } from '../../../adapters/web/adapter';
 
 export interface HBoxProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   gap?: number | string;
   alignment?: 'start' | 'center' | 'end' | 'stretch';
   padding?: number | string;
@@ -38,6 +41,9 @@ export interface HBoxProps {
 })
 export class HBoxComponent implements OrigoAdapter<HBoxProps>, ContainerComponent {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     gap: 'string',
     alignment: 'string',
     padding: 'string',

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

@@ -0,0 +1,18 @@
+<button
+  type="button"
+  [disabled]="computedDisabled()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+  [title]="contract().props?.tooltip || null"
+  (click)="onClick()"
+>
+  @if (computedLoading()) {
+    <span class="origo-spinner"></span>
+  } @else {
+    @if (computedIcon()) {
+      <span [class]="'origo-icon origo-icon-' + computedIcon()"></span>
+    } @else {
+      <span class="origo-icon origo-icon-default"></span>
+    }
+  }
+</button>

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

@@ -0,0 +1,34 @@
+:host {
+  display: inline-flex;
+}
+button {
+  cursor: pointer;
+  background-color: var(--origo-color-surface-primary);
+  color: var(--origo-color-text-inverse);
+  padding: var(--origo-spacing-container-padding);
+  border: none;
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-sm, none);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--origo-transition-all);
+}
+button:hover:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-hover);
+}
+button:active:not(:disabled) {
+  background-color: var(--origo-color-surface-primary-active);
+}
+button:focus-visible {
+  outline: var(--origo-outline-width, 2px) solid var(--origo-color-focus);
+  outline-offset: var(--origo-outline-width, 2px);
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: var(--origo-opacity-disabled);
+}
+:host(.origo-rounded) button {
+  border-radius: var(--origo-radius-round, 50%);
+  aspect-ratio: 1;
+}

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

@@ -0,0 +1,103 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface IconButtonProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  icon?: string;
+  label?: string;
+  tooltip?: string;
+  severity?: string;
+  variant?: string;
+  rounded?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-icon-button',
+  standalone: true,
+  templateUrl: './icon-button.component.html',
+  styleUrls: ['./icon-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class]': 'computedHostClasses()',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class IconButtonComponent implements OrigoAdapter<IconButtonProps> {
+  static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+    icon: 'string',
+    label: 'string',
+    tooltip: 'string',
+    severity: 'string',
+    variant: 'string',
+    rounded: 'boolean',
+    loading: 'boolean',
+    disabled: 'boolean',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<IconButtonProps>>();
+
+  computedIcon = computed(() => this.contract().props?.icon ?? '');
+  computedLoading = computed(() => !!this.contract().props?.loading);
+  computedDisabled = computed(() => {
+    const props = this.contract().props;
+    const rulesDisable =
+      props?.rules?.['disable'] === true || props?.permissions?.['allow'] === 'false';
+    return !!props?.disabled || this.computedLoading() || rulesDisable;
+  });
+
+  computedAriaLabel = computed(() => {
+    const p = this.contract().props;
+    const v = p?.['aria-label'] || p?.label;
+    return v ? String(v) : undefined;
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const v = this.contract().props?.['aria-describedby'];
+    return v ? String(v) : undefined;
+  });
+
+  computedHostClasses = computed(() => {
+    const s = this.contract().props?.severity;
+    const v = this.contract().props?.variant;
+    const rounded = this.contract().props?.rounded;
+    return [
+      'origo-icon-button',
+      s ? `origo-severity-${s}` : '',
+      v ? `origo-variant-${v}` : '',
+      rounded ? 'origo-rounded' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  onClick() {
+    if (this.computedDisabled() || this.computedLoading()) return;
+    const id = this.contract().id;
+    if (!id) return;
+    this.experienceAdapter.dispatchCapability(id, 'click');
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="origo-input-number__wrapper">
+  <input
+    type="number"
+    [id]="contract().id"
+    [disabled]="computedDisabled()"
+    [readonly]="computedReadonly()"
+    [required]="computedRequired()"
+    [attr.min]="computedMin()"
+    [attr.max]="computedMax()"
+    [attr.step]="computedStep()"
+    [attr.placeholder]="computedPlaceholder()"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+    [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+    (input)="onInput($event)"
+    [value]="value() ?? ''"
+  />
+</div>
+@if (computedErrorText()) {
+  <div class="origo-input-number__error">{{ computedErrorText() }}</div>
+}
+@if (computedHelpText()) {
+  <div class="origo-input-number__help">{{ computedHelpText() }}</div>
+}

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

@@ -0,0 +1,80 @@
+:host {
+  display: inline-block;
+}
+
+:host(.origo-input-number--fluid) {
+  display: block;
+  width: 100%;
+}
+
+.origo-input-number__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+input {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  padding: var(--origo-spacing-container-padding);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-sm);
+  font-family: var(--origo-typography-input-font-family);
+  font-size: var(--origo-typography-input-font-size);
+  font-weight: var(--origo-typography-input-font-weight);
+  line-height: var(--origo-typography-input-line-height);
+  transition: all var(--origo-duration-fast) ease-in-out;
+
+  &::placeholder {
+    color: var(--origo-color-text-muted);
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    border-color: var(--origo-color-border-hover);
+  }
+
+  &:active:not(:disabled):not([readonly]) {
+    border-color: var(--origo-color-border-active);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-offset-negative);
+    border-color: var(--origo-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    background-color: var(--origo-color-surface-disabled);
+    color: var(--origo-color-text-disabled);
+  }
+
+  &[readonly] {
+    background-color: var(--origo-color-surface-readonly);
+  }
+}
+
+:host(.origo-input-number--filled) input {
+  background-color: var(--origo-color-surface-subtle);
+  border: none;
+}
+
+:host(.origo-input-number--text) input {
+  background-color: transparent;
+  border: none;
+}
+
+.origo-input-number__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+.origo-input-number__help {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}

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

@@ -0,0 +1,146 @@
+import {
+  Component,
+  input,
+  model,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+  effect,
+  untracked,
+  SecurityContext,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface InputNumberProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  value?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
+  variant?: 'outlined' | 'filled' | 'text';
+  fluid?: boolean;
+}
+
+@Component({
+  selector: 'origo-input-number',
+  standalone: true,
+  templateUrl: './input-number.component.html',
+  styleUrls: ['./input-number.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-input-number]': 'true',
+    '[attr.data-testid]': 'contract().id',
+    '[class.origo-input-number--fluid]': 'computedFluid()',
+    '[class.origo-input-number--outlined]': 'computedVariant() === "outlined"',
+    '[class.origo-input-number--filled]': 'computedVariant() === "filled"',
+    '[class.origo-input-number--text]': 'computedVariant() === "text"',
+  },
+})
+export class InputNumberComponent implements OrigoAdapter<InputNumberProps> {
+  static readonly contractSchema: Record<
+    string,
+    'string' | 'number' | 'boolean' | 'object' | 'array'
+  > = {
+    value: 'number',
+    placeholder: 'string',
+    disabled: 'boolean',
+    readonly: 'boolean',
+    min: 'number',
+    max: 'number',
+    step: 'number',
+    required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
+    variant: 'string',
+    fluid: 'boolean',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<InputNumberProps>>();
+  value = model<number | undefined>(undefined);
+
+  computedPlaceholder = computed(() => this.contract().props?.placeholder ?? '');
+  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedReadonly = computed(() => !!this.contract().props?.readonly);
+  computedMin = computed(() => this.contract().props?.min);
+  computedMax = computed(() => this.contract().props?.max);
+  computedStep = computed(() => this.contract().props?.step);
+  computedRequired = computed(() => !!this.contract().props?.required);
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedVariant = computed(() => this.contract().props?.variant ?? 'outlined');
+  computedFluid = computed(() => !!this.contract().props?.fluid);
+  computedErrorText = computed(() => this.contract().props?.errorText ?? '');
+  computedHelpText = computed(() => this.contract().props?.helpText ?? '');
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private sanitizer = inject(DomSanitizer);
+
+  constructor() {
+    effect(() => {
+      const props = this.contract().props;
+      const coerced = props
+        ? coerceContractProps<Record<string, unknown>>(props, InputNumberComponent.contractSchema)
+        : {};
+      const contractVal = coerced['value'];
+
+      const parsedVal = typeof contractVal === 'number' ? contractVal : undefined;
+      untracked(() => {
+        if (parsedVal === this.value()) return;
+        this.value.set(parsedVal);
+      });
+    });
+  }
+
+  onInput(event: Event) {
+    const target = event.target as HTMLInputElement | null;
+    if (!target || this.computedDisabled() || this.computedReadonly()) return;
+
+    const rawValue = target.value;
+    const sanitizedValue =
+      this.sanitizer.sanitize(SecurityContext.HTML, rawValue) || rawValue || '';
+
+    if (target.value !== sanitizedValue) {
+      target.value = sanitizedValue;
+    }
+
+    const numValue = sanitizedValue === '' ? undefined : Number(sanitizedValue);
+
+    // Check if it's a valid number. If not, don't update state but let the user type
+    if (sanitizedValue !== '' && isNaN(Number(sanitizedValue))) {
+      return;
+    }
+
+    this.value.set(numValue);
+    this.experienceAdapter.updateState(this.contract().id, 'value', numValue);
+  }
+}

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

@@ -9,6 +9,9 @@ import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 
 export interface LabelProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   text?: string;
   for?: string;
   required?: boolean;
@@ -30,6 +33,9 @@ export interface LabelProps {
 })
 export class LabelComponent implements OrigoAdapter<LabelProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     text: 'string',
     for: 'string',
     required: 'boolean',

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

@@ -13,6 +13,9 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface ListProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   items?: Array<Record<string, unknown>>;
   maxItems?: number;
   disabled?: boolean;
@@ -37,6 +40,9 @@ export interface ListProps {
 })
 export class ListComponent implements OrigoAdapter<ListProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     items: 'array',
     maxItems: 'number',
     disabled: 'boolean',

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

@@ -1,4 +1,8 @@
-<fieldset [disabled]="computedDisabled()" [attr.aria-describedby]="computedAriaDescribedBy()">
+<fieldset
+  [disabled]="computedDisabled()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+  [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+>
   <legend class="visually-hidden">{{ computedAriaLabel() ?? 'Radio Group' }}</legend>
 
   <div class="radio-options">
@@ -18,3 +22,9 @@
     }
   </div>
 </fieldset>
+@if (computedErrorText()) {
+  <div class="origo-radio-group__error">{{ computedErrorText() }}</div>
+}
+@if (computedHelpText()) {
+  <div class="origo-radio-group__help">{{ computedHelpText() }}</div>
+}

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

@@ -8,7 +8,7 @@ fieldset {
   margin: 0;
 
   &:disabled {
-    opacity: var(--origo-opacity-disabled, 0.5);
+    opacity: var(--origo-opacity-disabled);
 
     .radio-label {
       cursor: not-allowed;
@@ -30,25 +30,36 @@ fieldset {
 .radio-options {
   display: flex;
   flex-direction: column;
-  gap: var(--origo-spacing-container-padding, 8px);
+  gap: var(--origo-spacing-container-padding);
 }
 
 .radio-label {
   display: inline-flex;
   align-items: center;
-  gap: var(--origo-spacing-container-padding, 8px);
+  gap: var(--origo-spacing-container-padding);
   cursor: pointer;
-  font-family: var(--origo-typography-input-font-family, inherit);
-  font-size: var(--origo-typography-input-font-size, 1rem);
-  color: var(--origo-color-text-primary, #333);
+  font-family: var(--origo-typography-input-font-family);
+  font-size: var(--origo-typography-input-font-size);
+  color: var(--origo-color-text-primary);
 }
 
 input[type='radio'] {
   margin: 0;
-  accent-color: var(--origo-color-focus, #005fcc);
+  accent-color: var(--origo-color-focus);
 
   &:focus-visible {
-    outline: 2px solid var(--origo-color-focus, #005fcc);
-    outline-offset: 2px;
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-width-thick);
   }
 }
+
+.origo-radio-group__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+.origo-radio-group__help {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}

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

@@ -14,12 +14,18 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface RadioGroupProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   options: Array<{ value: string; label: string }>;
   value?: string;
   disabled?: boolean;
   'aria-label'?: string;
   'aria-describedby'?: string;
   required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
 }
 
 @Component({
@@ -36,10 +42,16 @@ export interface RadioGroupProps {
 })
 export class RadioGroupComponent implements OrigoAdapter<RadioGroupProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     options: 'array',
     value: 'string',
     disabled: 'boolean',
     required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
   };
   static readonly strictContract = false;
 
@@ -65,6 +77,10 @@ export class RadioGroupComponent implements OrigoAdapter<RadioGroupProps> {
       : undefined;
   });
 
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedErrorText = computed(() => this.contract().props?.errorText ?? '');
+  computedHelpText = computed(() => this.contract().props?.helpText ?? '');
+
   private experienceAdapter = inject(WebExperienceAdapterService);
 
   constructor() {

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

@@ -16,6 +16,9 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface SelectProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   options: Array<{ value: string; label: string }>;
   value?: string;
   disabled?: boolean;
@@ -39,6 +42,9 @@ export interface SelectProps {
 })
 export class SelectComponent implements OrigoAdapter<SelectProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     options: 'array',
     value: 'string',
     disabled: 'boolean',

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

@@ -20,6 +20,9 @@ export interface SidebarItem {
 }
 
 export interface SidebarProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   items?: Array<SidebarItem>;
   activeOutcome?: string;
   collapsed?: boolean;
@@ -45,6 +48,9 @@ export interface SidebarProps {
 })
 export class SidebarComponent implements OrigoAdapter<SidebarProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     items: 'array',
     collapsed: 'boolean',
   };

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

@@ -1,16 +1,25 @@
-<label [for]="contract().id" [class.disabled]="computedDisabled()">
-  <input
-    type="checkbox"
-    role="switch"
-    [id]="contract().id"
-    [checked]="checked()"
-    [disabled]="computedDisabled()"
-    [attr.aria-checked]="checked().toString()"
-    [attr.aria-label]="computedAriaLabel() ?? undefined"
-    [attr.aria-describedby]="computedAriaDescribedBy() ?? undefined"
-    (change)="onChange($event)"
-  />
-  @if (computedLabel()) {
-    <span class="label-text">{{ computedLabel() }}</span>
+<div class="origo-switch__wrapper">
+  <label [for]="contract().id" [class.disabled]="computedDisabled()">
+    <input
+      type="checkbox"
+      role="switch"
+      [id]="contract().id"
+      [checked]="checked()"
+      [disabled]="computedDisabled()"
+      [attr.aria-checked]="checked().toString()"
+      [attr.aria-label]="computedAriaLabel() ?? undefined"
+      [attr.aria-describedby]="computedAriaDescribedBy() ?? undefined"
+      [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+      (change)="onChange($event)"
+    />
+    @if (computedLabel()) {
+      <span class="label-text">{{ computedLabel() }}</span>
+    }
+  </label>
+  @if (computedErrorText()) {
+    <div class="origo-switch__error">{{ computedErrorText() }}</div>
   }
-</label>
+  @if (computedHelpText()) {
+    <div class="origo-switch__help">{{ computedHelpText() }}</div>
+  }
+</div>