@acrodata/gui 3.5.1 → 3.6.1

package/fesm2022/acrodata-gui.mjs

@@ -625,7 +625,7 @@ class GuiCombobox {
                 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    panelClass=\"gui-combobox\"\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 .mat-mdc-form-field .ng-select{padding-inline:.5rem;margin-inline:-.5rem}.gui-combobox .ng-select .ng-value-remove{font-family:math;font-size:10px}.gui-combobox .ng-select .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-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .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", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearable", "clearAllText", "clearOnBackspace", "compareWith", "panelPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "panelDisabled", "fixedPlaceholder", "preventToggleOnRightClick", "clearSearchOnAdd", "deselectOnClick", "tabIndex", "inputId", "inputAttrs", "panelClass", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "ariaLabel", "ariaLabelledby", "ariaDescribedby"], 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 });
+        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-combobox\"\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 matTextSuffix>{{ 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 .mat-mdc-form-field .ng-select{padding-inline:.5rem;margin-inline:-.5rem}.gui-combobox .ng-select .ng-value-remove{font-family:math;font-size:10px}.gui-combobox .ng-select .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-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .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", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearable", "clearAllText", "clearOnBackspace", "compareWith", "panelPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "panelDisabled", "fixedPlaceholder", "preventToggleOnRightClick", "clearSearchOnAdd", "deselectOnClick", "tabIndex", "inputId", "inputAttrs", "panelClass", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "ariaLabel", "ariaLabelledby", "ariaDescribedby"], 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: "21.2.14", ngImport: i0, type: GuiCombobox, decorators: [{
             type: Component,
@@ -646,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MtxSelect,
                         MtxSelectOptionTemplate,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-combobox\"\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 .mat-mdc-form-field .ng-select{padding-inline:.5rem;margin-inline:-.5rem}.gui-combobox .ng-select .ng-value-remove{font-family:math;font-size:10px}.gui-combobox .ng-select .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-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .ng-tag-label{line-height:1}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-combobox\"\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 matTextSuffix>{{ 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 .mat-mdc-form-field .ng-select{padding-inline:.5rem;margin-inline:-.5rem}.gui-combobox .ng-select .ng-value-remove{font-family:math;font-size:10px}.gui-combobox .ng-select .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-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .ng-tag-label{line-height:1}\n"] }]
         }], propDecorators: { mtxSelect: [{
                 type: ViewChild,
                 args: [MtxSelect]
@@ -673,13 +673,13 @@ class GuiFieldGroup {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType !== 'inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType !== 'inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-text-prefix{margin-inline:-4px 4px}.gui-field .mat-mdc-form-field-text-suffix{margin-inline:4px -4px}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ 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: "21.2.14", ngImport: i0, type: GuiFieldGroup, decorators: [{
             type: Component,
             args: [{ selector: 'gui-field-group', host: {
                         class: 'gui-field-group',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GuiFieldLabel], template: "@if (config.parentType !== 'inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GuiFieldLabel], template: "@if (config.parentType !== 'inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-text-prefix{margin-inline:-4px 4px}.gui-field .mat-mdc-form-field-text-suffix{margin-inline:4px -4px}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -734,7 +734,7 @@ class GuiFileUploader {
     url = '';
     // file to upload
     fileUpload;
-    lastPasteFileMeta = { size: 0, type: '' };
+    pastedFiles = new WeakSet();
     onChange = () => { };
     onTouched = () => { };
     constructor() {
@@ -818,12 +818,10 @@ class GuiFileUploader {
         }
         if (imageFile) {
             e.preventDefault();
-            // Avoid uploading duplicate images
-            if (imageFile.size === this.lastPasteFileMeta.size &&
-                imageFile.type === this.lastPasteFileMeta.type) {
+            // Only suppress a repeated dispatch of the same File object; size/type can collide.
+            if (this.pastedFiles.has(imageFile))
                 return;
-            }
-            this.lastPasteFileMeta = { size: imageFile.size, type: imageFile.type };
+            this.pastedFiles.add(imageFile);
             this.fileUpload = { data: imageFile, inProgress: false, progress: 0 };
             this.upload(this.fileUpload);
         }
@@ -835,7 +833,7 @@ class GuiFileUploader {
                 useExisting: forwardRef(() => GuiFileUploader),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"warn\"\n        [disabled]=\"disabled\"\n        (click)=\"onClear()\"\n        tabindex=\"-1\"\n      >\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiFileUploader, decorators: [{
             type: Component,
@@ -858,7 +856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatHint,
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
-                    ], template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n    (paste)=\"onPaste($event)\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"warn\"\n        [disabled]=\"disabled\"\n        (click)=\"onClear()\"\n        tabindex=\"-1\"\n      >\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -1031,6 +1029,10 @@ class GuiFill {
     value = '';
     onChange = () => { };
     onTouched = () => { };
+    constructor() {
+        const iconsRegistry = inject(GuiIconsRegistry);
+        iconsRegistry.add('clear');
+    }
     ngOnChanges(changes) {
         if (changes['config']) {
             this.type = (this.config.mode || 'all');
@@ -1059,6 +1061,10 @@ class GuiFill {
         e.stopPropagation();
         this.colorpicker?.open();
     }
+    clearValue() {
+        this.value = null;
+        this.onValueChange();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiFill, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GuiFill, isStandalone: true, selector: "gui-fill", inputs: { config: "config", disabled: "disabled", type: "type" }, host: { classAttribute: "gui-field gui-fill" }, providers: [
             {
@@ -1066,7 +1072,7 @@ class GuiFill {
                 useExisting: forwardRef(() => GuiFill),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "colorpicker", first: true, predicate: MtxColorpicker, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <ng-container matPrefix>\n    <button class=\"gui-color-block\" type=\"button\" (click)=\"openColorPicker($event)\">\n      <span\n        class=\"gui-color-block-bg\"\n        [style.background]=\"value + ' center / contain no-repeat'\"\n      ></span>\n    </button>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n  <gui-fill-picker [type]=\"type\" [(ngModel)]=\"value\" (valueChangeComplete)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;padding:0;border:none;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem;outline:none;cursor:pointer}.gui-color-block:hover .gui-color-block-bg:after,.gui-color-block:focus .gui-color-block-bg:after{opacity:.4}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{content:\"\";display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid #fff;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));mix-blend-mode:difference;opacity:.2}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiFillPicker, selector: "gui-fill-picker", inputs: ["disabled", "type"], outputs: ["valueChangeComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "colorpicker", first: true, predicate: MtxColorpicker, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <ng-container matPrefix>\n    <button class=\"gui-color-block\" type=\"button\" (click)=\"openColorPicker($event)\">\n      <span\n        class=\"gui-color-block-bg\"\n        [style.background]=\"(value ?? '') + ' center / contain no-repeat'\"\n      ></span>\n    </button>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n\n  @if (value) {\n    <gui-icon-button-wrapper matSuffix>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"warn\"\n        [disabled]=\"disabled\"\n        (click)=\"clearValue()\"\n        tabindex=\"-1\"\n      >\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n  <gui-fill-picker [type]=\"type\" [(ngModel)]=\"value\" (valueChangeComplete)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;padding:0;border:none;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem;outline:none;cursor:pointer;overflow:hidden}[dir=rtl] .gui-color-block{border-radius:0;border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.gui-color-block:after{position:absolute;content:\"\";display:inline-block;inset:0;box-sizing:border-box;border:1px solid #fff;border-radius:inherit;mix-blend-mode:difference;opacity:.2}.gui-color-block:hover:after,.gui-color-block:focus:after{opacity:.4}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiFillPicker, selector: "gui-fill-picker", inputs: ["disabled", "type"], outputs: ["valueChangeComplete"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiFill, decorators: [{
             type: Component,
@@ -1084,12 +1090,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatPrefix,
                         MatInput,
                         MatHint,
+                        MatIcon,
+                        MatIconButton,
+                        MatSuffix,
                         MtxColorpickerInput,
                         MtxColorpicker,
                         GuiFieldLabel,
                         GuiFillPicker,
-                    ], template: "<mat-form-field>\n  <ng-container matPrefix>\n    <button class=\"gui-color-block\" type=\"button\" (click)=\"openColorPicker($event)\">\n      <span\n        class=\"gui-color-block-bg\"\n        [style.background]=\"value + ' center / contain no-repeat'\"\n      ></span>\n    </button>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n  <gui-fill-picker [type]=\"type\" [(ngModel)]=\"value\" (valueChangeComplete)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;padding:0;border:none;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem;outline:none;cursor:pointer}.gui-color-block:hover .gui-color-block-bg:after,.gui-color-block:focus .gui-color-block-bg:after{opacity:.4}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{content:\"\";display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid #fff;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));mix-blend-mode:difference;opacity:.2}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
-        }], propDecorators: { colorpicker: [{
+                        GuiIconButtonWrapper,
+                    ], template: "<mat-form-field>\n  <ng-container matPrefix>\n    <button class=\"gui-color-block\" type=\"button\" (click)=\"openColorPicker($event)\">\n      <span\n        class=\"gui-color-block-bg\"\n        [style.background]=\"(value ?? '') + ' center / contain no-repeat'\"\n      ></span>\n    </button>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n\n  @if (value) {\n    <gui-icon-button-wrapper matSuffix>\n      <button\n        mat-icon-button\n        type=\"button\"\n        color=\"warn\"\n        [disabled]=\"disabled\"\n        (click)=\"clearValue()\"\n        tabindex=\"-1\"\n      >\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n\n  @if (config.parentType === 'inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n  <gui-fill-picker [type]=\"type\" [(ngModel)]=\"value\" (valueChangeComplete)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;padding:0;border:none;border-top-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem;outline:none;cursor:pointer;overflow:hidden}[dir=rtl] .gui-color-block{border-radius:0;border-top-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small))}.gui-color-block:after{position:absolute;content:\"\";display:inline-block;inset:0;box-sizing:border-box;border:1px solid #fff;border-radius:inherit;mix-blend-mode:difference;opacity:.2}.gui-color-block:hover:after,.gui-color-block:focus:after{opacity:.4}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { colorpicker: [{
                 type: ViewChild,
                 args: [MtxColorpicker]
             }], config: [{
@@ -1133,7 +1143,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\n    panelClass=\"gui-image-select\"\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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-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, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .mat-mdc-form-field .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{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .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", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearable", "clearAllText", "clearOnBackspace", "compareWith", "panelPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "panelDisabled", "fixedPlaceholder", "preventToggleOnRightClick", "clearSearchOnAdd", "deselectOnClick", "tabIndex", "inputId", "inputAttrs", "panelClass", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "ariaLabel", "ariaLabelledby", "ariaDescribedby"], 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 matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-image-select\"\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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 matTextSuffix>{{ 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-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, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .mat-mdc-form-field .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{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .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", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearable", "clearAllText", "clearOnBackspace", "compareWith", "panelPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "panelDisabled", "fixedPlaceholder", "preventToggleOnRightClick", "clearSearchOnAdd", "deselectOnClick", "tabIndex", "inputId", "inputAttrs", "panelClass", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "ariaLabel", "ariaLabelledby", "ariaDescribedby"], 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: "21.2.14", ngImport: i0, type: GuiImageSelect, decorators: [{
             type: Component,
@@ -1155,7 +1165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MtxSelectLabelTemplate,
                         MtxSelectOptionTemplate,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-image-select\"\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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-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, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .mat-mdc-form-field .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{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    panelClass=\"gui-image-select\"\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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 matTextSuffix>{{ 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-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, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .mat-mdc-form-field .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{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
         }], propDecorators: { mtxSelect: [{
                 type: ViewChild,
                 args: [MtxSelect]
@@ -1212,7 +1222,7 @@ class GuiInputNumber {
                 useExisting: forwardRef(() => GuiInputNumber),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\"\n  />\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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\"\n  />\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "21.2.14", ngImport: i0, type: GuiInputNumber, decorators: [{
             type: Component,
@@ -1224,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             useExisting: forwardRef(() => GuiInputNumber),
                             multi: true,
                         },
-                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\"\n  />\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" }]
+                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\"\n  />\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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" }]
         }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -1262,7 +1272,7 @@ class GuiInputText {
                 useExisting: forwardRef(() => GuiInputText),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "21.2.14", ngImport: i0, type: GuiInputText, decorators: [{
             type: Component,
@@ -1274,7 +1284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             useExisting: forwardRef(() => GuiInputText),
                             multi: true,
                         },
-                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\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" }]
+                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <input\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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" }]
         }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -1312,7 +1322,7 @@ class GuiSelect {
                 useExisting: forwardRef(() => GuiSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\n    @for (opt of config.options; track $index) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n      </mat-option>\n    }\n  </mat-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-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\n    @for (opt of config.options; track $index) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "21.2.14", ngImport: i0, type: GuiSelect, decorators: [{
             type: Component,
@@ -1333,7 +1343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSuffix,
                         MatHint,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\n    @for (opt of config.options; track $index) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n      </mat-option>\n    }\n  </mat-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-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\n    @for (opt of config.options; track $index) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -1389,7 +1399,7 @@ class GuiSlider {
                 useExisting: forwardRef(() => GuiSlider),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onValueChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mat-slider-handle-width: .75rem;--mat-slider-handle-height: .75rem;--mat-slider-inactive-track-height: .125rem;--mat-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mat-slider-handle-width) * 2);margin:0 calc(var(--mat-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mat-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mat-slider-handle-width) * -1);width:calc(var(--mat-slider-handle-width) * 2);height:calc(var(--mat-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onValueChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mat-slider-handle-width: .75rem;--mat-slider-handle-height: .75rem;--mat-slider-inactive-track-height: .125rem;--mat-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mat-slider-handle-width) * 2);margin:0 calc(var(--mat-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mat-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mat-slider-handle-width) * -1);width:calc(var(--mat-slider-handle-width) * 2);height:calc(var(--mat-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "21.2.14", ngImport: i0, type: GuiSlider, decorators: [{
             type: Component,
@@ -1412,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSliderRangeThumb,
                         MatHint,
                         GuiFieldLabel,
-                    ], template: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onValueChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mat-slider-handle-width: .75rem;--mat-slider-handle-height: .75rem;--mat-slider-inactive-track-height: .125rem;--mat-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mat-slider-handle-width) * 2);margin:0 calc(var(--mat-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mat-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mat-slider-handle-width) * -1);width:calc(var(--mat-slider-handle-width) * 2);height:calc(var(--mat-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"] }]
+                    ], template: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onValueChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matTextPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matTextSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mat-slider-handle-width: .75rem;--mat-slider-handle-height: .75rem;--mat-slider-inactive-track-height: .125rem;--mat-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mat-slider-handle-width) * 2);margin:0 calc(var(--mat-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mat-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mat-slider-handle-width) * -1);width:calc(var(--mat-slider-handle-width) * 2);height:calc(var(--mat-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -1500,7 +1510,7 @@ class GuiTextarea {
                 useExisting: forwardRef(() => GuiTextarea),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <textarea\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></textarea>\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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <textarea\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></textarea>\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "21.2.14", ngImport: i0, type: GuiTextarea, decorators: [{
             type: Component,
@@ -1512,7 +1522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             useExisting: forwardRef(() => GuiTextarea),
                             multi: true,
                         },
-                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <textarea\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></textarea>\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" }]
+                    ], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matTextPrefix>{{ config.prefix }}</span>\n  }\n  <textarea\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></textarea>\n  @if (config.suffix) {\n    <span matTextSuffix>{{ 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" }]
         }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{