@acrodata/gui 2.2.1 → 2.3.0

package/esm2022/image-select/image-select.mjs

@@ -43,7 +43,7 @@ export class GuiImageSelect {
                 useExisting: forwardRef(() => GuiImageSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiImageSelect, decorators: [{
             type: Component,
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxSelectLabelTemplate,
                         MtxSelectOptionTemplate,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
                 type: ViewChild,
                 args: [MtxSelect]
@@ -76,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }], appendTo: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2Utc2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VpL2ltYWdlLXNlbGVjdC9pbWFnZS1zZWxlY3QudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ndWkvaW1hZ2Utc2VsZWN0L2ltYWdlLXNlbGVjdC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFVBQVUsRUFDVixLQUFLLEVBQ0wsU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RGLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRixPQUFPLEVBQ0wsU0FBUyxFQUNULHNCQUFzQixFQUN0Qix1QkFBdUIsR0FDeEIsTUFBTSw4QkFBOEIsQ0FBQztBQUN0QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7OztBQWdDM0QsTUFBTSxPQUFPLGNBQWM7SUFZekIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFUakMsV0FBTSxHQUF3QixFQUFFLENBQUM7UUFDakMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBSW5CLGFBQVEsR0FBNkIsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQzlDLGNBQVMsR0FBZSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFSSxDQUFDO0lBRTlDLGVBQWU7UUFDYixzREFBc0Q7UUFDdEQsTUFBTSxFQUFFLFFBQVEsRUFBRSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDcEMsUUFBUSxDQUFDLE9BQU8sR0FBRyxDQUFDLFFBQVEsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLEdBQUcsbUJBQW1CLENBQUM7SUFDcEUsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFjO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQTRCO1FBQzNDLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztRQUMzQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs4R0F4Q1UsY0FBYztrR0FBZCxjQUFjLGlNQXBCZDtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDO2dCQUM3QyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YscUVBZVUsU0FBUyxnRENsRHRCLGs1QkEwQkEsNnVCRFlJLFdBQVcsK1ZBQ1gsWUFBWSw0TEFDWixTQUFTLHFIQUNULFNBQVMscUhBQ1QsT0FBTyw4RUFDUCxTQUFTLDYrQkFDVCxzQkFBc0IsMkRBQ3RCLHVCQUF1Qiw0REFDdkIsYUFBYTs7MkZBR0osY0FBYztrQkE3QjFCLFNBQVM7K0JBQ0Usa0JBQWtCLFFBR3RCO3dCQUNKLEtBQUssRUFBRSw0QkFBNEI7cUJBQ3BDLGlCQUNjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDOzRCQUM3QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRixjQUNXLElBQUksV0FDUDt3QkFDUCxXQUFXO3dCQUNYLFlBQVk7d0JBQ1osU0FBUzt3QkFDVCxTQUFTO3dCQUNULE9BQU87d0JBQ1AsU0FBUzt3QkFDVCxzQkFBc0I7d0JBQ3RCLHVCQUF1Qjt3QkFDdkIsYUFBYTtxQkFDZDtzRkFHcUIsU0FBUztzQkFBOUIsU0FBUzt1QkFBQyxTQUFTO2dCQUVYLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZCwgTWF0SGludCwgTWF0UHJlZml4LCBNYXRTdWZmaXggfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7XG4gIE10eFNlbGVjdCxcbiAgTXR4U2VsZWN0TGFiZWxUZW1wbGF0ZSxcbiAgTXR4U2VsZWN0T3B0aW9uVGVtcGxhdGUsXG59IGZyb20gJ0BuZy1tYXRlcm8vZXh0ZW5zaW9ucy9zZWxlY3QnO1xuaW1wb3J0IHsgR3VpRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZpZWxkLWxhYmVsL2ZpZWxkLWxhYmVsJztcbmltcG9ydCB7IEd1aUNvbnRyb2wgfSBmcm9tICcuLi9pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdndWktaW1hZ2Utc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ltYWdlLXNlbGVjdC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2ltYWdlLXNlbGVjdC5zY3NzJyxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnZ3VpLWZpZWxkIGd1aS1pbWFnZS1zZWxlY3QnLFxuICB9LFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBHdWlJbWFnZVNlbGVjdCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTWF0Rm9ybUZpZWxkLFxuICAgIE1hdFByZWZpeCxcbiAgICBNYXRTdWZmaXgsXG4gICAgTWF0SGludCxcbiAgICBNdHhTZWxlY3QsXG4gICAgTXR4U2VsZWN0TGFiZWxUZW1wbGF0ZSxcbiAgICBNdHhTZWxlY3RPcHRpb25UZW1wbGF0ZSxcbiAgICBHdWlGaWVsZExhYmVsLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBHdWlJbWFnZVNlbGVjdCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBBZnRlclZpZXdJbml0IHtcbiAgQFZpZXdDaGlsZChNdHhTZWxlY3QpIG10eFNlbGVjdCE6IE10eFNlbGVjdDtcblxuICBASW5wdXQoKSBjb25maWc6IFBhcnRpYWw8R3VpQ29udHJvbD4gPSB7fTtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgYXBwZW5kVG8gPSAnYm9keSc7XG5cbiAgdmFsdWU6IHVua25vd247XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZTogKHZhbHVlOiB1bmtub3duKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIHByaXZhdGUgb25Ub3VjaGVkOiAoKSA9PiB2b2lkID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAvLyBBZGQgYWRkaXRpb25hbCBjbGFzcyBmb3Igbmctc2VsZWN0J3MgZHJvcGRvd24gcGFuZWxcbiAgICBjb25zdCB7IG5nU2VsZWN0IH0gPSB0aGlzLm10eFNlbGVjdDtcbiAgICBuZ1NlbGVjdC5jbGFzc2VzID0gKG5nU2VsZWN0LmNsYXNzZXMgfHwgJycpICsgJyBndWktaW1hZ2Utc2VsZWN0JztcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHVua25vd24pIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAodmFsdWU6IHVua25vd24pID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIG9uVmFsdWVDaGFuZ2UoKSB7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcbiAgfVxufVxuIiwiPG1hdC1mb3JtLWZpZWxkPlxuICBAaWYgKGNvbmZpZy5wcmVmaXgpIHtcbiAgICA8c3BhbiBtYXRQcmVmaXg+e3tjb25maWcucHJlZml4fX08L3NwYW4+XG4gIH1cbiAgPG10eC1zZWxlY3QgW2l0ZW1zXT1cImNvbmZpZy5vcHRpb25zfHxbXVwiIFthcHBlbmRUb109XCJhcHBlbmRUb1wiIGJpbmRWYWx1ZT1cInZhbHVlXCJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbcGxhY2Vob2xkZXJdPVwiY29uZmlnLnBsYWNlaG9sZGVyfHwnJ1wiXG4gICAgKGNoYW5nZSk9XCJvblZhbHVlQ2hhbmdlKClcIj5cbiAgICA8bmctdGVtcGxhdGUgbmctbGFiZWwtdG1wIGxldC1vcHQ9XCJpdGVtXCI+XG4gICAgICA8aW1nIFtzcmNdPVwib3B0LnNyY1wiIFthbHRdPVwib3B0LmxhYmVsXCIgLz5cbiAgICAgIDxzcGFuPnt7b3B0LmxhYmVsfX08L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8bmctdGVtcGxhdGUgbmctb3B0aW9uLXRtcCBsZXQtb3B0PVwiaXRlbVwiIGxldC1pbmRleD1cImluZGV4XCIgbGV0LXNlYXJjaD1cInNlYXJjaFRlcm1cIj5cbiAgICAgIDxpbWcgW3NyY109XCJvcHQuc3JjXCIgW2FsdF09XCJvcHQubGFiZWxcIiAvPlxuICAgICAgPHNwYW4+e3tvcHQubGFiZWx9fTwvc3Bhbj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L210eC1zZWxlY3Q+XG4gIEBpZiAoY29uZmlnLnN1ZmZpeCkge1xuICAgIDxzcGFuIG1hdFN1ZmZpeD57e2NvbmZpZy5zdWZmaXh9fTwvc3Bhbj5cbiAgfVxuICBAaWYgKGNvbmZpZy5wYXJlbnRUeXBlPT09J2lubGluZScpIHtcbiAgICA8bWF0LWhpbnQ+XG4gICAgICA8Z3VpLWZpZWxkLWxhYmVsIFtjb25maWddPVwiY29uZmlnXCIgLz5cbiAgICA8L21hdC1oaW50PlxuICB9XG48L21hdC1mb3JtLWZpZWxkPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2Utc2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VpL2ltYWdlLXNlbGVjdC9pbWFnZS1zZWxlY3QudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ndWkvaW1hZ2Utc2VsZWN0L2ltYWdlLXNlbGVjdC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFVBQVUsRUFDVixLQUFLLEVBQ0wsU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RGLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRixPQUFPLEVBQ0wsU0FBUyxFQUNULHNCQUFzQixFQUN0Qix1QkFBdUIsR0FDeEIsTUFBTSw4QkFBOEIsQ0FBQztBQUN0QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7OztBQWdDM0QsTUFBTSxPQUFPLGNBQWM7SUFZekIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFUakMsV0FBTSxHQUF3QixFQUFFLENBQUM7UUFDakMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBSW5CLGFBQVEsR0FBNkIsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQzlDLGNBQVMsR0FBZSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFSSxDQUFDO0lBRTlDLGVBQWU7UUFDYixzREFBc0Q7UUFDdEQsTUFBTSxFQUFFLFFBQVEsRUFBRSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDcEMsUUFBUSxDQUFDLE9BQU8sR0FBRyxDQUFDLFFBQVEsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLEdBQUcsbUJBQW1CLENBQUM7SUFDcEUsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFjO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQTRCO1FBQzNDLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztRQUMzQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs4R0F4Q1UsY0FBYztrR0FBZCxjQUFjLGlNQXBCZDtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDO2dCQUM3QyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YscUVBZVUsU0FBUyxnRENsRHRCLGs1QkEwQkEsaTRCRFlJLFdBQVcsK1ZBQ1gsWUFBWSw0TEFDWixTQUFTLHFIQUNULFNBQVMscUhBQ1QsT0FBTyw4RUFDUCxTQUFTLDYrQkFDVCxzQkFBc0IsMkRBQ3RCLHVCQUF1Qiw0REFDdkIsYUFBYTs7MkZBR0osY0FBYztrQkE3QjFCLFNBQVM7K0JBQ0Usa0JBQWtCLFFBR3RCO3dCQUNKLEtBQUssRUFBRSw0QkFBNEI7cUJBQ3BDLGlCQUNjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDOzRCQUM3QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRixjQUNXLElBQUksV0FDUDt3QkFDUCxXQUFXO3dCQUNYLFlBQVk7d0JBQ1osU0FBUzt3QkFDVCxTQUFTO3dCQUNULE9BQU87d0JBQ1AsU0FBUzt3QkFDVCxzQkFBc0I7d0JBQ3RCLHVCQUF1Qjt3QkFDdkIsYUFBYTtxQkFDZDtzRkFHcUIsU0FBUztzQkFBOUIsU0FBUzt1QkFBQyxTQUFTO2dCQUVYLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEZvcm1zTW9kdWxlLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZCwgTWF0SGludCwgTWF0UHJlZml4LCBNYXRTdWZmaXggfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7XG4gIE10eFNlbGVjdCxcbiAgTXR4U2VsZWN0TGFiZWxUZW1wbGF0ZSxcbiAgTXR4U2VsZWN0T3B0aW9uVGVtcGxhdGUsXG59IGZyb20gJ0BuZy1tYXRlcm8vZXh0ZW5zaW9ucy9zZWxlY3QnO1xuaW1wb3J0IHsgR3VpRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZpZWxkLWxhYmVsL2ZpZWxkLWxhYmVsJztcbmltcG9ydCB7IEd1aUNvbnRyb2wgfSBmcm9tICcuLi9pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdndWktaW1hZ2Utc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ltYWdlLXNlbGVjdC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2ltYWdlLXNlbGVjdC5zY3NzJyxcbiAgaG9zdDoge1xuICAgIGNsYXNzOiAnZ3VpLWZpZWxkIGd1aS1pbWFnZS1zZWxlY3QnLFxuICB9LFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBHdWlJbWFnZVNlbGVjdCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTWF0Rm9ybUZpZWxkLFxuICAgIE1hdFByZWZpeCxcbiAgICBNYXRTdWZmaXgsXG4gICAgTWF0SGludCxcbiAgICBNdHhTZWxlY3QsXG4gICAgTXR4U2VsZWN0TGFiZWxUZW1wbGF0ZSxcbiAgICBNdHhTZWxlY3RPcHRpb25UZW1wbGF0ZSxcbiAgICBHdWlGaWVsZExhYmVsLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBHdWlJbWFnZVNlbGVjdCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBBZnRlclZpZXdJbml0IHtcbiAgQFZpZXdDaGlsZChNdHhTZWxlY3QpIG10eFNlbGVjdCE6IE10eFNlbGVjdDtcblxuICBASW5wdXQoKSBjb25maWc6IFBhcnRpYWw8R3VpQ29udHJvbD4gPSB7fTtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgYXBwZW5kVG8gPSAnYm9keSc7XG5cbiAgdmFsdWU6IHVua25vd247XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZTogKHZhbHVlOiB1bmtub3duKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIHByaXZhdGUgb25Ub3VjaGVkOiAoKSA9PiB2b2lkID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAvLyBBZGQgYWRkaXRpb25hbCBjbGFzcyBmb3Igbmctc2VsZWN0J3MgZHJvcGRvd24gcGFuZWxcbiAgICBjb25zdCB7IG5nU2VsZWN0IH0gPSB0aGlzLm10eFNlbGVjdDtcbiAgICBuZ1NlbGVjdC5jbGFzc2VzID0gKG5nU2VsZWN0LmNsYXNzZXMgfHwgJycpICsgJyBndWktaW1hZ2Utc2VsZWN0JztcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHVua25vd24pIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAodmFsdWU6IHVua25vd24pID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIG9uVmFsdWVDaGFuZ2UoKSB7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnZhbHVlKTtcbiAgfVxufVxuIiwiPG1hdC1mb3JtLWZpZWxkPlxuICBAaWYgKGNvbmZpZy5wcmVmaXgpIHtcbiAgICA8c3BhbiBtYXRQcmVmaXg+e3tjb25maWcucHJlZml4fX08L3NwYW4+XG4gIH1cbiAgPG10eC1zZWxlY3QgW2l0ZW1zXT1cImNvbmZpZy5vcHRpb25zfHxbXVwiIFthcHBlbmRUb109XCJhcHBlbmRUb1wiIGJpbmRWYWx1ZT1cInZhbHVlXCJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbcGxhY2Vob2xkZXJdPVwiY29uZmlnLnBsYWNlaG9sZGVyfHwnJ1wiXG4gICAgKGNoYW5nZSk9XCJvblZhbHVlQ2hhbmdlKClcIj5cbiAgICA8bmctdGVtcGxhdGUgbmctbGFiZWwtdG1wIGxldC1vcHQ9XCJpdGVtXCI+XG4gICAgICA8aW1nIFtzcmNdPVwib3B0LnNyY1wiIFthbHRdPVwib3B0LmxhYmVsXCIgLz5cbiAgICAgIDxzcGFuPnt7b3B0LmxhYmVsfX08L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8bmctdGVtcGxhdGUgbmctb3B0aW9uLXRtcCBsZXQtb3B0PVwiaXRlbVwiIGxldC1pbmRleD1cImluZGV4XCIgbGV0LXNlYXJjaD1cInNlYXJjaFRlcm1cIj5cbiAgICAgIDxpbWcgW3NyY109XCJvcHQuc3JjXCIgW2FsdF09XCJvcHQubGFiZWxcIiAvPlxuICAgICAgPHNwYW4+e3tvcHQubGFiZWx9fTwvc3Bhbj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L210eC1zZWxlY3Q+XG4gIEBpZiAoY29uZmlnLnN1ZmZpeCkge1xuICAgIDxzcGFuIG1hdFN1ZmZpeD57e2NvbmZpZy5zdWZmaXh9fTwvc3Bhbj5cbiAgfVxuICBAaWYgKGNvbmZpZy5wYXJlbnRUeXBlPT09J2lubGluZScpIHtcbiAgICA8bWF0LWhpbnQ+XG4gICAgICA8Z3VpLWZpZWxkLWxhYmVsIFtjb25maWddPVwiY29uZmlnXCIgLz5cbiAgICA8L21hdC1oaW50PlxuICB9XG48L21hdC1mb3JtLWZpZWxkPlxuIl19

package/esm2022/interface.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvZ3VpL2ludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgR3VpRmllbGRUeXBlID1cbiAgfCAnZ3JvdXAnXG4gIHwgJ2lubGluZSdcbiAgfCAndGFicydcbiAgfCAndGFiJ1xuICB8ICdtZW51J1xuICB8ICdtZW51SXRlbSdcbiAgfCAndGV4dCdcbiAgfCAnbnVtYmVyJ1xuICB8ICdzd2l0Y2gnXG4gIHwgJ3NsaWRlcidcbiAgfCAnZmlsbCdcbiAgfCAnc2VsZWN0J1xuICB8ICdidXR0b25Ub2dnbGUnXG4gIHwgJ2ltYWdlU2VsZWN0J1xuICB8ICd0ZXh0YXJlYSdcbiAgfCAnaGlkZGVuJ1xuICB8ICdpbWFnZSdcbiAgfCAndmlkZW8nXG4gIHwgJ2F1ZGlvJ1xuICB8ICdmaWxlJztcblxuZXhwb3J0IHR5cGUgR3VpRmlsbE1vZGUgPSAnZmxhdCcgfCAnZ3JhZGllbnQnIHwgJ2ltYWdlJztcblxuZXhwb3J0IHR5cGUgR3VpU2xpZGVyTW9kZSA9ICdub3JtYWwnIHwgJ3JhbmdlJztcblxuZXhwb3J0IHR5cGUgR3VpVGFic01vZGUgPSAnbm9ybWFsJyB8ICdsaXN0JztcblxuZXhwb3J0IHR5cGUgR3VpQmFzaWNWYWx1ZSA9IGJvb2xlYW4gfCBudW1iZXIgfCBzdHJpbmc7XG5cbmV4cG9ydCB0eXBlIEd1aURlZmF1bHRWYWx1ZSA9IGJvb2xlYW4gfCBudW1iZXIgfCBzdHJpbmcgfCBhbnlbXSB8IFJlY29yZDxzdHJpbmcsIGFueT4gfCBudWxsO1xuXG5leHBvcnQgdHlwZSBHdWlPcGVyYXRvciA9ICckZXEnIHwgJyRuZScgfCAnJGd0JyB8ICckbHQnIHwgJyRndGUnIHwgJyRsdGUnIHwgJyRpbicgfCAnJG5pbic7XG5cbmV4cG9ydCB0eXBlIEd1aUNvbmRpdGlvbiA9IFtzdHJpbmcsIEd1aU9wZXJhdG9yLCBHdWlEZWZhdWx0VmFsdWVdO1xuXG5leHBvcnQgaW50ZXJmYWNlIEd1aUZpZWxkU2hvd0lmIHtcbiAgY29uZGl0aW9uczogR3VpQ29uZGl0aW9uW107XG4gIGxvZ2ljYWxUeXBlPzogJyRhbmQnIHwgJyRvcic7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3VpRmllbGQge1xuICB0eXBlOiBHdWlGaWVsZFR5cGU7XG4gIG5hbWU6IHN0cmluZztcbiAgZGVmYXVsdD86IEd1aURlZmF1bHRWYWx1ZTtcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGNvbD86IG51bWJlcjtcbiAgc2hvd0lmPzogR3VpRmllbGRTaG93SWY7XG4gIHNob3c/OiBib29sZWFuO1xuICAvLyBncm91cCAmIHN1Ymdyb3VwICYgbWVudSAmIHRhYnMgJiBpbmxpbmVcbiAgY2hpbGRyZW4/OiBHdWlGaWVsZHMgfCBHdWlGaWVsZFtdO1xuICAvLyBncm91cCAmIHRhYnNcbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuICAvLyBudW1iZXIgJiBzbGlkZXJcbiAgbWluPzogbnVtYmVyO1xuICBtYXg/OiBudW1iZXI7XG4gIHN0ZXA/OiBudW1iZXI7XG4gIC8vIHRleHQgJiBudW1iZXIgJiBzbGlkZXIgJiBzZWxlY3RcbiAgcHJlZml4Pzogc3RyaW5nO1xuICBzdWZmaXg/OiBzdHJpbmc7XG4gIC8vIHNlbGVjdCAmIGJ1dHRvblRvZ2dsZSAmIGltYWdlU2VsZWN0XG4gIG9wdGlvbnM/OiBHdWlGaWVsZE9wdGlvbltdO1xuICAvLyBzZWxlY3RcbiAgdXNlRm9udD86IGJvb2xlYW47XG4gIC8vIHNlbGVjdCAmIGJ1dHRvblRvZ2dsZVxuICBtdWx0aXBsZT86IGJvb2xlYW47XG4gIC8vIGJ1dHRvblRvZ2dsZVxuICB1c2VJY29uPzogYm9vbGVhbjtcbiAgLy8gdGFic1xuICB0ZW1wbGF0ZT86IFBhcnRpYWw8R3VpRmllbGQ+O1xuICBhZGRhYmxlPzogYm9vbGVhbjtcbiAgLy8gZmlsbCAmIHNsaWRlciAmIHRhYnNcbiAgbW9kZT86IEd1aUZpbGxNb2RlIHwgR3VpU2xpZGVyTW9kZSB8IEd1aVRhYnNNb2RlO1xuICAvLyB0ZXh0YXJlYVxuICByb3dzPzogbnVtYmVyO1xuICAvLyBpbWFnZSAmIHZpZGVvICYgYXVkaW8gJiBmaWxlXG4gIGFjY2VwdD86IHN0cmluZztcbn1cblxuZXhwb3J0IHR5cGUgR3VpRmllbGRzID0gUmVjb3JkPHN0cmluZywgR3VpRmllbGQ+O1xuXG5leHBvcnQgaW50ZXJmYWNlIEd1aUZpZWxkT3B0aW9uIHtcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFsdWU6IHN0cmluZyB8IG51bWJlciB8IGJvb2xlYW47XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgc3JjPzogc3RyaW5nO1xuICBjb2w/OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3VpQ29udHJvbCBleHRlbmRzIEd1aUZpZWxkIHtcbiAgX3R5cGU6ICdjb250cm9sJyB8ICdncm91cCcgfCAnYXJyYXknO1xuICBrZXk6IHN0cmluZztcbiAgcGFyZW50VHlwZTogR3VpRmllbGRUeXBlO1xuICBtb2RlbD86IGFueTtcbiAgZGVmYXVsdD86IGFueTtcbiAgaW5kZXg/OiBudW1iZXI7XG4gIGNoaWxkcmVuPzogR3VpQ29udHJvbFtdO1xuICB0ZW1wbGF0ZT86IFBhcnRpYWw8R3VpQ29udHJvbD47XG4gIHNlbGVjdGVkSW5kZXg/OiBudW1iZXI7XG59XG5cbmV4cG9ydCB0eXBlIEd1aUNvbnRyb2xzID0gUmVjb3JkPHN0cmluZywgR3VpQ29udHJvbD47XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvZ3VpL2ludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgR3VpRmllbGRUeXBlID1cbiAgfCAnZ3JvdXAnXG4gIHwgJ2lubGluZSdcbiAgfCAndGFicydcbiAgfCAndGFiJ1xuICB8ICdtZW51J1xuICB8ICdtZW51SXRlbSdcbiAgfCAndGV4dCdcbiAgfCAnbnVtYmVyJ1xuICB8ICdzd2l0Y2gnXG4gIHwgJ3NsaWRlcidcbiAgfCAnZmlsbCdcbiAgfCAnc2VsZWN0J1xuICB8ICdidXR0b25Ub2dnbGUnXG4gIHwgJ2ltYWdlU2VsZWN0J1xuICB8ICdjb21ib2JveCdcbiAgfCAndGV4dGFyZWEnXG4gIHwgJ2hpZGRlbidcbiAgfCAnaW1hZ2UnXG4gIHwgJ3ZpZGVvJ1xuICB8ICdhdWRpbydcbiAgfCAnZmlsZSc7XG5cbmV4cG9ydCB0eXBlIEd1aUZpbGxNb2RlID0gJ2ZsYXQnIHwgJ2dyYWRpZW50JyB8ICdpbWFnZSc7XG5cbmV4cG9ydCB0eXBlIEd1aVNsaWRlck1vZGUgPSAnbm9ybWFsJyB8ICdyYW5nZSc7XG5cbmV4cG9ydCB0eXBlIEd1aVRhYnNNb2RlID0gJ25vcm1hbCcgfCAnbGlzdCc7XG5cbmV4cG9ydCB0eXBlIEd1aUJhc2ljVmFsdWUgPSBib29sZWFuIHwgbnVtYmVyIHwgc3RyaW5nO1xuXG5leHBvcnQgdHlwZSBHdWlEZWZhdWx0VmFsdWUgPSBib29sZWFuIHwgbnVtYmVyIHwgc3RyaW5nIHwgYW55W10gfCBSZWNvcmQ8c3RyaW5nLCBhbnk+IHwgbnVsbDtcblxuZXhwb3J0IHR5cGUgR3VpT3BlcmF0b3IgPSAnJGVxJyB8ICckbmUnIHwgJyRndCcgfCAnJGx0JyB8ICckZ3RlJyB8ICckbHRlJyB8ICckaW4nIHwgJyRuaW4nO1xuXG5leHBvcnQgdHlwZSBHdWlDb25kaXRpb24gPSBbc3RyaW5nLCBHdWlPcGVyYXRvciwgR3VpRGVmYXVsdFZhbHVlXTtcblxuZXhwb3J0IGludGVyZmFjZSBHdWlGaWVsZFNob3dJZiB7XG4gIGNvbmRpdGlvbnM6IEd1aUNvbmRpdGlvbltdO1xuICBsb2dpY2FsVHlwZT86ICckYW5kJyB8ICckb3InO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEd1aUZpZWxkIHtcbiAgdHlwZTogR3VpRmllbGRUeXBlO1xuICBuYW1lOiBzdHJpbmc7XG4gIGRlZmF1bHQ/OiBHdWlEZWZhdWx0VmFsdWU7XG4gIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xuICBwbGFjZWhvbGRlcj86IHN0cmluZztcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBjb2w/OiBudW1iZXI7XG4gIHNob3dJZj86IEd1aUZpZWxkU2hvd0lmO1xuICBzaG93PzogYm9vbGVhbjtcbiAgLy8gZ3JvdXAgJiBtZW51ICYgdGFicyAmIGlubGluZVxuICBjaGlsZHJlbj86IEd1aUZpZWxkcyB8IEd1aUZpZWxkW107XG4gIC8vIGdyb3VwICYgdGFic1xuICBleHBhbmRlZD86IGJvb2xlYW47XG4gIC8vIG51bWJlciAmIHNsaWRlclxuICBtaW4/OiBudW1iZXI7XG4gIG1heD86IG51bWJlcjtcbiAgc3RlcD86IG51bWJlcjtcbiAgLy8gdGV4dCAmIG51bWJlciAmIHNsaWRlciAmIHNlbGVjdFxuICBwcmVmaXg/OiBzdHJpbmc7XG4gIHN1ZmZpeD86IHN0cmluZztcbiAgLy8gc2VsZWN0ICYgYnV0dG9uVG9nZ2xlICYgaW1hZ2VTZWxlY3QgJiBjb21ib2JveFxuICBvcHRpb25zPzogR3VpRmllbGRPcHRpb25bXTtcbiAgLy8gc2VsZWN0ICYgY29tYm9ib3hcbiAgdXNlRm9udD86IGJvb2xlYW47XG4gIC8vIHNlbGVjdCAmIGJ1dHRvblRvZ2dsZSAmIGNvbWJvYm94XG4gIG11bHRpcGxlPzogYm9vbGVhbjtcbiAgLy8gYnV0dG9uVG9nZ2xlXG4gIHVzZUljb24/OiBib29sZWFuO1xuICAvLyB0YWJzXG4gIHRlbXBsYXRlPzogUGFydGlhbDxHdWlGaWVsZD47XG4gIGFkZGFibGU/OiBib29sZWFuO1xuICAvLyBmaWxsICYgc2xpZGVyICYgdGFic1xuICBtb2RlPzogR3VpRmlsbE1vZGUgfCBHdWlTbGlkZXJNb2RlIHwgR3VpVGFic01vZGU7XG4gIC8vIHRleHRhcmVhXG4gIHJvd3M/OiBudW1iZXI7XG4gIC8vIGltYWdlICYgdmlkZW8gJiBhdWRpbyAmIGZpbGVcbiAgYWNjZXB0Pzogc3RyaW5nO1xufVxuXG5leHBvcnQgdHlwZSBHdWlGaWVsZHMgPSBSZWNvcmQ8c3RyaW5nLCBHdWlGaWVsZD47XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3VpRmllbGRPcHRpb24ge1xuICBsYWJlbDogc3RyaW5nO1xuICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyIHwgYm9vbGVhbjtcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBzcmM/OiBzdHJpbmc7XG4gIGNvbD86IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBHdWlDb250cm9sIGV4dGVuZHMgR3VpRmllbGQge1xuICBfdHlwZTogJ2NvbnRyb2wnIHwgJ2dyb3VwJyB8ICdhcnJheSc7XG4gIGtleTogc3RyaW5nO1xuICBwYXJlbnRUeXBlOiBHdWlGaWVsZFR5cGU7XG4gIG1vZGVsPzogYW55O1xuICBkZWZhdWx0PzogYW55O1xuICBpbmRleD86IG51bWJlcjtcbiAgY2hpbGRyZW4/OiBHdWlDb250cm9sW107XG4gIHRlbXBsYXRlPzogUGFydGlhbDxHdWlDb250cm9sPjtcbiAgc2VsZWN0ZWRJbmRleD86IG51bWJlcjtcbn1cblxuZXhwb3J0IHR5cGUgR3VpQ29udHJvbHMgPSBSZWNvcmQ8c3RyaW5nLCBHdWlDb250cm9sPjtcbiJdfQ==

package/esm2022/public-api.mjs

@@ -5,6 +5,7 @@ export * from './gui-module';
 export * from './gui-form';
 export * from './button-toggle/button-toggle';
 export * from './button-toggle/icon';
+export * from './combobox/combobox';
 export * from './field-group/field-group';
 export * from './field-label/field-label';
 export * from './file-uploader/file-uploader';
@@ -22,4 +23,4 @@ export * from './textarea/textarea';
 export * from './gui-utils';
 export * from './gui-icons';
 export * from './interface';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2d1aS9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxZQUFZLENBQUM7QUFDM0IsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxhQUFhLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGd1aVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vZ3VpLW1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2d1aS1mb3JtJztcbmV4cG9ydCAqIGZyb20gJy4vYnV0dG9uLXRvZ2dsZS9idXR0b24tdG9nZ2xlJztcbmV4cG9ydCAqIGZyb20gJy4vYnV0dG9uLXRvZ2dsZS9pY29uJztcbmV4cG9ydCAqIGZyb20gJy4vZmllbGQtZ3JvdXAvZmllbGQtZ3JvdXAnO1xuZXhwb3J0ICogZnJvbSAnLi9maWVsZC1sYWJlbC9maWVsZC1sYWJlbCc7XG5leHBvcnQgKiBmcm9tICcuL2ZpbGUtdXBsb2FkZXIvZmlsZS11cGxvYWRlcic7XG5leHBvcnQgKiBmcm9tICcuL2ZpbGUtdXBsb2FkZXIvZmlsZS11cGxvYWRlci1jb25maWcnO1xuZXhwb3J0ICogZnJvbSAnLi9maWxsL2ZpbGwnO1xuZXhwb3J0ICogZnJvbSAnLi9pY29uLWJ1dHRvbi13cmFwcGVyL2ljb24tYnV0dG9uLXdyYXBwZXInO1xuZXhwb3J0ICogZnJvbSAnLi9pbWFnZS1zZWxlY3QvaW1hZ2Utc2VsZWN0JztcbmV4cG9ydCAqIGZyb20gJy4vaW5saW5lLWdyb3VwL2lubGluZS1ncm91cCc7XG5leHBvcnQgKiBmcm9tICcuL2lucHV0LW51bWJlci9pbnB1dC1udW1iZXInO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC10ZXh0L2lucHV0LXRleHQnO1xuZXhwb3J0ICogZnJvbSAnLi9zZWxlY3Qvc2VsZWN0JztcbmV4cG9ydCAqIGZyb20gJy4vc2xpZGVyL3NsaWRlcic7XG5leHBvcnQgKiBmcm9tICcuL3N3aXRjaC9zd2l0Y2gnO1xuZXhwb3J0ICogZnJvbSAnLi90ZXh0YXJlYS90ZXh0YXJlYSc7XG5leHBvcnQgKiBmcm9tICcuL2d1aS11dGlscyc7XG5leHBvcnQgKiBmcm9tICcuL2d1aS1pY29ucyc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZSc7XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2d1aS9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxZQUFZLENBQUM7QUFDM0IsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxzQ0FBc0MsQ0FBQztBQUNyRCxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGFBQWEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgZ3VpXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9ndWktbW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vZ3VpLWZvcm0nO1xuZXhwb3J0ICogZnJvbSAnLi9idXR0b24tdG9nZ2xlL2J1dHRvbi10b2dnbGUnO1xuZXhwb3J0ICogZnJvbSAnLi9idXR0b24tdG9nZ2xlL2ljb24nO1xuZXhwb3J0ICogZnJvbSAnLi9jb21ib2JveC9jb21ib2JveCc7XG5leHBvcnQgKiBmcm9tICcuL2ZpZWxkLWdyb3VwL2ZpZWxkLWdyb3VwJztcbmV4cG9ydCAqIGZyb20gJy4vZmllbGQtbGFiZWwvZmllbGQtbGFiZWwnO1xuZXhwb3J0ICogZnJvbSAnLi9maWxlLXVwbG9hZGVyL2ZpbGUtdXBsb2FkZXInO1xuZXhwb3J0ICogZnJvbSAnLi9maWxlLXVwbG9hZGVyL2ZpbGUtdXBsb2FkZXItY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vZmlsbC9maWxsJztcbmV4cG9ydCAqIGZyb20gJy4vaWNvbi1idXR0b24td3JhcHBlci9pY29uLWJ1dHRvbi13cmFwcGVyJztcbmV4cG9ydCAqIGZyb20gJy4vaW1hZ2Utc2VsZWN0L2ltYWdlLXNlbGVjdCc7XG5leHBvcnQgKiBmcm9tICcuL2lubGluZS1ncm91cC9pbmxpbmUtZ3JvdXAnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnB1dC1udW1iZXIvaW5wdXQtbnVtYmVyJztcbmV4cG9ydCAqIGZyb20gJy4vaW5wdXQtdGV4dC9pbnB1dC10ZXh0JztcbmV4cG9ydCAqIGZyb20gJy4vc2VsZWN0L3NlbGVjdCc7XG5leHBvcnQgKiBmcm9tICcuL3NsaWRlci9zbGlkZXInO1xuZXhwb3J0ICogZnJvbSAnLi9zd2l0Y2gvc3dpdGNoJztcbmV4cG9ydCAqIGZyb20gJy4vdGV4dGFyZWEvdGV4dGFyZWEnO1xuZXhwb3J0ICogZnJvbSAnLi9ndWktdXRpbHMnO1xuZXhwb3J0ICogZnJvbSAnLi9ndWktaWNvbnMnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2UnO1xuIl19

package/fesm2022/acrodata-gui.mjs

@@ -623,7 +623,7 @@ class GuiImageSelect {
                 useExisting: forwardRef(() => GuiImageSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiImageSelect, decorators: [{
             type: Component,
@@ -645,7 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxSelectLabelTemplate,
                         MtxSelectOptionTemplate,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
                 type: ViewChild,
                 args: [MtxSelect]
@@ -1018,6 +1018,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }] } });
 
+class GuiCombobox {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.appendTo = 'body';
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngAfterViewInit() {
+        // Add additional class for ng-select's dropdown panel
+        const { ngSelect } = this.mtxSelect;
+        ngSelect.classes = (ngSelect.classes || '') + ' gui-combobox';
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange() {
+        this.onChange(this.value);
+    }
+    addTagFn(label) {
+        return { label, value: label };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiCombobox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiCombobox, isStandalone: true, selector: "gui-combobox", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-combobox" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GuiCombobox),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{ config.suffix }}</span>\n  }\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-combobox', host: {
+                        class: 'gui-field gui-combobox',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiCombobox),
+                            multi: true,
+                        },
+                    ], standalone: true, imports: [
+                        FormsModule,
+                        MatFormField,
+                        MatPrefix,
+                        MatSuffix,
+                        MatHint,
+                        MtxSelect,
+                        MtxSelectOptionTemplate,
+                        GuiFieldLabel,
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{ config.suffix }}</span>\n  }\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
+                type: ViewChild,
+                args: [MtxSelect]
+            }], config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }] } });
+
 let nextUniqueId = 0;
 class GuiForm {
     constructor(iconsRegistry) {
@@ -1136,7 +1211,7 @@ class GuiForm {
                 setVisibility(c => {
                     const cfg = getValueByPath(config, c[0]) ?? getValueByPath(this.config, c[0]);
                     const val = getValueByPath(model, c[0]) ?? getValueByPath(this.model, c[0]);
-                    return compareValues(cfg?.['default'] ?? val, c[2], c[1]);
+                    return compareValues(val ?? cfg?.['default'], c[2], c[1]);
                 });
                 // Delay the subscription to make sure all the form controls have been created
                 setTimeout(() => {
@@ -1246,7 +1321,7 @@ class GuiForm {
         tabs.mode = mode;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, deps: [{ token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <gui-icon-button-wrapper>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'normal')\">\n                    <mat-icon svgIcon=\"horizontal\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'list')\">\n                    <mat-icon svgIcon=\"vertical\" />\n                  </button>\n                  @if (item.template && (item.addable || item.addable===undefined)) {\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item, true)\">\n                      <mat-icon svgIcon=\"copy\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"add\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"removeTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"delete\" />\n                    </button>\n                  }\n                </gui-icon-button-wrapper>\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                              <mat-icon svgIcon=\"copy\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                              <mat-icon svgIcon=\"add\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                              <mat-icon svgIcon=\"delete\" />\n                            </button>\n                          </gui-icon-button-wrapper>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <gui-icon-button-wrapper>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'normal')\">\n                    <mat-icon svgIcon=\"horizontal\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'list')\">\n                    <mat-icon svgIcon=\"vertical\" />\n                  </button>\n                  @if (item.template && (item.addable || item.addable===undefined)) {\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item, true)\">\n                      <mat-icon svgIcon=\"copy\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"add\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"removeTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"delete\" />\n                    </button>\n                  }\n                </gui-icon-button-wrapper>\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                              <mat-icon svgIcon=\"copy\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                              <mat-icon svgIcon=\"add\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                              <mat-icon svgIcon=\"delete\" />\n                            </button>\n                          </gui-icon-button-wrapper>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }, { kind: "component", type: GuiCombobox, selector: "gui-combobox", inputs: ["config", "disabled", "appendTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, decorators: [{
             type: Component,
@@ -1281,7 +1356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
                         GuiEjsPipe,
-                    ], template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <gui-icon-button-wrapper>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'normal')\">\n                    <mat-icon svgIcon=\"horizontal\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'list')\">\n                    <mat-icon svgIcon=\"vertical\" />\n                  </button>\n                  @if (item.template && (item.addable || item.addable===undefined)) {\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item, true)\">\n                      <mat-icon svgIcon=\"copy\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"add\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"removeTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"delete\" />\n                    </button>\n                  }\n                </gui-icon-button-wrapper>\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                              <mat-icon svgIcon=\"copy\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                              <mat-icon svgIcon=\"add\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                              <mat-icon svgIcon=\"delete\" />\n                            </button>\n                          </gui-icon-button-wrapper>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
+                        GuiCombobox,
+                    ], template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <gui-icon-button-wrapper>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'normal')\">\n                    <mat-icon svgIcon=\"horizontal\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                    (click)=\"changeTabsMode($event, item, 'list')\">\n                    <mat-icon svgIcon=\"vertical\" />\n                  </button>\n                  @if (item.template && (item.addable || item.addable===undefined)) {\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item, true)\">\n                      <mat-icon svgIcon=\"copy\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"addTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"add\" />\n                    </button>\n                    <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                      (click)=\"removeTab($event, form.get(item.key), item)\">\n                      <mat-icon svgIcon=\"delete\" />\n                    </button>\n                  }\n                </gui-icon-button-wrapper>\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                              <mat-icon svgIcon=\"copy\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                              <mat-icon svgIcon=\"add\" />\n                            </button>\n                            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                              (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                              <mat-icon svgIcon=\"delete\" />\n                            </button>\n                          </gui-icon-button-wrapper>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
         }], ctorParameters: () => [{ type: GuiIconsRegistry }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -1323,6 +1399,7 @@ class GuiModule {
             GuiFieldLabel,
             GuiInlineGroup,
             GuiImageSelect,
+            GuiCombobox,
             GuiTextarea,
             GuiFileUploader,
             GuiIconButtonWrapper,
@@ -1340,6 +1417,7 @@ class GuiModule {
             GuiFieldLabel,
             GuiInlineGroup,
             GuiImageSelect,
+            GuiCombobox,
             GuiTextarea,
             GuiFileUploader,
             GuiIconButtonWrapper,
@@ -1370,6 +1448,7 @@ class GuiModule {
             GuiButtonToggle,
             GuiFill,
             GuiImageSelect,
+            GuiCombobox,
             GuiTextarea,
             GuiFileUploader] }); }
 }
@@ -1406,6 +1485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiFieldLabel,
                         GuiInlineGroup,
                         GuiImageSelect,
+                        GuiCombobox,
                         GuiTextarea,
                         GuiFileUploader,
                         GuiIconButtonWrapper,
@@ -1426,6 +1506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiFieldLabel,
                         GuiInlineGroup,
                         GuiImageSelect,
+                        GuiCombobox,
                         GuiTextarea,
                         GuiFileUploader,
                         GuiIconButtonWrapper,
@@ -1443,5 +1524,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath, svgIcons };
+export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiCombobox, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath, svgIcons };
 //# sourceMappingURL=acrodata-gui.mjs.map