@thinkersteps_labs/3d-viewer-angular 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,107 @@
-# Temporary Holding Version
+# @thinkersteps_labs/3d-viewer-angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Official Angular component wrapper for `@thinkersteps_labs/3d-viewer-core`. Renders photorealistic 3D jewelry and customizer canvases in Angular 18+ applications (including standalone components and legacy `NgModule` architectures).
+
+---
+
+## Installation
+
+```bash
+pnpm add @thinkersteps_labs/3d-viewer-angular @thinkersteps_labs/3d-viewer-core three
+# or with npm
+npm install @thinkersteps_labs/3d-viewer-angular @thinkersteps_labs/3d-viewer-core three
+```
+
+> **Peer Dependencies**: Requires `@angular/core >= 18.0.0` and `three >= 0.150.0`.
+
+---
+
+## 1. Turnkey Customizer (`<td-jewelry-customizer>`)
+
+```typescript
+import { Component } from '@angular/core'
+import { JewelryCustomizerComponent } from '@thinkersteps_labs/3d-viewer-angular'
+
+@Component({
+  selector: 'app-product-page',
+  standalone: true,
+  imports: [JewelryCustomizerComponent],
+  template: `
+    <td-jewelry-customizer
+      [src]="'https://cdn.example.com/models/solitaire-ring.glb'"
+      [(metal)]="activeMetal"
+      [(stone)]="activeStone"
+      [height]="520"
+      [autoRotate]="true"
+    ></td-jewelry-customizer>
+  `
+})
+export class ProductPageComponent {
+  activeMetal = 'yellow-gold-18k'
+  activeStone = 'diamond-d'
+}
+```
+
+---
+
+## 2. Composable Primitives (`<td-viewer>` + Swatches)
+
+```typescript
+import { Component } from '@angular/core'
+import {
+  ViewerComponent,
+  MetalSwatchesComponent,
+  StoneSwatchesComponent,
+  type MetalColorProp,
+  type StoneColorProp,
+} from '@thinkersteps_labs/3d-viewer-angular'
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [ViewerComponent, MetalSwatchesComponent, StoneSwatchesComponent],
+  template: `
+    <div style="max-width: 840px; margin: 0 auto;">
+      <td-viewer
+        [src]="modelUrl"
+        [metalColor]="activeMetal"
+        [stoneColor]="activeStone"
+        [height]="500"
+        [autoRotate]="true"
+      ></td-viewer>
+
+      <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 14px;">
+        <td-metal-swatches [(value)]="activeMetal" [variant]="'pills'"></td-metal-swatches>
+        <td-stone-swatches [(value)]="activeStone" [variant]="'pills'"></td-stone-swatches>
+      </div>
+    </div>
+  `
+})
+export class ProductDetailComponent {
+  modelUrl = 'https://cdn.example.com/models/solitaire-ring.glb'
+  activeMetal: MetalColorProp = 'yellow-gold-18k'
+  activeStone: StoneColorProp = 'diamond-d'
+}
+```
+
+---
+
+## 3. NgModule Apps (e.g. Angular ERP)
+
+Import `ViewerModule` in your feature module to get access to `<td-viewer>`, `<td-metal-swatches>`, `<td-stone-swatches>`, and `<td-jewelry-customizer>`:
+
+```typescript
+import { NgModule } from '@angular/core'
+import { ViewerModule } from '@thinkersteps_labs/3d-viewer-angular'
+
+@NgModule({
+  imports: [ViewerModule],
+})
+export class ProductModule {}
+```
+
+---
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { ViewerComponent } from './viewer.component';
+export { ViewerModule } from './viewer.module';
+export { MetalSwatchesComponent, MetalSelectComponent, } from './swatches/metal-swatches.component';
+export { StoneSwatchesComponent, StoneSelectComponent, } from './swatches/stone-swatches.component';
+export { JewelryCustomizerComponent, } from './swatches/jewelry-customizer.component';
+export { CANONICAL_METAL_PRESETS, CANONICAL_STONE_PRESETS, METAL_PRESETS, STONE_PRESETS, PHYSICALLY_BASED_METAL_PRESETS, DIAMOND_PRESETS, GEMSTONE_PRESETS, ALL_METAL_PRESETS, ALL_STONE_PRESETS, getMetalPreset, getStonePreset, normalizeModelSource, inferFormatFromUrl, } from '@thinkersteps_labs/3d-viewer-core';
+export type { MetalPreset, StonePreset, StandardMetalId, StandardStoneId, MetalColorProp, StoneColorProp, ModelSource, ViewerSourceInput, ViewerOptions, ViewerState, PartInfo, PartType, MaterialSlotInfo, MeshMaterialSlot, StateRestoreResult, Viewer, } from '@thinkersteps_labs/3d-viewer-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qCAAqC,CAAA;AAE5C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qCAAqC,CAAA;AAE5C,OAAO,EACL,0BAA0B,GAC3B,MAAM,yCAAyC,CAAA;AAGhD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,aAAa,EACb,8BAA8B,EAC9B,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,mCAAmC,CAAA;AAE1C,YAAY,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,MAAM,GACP,MAAM,mCAAmC,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export { ViewerComponent } from './viewer.component';
+export { ViewerModule } from './viewer.module';
+export { MetalSwatchesComponent, MetalSelectComponent, } from './swatches/metal-swatches.component';
+export { StoneSwatchesComponent, StoneSelectComponent, } from './swatches/stone-swatches.component';
+export { JewelryCustomizerComponent, } from './swatches/jewelry-customizer.component';
+// Convenience re-exports — Angular consumers can import everything from one place.
+export { CANONICAL_METAL_PRESETS, CANONICAL_STONE_PRESETS, METAL_PRESETS, STONE_PRESETS, PHYSICALLY_BASED_METAL_PRESETS, DIAMOND_PRESETS, GEMSTONE_PRESETS, ALL_METAL_PRESETS, ALL_STONE_PRESETS, getMetalPreset, getStonePreset, normalizeModelSource, inferFormatFromUrl, } from '@thinkersteps_labs/3d-viewer-core';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qCAAqC,CAAA;AAE5C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,qCAAqC,CAAA;AAE5C,OAAO,EACL,0BAA0B,GAC3B,MAAM,yCAAyC,CAAA;AAEhD,mFAAmF;AACnF,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,EACb,aAAa,EACb,8BAA8B,EAC9B,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,mCAAmC,CAAA"}

package/dist/swatches/jewelry-customizer.component.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import { type MetalPreset, type StonePreset, type MetalColorProp, type StoneColorProp, type ViewerSourceInput, type PartInfo, type PartType } from '@thinkersteps_labs/3d-viewer-core';
+import * as i0 from "@angular/core";
+export declare class JewelryCustomizerComponent {
+    src?: string;
+    source?: ViewerSourceInput;
+    metal: MetalColorProp;
+    metalChange: EventEmitter<string>;
+    stone: StoneColorProp;
+    stoneChange: EventEmitter<string>;
+    height: number | string;
+    autoRotate: boolean;
+    quality: 'low' | 'medium' | 'high';
+    controlsVariant: 'pills' | 'dots' | 'select' | 'none';
+    metalOptions: MetalPreset[];
+    stoneOptions: StonePreset[];
+    loaded: EventEmitter<PartInfo[]>;
+    partSelected: EventEmitter<{
+        meshId: string;
+        type: PartType;
+    }>;
+    get buttonVariant(): 'pills' | 'dots';
+    get formattedHeight(): string;
+    onMetalChange(val: string): void;
+    onStoneChange(val: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JewelryCustomizerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JewelryCustomizerComponent, "td-jewelry-customizer", never, { "src": { "alias": "src"; "required": false; }; "source": { "alias": "source"; "required": false; }; "metal": { "alias": "metal"; "required": false; }; "stone": { "alias": "stone"; "required": false; }; "height": { "alias": "height"; "required": false; }; "autoRotate": { "alias": "autoRotate"; "required": false; }; "quality": { "alias": "quality"; "required": false; }; "controlsVariant": { "alias": "controlsVariant"; "required": false; }; "metalOptions": { "alias": "metalOptions"; "required": false; }; "stoneOptions": { "alias": "stoneOptions"; "required": false; }; }, { "metalChange": "metalChange"; "stoneChange": "stoneChange"; "loaded": "loaded"; "partSelected": "partSelected"; }, never, never, true, never>;
+}
+//# sourceMappingURL=jewelry-customizer.component.d.ts.map

package/dist/swatches/jewelry-customizer.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jewelry-customizer.component.d.ts","sourceRoot":"","sources":["../../src/swatches/jewelry-customizer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAEb,MAAM,eAAe,CAAA;AAEtB,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACb,KAAK,QAAQ,EACd,MAAM,mCAAmC,CAAA;;AAkC1C,qBA4Da,0BAA0B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,KAAK,EAAE,cAAc,CAAoB;IACxC,WAAW,uBAA6B;IAEzC,KAAK,EAAE,cAAc,CAAc;IAClC,WAAW,uBAA6B;IAEzC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM;IAC7B,UAAU,UAAO;IACjB,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAS;IAC3C,eAAe,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAU;IAE/D,YAAY,EAAE,WAAW,EAAE,CAA0B;IACrD,YAAY,EAAE,WAAW,EAAE,CAA0B;IAEpD,MAAM,2BAAiC;IACvC,YAAY;gBAA8B,MAAM;cAAQ,QAAQ;OAAK;IAE/E,IAAI,aAAa,IAAI,OAAO,GAAG,MAAM,CAEpC;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKhC,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;yCAjCrB,0BAA0B;2CAA1B,0BAA0B;CAqCtC"}

package/dist/swatches/jewelry-customizer.component.js

@@ -0,0 +1,198 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CANONICAL_METAL_PRESETS, CANONICAL_STONE_PRESETS, } from '@thinkersteps_labs/3d-viewer-core';
+import { ViewerComponent } from '../viewer.component';
+import { MetalSwatchesComponent, MetalSelectComponent } from './metal-swatches.component';
+import { StoneSwatchesComponent, StoneSelectComponent } from './stone-swatches.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const CUSTOMIZER_STYLES = `
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  }
+  .td-customizer-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: #ffffff;
+    border-radius: 16px;
+    border: 1px solid #e2e8f0;
+    padding: 16px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  }
+  .td-customizer-viewport {
+    position: relative;
+    width: 100%;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #f8fafc;
+  }
+  .td-customizer-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+`;
+export class JewelryCustomizerComponent {
+    constructor() {
+        this.metal = 'yellow-gold-18k';
+        this.metalChange = new EventEmitter();
+        this.stone = 'diamond-d';
+        this.stoneChange = new EventEmitter();
+        this.height = 520;
+        this.autoRotate = true;
+        this.quality = 'high';
+        this.controlsVariant = 'pills';
+        this.metalOptions = CANONICAL_METAL_PRESETS;
+        this.stoneOptions = CANONICAL_STONE_PRESETS;
+        this.loaded = new EventEmitter();
+        this.partSelected = new EventEmitter();
+    }
+    get buttonVariant() {
+        return this.controlsVariant === 'dots' ? 'dots' : 'pills';
+    }
+    get formattedHeight() {
+        return typeof this.height === 'number' ? `${this.height}px` : this.height;
+    }
+    onMetalChange(val) {
+        this.metal = val;
+        this.metalChange.emit(val);
+    }
+    onStoneChange(val) {
+        this.stone = val;
+        this.stoneChange.emit(val);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: JewelryCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: JewelryCustomizerComponent, isStandalone: true, selector: "td-jewelry-customizer", inputs: { src: "src", source: "source", metal: "metal", stone: "stone", height: "height", autoRotate: "autoRotate", quality: "quality", controlsVariant: "controlsVariant", metalOptions: "metalOptions", stoneOptions: "stoneOptions" }, outputs: { metalChange: "metalChange", stoneChange: "stoneChange", loaded: "loaded", partSelected: "partSelected" }, ngImport: i0, template: `
+    <div class="td-customizer-card">
+      <div class="td-customizer-viewport" [style.height]="formattedHeight">
+        <td-viewer
+          [src]="src"
+          [source]="source"
+          [metalColor]="metal"
+          [stoneColor]="stone"
+          [autoRotate]="autoRotate"
+          [quality]="quality"
+          (loaded)="loaded.emit($event)"
+          (partSelected)="partSelected.emit($event)"
+        ></td-viewer>
+      </div>
+
+      <div class="td-customizer-controls" *ngIf="controlsVariant !== 'none'">
+        <ng-container *ngIf="controlsVariant === 'select'; else buttonSwatches">
+          <td-metal-select
+            [value]="metal"
+            (valueChange)="onMetalChange($event)"
+            [options]="metalOptions"
+          ></td-metal-select>
+          <td-stone-select
+            [value]="stone"
+            (valueChange)="onStoneChange($event)"
+            [options]="stoneOptions"
+          ></td-stone-select>
+        </ng-container>
+
+        <ng-template #buttonSwatches>
+          <td-metal-swatches
+            [value]="metal"
+            (valueChange)="onMetalChange($event)"
+            [options]="metalOptions"
+            [variant]="buttonVariant"
+          ></td-metal-swatches>
+          <td-stone-swatches
+            [value]="stone"
+            (valueChange)="onStoneChange($event)"
+            [options]="stoneOptions"
+            [variant]="buttonVariant"
+          ></td-stone-swatches>
+        </ng-template>
+      </div>
+    </div>
+  `, isInline: true, styles: ["\n  :host {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n  .td-customizer-card {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    background: #ffffff;\n    border-radius: 16px;\n    border: 1px solid #e2e8f0;\n    padding: 16px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n  }\n  .td-customizer-viewport {\n    position: relative;\n    width: 100%;\n    border-radius: 12px;\n    overflow: hidden;\n    background: #f8fafc;\n  }\n  .td-customizer-controls {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewerComponent, selector: "td-viewer", inputs: ["src", "source", "metalColor", "stoneColor", "materialColors", "partColors", "height", "minHeight", "background", "metalEnvUrl", "gemEnvUrl", "fov", "shadows", "options", "autoRotate", "quality", "state"], outputs: ["loaded", "modelLoaded", "progress", "partSelected", "error", "change"] }, { kind: "component", type: MetalSwatchesComponent, selector: "td-metal-swatches", inputs: ["value", "options", "category", "variant", "showLabel"], outputs: ["valueChange"] }, { kind: "component", type: MetalSelectComponent, selector: "td-metal-select", inputs: ["value", "options", "label"], outputs: ["valueChange"] }, { kind: "component", type: StoneSwatchesComponent, selector: "td-stone-swatches", inputs: ["value", "options", "category", "variant", "showLabel"], outputs: ["valueChange"] }, { kind: "component", type: StoneSelectComponent, selector: "td-stone-select", inputs: ["value", "options", "label"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: JewelryCustomizerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-jewelry-customizer', standalone: true, imports: [
+                        CommonModule,
+                        ViewerComponent,
+                        MetalSwatchesComponent,
+                        MetalSelectComponent,
+                        StoneSwatchesComponent,
+                        StoneSelectComponent,
+                    ], template: `
+    <div class="td-customizer-card">
+      <div class="td-customizer-viewport" [style.height]="formattedHeight">
+        <td-viewer
+          [src]="src"
+          [source]="source"
+          [metalColor]="metal"
+          [stoneColor]="stone"
+          [autoRotate]="autoRotate"
+          [quality]="quality"
+          (loaded)="loaded.emit($event)"
+          (partSelected)="partSelected.emit($event)"
+        ></td-viewer>
+      </div>
+
+      <div class="td-customizer-controls" *ngIf="controlsVariant !== 'none'">
+        <ng-container *ngIf="controlsVariant === 'select'; else buttonSwatches">
+          <td-metal-select
+            [value]="metal"
+            (valueChange)="onMetalChange($event)"
+            [options]="metalOptions"
+          ></td-metal-select>
+          <td-stone-select
+            [value]="stone"
+            (valueChange)="onStoneChange($event)"
+            [options]="stoneOptions"
+          ></td-stone-select>
+        </ng-container>
+
+        <ng-template #buttonSwatches>
+          <td-metal-swatches
+            [value]="metal"
+            (valueChange)="onMetalChange($event)"
+            [options]="metalOptions"
+            [variant]="buttonVariant"
+          ></td-metal-swatches>
+          <td-stone-swatches
+            [value]="stone"
+            (valueChange)="onStoneChange($event)"
+            [options]="stoneOptions"
+            [variant]="buttonVariant"
+          ></td-stone-swatches>
+        </ng-template>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n  :host {\n    display: block;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;\n  }\n  .td-customizer-card {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    background: #ffffff;\n    border-radius: 16px;\n    border: 1px solid #e2e8f0;\n    padding: 16px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n  }\n  .td-customizer-viewport {\n    position: relative;\n    width: 100%;\n    border-radius: 12px;\n    overflow: hidden;\n    background: #f8fafc;\n  }\n  .td-customizer-controls {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n"] }]
+        }], propDecorators: { src: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }], metal: [{
+                type: Input
+            }], metalChange: [{
+                type: Output
+            }], stone: [{
+                type: Input
+            }], stoneChange: [{
+                type: Output
+            }], height: [{
+                type: Input
+            }], autoRotate: [{
+                type: Input
+            }], quality: [{
+                type: Input
+            }], controlsVariant: [{
+                type: Input
+            }], metalOptions: [{
+                type: Input
+            }], stoneOptions: [{
+                type: Input
+            }], loaded: [{
+                type: Output
+            }], partSelected: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=jewelry-customizer.component.js.map

package/dist/swatches/jewelry-customizer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jewelry-customizer.component.js","sourceRoot":"","sources":["../../src/swatches/jewelry-customizer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,uBAAuB,GACxB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,GAQxB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACzF,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;;;AAEzF,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BzB,CAAA;AA8DD,MAAM,OAAO,0BAA0B;IA5DvC;QA+DW,UAAK,GAAmB,iBAAiB,CAAA;QACxC,gBAAW,GAAG,IAAI,YAAY,EAAU,CAAA;QAEzC,UAAK,GAAmB,WAAW,CAAA;QAClC,gBAAW,GAAG,IAAI,YAAY,EAAU,CAAA;QAEzC,WAAM,GAAoB,GAAG,CAAA;QAC7B,eAAU,GAAG,IAAI,CAAA;QACjB,YAAO,GAA8B,MAAM,CAAA;QAC3C,oBAAe,GAAyC,OAAO,CAAA;QAE/D,iBAAY,GAAkB,uBAAuB,CAAA;QACrD,iBAAY,GAAkB,uBAAuB,CAAA;QAEpD,WAAM,GAAG,IAAI,YAAY,EAAc,CAAA;QACvC,iBAAY,GAAG,IAAI,YAAY,EAAsC,CAAA;KAmBhF;IAjBC,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAC3D,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAA;IAC3E,CAAC;IAED,aAAa,CAAC,GAAW;QACvB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAA;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;IAED,aAAa,CAAC,GAAW;QACvB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAA;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;+GApCU,0BAA0B;mGAA1B,0BAA0B,gbAjD3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT,svBApDC,YAAY,mIACZ,eAAe,gWACf,sBAAsB,0JACtB,oBAAoB,6HACpB,sBAAsB,0JACtB,oBAAoB;;4FAmDX,0BAA0B;kBA5DtC,SAAS;+BACE,uBAAuB,cACrB,IAAI,WACP;wBACP,YAAY;wBACZ,eAAe;wBACf,sBAAsB;wBACtB,oBAAoB;wBACpB,sBAAsB;wBACtB,oBAAoB;qBACrB,YACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT,mBAEgB,uBAAuB,CAAC,MAAM;8BAGtC,GAAG;sBAAX,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,KAAK;sBAAb,KAAK;gBACI,WAAW;sBAApB,MAAM;gBAEE,KAAK;sBAAb,KAAK;gBACI,WAAW;sBAApB,MAAM;gBAEE,MAAM;sBAAd,KAAK;gBACG,UAAU;sBAAlB,KAAK;gBACG,OAAO;sBAAf,KAAK;gBACG,eAAe;sBAAvB,KAAK;gBAEG,YAAY;sBAApB,KAAK;gBACG,YAAY;sBAApB,KAAK;gBAEI,MAAM;sBAAf,MAAM;gBACG,YAAY;sBAArB,MAAM"}

package/dist/swatches/metal-swatches.component.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '@angular/core';
+import { type MetalPreset, type MetalColorProp } from '@thinkersteps_labs/3d-viewer-core';
+import * as i0 from "@angular/core";
+export declare class MetalSwatchesComponent {
+    value?: MetalColorProp;
+    valueChange: EventEmitter<string>;
+    options: MetalPreset[];
+    category: 'all' | 'gold' | 'platinum-silver' | 'alternative';
+    variant: 'pills' | 'dots';
+    showLabel: boolean;
+    get visibleOptions(): MetalPreset[];
+    get activePreset(): MetalPreset | undefined;
+    isSelected(m: MetalPreset): boolean;
+    selectMetal(m: MetalPreset): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MetalSwatchesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MetalSwatchesComponent, "td-metal-swatches", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "category": { "alias": "category"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+export declare class MetalSelectComponent {
+    value?: MetalColorProp;
+    valueChange: EventEmitter<string>;
+    options: MetalPreset[];
+    label: string;
+    get activeValue(): string;
+    onSelectChange(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MetalSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MetalSelectComponent, "td-metal-select", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=metal-swatches.component.d.ts.map

package/dist/swatches/metal-swatches.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metal-swatches.component.d.ts","sourceRoot":"","sources":["../../src/swatches/metal-swatches.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EAEb,MAAM,eAAe,CAAA;AAEtB,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,mCAAmC,CAAA;;AAyH1C,qBAgCa,sBAAsB;IACxB,KAAK,CAAC,EAAE,cAAc,CAAA;IACrB,WAAW,uBAA6B;IAEzC,OAAO,EAAE,WAAW,EAAE,CAA0B;IAChD,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,iBAAiB,GAAG,aAAa,CAAQ;IACpE,OAAO,EAAE,OAAO,GAAG,MAAM,CAAU;IACnC,SAAS,UAAO;IAEzB,IAAI,cAAc,IAAI,WAAW,EAAE,CAGlC;IAED,IAAI,YAAY,IAAI,WAAW,GAAG,SAAS,CAE1C;IAED,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO;IAMnC,WAAW,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;yCAxBtB,sBAAsB;2CAAtB,sBAAsB;CA4BlC;AAED,qBAiBa,oBAAoB;IACtB,KAAK,CAAC,EAAE,cAAc,CAAA;IACrB,WAAW,uBAA6B;IACzC,OAAO,EAAE,WAAW,EAAE,CAA0B;IAChD,KAAK,SAAiB;IAE/B,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAXvB,oBAAoB;2CAApB,oBAAoB;CAgBhC"}