@origostudio/origo-design 0.0.49 → 0.0.50

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

@@ -8,24 +8,51 @@ import {
   inject,
   effect,
   untracked,
-  SecurityContext,
+  signal,
+  PLATFORM_ID,
+  HostListener,
+  ElementRef,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { isPlatformBrowser } from '@angular/common';
 import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+import { type NormalizedOption, normalizeOptions, filterOptions } from './selection-utils';
+
+export type { NormalizedOption };
 
 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;
+  id?: string;
+  value?: unknown;
+  options: Array<unknown>;
+  optionLabel?: string;
+  optionValue?: string;
+  optionGroupLabel?: string;
+  optionGroupChildren?: string;
   placeholder?: string;
+  filter?: boolean;
+  filterBy?: string;
+  filterMatchMode?: 'contains' | 'startsWith' | 'endsWith';
+  filterPlaceholder?: string;
+  editable?: boolean;
+  clearable?: boolean;
+  appendTo?: string;
+  virtualScroll?: boolean;
+  itemSize?: number;
+  loading?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
+  variant?: 'outlined' | 'filled';
+  fluid?: boolean;
   'aria-label'?: string;
   'aria-describedby'?: string;
-  required?: boolean;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
 }
 
 @Component({
@@ -37,7 +64,13 @@ export interface SelectProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-select]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
+    '[class.origo-select--fluid]': 'computedFluid()',
+    '[class.origo-select--outlined]': 'computedVariant() === "outlined"',
+    '[class.origo-select--filled]': 'computedVariant() === "filled"',
+    '[class.origo-select--invalid]': 'computedInvalid()',
+    '[class.origo-select--disabled]': 'computedDisabled()',
+    '[class.origo-select--readonly]': 'computedReadonly()',
   },
 })
 export class SelectComponent implements OrigoAdapter<SelectProps> {
@@ -47,61 +80,236 @@ export class SelectComponent implements OrigoAdapter<SelectProps> {
     metadata: 'object',
     options: 'array',
     value: 'string',
-    disabled: 'boolean',
+    optionLabel: 'string',
+    optionValue: 'string',
+    optionGroupLabel: 'string',
+    optionGroupChildren: 'string',
     placeholder: 'string',
+    filter: 'boolean',
+    filterBy: 'string',
+    filterMatchMode: 'string',
+    filterPlaceholder: 'string',
+    editable: 'boolean',
+    clearable: 'boolean',
+    appendTo: 'string',
+    virtualScroll: 'boolean',
+    itemSize: 'number',
+    loading: 'boolean',
+    disabled: 'boolean',
+    readonly: 'boolean',
     required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
+    variant: 'string',
+    fluid: 'boolean',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
   };
   static readonly strictContract = false;
 
   contract = input.required<InteractionContract<SelectProps>>();
-  value = model<string>('');
+  value = model<unknown>('');
 
-  computedOptions = computed(() => {
-    const opts = this.contract().props?.options;
-    return Array.isArray(opts)
-      ? opts.filter(o => o != null && o.value != null && o.label != null)
-      : [];
+  isOpen = signal<boolean>(false);
+  filterQuery = signal<string>('');
+  activeIndex = signal<number>(-1);
+
+  computedNormalizedOptions = computed(() => {
+    const props = this.contract().props;
+    return normalizeOptions(
+      props?.options,
+      props?.optionLabel,
+      props?.optionValue,
+      props?.optionGroupLabel,
+      props?.optionGroupChildren
+    );
   });
+
+  computedOptions = this.computedNormalizedOptions;
+
+  filteredOptions = computed(() => {
+    const opts = this.computedNormalizedOptions();
+    if (!this.computedFilter() && !this.filterQuery()) {
+      return opts;
+    }
+    const mode = this.contract().props?.filterMatchMode ?? 'contains';
+    return filterOptions(opts, this.filterQuery(), mode);
+  });
+
+  selectedOption = computed(() => {
+    const val = this.value();
+    return this.computedNormalizedOptions().find(opt => opt.value === val);
+  });
+
+  selectedLabel = computed(() => {
+    const opt = this.selectedOption();
+    if (opt) return opt.label;
+    const val = this.value();
+    return val !== undefined && val !== null && val !== '' ? String(val) : '';
+  });
+
   computedPlaceholder = computed(() => this.contract().props?.placeholder ?? '');
   computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedReadonly = computed(() => !!this.contract().props?.readonly);
   computedRequired = computed(() => !!this.contract().props?.required);
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedFilter = computed(() => !!this.contract().props?.filter);
+  computedFilterPlaceholder = computed(
+    () => this.contract().props?.filterPlaceholder ?? 'Search...'
+  );
+  computedClearable = computed(() => !!this.contract().props?.clearable);
+  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) : undefined;
+    if (label !== undefined && label !== null && String(label).trim() !== '') {
+      return String(label);
+    }
+    return this.computedPlaceholder() || 'Select';
   });
+
   computedAriaDescribedBy = computed(() => {
+    const parts: string[] = [];
     const desc = this.contract().props?.['aria-describedby'];
-    return desc !== undefined && desc !== null ? String(desc) : undefined;
+    if (desc) parts.push(String(desc));
+    if (this.computedErrorText()) parts.push(`${this.contract().id}-error`);
+    if (this.computedHelpText()) parts.push(`${this.contract().id}-help`);
+    return parts.length > 0 ? parts.join(' ') : undefined;
   });
 
   private experienceAdapter = inject(WebExperienceAdapterService);
-  private sanitizer = inject(DomSanitizer);
+  private platformId = inject(PLATFORM_ID);
+  private elementRef = inject(ElementRef);
 
   constructor() {
     effect(() => {
       const contractVal = this.contract().props?.value;
-      const parsedVal =
-        contractVal !== undefined && contractVal !== null ? String(contractVal) : '';
       untracked(() => {
-        if (parsedVal === this.value()) return;
-        this.value.set(parsedVal);
+        if (contractVal !== undefined && contractVal !== this.value()) {
+          this.value.set(contractVal);
+        }
       });
     });
   }
 
-  onChange(event: Event) {
-    const target = event.target as HTMLSelectElement | null;
-    if (!target || this.computedDisabled()) return;
+  toggleOpen() {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    const next = !this.isOpen();
+    this.isOpen.set(next);
+    if (next) {
+      this.filterQuery.set('');
+      const currentVal = this.value();
+      const currentIdx = this.filteredOptions().findIndex(o => o.value === currentVal);
+      this.activeIndex.set(currentIdx >= 0 ? currentIdx : 0);
+    }
+  }
+
+  selectOption(optionValue: unknown) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    this.value.set(optionValue);
+    this.isOpen.set(false);
+    this.experienceAdapter.updateState(this.contract().id, 'value', optionValue);
+  }
 
-    const rawValue = target.value;
-    const sanitizedValue =
-      this.sanitizer.sanitize(SecurityContext.HTML, rawValue) || rawValue || '';
+  clear(event?: Event) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    event?.stopPropagation();
+    this.value.set('');
+    this.experienceAdapter.updateState(this.contract().id, 'value', '');
+  }
+
+  onFilterInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.filterQuery.set(target.value);
+    this.activeIndex.set(0);
+  }
 
-    if (target.value !== sanitizedValue) {
-      target.value = sanitizedValue;
+  onKeydown(event: KeyboardEvent) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+
+    const opts = this.filteredOptions();
+    const count = opts.length;
+
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        if (!this.isOpen()) {
+          this.isOpen.set(true);
+          this.activeIndex.set(0);
+        } else if (count > 0) {
+          const next = (this.activeIndex() + 1) % count;
+          this.activeIndex.set(next);
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        if (!this.isOpen()) {
+          this.isOpen.set(true);
+          this.activeIndex.set(count - 1);
+        } else if (count > 0) {
+          const prev = (this.activeIndex() - 1 + count) % count;
+          this.activeIndex.set(prev);
+        }
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        const target = event.target as HTMLElement;
+        if (event.key === ' ' && target && target.tagName === 'INPUT') {
+          return;
+        }
+        event.preventDefault();
+        if (this.isOpen()) {
+          const idx = this.activeIndex();
+          if (idx >= 0 && idx < count && !opts[idx].disabled) {
+            this.selectOption(opts[idx].value);
+          }
+        } else {
+          this.isOpen.set(true);
+        }
+        break;
+      }
+      case 'Escape': {
+        if (this.isOpen()) {
+          event.preventDefault();
+          this.isOpen.set(false);
+        }
+        break;
+      }
+      case 'Tab': {
+        if (this.isOpen()) {
+          this.isOpen.set(false);
+        }
+        break;
+      }
+      case 'Home': {
+        if (this.isOpen() && count > 0) {
+          event.preventDefault();
+          this.activeIndex.set(0);
+        }
+        break;
+      }
+      case 'End': {
+        if (this.isOpen() && count > 0) {
+          event.preventDefault();
+          this.activeIndex.set(count - 1);
+        }
+        break;
+      }
     }
+  }
 
-    this.value.set(sanitizedValue);
-    this.experienceAdapter.updateState(this.contract().id, 'value', sanitizedValue);
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const clickedInside = this.elementRef.nativeElement.contains(event.target as Node);
+    if (!clickedInside && this.isOpen()) {
+      this.isOpen.set(false);
+    }
   }
 }

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

@@ -0,0 +1,92 @@
+export interface NormalizedOption {
+  label: string;
+  value: unknown;
+  disabled?: boolean;
+  group?: string;
+}
+
+export function resolveOption(
+  item: unknown,
+  labelKey?: string,
+  valueKey?: string
+): NormalizedOption {
+  if (item === null || item === undefined) {
+    return { label: '', value: '', disabled: false };
+  }
+  if (typeof item !== 'object') {
+    return { label: String(item), value: item, disabled: false };
+  }
+  const obj = item as Record<string, unknown>;
+  const label =
+    labelKey && obj[labelKey] !== undefined
+      ? String(obj[labelKey])
+      : obj['label'] !== undefined
+        ? String(obj['label'])
+        : String(item);
+
+  const value =
+    valueKey && obj[valueKey] !== undefined
+      ? obj[valueKey]
+      : obj['value'] !== undefined
+        ? obj['value']
+        : item;
+
+  return { label, value, disabled: !!obj['disabled'] };
+}
+
+export function normalizeOptions(
+  items: unknown[] | null | undefined,
+  labelKey?: string,
+  valueKey?: string,
+  groupLabelKey?: string,
+  groupChildrenKey?: string
+): NormalizedOption[] {
+  if (!Array.isArray(items)) return [];
+  const result: NormalizedOption[] = [];
+
+  for (const item of items) {
+    if (item === null || item === undefined) continue;
+
+    if (typeof item === 'object') {
+      const obj = item as Record<string, unknown>;
+      const children =
+        (groupChildrenKey && obj[groupChildrenKey]) || obj['items'] || obj['children'];
+
+      if (Array.isArray(children)) {
+        const groupTitle =
+          groupLabelKey && obj[groupLabelKey] !== undefined
+            ? String(obj[groupLabelKey])
+            : obj['label'] !== undefined
+              ? String(obj['label'])
+              : '';
+
+        for (const child of children) {
+          if (child === null || child === undefined) continue;
+          const opt = resolveOption(child, labelKey, valueKey);
+          opt.group = groupTitle;
+          result.push(opt);
+        }
+        continue;
+      }
+    }
+
+    result.push(resolveOption(item, labelKey, valueKey));
+  }
+
+  return result;
+}
+
+export function filterOptions(
+  options: NormalizedOption[],
+  query: string,
+  matchMode: 'contains' | 'startsWith' | 'endsWith' = 'contains'
+): NormalizedOption[] {
+  if (!query || !query.trim()) return options;
+  const q = query.toLowerCase().trim();
+  return options.filter(opt => {
+    const l = opt.label.toLowerCase();
+    if (matchMode === 'startsWith') return l.startsWith(q);
+    if (matchMode === 'endsWith') return l.endsWith(q);
+    return l.includes(q);
+  });
+}

package/packages/angular-renderer/src/index.ts

@@ -10,6 +10,9 @@ export * from './components/primitives/button-group/button-group.component';
 export * from './components/primitives/floating-action-button/floating-action-button.component';
 export * from './devtools';
 export * from './components/primitives/select/select.component';
+export * from './components/primitives/multi-select/multi-select.component';
+export * from './components/primitives/autocomplete/autocomplete.component';
+export * from './components/primitives/combobox/combobox.component';
 export * from './components/primitives/checkbox/checkbox.component';
 export * from './components/primitives/radio-group/radio-group.component';
 export * from './components/primitives/textarea/textarea.component';

package/packages/angular-renderer/src/lib/primitives.provider.ts

@@ -4,6 +4,9 @@ import { IconButtonComponent } from '../components/primitives/icon-button/icon-b
 import { ButtonGroupComponent } from '../components/primitives/button-group/button-group.component';
 import { FloatingActionButtonComponent } from '../components/primitives/floating-action-button/floating-action-button.component';
 import { SelectComponent } from '../components/primitives/select/select.component';
+import { MultiSelectComponent } from '../components/primitives/multi-select/multi-select.component';
+import { AutocompleteComponent } from '../components/primitives/autocomplete/autocomplete.component';
+import { ComboboxComponent } from '../components/primitives/combobox/combobox.component';
 import { CheckboxComponent } from '../components/primitives/checkbox/checkbox.component';
 import { RadioGroupComponent } from '../components/primitives/radio-group/radio-group.component';
 import { TextareaComponent } from '../components/primitives/textarea/textarea.component';
@@ -29,6 +32,9 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
     ['ButtonGroup', ButtonGroupComponent],
     ['FloatingActionButton', FloatingActionButtonComponent],
     ['Select', SelectComponent],
+    ['MultiSelect', MultiSelectComponent],
+    ['Autocomplete', AutocompleteComponent],
+    ['Combobox', ComboboxComponent],
     ['Checkbox', CheckboxComponent],
     ['RadioGroup', RadioGroupComponent],
     ['Textarea', TextareaComponent],

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for cli to align it with other projects, there were no code changes.

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/cli",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origostudio/core": "0.0.49",
+    "@origostudio/core": "0.0.50",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for core to align it with other projects, there were no code changes.

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/core",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for design-tokens to align it with other projects, there were no code changes.

package/packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/design-tokens",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.50 (2026-10-08)
+
+### 🚀 Features
+
+- add core selection control primitives including select, multi-select, combobox, and autocomplete components ([3866703](https://github.com/OrigoStudio/origo-design/commit/3866703))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for devtools to align it with other projects, there were no code changes.

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":159.0430180000003,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":180.44159500000023,"failed":false}]]}

package/packages/devtools/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/devtools",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "dependencies": {
-    "@origostudio/core": "0.0.49",
-    "@origostudio/cli": "0.0.49",
+    "@origostudio/core": "0.0.50",
+    "@origostudio/cli": "0.0.50",
     "@angular/core": "18.1.0",
     "@angular/common": "18.1.0"
   },

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.50 (2026-10-08)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
 ## 0.0.49 (2026-10-08)
 
 This was a version bump only for playground to align it with other projects, there were no code changes.

package/packages/playground/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/editor/badl-editor.component.spec.ts",{"duration":355.58316600000035,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":3910.8276769999975,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":552.2895629999985,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":23.031402000000526,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":53.45418900000004,"failed":false}],[":src/app/app.component.spec.ts",{"duration":232.5201330000018,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":124.97693900000013,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":5319.368552,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":547.4748609999988,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":369.1087829999997,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":50.87500999999975,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":145.60159399999975,"failed":false}],[":src/app/app.component.spec.ts",{"duration":415.8329359999989,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":307.30098,"failed":false}]]}

package/packages/playground/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/playground",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": true,
   "dependencies": {
-    "@origostudio/core": "0.0.49",
-    "@origostudio/cli": "0.0.49"
+    "@origostudio/core": "0.0.50",
+    "@origostudio/cli": "0.0.50"
   },
   "peerDependencies": {
     "@angular/common": "^18.0.0",