@origostudio/origo-design 0.0.52 → 0.0.53

package/package.json

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

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.53 (2026-10-09)
+
+### 🚀 Features
+
+- implement file-input, dropzone, and rich-text-editor angular primitives ([69cc864](https://github.com/OrigoStudio/origo-design/commit/69cc864))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.52 (2026-10-09)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.52",
-    "@origostudio/design-tokens": "0.0.52",
+    "@origostudio/core": "0.0.53",
+    "@origostudio/design-tokens": "0.0.53",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",
@@ -16,6 +16,7 @@
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
+    "@angular/forms": ">=18.0.0",
     "@angular/platform-browser": ">=18.0.0"
   },
   "repository": {

package/packages/angular-renderer/src/components/primitives/date-range-picker/date-range-picker.component.ts

@@ -61,7 +61,7 @@ export class DateRangePickerComponent implements OrigoAdapter<DateRangePickerPro
   contract = input.required<InteractionContract<DateRangePickerProps>>();
 
   // DateRangePicker doesn't use a single value model in the same way, but keeping it for adapter compat if needed
-  value = model<any>(null);
+  value = model<unknown>(null);
 
   startDate = signal<string | null>(null);
   endDate = signal<string | null>(null);

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

@@ -37,7 +37,7 @@ const contractSchema: Record<
 };
 
 const finalSchema = { ...contractSchema };
-delete (finalSchema as any).thickness;
+delete (finalSchema as Record<string, unknown>)['thickness'];
 
 @Component({
   selector: 'origo-divider',
@@ -64,7 +64,7 @@ export class DividerComponent implements OrigoAdapter<DividerProps> {
   protected props = computed(() => {
     const p = coerceContractProps<DividerProps>(this.contract().props, finalSchema);
     const original = this.contract().props || {};
-    if ('thickness' in original) p.thickness = original.thickness as any;
+    if ('thickness' in original) p.thickness = original.thickness as string | number;
     return p;
   });
 

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

@@ -0,0 +1,24 @@
+<div
+  class="origo-dropzone__wrapper"
+  [class.origo-dropzone--dragging]="isDragging()"
+  [class.origo-dropzone--disabled]="disabled"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+  (drop)="onDrop($event)"
+  (click)="inputEl.click()"
+>
+  <input
+    #inputEl
+    type="file"
+    class="origo-dropzone__input"
+    [multiple]="computedMultiple()"
+    [accept]="computedAccept()"
+    [disabled]="disabled"
+    (change)="onFileChange($event)"
+    (focus)="onFocus($event)"
+    (blur)="onBlur($event)"
+  />
+  <div class="origo-dropzone__content">
+    <ng-container #vc></ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+
+.origo-dropzone__wrapper {
+  position: relative;
+  border: 2px dashed var(--origo-color-border-default);
+  border-radius: var(--origo-shape-border-radius-medium);
+  padding-block: var(--origo-spacing-large);
+  padding-inline: var(--origo-spacing-large);
+  text-align: center;
+  transition:
+    background-color var(--origo-motion-duration-short, 150ms)
+      var(--origo-motion-easing-standard, ease),
+    border-color var(--origo-motion-duration-short, 150ms) var(--origo-motion-easing-standard, ease);
+  background-color: var(--origo-color-surface-default);
+  cursor: pointer;
+}
+
+.origo-dropzone__wrapper.origo-dropzone--dragging {
+  background-color: var(--origo-color-surface-hover);
+  border-color: var(--origo-color-border-focus);
+}
+
+.origo-dropzone__input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}

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

@@ -0,0 +1,293 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  forwardRef,
+  viewChild,
+  ViewContainerRef,
+  output,
+  computed,
+  signal,
+  inject,
+  ElementRef,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpEventType } from '@angular/common/http';
+
+export interface DropzoneProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  multiple?: boolean;
+  accept?: string;
+  maxFileSize?: number;
+  uploadUrl?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-dropzone',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './dropzone.component.html',
+  styleUrls: ['./dropzone.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropzoneComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    '[class.origo-dropzone]': 'true',
+    '[attr.data-testid]': 'contract().id',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
+  },
+})
+export class DropzoneComponent implements OrigoAdapter<DropzoneProps>, ControlValueAccessor {
+  static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+    multiple: 'boolean',
+    accept: 'string',
+    maxFileSize: 'number',
+    uploadUrl: 'string',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  } as const;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<DropzoneProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+  inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  fileDrop = output<File[]>();
+  fileSelect = output<File[]>();
+  fileRemove = output<File>();
+  fileError = output<string>();
+  clear = output<void>();
+  focus = output<FocusEvent>();
+  blur = output<FocusEvent>();
+
+  uploadStart = output<void>();
+  uploadProgress = output<number>();
+  uploadSuccess = output<unknown>();
+  uploadError = output<unknown>();
+
+  private http = inject(HttpClient, { optional: true });
+
+  protected props = computed(() => {
+    return coerceContractProps<DropzoneProps>(
+      this.contract().props,
+      DropzoneComponent.contractSchema
+    );
+  });
+
+  computedMultiple = computed(() => !!this.props()?.multiple);
+  computedAccept = computed(() => this.props()?.accept ?? '*/*');
+  computedMaxFileSize = computed(() => this.props()?.maxFileSize);
+  computedUploadUrl = computed(() => this.props()?.uploadUrl);
+  computedAriaLabel = computed(() => this.props()?.['aria-label'] || null);
+  computedAriaDescribedBy = computed(() => this.props()?.['aria-describedby'] || null);
+
+  disabled = false;
+  files = signal<File[]>([]);
+  isDragging = signal<boolean>(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onChange: (value: File[]) => void = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onTouched: () => void = () => {};
+
+  writeValue(obj: unknown): void {
+    if (!obj) {
+      this.files.set([]);
+      const inputEl = this.inputRef()?.nativeElement;
+      if (inputEl) inputEl.value = '';
+    } else if (Array.isArray(obj)) {
+      this.files.set(obj);
+    } else {
+      this.files.set([obj as File]);
+    }
+  }
+
+  registerOnChange(fn: (value: File[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onDragOver(event: DragEvent) {
+    if (this.disabled) return;
+    event.preventDefault();
+    this.isDragging.set(true);
+  }
+
+  onDragLeave(event: DragEvent) {
+    if (this.disabled) return;
+    event.preventDefault();
+
+    // Ignore dragleave if it's just moving into a child element
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    if (
+      event.clientX > rect.left &&
+      event.clientX < rect.right &&
+      event.clientY > rect.top &&
+      event.clientY < rect.bottom
+    ) {
+      return;
+    }
+    this.isDragging.set(false);
+  }
+
+  onDrop(event: DragEvent) {
+    if (this.disabled) return;
+    event.preventDefault();
+    this.isDragging.set(false);
+    this.onTouched();
+
+    if (event.dataTransfer?.files) {
+      const droppedFiles = Array.from(event.dataTransfer.files);
+      if (!droppedFiles.length) return;
+      this.processFiles(droppedFiles, 'drop');
+    }
+  }
+
+  onFileChange(event: Event) {
+    const inputEl = event.target as HTMLInputElement;
+    if (inputEl.files) {
+      const selectedFiles = Array.from(inputEl.files);
+      if (!selectedFiles.length) return;
+      this.processFiles(selectedFiles, 'select');
+      inputEl.value = '';
+    }
+  }
+
+  private processFiles(incomingFiles: File[], source: 'drop' | 'select') {
+    const accept = this.computedAccept();
+    let validFiles = incomingFiles;
+
+    if (accept !== '*/*') {
+      const acceptedTypes = accept.split(',').map((a: string) => a.trim().toLowerCase());
+      validFiles = incomingFiles.filter(file => {
+        const fileType = file.type.toLowerCase();
+        const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+        return acceptedTypes.some((type: string) => {
+          if (type.startsWith('.')) return fileExt === type;
+          if (type.endsWith('/*')) return fileType.startsWith(type.substring(0, type.length - 1));
+          return fileType === type;
+        });
+      });
+      if (validFiles.length < incomingFiles.length) {
+        this.fileError.emit(
+          `Some files were rejected because they do not match the accepted types: ${accept}`
+        );
+      }
+    }
+
+    if (!validFiles.length) return;
+
+    const maxFileSize = this.computedMaxFileSize();
+    if (typeof maxFileSize === 'number' && maxFileSize >= 0) {
+      const invalidFiles = validFiles.filter(file => file.size > maxFileSize);
+      if (invalidFiles.length > 0) {
+        this.fileError.emit(`File size exceeds maximum allowed size of ${maxFileSize} bytes`);
+        validFiles = validFiles.filter(file => file.size <= maxFileSize);
+      }
+    }
+
+    if (!validFiles.length) return;
+
+    const currentFiles = this.computedMultiple()
+      ? [...this.files(), ...validFiles]
+      : [...validFiles];
+    this.files.set(currentFiles);
+    this.onChange(currentFiles);
+
+    if (source === 'drop') {
+      this.fileDrop.emit(validFiles);
+    } else {
+      this.fileSelect.emit(validFiles);
+    }
+
+    const uploadUrl = this.computedUploadUrl();
+    if (uploadUrl && validFiles.length > 0) {
+      this.uploadFiles(validFiles, uploadUrl);
+    }
+  }
+
+  onFocus(event: FocusEvent) {
+    this.focus.emit(event);
+  }
+
+  onBlur(event: FocusEvent) {
+    this.onTouched();
+    this.blur.emit(event);
+  }
+
+  public removeFile(file: File) {
+    const updated = this.files().filter(f => f !== file);
+    this.files.set(updated);
+    this.onChange(updated);
+    this.fileRemove.emit(file);
+  }
+
+  public clearFiles() {
+    this.files.set([]);
+    this.onChange([]);
+    this.clear.emit();
+    const inputEl = this.inputRef()?.nativeElement;
+    if (inputEl) inputEl.value = '';
+  }
+
+  private uploadFiles(filesToUpload: File[], url: string) {
+    this.uploadStart.emit();
+
+    if (!this.http) {
+      this.uploadError.emit('HttpClient is not provided.');
+      return;
+    }
+
+    const formData = new FormData();
+    filesToUpload.forEach(file => formData.append('file', file));
+
+    this.http
+      .post(url, formData, {
+        reportProgress: true,
+        observe: 'events',
+        responseType: 'json',
+      })
+      .subscribe({
+        next: event => {
+          if (event.type === HttpEventType.UploadProgress) {
+            if (event.total && event.total > 0) {
+              const percentComplete = (event.loaded / event.total) * 100;
+              this.uploadProgress.emit(percentComplete);
+            } else {
+              this.uploadProgress.emit(100);
+            }
+          } else if (event.type === HttpEventType.Response) {
+            this.uploadSuccess.emit(event.body);
+          }
+        },
+        error: err => {
+          this.uploadError.emit(err.message || 'Upload failed');
+        },
+      });
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="origo-file-input__wrapper">
+  <input
+    #inputEl
+    type="file"
+    [multiple]="computedMultiple()"
+    [accept]="computedAccept()"
+    [disabled]="disabled"
+    (change)="onFileChange($event)"
+    (focus)="onFocus($event)"
+    (blur)="onBlur($event)"
+  />
+  <ng-container #vc></ng-container>
+</div>

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

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+
+.origo-file-input__wrapper {
+  position: relative;
+  border: 1px solid var(--origo-color-border-default);
+  border-radius: var(--origo-shape-border-radius-medium);
+  padding-block: var(--origo-spacing-small);
+  padding-inline: var(--origo-spacing-small);
+  background-color: var(--origo-color-surface-default);
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.origo-file-input__wrapper:focus-within {
+  border-color: var(--origo-color-border-focus);
+  box-shadow: 0 0 0 2px var(--origo-color-surface-hover);
+}
+
+input[type='file'] {
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--origo-typography-body-size);
+  color: var(--origo-color-text-default);
+}
+
+input[type='file']:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,216 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  forwardRef,
+  viewChild,
+  ViewContainerRef,
+  output,
+  computed,
+  inject,
+  ElementRef,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { HttpClient, HttpEventType } from '@angular/common/http';
+
+export interface FileInputProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  multiple?: boolean;
+  accept?: string;
+  maxFileSize?: number;
+  uploadUrl?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-file-input',
+  standalone: true,
+  templateUrl: './file-input.component.html',
+  styleUrls: ['./file-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileInputComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    '[class.origo-file-input]': 'true',
+    '[attr.data-testid]': 'contract().id',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
+  },
+})
+export class FileInputComponent implements OrigoAdapter<FileInputProps>, ControlValueAccessor {
+  static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+    multiple: 'boolean',
+    accept: 'string',
+    maxFileSize: 'number',
+    uploadUrl: 'string',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  } as const;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<FileInputProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+  inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  fileSelect = output<File[]>();
+  fileRemove = output<File>();
+  fileError = output<string>();
+  clear = output<void>();
+  focus = output<FocusEvent>();
+  blur = output<FocusEvent>();
+  uploadStart = output<void>();
+  uploadProgress = output<number>();
+  uploadSuccess = output<unknown>();
+  uploadError = output<unknown>();
+
+  private http = inject(HttpClient, { optional: true });
+
+  protected props = computed(() => {
+    return coerceContractProps<FileInputProps>(
+      this.contract().props,
+      FileInputComponent.contractSchema
+    );
+  });
+
+  computedMultiple = computed(() => !!this.props()?.multiple);
+  computedAccept = computed(() => this.props()?.accept ?? '*/*');
+  computedMaxFileSize = computed(() => this.props()?.maxFileSize);
+  computedUploadUrl = computed(() => this.props()?.uploadUrl);
+  computedAriaLabel = computed(() => this.props()?.['aria-label'] || null);
+  computedAriaDescribedBy = computed(() => this.props()?.['aria-describedby'] || null);
+
+  disabled = false;
+  files: File[] = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onChange: (value: File[]) => void = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onTouched: () => void = () => {};
+
+  writeValue(obj: unknown): void {
+    if (!obj) {
+      this.files = [];
+      const inputEl = this.inputRef()?.nativeElement;
+      if (inputEl) inputEl.value = '';
+    } else if (Array.isArray(obj)) {
+      this.files = obj;
+    } else {
+      this.files = [obj as File];
+    }
+  }
+
+  registerOnChange(fn: (value: File[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onFileChange(event: Event) {
+    const inputEl = event.target as HTMLInputElement;
+    if (inputEl.files) {
+      const selectedFiles = Array.from(inputEl.files);
+      if (!selectedFiles.length) return;
+
+      const maxFileSize = this.computedMaxFileSize();
+      if (typeof maxFileSize === 'number' && maxFileSize >= 0) {
+        const invalidFiles = selectedFiles.filter(file => file.size > maxFileSize);
+        if (invalidFiles.length > 0) {
+          this.fileError.emit(`File size exceeds maximum allowed size of ${maxFileSize} bytes`);
+          inputEl.value = '';
+          return;
+        }
+      }
+
+      this.files = this.computedMultiple() ? [...this.files, ...selectedFiles] : [...selectedFiles];
+      this.onChange(this.files);
+      this.fileSelect.emit(selectedFiles);
+
+      const uploadUrl = this.computedUploadUrl();
+      if (uploadUrl && selectedFiles.length > 0) {
+        this.uploadFiles(selectedFiles, uploadUrl);
+      }
+
+      inputEl.value = '';
+    }
+  }
+
+  onFocus(event: FocusEvent) {
+    this.focus.emit(event);
+  }
+
+  onBlur(event: FocusEvent) {
+    this.onTouched();
+    this.blur.emit(event);
+  }
+
+  public removeFile(file: File) {
+    this.files = this.files.filter(f => f !== file);
+    this.onChange(this.files);
+    this.fileRemove.emit(file);
+  }
+
+  public clearFiles() {
+    this.files = [];
+    this.onChange(this.files);
+    this.clear.emit();
+    const inputEl = this.inputRef()?.nativeElement;
+    if (inputEl) inputEl.value = '';
+  }
+
+  private uploadFiles(files: File[], url: string) {
+    this.uploadStart.emit();
+
+    if (!this.http) {
+      this.uploadError.emit('HttpClient is not provided.');
+      return;
+    }
+
+    const formData = new FormData();
+    files.forEach(file => formData.append('file', file));
+
+    this.http
+      .post(url, formData, {
+        reportProgress: true,
+        observe: 'events',
+        responseType: 'json',
+      })
+      .subscribe({
+        next: event => {
+          if (event.type === HttpEventType.UploadProgress) {
+            if (event.total && event.total > 0) {
+              const percentComplete = (event.loaded / event.total) * 100;
+              this.uploadProgress.emit(percentComplete);
+            } else {
+              this.uploadProgress.emit(100);
+            }
+          } else if (event.type === HttpEventType.Response) {
+            this.uploadSuccess.emit(event.body);
+          }
+        },
+        error: err => {
+          this.uploadError.emit(err.message || 'Upload failed');
+        },
+      });
+  }
+}