moved manual input outside of image select widget

webapp/src/app/app.module.ts

@@ -65,6 +65,7 @@ import { EnemySingleTypeWidgetComponent } from './components/widgets/enemy-singl
 import { CustomDesTypeWidgetComponent } from './components/widgets/custom-des-type-widget/custom-des-type-widget.component';
 import { AutofocusDirective } from './directives/autofocus.directive';
 import { CombinedTooltipPipe } from './pipes/combined-tooltip.pipe';
+import { InputWithButtonComponent } from './components/widgets/inputs/input-with-button/input-with-button.component';
 
 const WIDGETS = [
 	StringWidgetComponent,
@@ -141,6 +142,7 @@ const WIDGETS = [
 		HighlightDirective,
 		AutofocusDirective,
 		CombinedTooltipPipe,
+		InputWithButtonComponent,
 	],
 	bootstrap: [AppComponent],
 })

webapp/src/app/components/widgets/character-widget/character-widget.component.html

@@ -1,10 +1,7 @@
-<div fxLayout="row"
-     class="property-container"
-     [matTooltip]="attribute?.description | combinedTooltip:this.settings?.[this.key]"
-     matTooltipClass="newline-tooltip"
->
-	<label class="property-name">{{key}}:</label>
-	<input type="button" class="default-input"
-	       [value]="this.settings?.[this.key] || '[ null ]'"
-	       (click)="open()">
-</div>
+<app-input-with-button
+	[key]="key"
+	[description]="attribute?.description"
+	[model]="settings?.[key]"
+	(buttonClick)="open()"
+	(modelChange)="setSetting(key, $event)"
+></app-input-with-button>

webapp/src/app/components/widgets/character-widget/character-widget.component.ts

@@ -66,10 +66,6 @@ export class CharacterWidgetComponent extends OverlayWidget {
 			ogProp = '';
 		}
 
-		this.comp.manualKey = this.key;
-		this.comp.manualValue = ogProp;
-		this.comp.manualValueChange.subscribe(v => this.setPropType(v, true));
-
 		this.setPropType(ogProp);
 		await this.updateProps();
 		this.updateRightSide();
@@ -88,7 +84,6 @@ export class CharacterWidgetComponent extends OverlayWidget {
 		if (updateRightSide) {
 			this.updateRightSide();
 		}
-		this.comp.manualValue = prop;
 	}
 
 	private updateRightSide() {

webapp/src/app/components/widgets/custom-des-type-widget/custom-des-type-widget.component.html

@@ -1,6 +1,7 @@
-<div fxLayout="row" class="property-container" [matTooltip]="attribute?.description!">
-	<label class="property-name">{{key}}:</label>
-	<input type="button" class="default-input"
-	       [value]="this.settings?.desType || this.settings?.__GLOBAL__ || '[ null ]'"
-	       (click)="open()">
-</div>
+<app-input-with-button
+	[description]="attribute?.description ?? ''"
+	[key]="key"
+	[model]="settings.desType"
+	(buttonClick)="open()"
+	(modelChange)="setSetting(key, $event)"
+></app-input-with-button>

webapp/src/app/components/widgets/enemy-single-type-widget/enemy-single-type-widget.component.html

@@ -1,10 +1,7 @@
-<div fxLayout="row"
-     class="property-container"
-     [matTooltip]="attribute?.description | combinedTooltip:this.settings?.[this.key]"
-     matTooltipClass="newline-tooltip"
->
-	<label class="property-name">{{key}}:</label>
-	<input type="button" class="default-input"
-	       [value]="this.settings?.[this.key] || '[ null ]'"
-	       (click)="open()">
-</div>
+<app-input-with-button
+	[key]="key"
+	[description]="attribute?.description"
+	[model]="settings?.[key]"
+	(buttonClick)="open()"
+	(modelChange)="setSetting(key, $event)"
+></app-input-with-button>

webapp/src/app/components/widgets/enemy-single-type-widget/enemy-single-type-widget.component.ts

@@ -61,10 +61,6 @@ export class EnemySingleTypeWidgetComponent extends OverlayWidget {
 		};
 		this.rightGroup.click = prop => this.setPropType(prop);
 
-		this.comp.manualKey = this.key;
-		this.comp.manualValue = this.settings[this.key];
-		this.comp.manualValueChange.subscribe(v => this.setPropType(v, true));
-
 		this.setPropType(this.settings[this.key] ?? '');
 		await this.updateProps();
 		this.updateRightSide();
@@ -83,7 +79,6 @@ export class EnemySingleTypeWidgetComponent extends OverlayWidget {
 		if (updateRightSide) {
 			this.updateRightSide();
 		}
-		this.comp.manualValue = prop;
 	}
 
 	private updateRightSide() {

webapp/src/app/components/widgets/inputs/input-with-button/input-with-button.component.html

@@ -0,0 +1,16 @@
+<div class="property-container flex flex-row" [matTooltip]="description ?? ''">
+	<label class="property-name">{{key}}:</label>
+	<div class="default-input input-container">
+		<input class="default-input"
+		       [ngModel]="model"
+		       (ngModelChange)="modelChange.emit($event)">
+		<button
+			mat-icon-button
+			(click)="buttonClick.emit()"
+		>
+			<mat-icon>
+				collections
+			</mat-icon>
+		</button>
+	</div>
+</div>

webapp/src/app/components/widgets/inputs/input-with-button/input-with-button.component.scss

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+
+input.default-input {
+	outline: none;
+}
+
+.input-container {
+	@include mat.icon-button-density(-4);
+
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+
+	mat-icon {
+		font-size: 20px;
+	}
+
+	&::ng-deep.mat-mdc-button-touch-target {
+		width: 32px;
+		height: 32px;
+	}
+}

webapp/src/app/components/widgets/inputs/input-with-button/input-with-button.component.ts

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+	selector: 'app-input-with-button',
+	standalone: true,
+	imports: [CommonModule, MatTooltipModule, FormsModule, MatButtonModule, MatIconModule],
+	templateUrl: './input-with-button.component.html',
+	styleUrls: ['./input-with-button.component.scss', '../../widget.scss']
+})
+export class InputWithButtonComponent {
+	@Input() description?: string;
+	@Input() key = '';
+	@Input() model?: string;
+	@Output() modelChange = new EventEmitter<string>();
+	@Output() buttonClick = new EventEmitter<void>();
+}

webapp/src/app/services/phaser/entities/registry/item-destruct.ts

@@ -2,7 +2,7 @@ import { Helper } from '../../helper';
 import { Anims, AnimSheet } from '../../sheet-parser';
 import { DefaultEntity } from './default-entity';
 import { Point3 } from '../../../../models/cross-code-map';
-import { EntityAttributes } from '../cc-entity';
+import { AttributeValue, EntityAttributes } from '../cc-entity';
 import { EnemyInfo } from './enemy';
 import { SheetReference } from './destructible';
 import { GlobalSettings } from '../../global-settings';
@@ -36,7 +36,15 @@ export class ItemDestruct extends DefaultEntity {
 	override getAttributes(): EntityAttributes {
 		const attributes = super.getAttributes();
 		attributes['desType'].type = 'CustomDesType';
-		return attributes;
+		attributes['__GLOBAL__'] = {
+			type: 'String',
+			description: 'Global settings for destructible object',
+		};
+		const objOrder: { [key in keyof ItemDestructAttributes]: null } = {
+			desType: null,
+			__GLOBAL__: null
+		};
+		return Object.assign(objOrder, attributes);
 	}
 
 	protected override async setupType(settings: any) {