@origostudio/origo-design 0.0.48 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.0.49 (2026-10-08)
+
+### 🚀 Features
+
+- add angular renderer primitives and component implementations ([e751643](https://github.com/OrigoStudio/origo-design/commit/e751643))
+- add primitive components and corresponding test suites for angular-renderer package ([d02c3d1](https://github.com/OrigoStudio/origo-design/commit/d02c3d1))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.48 (2026-10-07)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.48",
-    "@origostudio/design-tokens": "0.0.48",
+    "@origostudio/core": "0.0.49",
+    "@origostudio/design-tokens": "0.0.49",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",

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

@@ -17,6 +17,9 @@ export interface BreadcrumbItem {
 }
 
 export interface BreadcrumbsProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   items?: Array<BreadcrumbItem>;
   'aria-label'?: string;
   'aria-describedby'?: string;
@@ -39,6 +42,9 @@ export interface BreadcrumbsProps {
 })
 export class BreadcrumbsComponent implements OrigoAdapter<BreadcrumbsProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     items: 'array',
   };
   static readonly strictContract = false;

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

@@ -12,6 +12,9 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface ButtonProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   label?: string;
   disabled?: boolean;
   type?: 'button' | 'submit' | 'reset';
@@ -24,9 +27,6 @@ export interface ButtonProps {
   iconPosition?: string;
   badge?: string;
   badgeSeverity?: string;
-  permissions?: any;
-  rules?: any;
-  metadata?: any;
 }
 
 @Component({
@@ -43,6 +43,9 @@ export interface ButtonProps {
 })
 export class ButtonComponent implements OrigoAdapter<ButtonProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     label: 'string',
     disabled: 'boolean',
     type: 'string',
@@ -53,9 +56,6 @@ export class ButtonComponent implements OrigoAdapter<ButtonProps> {
     iconPosition: 'string',
     badge: 'string',
     badgeSeverity: 'string',
-    permissions: 'object',
-    rules: 'object',
-    metadata: 'object',
   };
   static readonly strictContract = false;
 
@@ -65,7 +65,8 @@ export class ButtonComponent implements OrigoAdapter<ButtonProps> {
   computedLoading = computed(() => !!this.contract().props?.loading);
   computedDisabled = computed(() => {
     const props = this.contract().props;
-    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    const rulesDisable =
+      props?.rules?.['disable'] === true || props?.permissions?.['allow'] === 'false';
     return !!props?.disabled || this.computedLoading() || rulesDisable;
   });
 

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

@@ -9,6 +9,9 @@ import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 
 export interface ButtonGroupProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   orientation?: 'row' | 'column';
   attached?: boolean;
   size?: 'small' | 'medium' | 'large';
@@ -30,6 +33,9 @@ export interface ButtonGroupProps {
 })
 export class ButtonGroupComponent implements OrigoAdapter<ButtonGroupProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     orientation: 'string',
     attached: 'boolean',
     size: 'string',

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

@@ -12,6 +12,9 @@ import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 
 export interface CardProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   title?: string;
   subtitle?: string;
   imageUrl?: string;
@@ -36,6 +39,9 @@ export interface CardProps {
 })
 export class CardComponent implements OrigoAdapter<CardProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     title: 'string',
     subtitle: 'string',
     imageUrl: 'string',

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

@@ -1,16 +1,25 @@
-<label [for]="contract().id" [class.disabled]="computedDisabled()">
-  <input
-    type="checkbox"
-    [id]="contract().id"
-    [disabled]="computedDisabled()"
-    [required]="computedRequired()"
-    [attr.aria-label]="computedAriaLabel()"
-    [attr.aria-describedby]="computedAriaDescribedBy()"
-    (change)="onChange($event)"
-    [checked]="checked()"
-  />
-  <span class="label-text">{{ computedLabel() }}</span>
-  @if (computedRequired()) {
-    <span class="required-indicator" aria-hidden="true">*</span>
+<div class="origo-checkbox__wrapper">
+  <label [for]="contract().id" [class.disabled]="computedDisabled()">
+    <input
+      type="checkbox"
+      [id]="contract().id"
+      [disabled]="computedDisabled()"
+      [required]="computedRequired()"
+      [attr.aria-label]="computedAriaLabel()"
+      [attr.aria-describedby]="computedAriaDescribedBy()"
+      [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+      (change)="onChange($event)"
+      [checked]="checked()"
+    />
+    <span class="label-text">{{ computedLabel() }}</span>
+    @if (computedRequired()) {
+      <span class="required-indicator" aria-hidden="true">*</span>
+    }
+  </label>
+  @if (computedErrorText()) {
+    <div class="origo-checkbox__error">{{ computedErrorText() }}</div>
   }
-</label>
+  @if (computedHelpText()) {
+    <div class="origo-checkbox__help">{{ computedHelpText() }}</div>
+  }
+</div>

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

@@ -2,28 +2,33 @@
   display: block;
 }
 
+.origo-checkbox__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 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);
 
   &.disabled {
-    opacity: var(--origo-opacity-disabled, 0.5);
+    opacity: var(--origo-opacity-disabled);
     cursor: not-allowed;
   }
 }
 
 input[type='checkbox'] {
   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);
   }
 
   &:disabled {
@@ -32,5 +37,16 @@ input[type='checkbox'] {
 }
 
 .required-indicator {
-  color: var(--origo-color-error, #d32f2f);
+  color: var(--origo-color-error);
+}
+
+.origo-checkbox__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+.origo-checkbox__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/checkbox/checkbox.component.ts

@@ -14,12 +14,18 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface CheckboxProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   checked?: boolean;
   label?: string;
   disabled?: boolean;
   'aria-label'?: string;
   'aria-describedby'?: string;
   required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
 }
 
 @Component({
@@ -36,10 +42,16 @@ export interface CheckboxProps {
 })
 export class CheckboxComponent implements OrigoAdapter<CheckboxProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     checked: 'boolean',
     label: 'string',
     disabled: 'boolean',
     required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
   };
   static readonly strictContract = false;
 
@@ -62,6 +74,10 @@ export class CheckboxComponent implements OrigoAdapter<CheckboxProps> {
       : 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/chip/chip.component.ts

@@ -14,6 +14,9 @@ import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface ChipProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   selected?: boolean;
   label?: string;
   disabled?: boolean;

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

@@ -15,6 +15,9 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface DataGridProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   columns?: Array<{ key: string; label: string; sortable?: boolean }>;
   rows?: Array<Record<string, unknown>>;
   pageSize?: number;
@@ -42,6 +45,9 @@ export interface DataGridProps {
 })
 export class DataGridComponent implements OrigoAdapter<DataGridProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     columns: 'array',
     rows: 'array',
     pageSize: 'number',

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

@@ -11,6 +11,9 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface FabProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   icon?: string;
   label?: string;
   severity?: string;
@@ -19,9 +22,6 @@ export interface FabProps {
   position?: 'bottom-right' | 'bottom-left';
   'aria-label'?: string;
   'aria-describedby'?: string;
-  permissions?: any;
-  rules?: any;
-  metadata?: any;
 }
 
 @Component({
@@ -38,6 +38,9 @@ export interface FabProps {
 })
 export class FloatingActionButtonComponent implements OrigoAdapter<FabProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     icon: 'string',
     label: 'string',
     severity: 'string',
@@ -46,9 +49,6 @@ export class FloatingActionButtonComponent implements OrigoAdapter<FabProps> {
     position: 'string',
     'aria-label': 'string',
     'aria-describedby': 'string',
-    permissions: 'object',
-    rules: 'object',
-    metadata: 'object',
   };
   static readonly strictContract = false;
 
@@ -59,7 +59,8 @@ export class FloatingActionButtonComponent implements OrigoAdapter<FabProps> {
   computedLoading = computed(() => !!this.contract().props?.loading);
   computedDisabled = computed(() => {
     const props = this.contract().props;
-    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    const rulesDisable =
+      props?.rules?.['disable'] === true || props?.permissions?.['allow'] === 'false';
     return !!props?.disabled || this.computedLoading() || rulesDisable;
   });
 

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

@@ -12,6 +12,9 @@ import { OrigoAdapter, ContainerComponent } from '../../../adapters/web/adapter'
 import { LabelComponent, LabelProps } from '../label/label.component';
 
 export interface FormFieldProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   label?: string;
   error?: string;
   hint?: string;
@@ -39,6 +42,9 @@ export interface FormFieldProps {
 })
 export class FormFieldComponent implements OrigoAdapter<FormFieldProps>, ContainerComponent {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     label: 'string',
     error: 'string',
     hint: 'string',

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.ts

@@ -11,6 +11,9 @@ 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;
@@ -21,9 +24,6 @@ export interface IconButtonProps {
   disabled?: boolean;
   'aria-label'?: string;
   'aria-describedby'?: string;
-  permissions?: any;
-  rules?: any;
-  metadata?: any;
 }
 
 @Component({
@@ -40,6 +40,9 @@ export interface IconButtonProps {
 })
 export class IconButtonComponent implements OrigoAdapter<IconButtonProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     icon: 'string',
     label: 'string',
     tooltip: 'string',
@@ -50,9 +53,6 @@ export class IconButtonComponent implements OrigoAdapter<IconButtonProps> {
     disabled: 'boolean',
     'aria-label': 'string',
     'aria-describedby': 'string',
-    permissions: 'object',
-    rules: 'object',
-    metadata: 'object',
   };
   static readonly strictContract = false;
 
@@ -62,7 +62,8 @@ export class IconButtonComponent implements OrigoAdapter<IconButtonProps> {
   computedLoading = computed(() => !!this.contract().props?.loading);
   computedDisabled = computed(() => {
     const props = this.contract().props;
-    const rulesDisable = props?.rules?.disable === true || props?.permissions?.allow === false;
+    const rulesDisable =
+      props?.rules?.['disable'] === true || props?.permissions?.['allow'] === 'false';
     return !!props?.disabled || this.computedLoading() || rulesDisable;
   });
 

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);
+}