closes #42

src/app/shared/components/input-item/input-item.component.html

@@ -4,7 +4,7 @@
 
     <ng-template ng-label-tmp let-item="item">
       <div class="relative">
-        @if(item.data) {
+        @if(item.data.sprite) {
         <app-sprite class="absolute -top-5 -left-5" [scale]="0.5" [type]="'items'"
           [sprite]="item.data.sprite"></app-sprite>
         }
@@ -16,8 +16,10 @@
 
     <ng-template ng-option-tmp let-item="item">
       <div class="relative">
+        @if(item.data.sprite) {
         <app-sprite class="absolute -top-5 -left-7" [scale]="0.5" [type]="'items'"
           [sprite]="item.data.sprite"></app-sprite>
+        }
         <div class="ml-5 text-white">
           {{ item.data.name }}
         </div>
@@ -26,4 +28,4 @@
   </ng-select>
 
   <app-input-floating-label>{{ label() }}</app-input-floating-label>
-</div>
+</div>

src/app/shared/components/input-item/input-item.component.ts

@@ -23,18 +23,24 @@ export class InputItemComponent implements OnInit {
   public item = model<IItemDefinition | undefined>();
   public label = input<string>('Item');
   public defaultValue = input<string>();
+  public allowNone = input<boolean>(false);
   public change = output<string>();
 
   public values = computed(() => {
     const mod = this.modService.mod();
 
     return [
+      this.allowNone()
+        ? { category: 'Default', data: { name: 'none' }, value: 'none' }
+        : undefined,
       ...mod.items.map((i) => ({
         category: 'My Mod Items',
         data: i,
         value: i.name,
       })),
-    ];
+    ]
+      .flat()
+      .filter(Boolean) as ItemModel[];
   });
 
   ngOnInit() {

src/app/shared/components/sprite-with-inline-name/sprite-with-inline-name.component.html

@@ -1,5 +1,7 @@
 <div class="flex relative">
+  @if(sprite() !== -1) {
   <app-sprite class="absolute -top-5 -left-5" [scale]="0.5" [type]="type()" [sprite]="sprite()"></app-sprite>
+  }
 
   <span class="ml-7">{{ name() }}</span>
 </div>

src/app/tabs/items/items-editor/items-editor.component.html

@@ -273,7 +273,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row">
-          <app-input-item [(item)]="currentItem"></app-input-item>
+          <app-input-item [(item)]="currentItem" [allowNone]="true"></app-input-item>
         </div>
       </div>
 

src/app/tabs/items/items-editor/items-editor.component.ts

@@ -112,8 +112,8 @@ export class ItemsEditorComponent
   });
 
   ngOnInit() {
-    this.extractStats(this.editing());
     this.resetProps(this.editing());
+    this.extractStats(this.editing());
     this.addItemClassMissingProps(this.editing().itemClass);
 
     super.ngOnInit();
@@ -126,6 +126,8 @@ export class ItemsEditorComponent
     item.breakEffect ??= { name: '', potency: 0 };
     item.requirements ??= { baseClass: undefined, level: 0 };
     item.cosmetic ??= { name: '', isPermanent: false };
+    item.trait ??= { name: '', level: 0 };
+    item.randomTrait ??= { name: [], level: { min: 0, max: 0 } };
 
     this.editing.set(item);
   }

src/app/tabs/npcs/npcs-editor/npcs-editor.component.html

@@ -433,7 +433,7 @@
     <div class="form-row split">
       <div class="form-column">
         <div class="form-row">
-          <app-input-item (change)="editingData.items.equipment[slot][eqSlot].result = $event"
+          <app-input-item (change)="editingData.items.equipment[slot][eqSlot].result = $event" [allowNone]="true"
             [defaultValue]="editingData.items.equipment[slot][eqSlot].result"></app-input-item>
         </div>
       </div>
@@ -800,4 +800,4 @@
 
 <app-debug-view>
   {{ editingData | json }}
-</app-debug-view>
+</app-debug-view>