@acrodata/gui
Version:
JSON powered GUI for configurable panels.
1 lines • 162 kB
Source Map (JSON)
{"version":3,"file":"acrodata-gui.mjs","sources":["../../../projects/gui/gui-utils.ts","../../../projects/gui/field-label/field-label.ts","../../../projects/gui/field-label/field-label.html","../../../projects/gui/button-toggle/icon.ts","../../../projects/gui/button-toggle/button-toggle.ts","../../../projects/gui/button-toggle/button-toggle.html","../../../projects/gui/icon-button-wrapper/icon-button-wrapper.ts","../../../projects/gui/icon-button-wrapper/icon-button-wrapper.html","../../../projects/gui/codearea/codearea-config.ts","../../../projects/gui/gui-icons.ts","../../../projects/gui/codearea/codearea-dialog.ts","../../../projects/gui/codearea/codearea-dialog.html","../../../projects/gui/codearea/codearea.ts","../../../projects/gui/codearea/codearea.html","../../../projects/gui/combobox/combobox.ts","../../../projects/gui/combobox/combobox.html","../../../projects/gui/field-group/field-group.ts","../../../projects/gui/field-group/field-group.html","../../../projects/gui/file-uploader/file-uploader-config.ts","../../../projects/gui/file-uploader/file-uploader.ts","../../../projects/gui/file-uploader/file-uploader.html","../../../projects/gui/fill/fill.ts","../../../projects/gui/fill/fill.html","../../../projects/gui/image-select/image-select.ts","../../../projects/gui/image-select/image-select.html","../../../projects/gui/inline-group/inline-group.ts","../../../projects/gui/inline-group/inline-group.html","../../../projects/gui/input-number/input-number.ts","../../../projects/gui/input-number/input-number.html","../../../projects/gui/input-text/input-text.ts","../../../projects/gui/input-text/input-text.html","../../../projects/gui/select/select.ts","../../../projects/gui/select/select.html","../../../projects/gui/slider/slider.ts","../../../projects/gui/slider/slider.html","../../../projects/gui/switch/switch.ts","../../../projects/gui/switch/switch.html","../../../projects/gui/textarea/textarea.ts","../../../projects/gui/textarea/textarea.html","../../../projects/gui/gui-form.ts","../../../projects/gui/gui-form.html","../../../projects/gui/gui-module.ts","../../../projects/gui/public-api.ts","../../../projects/gui/acrodata-gui.ts"],"sourcesContent":["import { Directive, ElementRef, Input, OnInit, Pipe, PipeTransform } from '@angular/core';\nimport { GuiDefaultValue, GuiOperator } from './interface';\n\n/**\n * Lightweight EJS template engine\n *\n * @param str template string\n * @param data data passed to the template\n * @returns\n *\n * ### Example\n *\n * ```ts\n * const people = ['geddy', 'neil', 'alex'];\n * const res = ejsTmpl('<%= people.join(\", \") %>', {people: people});\n * console.log(res);\n * // => 'geddy, neil, alex'\n * ```\n *\n */\nexport function ejsTmpl(str: string, data: any) {\n const fn = new Function(\n 'obj',\n 'var p=[],print=function(){p.push.apply(p,arguments);};' +\n // Introduce the data as local variables using with(){}\n 'with(obj){p.push(\"' +\n // Convert the template into pure JavaScript\n str\n .replace(/[\\r\\t\\n]/g, ' ')\n .split('<%')\n .join('\\t')\n .replace(/((^|%>)[^\\t]*)'/g, '$1\\r')\n .replace(/\\t=(.*?)%>/g, '\",$1,\"')\n .split('\\t')\n .join('\");')\n .split('%>')\n .join('p.push(\"')\n .split('\\r')\n .join('\"') +\n '\");}return p.join(\"\");'\n );\n\n // Provide some basic currying to the user\n return data ? fn(data) : fn;\n}\n\n@Pipe({\n name: 'ejs',\n standalone: true,\n})\nexport class GuiEjsPipe implements PipeTransform {\n transform(value: string, data = {}): string {\n return ejsTmpl(value, data);\n }\n}\n\n@Directive({\n selector: '[flex]',\n standalone: true,\n})\nexport class GuiFlexDirective implements OnInit {\n @Input() flex: number | undefined = 100;\n\n constructor(private el: ElementRef) {}\n\n ngOnInit(): void {\n this.el.nativeElement.style.flex = `1 1 ${this.flex}%`;\n this.el.nativeElement.style.maxWidth = `${this.flex}%`;\n }\n}\n\nexport function compareValues(a: GuiDefaultValue, b: GuiDefaultValue, operator: GuiOperator) {\n switch (operator) {\n case '$eq':\n return a === b;\n case '$ne':\n return a !== b;\n case '$gt':\n return (a ?? 0) > (b ?? 0);\n case '$lt':\n return (a ?? 0) < (b ?? 0);\n case '$gte':\n return (a ?? 0) >= (b ?? 0);\n case '$lte':\n return (a ?? 0) <= (b ?? 0);\n case '$in':\n return Array.isArray(b) && b.includes(a);\n case '$nin':\n return Array.isArray(b) && !b.includes(a);\n default:\n return false;\n }\n}\n\nexport function getValueByPath(obj: Record<string, any>, path: string) {\n return path.split('.').reduce((acc: Record<string, any> | undefined, key) => {\n return acc?.['children']?.[key] ? acc['children'][key] : acc?.[key];\n }, obj);\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnChanges,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ejsTmpl } from '../gui-utils';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-field-label',\n templateUrl: './field-label.html',\n styleUrl: './field-label.scss',\n host: {\n '[class.gui-field-label]': '!styless',\n '[title]': 'title',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [MatTooltip],\n})\nexport class GuiFieldLabel implements OnChanges {\n @Input() config: Partial<GuiControl> = {};\n\n @Input() index?: number;\n\n title = '';\n\n styless = false;\n\n ngOnChanges(): void {\n const { index, name, parentType, type } = this.config;\n this.title = index != null && !isNaN(index) ? ejsTmpl(name || '', { i: index }) : name;\n this.styless =\n (parentType === 'inline' && type !== 'inline') || type === 'group' || type === 'tabs';\n }\n}\n","@if (!config.description) {\n <span>{{ title }}</span>\n} @else {\n <span\n [class.gui-field-label-with-description]=\"config.description\"\n [matTooltip]=\"config.description\"\n matTooltipPosition=\"above\"\n matTooltipClass=\"gui-field-label-tooltip\"\n >\n {{ title }}\n </span>\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'gui-icon',\n template: `\n @if (isUrl()) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <i [class]=\"src\"></i>\n }\n `,\n styleUrl: './icon.scss',\n host: {\n class: 'gui-icon',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n})\nexport class GuiIcon {\n @Input() src = '';\n\n isUrl() {\n return /^(https?:\\/\\/|\\.?\\/)\\w+/.test(this.src);\n }\n}\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';\nimport { MatHint } from '@angular/material/form-field';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiFlexDirective } from '../gui-utils';\nimport { GuiBasicValue, GuiControl } from '../interface';\nimport { GuiIcon } from './icon';\n\n@Component({\n selector: 'gui-button-toggle',\n templateUrl: './button-toggle.html',\n styleUrl: './button-toggle.scss',\n host: {\n class: 'gui-field gui-button-toggle',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiButtonToggle),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatButtonToggleGroup,\n MatButtonToggle,\n MatHint,\n GuiFlexDirective,\n GuiIcon,\n GuiFieldLabel,\n ],\n})\nexport class GuiButtonToggle implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n value: GuiBasicValue | GuiBasicValue[] = '';\n\n private onChange: (value: GuiBasicValue | GuiBasicValue[]) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n writeValue(value: GuiBasicValue | GuiBasicValue[]) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: GuiBasicValue | GuiBasicValue[]) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\n","<mat-button-toggle-group\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [multiple]=\"config.multiple\"\n (change)=\"onValueChange()\"\n hideSingleSelectionIndicator\n hideMultipleSelectionIndicator\n>\n @for (opt of config.options; track opt) {\n <mat-button-toggle\n disableRipple\n [class.gui-icon-toggle]=\"config.useIcon\"\n [flex]=\"opt.col\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [title]=\"config.useIcon ? opt.label : ''\"\n >\n @if (config.useIcon) {\n <gui-icon [src]=\"opt.src!\" />\n } @else {\n {{ opt.label }}\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'gui-icon-button-wrapper',\n standalone: true,\n templateUrl: './icon-button-wrapper.html',\n styleUrl: './icon-button-wrapper.scss',\n host: {\n class: 'gui-icon-button-wrapper',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GuiIconButtonWrapper {}\n","<ng-content />\n","import { Theme } from '@acrodata/code-editor';\nimport { Injectable } from '@angular/core';\nimport { LanguageDescription } from '@codemirror/language';\nimport { Extension } from '@codemirror/state';\nimport { Subject } from 'rxjs';\nimport { GuiCodeareaDialogData } from './codearea-dialog';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class GuiCodeareaConfig {\n readonly changes: Subject<void> = new Subject<void>();\n\n theme: Theme = 'light';\n\n languages: LanguageDescription[] = [];\n\n extensions: Extension[] | ((data: GuiCodeareaDialogData) => Extension[]) = [];\n}\n","import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';\nimport { MatIconRegistry } from '@angular/material/icon';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nexport const svgIcons = {\n horizontal: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z\"></path>\n </svg>\n `,\n vertical: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z\"></path>\n </svg>\n `,\n add: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\"></path>\n </svg>\n `,\n delete: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z\"></path>\n </svg>\n `,\n copy: `\n <svg viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\"></path>\n </svg>\n `,\n link: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z\"></path>\n </svg>\n `,\n clear: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"></path>\n </svg>\n `,\n file: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z\"></path>\n </svg>\n `,\n upload: `\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z\"></path>\n </svg>\n `,\n expand: `\n <svg viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z\"></path>\n </svg>`,\n wrap: `\n <svg viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\" d=\"M21,5H3V7H21V5M3,19H10V17H3V19M3,13H18C19,13 20,13.43 20,15C20,16.57 19,17 18,17H16V15L12,18L16,21V19H18C20.95,19 22,17.73 22,15C22,12.28 21,11 18,11H3V13Z\"></path>\n </svg>`,\n};\n\nexport type GuiIconType = keyof typeof svgIcons;\n\nexport type GuiIconsConfig = Record<GuiIconType, string>;\n\n/** Injection token that can be used to provide the default icons. */\nexport const GUI_ICONS_CONFIG = new InjectionToken<GuiIconsConfig>('gui-icons-config');\n\n@Injectable({ providedIn: 'root' })\nexport class GuiIconsRegistry {\n constructor(\n private _iconRegistry: MatIconRegistry,\n private _sanitizer: DomSanitizer,\n @Optional() @Inject(GUI_ICONS_CONFIG) private _defaultIcons?: GuiIconsConfig\n ) {}\n\n add(...iconNames: GuiIconType[]) {\n const icons = Object.assign(svgIcons, this._defaultIcons);\n iconNames.forEach(k => {\n this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));\n });\n }\n}\n","import { CodeEditor } from '@acrodata/code-editor';\nimport { RndDialogDragHandle } from '@acrodata/rnd-dialog';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n Inject,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { GuiIconsRegistry } from '../gui-icons';\nimport { GuiIconButtonWrapper } from '../icon-button-wrapper/icon-button-wrapper';\nimport { GuiCodeareaConfig } from './codearea-config';\n\nexport interface GuiCodeareaDialogData {\n value: string;\n disabled?: boolean;\n readonly?: boolean;\n language?: string;\n title?: string;\n}\n\n@Component({\n selector: 'gui-codearea-dialog',\n standalone: true,\n imports: [\n FormsModule,\n MatButton,\n MatIconButton,\n MatIcon,\n RndDialogDragHandle,\n CodeEditor,\n GuiIconButtonWrapper,\n ],\n templateUrl: './codearea-dialog.html',\n styleUrl: './codearea-dialog.scss',\n host: {\n class: 'gui-codearea-dialog',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GuiCodeareaDialog {\n get languages() {\n return this.codeareaCfg.languages;\n }\n\n get theme() {\n return this.codeareaCfg.theme;\n }\n\n get extensions() {\n return typeof this.codeareaCfg.extensions === 'function'\n ? this.codeareaCfg.extensions(this.data)\n : this.codeareaCfg.extensions;\n }\n\n langDesc = this.codeareaCfg.languages.find(\n lang => this.data.language && lang.alias.includes(this.data.language.toLowerCase())\n );\n\n title = `${this.data.title || ''} (${this.langDesc?.name || 'Plain Text'})`;\n\n lineWrapping = false;\n\n constructor(\n private dialogRef: DialogRef<string, GuiCodeareaDialog>,\n @Inject(DIALOG_DATA) public data: GuiCodeareaDialogData,\n private cdr: ChangeDetectorRef,\n private destroyRef: DestroyRef,\n private codeareaCfg: GuiCodeareaConfig,\n iconsRegistry: GuiIconsRegistry\n ) {\n iconsRegistry.add('wrap');\n\n this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.cdr.markForCheck();\n });\n }\n\n toggleLineWrapping() {\n this.lineWrapping = !this.lineWrapping;\n }\n\n save() {\n this.dialogRef.close(this.data.value);\n }\n\n close() {\n this.dialogRef.close();\n }\n}\n","<div\n class=\"gui-codearea-dialog-header\"\n [class.dragging]=\"dragHandle.isDragging\"\n rndDialogDragHandle\n #dragHandle=\"rndDialogDragHandle\"\n>\n <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n <span class=\"gui-codearea-dialog-spacer\"></span>\n\n <button mat-stroked-button (click)=\"close()\">Close</button>\n <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n <code-editor\n [(ngModel)]=\"data.value\"\n [disabled]=\"data.disabled || false\"\n [readonly]=\"data.readonly || false\"\n [language]=\"data.language || ''\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [extensions]=\"extensions\"\n [lineWrapping]=\"lineWrapping\"\n indentWithTab\n />\n\n <div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n </div>\n</div>\n","import { CodeEditor, Setup } from '@acrodata/code-editor';\nimport { RndDialog } from '@acrodata/rnd-dialog';\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatHint } from '@angular/material/form-field';\nimport { MatIcon } from '@angular/material/icon';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiIconsRegistry } from '../gui-icons';\nimport { GuiIconButtonWrapper } from '../icon-button-wrapper/icon-button-wrapper';\nimport { GuiControl } from '../interface';\nimport { GuiCodeareaConfig } from './codearea-config';\nimport { GuiCodeareaDialog, GuiCodeareaDialogData } from './codearea-dialog';\n\n@Component({\n selector: 'gui-codearea',\n templateUrl: './codearea.html',\n styleUrl: './codearea.scss',\n host: {\n class: 'gui-field gui-codearea',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiCodearea),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatIcon,\n MatIconButton,\n MatHint,\n CodeEditor,\n GuiFieldLabel,\n GuiIconButtonWrapper,\n ],\n})\nexport class GuiCodearea implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n @Input() setup: Setup = 'minimal';\n\n @Input()\n get height() {\n return coerceCssPixelValue(this.config.height || this._height);\n }\n set height(value: string | number) {\n this._height = value;\n }\n private _height: string | number = 120;\n\n @Input()\n get language() {\n return this.config.language || this._language;\n }\n set language(value: string) {\n this._language = value;\n }\n private _language = '';\n\n get languages() {\n return this.codeareaCfg.languages;\n }\n\n get theme() {\n return this.codeareaCfg.theme;\n }\n\n get dialogData(): GuiCodeareaDialogData {\n return {\n value: this.value,\n disabled: this.disabled,\n language: this.language,\n };\n }\n\n get extensions() {\n return typeof this.codeareaCfg.extensions === 'function'\n ? this.codeareaCfg.extensions(this.dialogData)\n : this.codeareaCfg.extensions;\n }\n\n value = '';\n private oldValue = '';\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(\n private rndDialog: RndDialog,\n private cdr: ChangeDetectorRef,\n private destroyRef: DestroyRef,\n private codeareaCfg: GuiCodeareaConfig,\n iconsRegistry: GuiIconsRegistry\n ) {\n iconsRegistry.add('expand');\n\n this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.cdr.markForCheck();\n });\n }\n\n writeValue(value: any) {\n if (typeof value === 'string' || value == null) {\n this.value = value || '';\n } else {\n this.value = value.toString();\n }\n this.oldValue = this.value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n if (this.value !== this.oldValue) {\n this.onChange(this.value);\n this.oldValue = this.value;\n }\n }\n\n onExpand() {\n const dialogRef = this.rndDialog.open<string, GuiCodeareaDialogData, GuiCodeareaDialog>(\n GuiCodeareaDialog,\n {\n panelClass: 'gui-codearea-dialog-panel',\n hasBackdrop: false,\n width: '600px',\n data: this.dialogData,\n }\n );\n\n dialogRef.closed.subscribe(newValue => {\n if (newValue) {\n this.value = newValue;\n this.cdr.detectChanges();\n this.onValueChange();\n }\n });\n }\n}\n","<code-editor\n [style.height]=\"height\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [language]=\"language\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [setup]=\"setup\"\n [extensions]=\"extensions\"\n (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MtxSelect, MtxSelectOptionTemplate } from '@ng-matero/extensions/select';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiBasicValue, GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-combobox',\n templateUrl: './combobox.html',\n styleUrl: './combobox.scss',\n host: {\n class: 'gui-field gui-combobox',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiCombobox),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatFormField,\n MatPrefix,\n MatSuffix,\n MatHint,\n MtxSelect,\n MtxSelectOptionTemplate,\n GuiFieldLabel,\n ],\n})\nexport class GuiCombobox implements ControlValueAccessor, AfterViewInit {\n @ViewChild(MtxSelect) mtxSelect!: MtxSelect;\n\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n @Input() appendTo = 'body';\n\n value: GuiBasicValue | GuiBasicValue[] = '';\n\n private onChange: (value: GuiBasicValue | GuiBasicValue[]) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n ngAfterViewInit(): void {\n // Add additional class for ng-select's dropdown panel\n const { ngSelect } = this.mtxSelect;\n ngSelect.classes = (ngSelect.classes || '') + ' gui-combobox';\n }\n\n writeValue(value: GuiBasicValue | GuiBasicValue[]) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: GuiBasicValue | GuiBasicValue[]) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n\n addTagFn(label: string) {\n return { label, value: label };\n }\n}\n","<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [appendTo]=\"appendTo\"\n [items]=\"config.options || []\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [multiple]=\"config.multiple || false\"\n [addTag]=\"addTagFn\"\n [closeOnSelect]=\"!config.multiple\"\n [deselectOnClick]=\"true\"\n (change)=\"onValueChange()\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n {{ item.label }}\n </div>\n </ng-template>\n </mtx-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DoCheck,\n Input,\n KeyValueDiffer,\n KeyValueDiffers,\n OnInit,\n ViewEncapsulation,\n} from '@angular/core';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-field-group',\n templateUrl: './field-group.html',\n styleUrl: './field-group.scss',\n host: {\n class: 'gui-field-group',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [GuiFieldLabel],\n})\nexport class GuiFieldGroup implements OnInit, DoCheck {\n @Input() config: Partial<GuiControl> = {};\n\n private configDiffer?: KeyValueDiffer<string, any>;\n\n constructor(\n private differs: KeyValueDiffers,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.configDiffer = this.differs.find(this.config).create();\n }\n\n ngDoCheck(): void {\n const changes = this.configDiffer?.diff(this.config);\n changes?.forEachChangedItem(record => {\n this.cdr.markForCheck();\n });\n }\n}\n","@if (config.parentType !== 'inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n","import { HttpClient, HttpResponse } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { map } from 'rxjs';\nimport { GuiControl } from '../interface';\n\nexport interface FileUploadResponseBody {\n bytes: number;\n mime: string;\n url: string;\n}\n\n@Injectable({\n providedIn: 'root',\n})\nexport class GuiFileUploaderConfig {\n constructor(protected http: HttpClient) {}\n\n /**\n * The file upload URL\n */\n url = '';\n\n /**\n * The File upload API\n *\n * @param formData The FormData with file binary\n * @param config The custom upload config that passed from component input\n * @returns The uploaded file url stream\n */\n upload(formData: FormData, config: Partial<GuiControl>) {\n return this.http\n .post<FileUploadResponseBody>(this.url, formData, {\n reportProgress: true,\n observe: 'events',\n })\n .pipe(\n map(res => {\n if (res instanceof HttpResponse && res.body) {\n return res.body.url;\n }\n return null;\n })\n );\n }\n}\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { finalize } from 'rxjs/operators';\n\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiIconsRegistry } from '../gui-icons';\nimport { GuiIconButtonWrapper } from '../icon-button-wrapper/icon-button-wrapper';\nimport { GuiControl } from '../interface';\nimport { GuiFileUploaderConfig } from './file-uploader-config';\n\nexport type FileUploadType = 'image' | 'video' | 'audio' | '*';\n\nexport interface FileUploadContent {\n data: File;\n progress: number;\n inProgress: boolean;\n}\n\n@Component({\n selector: 'gui-file-uploader',\n templateUrl: './file-uploader.html',\n styleUrl: './file-uploader.scss',\n host: {\n class: 'gui-field gui-file-uploader',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiFileUploader),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatFormField,\n MatIcon,\n MatPrefix,\n MatInput,\n MatIconButton,\n MatSuffix,\n MatHint,\n GuiFieldLabel,\n GuiIconButtonWrapper,\n ],\n})\nexport class GuiFileUploader implements ControlValueAccessor, OnChanges {\n @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;\n\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n @Input() type: FileUploadType = '*';\n @Input() name = '';\n @Input() accept = '';\n\n @Output() fileChange = new EventEmitter<string>();\n\n // file url that returned from the server\n url = '';\n\n // file to upload\n fileUpload!: FileUploadContent;\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(\n private fileUploaderCfg: GuiFileUploaderConfig,\n private cdr: ChangeDetectorRef,\n iconsRegistry: GuiIconsRegistry\n ) {\n iconsRegistry.add('link', 'clear', 'file', 'upload');\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['config'] || changes['accept'] || changes['type']) {\n this.accept = this.config.accept || this.accept || this.type + '/*';\n }\n }\n\n writeValue(value: string) {\n this.url = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n upload(fileUpload: FileUploadContent) {\n const formData = new FormData();\n formData.append('file', fileUpload.data);\n\n fileUpload.inProgress = true;\n\n this.fileUploaderCfg\n .upload(formData, this.config)\n .pipe(\n finalize(() => {\n fileUpload.inProgress = false;\n })\n )\n .subscribe(result => {\n if (result) {\n this.url = result;\n this.cdr.detectChanges();\n\n this.onChange(this.url);\n this.onTouched();\n\n this.fileChange.emit(this.url);\n }\n });\n }\n\n onUrlChange(e: Event) {\n this.url = (e.target as HTMLInputElement).value;\n\n this.onChange(this.url);\n\n this.fileChange.emit(this.url);\n }\n\n onFileChange(e: Event) {\n this.fileUpload = {\n data: (e.target as HTMLInputElement).files![0],\n inProgress: false,\n progress: 0,\n };\n\n this.upload(this.fileUpload);\n\n // reset input value\n (e.target as HTMLInputElement).value = '';\n }\n\n onBlur() {\n this.onTouched();\n }\n\n onClear() {\n this.url = '';\n\n this.onChange(this.url);\n this.onTouched();\n\n this.fileChange.emit(this.url);\n }\n}\n","<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 />\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","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport {\n MtxColorpicker,\n MtxColorpickerInput,\n MtxColorpickerToggle,\n} from '@ng-matero/extensions/colorpicker';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiIconButtonWrapper } from '../icon-button-wrapper/icon-button-wrapper';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-fill',\n templateUrl: './fill.html',\n styleUrl: './fill.scss',\n host: {\n class: 'gui-field gui-fill',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiFill),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatFormField,\n MatPrefix,\n MatInput,\n MatSuffix,\n MatHint,\n MtxColorpickerInput,\n MtxColorpicker,\n MtxColorpickerToggle,\n GuiFieldLabel,\n GuiIconButtonWrapper,\n ],\n})\nexport class GuiFill implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n value = '';\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n writeValue(value: string) {\n if (typeof value === 'string') {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n registerOnChange(fn: (value: string) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\n","<mat-form-field>\n <ng-container matPrefix>\n <span class=\"gui-color-block-empty\"></span>\n <span class=\"gui-color-block\" [style.background]=\"value\"></span>\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 />\n <gui-icon-button-wrapper matSuffix>\n <mtx-colorpicker-toggle [for]=\"cp\" />\n </gui-icon-button-wrapper>\n\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport {\n MtxSelect,\n MtxSelectLabelTemplate,\n MtxSelectOptionTemplate,\n} from '@ng-matero/extensions/select';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-image-select',\n templateUrl: './image-select.html',\n styleUrl: './image-select.scss',\n host: {\n class: 'gui-field gui-image-select',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiImageSelect),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatFormField,\n MatPrefix,\n MatSuffix,\n MatHint,\n MtxSelect,\n MtxSelectLabelTemplate,\n MtxSelectOptionTemplate,\n GuiFieldLabel,\n ],\n})\nexport class GuiImageSelect implements ControlValueAccessor, AfterViewInit {\n @ViewChild(MtxSelect) mtxSelect!: MtxSelect;\n\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n @Input() appendTo = 'body';\n\n value: unknown;\n\n private onChange: (value: unknown) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n ngAfterViewInit(): void {\n // Add additional class for ng-select's dropdown panel\n const { ngSelect } = this.mtxSelect;\n ngSelect.classes = (ngSelect.classes || '') + ' gui-image-select';\n }\n\n writeValue(value: unknown) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: unknown) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\n","<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-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","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-inline-group',\n templateUrl: './inline-group.html',\n styleUrl: './inline-group.scss',\n host: {\n class: 'gui-inline-group',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [GuiFieldLabel],\n})\nexport class GuiInlineGroup {\n @Input() config: Partial<GuiControl> = {};\n}\n","@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content />\n</div>\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-input-number',\n templateUrl: './input-number.html',\n styleUrl: './input-number.scss',\n host: {\n class: 'gui-field gui-input-number',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiInputNumber),\n multi: true,\n },\n ],\n standalone: true,\n imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel],\n})\nexport class GuiInputNumber implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n value!: number;\n\n private onChange: (value: number) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n writeValue(value: number) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: number) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\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 @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-input-text',\n templateUrl: './input-text.html',\n styleUrl: './input-text.scss',\n host: {\n class: 'gui-field gui-input-text',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiInputText),\n multi: true,\n },\n ],\n standalone: true,\n imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel],\n})\nexport class GuiInputText implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n value = '';\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n writeValue(value: string) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\n","<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","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatOption } from '@angular/material/core';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatSelect } from '@angular/material/select';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiBasicValue, GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-select',\n templateUrl: './select.html',\n styleUrl: './select.scss',\n host: {\n class: 'gui-field gui-select',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiSelect),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatFormField,\n MatPrefix,\n MatSelect,\n MatOption,\n MatSuffix,\n MatHint,\n GuiFieldLabel,\n ],\n})\nexport class GuiSelect implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled = false;\n\n value: GuiBasicValue | GuiBasicValue[] = '';\n\n private onChange: (value: GuiBasicValue | GuiBasicValue[]) => void = () => {};\n private onTouched: () => void = () => {};\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n writeValue(value: GuiBasicValue | GuiBasicValue[]) {\n this.value = value;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: GuiBasicValue | GuiBasicValue[]) => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n onValueChange() {\n this.onChange(this.value);\n }\n}\n","<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 opt) {\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","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n forwardRef,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField, MatHint, MatPrefix, MatSuffix } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { MatSlider, MatSliderRangeThumb, MatSliderThumb } from '@angular/material/slider';\nimport { GuiFieldLabel } from '../field-label/field-label';\nimport { GuiControl } from '../interface';\n\n@Component({\n selector: 'gui-slider',\n templateUrl: './slider.html',\n styleUrl: './slider.scss',\n host: {\n class: 'gui-field gui-slider',\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GuiSlider),\n multi: true,\n },\n ],\n standalone: true,\n imports: [\n FormsModule,\n MatSlider,\n MatSliderThumb,\n MatFormField,\n MatPrefix,\n MatInput,\n MatSuffix,\n MatSliderRangeThumb,\n MatHint,\n GuiFieldLabel,\n ],\n})\nexport class GuiSlider implements ControlValueAccessor {\n @Input() config: Partial<GuiControl> = {};\n @Input() disabled