@yomotech/view-toolkit 1.0.28 → 1.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -47,6 +47,8 @@ import * as i11$1 from 'ng-zorro-antd/menu';
|
|
|
47
47
|
import { NzMenuModule } from 'ng-zorro-antd/menu';
|
|
48
48
|
import * as i4$1 from '@okta/okta-angular';
|
|
49
49
|
import { OktaAuthStateService, OKTA_AUTH } from '@okta/okta-angular';
|
|
50
|
+
import * as i4$2 from 'primeng/textarea';
|
|
51
|
+
import { TextareaModule } from 'primeng/textarea';
|
|
50
52
|
import * as i1$4 from 'primeng/dynamicdialog';
|
|
51
53
|
import { DynamicDialogModule } from 'primeng/dynamicdialog';
|
|
52
54
|
import { SelectModule } from 'primeng/select';
|
|
@@ -6026,13 +6028,13 @@ class TextControlComponent extends ControlBase {
|
|
|
6026
6028
|
reveal = false;
|
|
6027
6029
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TextControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6028
6030
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TextControlComponent, isStandalone: true, selector: "vl-text-control", usesInheritance: true, ngImport: i0, template: `
|
|
6029
|
-
<textarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
|
|
6031
|
+
<textarea pTextarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
|
|
6030
6032
|
(ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
|
|
6031
6033
|
[disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [rows]="option.rows ?? 3"
|
|
6032
6034
|
[attr.inputmode]="inputMode" [attr.autocomplete]="option.autocompleteHint || 'off'"
|
|
6033
6035
|
[vlCustomKeyboard]="keyboard" [ngStyle]="styles(inputStyle)" [class]="classes(inputStyle)"></textarea>
|
|
6034
|
-
<ng-template #single><div class="text-wrap">
|
|
6035
|
-
<input [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
|
|
6036
|
+
<ng-template #single><div class="text-wrap" [class.text-wrap--password]="control === 'password' && option.showPasswordToggle !== false">
|
|
6037
|
+
<input pInputText [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
|
|
6036
6038
|
[ngModel]="value" (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
|
|
6037
6039
|
[disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [attr.inputmode]="inputMode"
|
|
6038
6040
|
[attr.autocomplete]="option.autocompleteHint || (control === 'password' ? 'current-password' : 'off')"
|
|
@@ -6040,18 +6042,18 @@ class TextControlComponent extends ControlBase {
|
|
|
6040
6042
|
<button *ngIf="control === 'password' && option.showPasswordToggle !== false" type="button"
|
|
6041
6043
|
[disabled]="disabled" (click)="reveal=!reveal" [attr.aria-label]="reveal?'Hide password':'Show password'"
|
|
6042
6044
|
[attr.aria-pressed]="reveal">{{reveal?'Hide':'Show'}}</button>
|
|
6043
|
-
</div></ng-template>`, isInline: true, styles: [":host{display:block;min-width:0}
|
|
6045
|
+
</div></ng-template>`, isInline: true, styles: [":host{display:block;min-width:0}.text-wrap{display:contents}.text-wrap--password{display:flex;align-items:center;gap:6px}.text-wrap--password input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }] });
|
|
6044
6046
|
}
|
|
6045
6047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TextControlComponent, decorators: [{
|
|
6046
6048
|
type: Component,
|
|
6047
|
-
args: [{ selector: 'vl-text-control', standalone: true, imports: [CommonModule, FormsModule, CustomKeyboardDirective], template: `
|
|
6048
|
-
<textarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
|
|
6049
|
+
args: [{ selector: 'vl-text-control', standalone: true, imports: [CommonModule, FormsModule, CustomKeyboardDirective, InputTextModule, TextareaModule], template: `
|
|
6050
|
+
<textarea pTextarea *ngIf="control === 'textArea'; else single" [id]="inputId" [ngModel]="value"
|
|
6049
6051
|
(ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
|
|
6050
6052
|
[disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [rows]="option.rows ?? 3"
|
|
6051
6053
|
[attr.inputmode]="inputMode" [attr.autocomplete]="option.autocompleteHint || 'off'"
|
|
6052
6054
|
[vlCustomKeyboard]="keyboard" [ngStyle]="styles(inputStyle)" [class]="classes(inputStyle)"></textarea>
|
|
6053
|
-
<ng-template #single><div class="text-wrap">
|
|
6054
|
-
<input [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
|
|
6055
|
+
<ng-template #single><div class="text-wrap" [class.text-wrap--password]="control === 'password' && option.showPasswordToggle !== false">
|
|
6056
|
+
<input pInputText [id]="inputId" [type]="control === 'password' && !reveal ? 'password' : control === 'email' ? 'email' : 'text'"
|
|
6055
6057
|
[ngModel]="value" (ngModelChange)="changed.emit($event)" [ngModelOptions]="{standalone:true}" (blur)="blurred.emit()"
|
|
6056
6058
|
[disabled]="disabled" [readOnly]="readonly" [placeholder]="placeholder" [attr.inputmode]="inputMode"
|
|
6057
6059
|
[attr.autocomplete]="option.autocompleteHint || (control === 'password' ? 'current-password' : 'off')"
|
|
@@ -6059,7 +6061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
6059
6061
|
<button *ngIf="control === 'password' && option.showPasswordToggle !== false" type="button"
|
|
6060
6062
|
[disabled]="disabled" (click)="reveal=!reveal" [attr.aria-label]="reveal?'Hide password':'Show password'"
|
|
6061
6063
|
[attr.aria-pressed]="reveal">{{reveal?'Hide':'Show'}}</button>
|
|
6062
|
-
</div></ng-template>`, styles: [":host{display:block;min-width:0}
|
|
6064
|
+
</div></ng-template>`, styles: [":host{display:block;min-width:0}.text-wrap{display:contents}.text-wrap--password{display:flex;align-items:center;gap:6px}.text-wrap--password input{min-width:0;flex:1}button{font:inherit;cursor:pointer}\n"] }]
|
|
6063
6065
|
}] });
|
|
6064
6066
|
|
|
6065
6067
|
class NumericControlComponent extends ControlBase {
|
|
@@ -6117,9 +6119,9 @@ class NumericControlComponent extends ControlBase {
|
|
|
6117
6119
|
}
|
|
6118
6120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumericControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6119
6121
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: NumericControlComponent, isStandalone: true, selector: "vl-numeric-control", usesInheritance: true, ngImport: i0, template: `
|
|
6120
|
-
<div class="numeric-wrap">
|
|
6122
|
+
<div class="numeric-wrap" [class.numeric-wrap--group]="control === 'spinner' || (control === 'slider' && option.showValue) || option.unitLabel || option.unit">
|
|
6121
6123
|
<button *ngIf="control==='spinner'" type="button" aria-label="Decrease value" [disabled]="disabled||readonly" (click)="step(-1)">−</button>
|
|
6122
|
-
<input [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
|
|
6124
|
+
<input pInputText [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
|
|
6123
6125
|
[readOnly]="readonly" [attr.inputmode]="keyboard==='numeric'?'decimal':inputMode" [placeholder]="placeholder"
|
|
6124
6126
|
[attr.min]="rules.minimum ?? (control==='slider'?0:null)" [attr.max]="rules.maximum ?? (control==='slider'?100:null)"
|
|
6125
6127
|
[attr.step]="option.step ?? (integer?1:'any')" [vlCustomKeyboard]="control==='slider'?null:keyboard"
|
|
@@ -6128,14 +6130,14 @@ class NumericControlComponent extends ControlBase {
|
|
|
6128
6130
|
<button *ngIf="control==='spinner'" type="button" aria-label="Increase value" [disabled]="disabled||readonly" (click)="step(1)">+</button>
|
|
6129
6131
|
<span *ngIf="control==='slider'&&option.showValue">{{value}}</span>
|
|
6130
6132
|
<span *ngIf="option.unitLabel || option.unit">{{option.unitLabel || option.unit}}</span>
|
|
6131
|
-
</div>`, isInline: true, styles: [":host{display:block;min-width:0}.numeric-wrap{display:flex;align-items:center;gap:6px}input{min-width:0;flex:1
|
|
6133
|
+
</div>`, isInline: true, styles: [":host{display:block;min-width:0}.numeric-wrap{display:contents}.numeric-wrap--group{display:flex;align-items:center;gap:6px}.numeric-wrap--group input{min-width:0;flex:1}button{font:inherit;padding:7px 12px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }] });
|
|
6132
6134
|
}
|
|
6133
6135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumericControlComponent, decorators: [{
|
|
6134
6136
|
type: Component,
|
|
6135
|
-
args: [{ selector: 'vl-numeric-control', standalone: true, imports: [CommonModule, CustomKeyboardDirective], template: `
|
|
6136
|
-
<div class="numeric-wrap">
|
|
6137
|
+
args: [{ selector: 'vl-numeric-control', standalone: true, imports: [CommonModule, CustomKeyboardDirective, InputTextModule], template: `
|
|
6138
|
+
<div class="numeric-wrap" [class.numeric-wrap--group]="control === 'spinner' || (control === 'slider' && option.showValue) || option.unitLabel || option.unit">
|
|
6137
6139
|
<button *ngIf="control==='spinner'" type="button" aria-label="Decrease value" [disabled]="disabled||readonly" (click)="step(-1)">−</button>
|
|
6138
|
-
<input [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
|
|
6140
|
+
<input pInputText [id]="inputId" [type]="control==='slider'?'range':'text'" [value]="displayValue" [disabled]="disabled || (readonly && control==='slider')"
|
|
6139
6141
|
[readOnly]="readonly" [attr.inputmode]="keyboard==='numeric'?'decimal':inputMode" [placeholder]="placeholder"
|
|
6140
6142
|
[attr.min]="rules.minimum ?? (control==='slider'?0:null)" [attr.max]="rules.maximum ?? (control==='slider'?100:null)"
|
|
6141
6143
|
[attr.step]="option.step ?? (integer?1:'any')" [vlCustomKeyboard]="control==='slider'?null:keyboard"
|
|
@@ -6144,7 +6146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
6144
6146
|
<button *ngIf="control==='spinner'" type="button" aria-label="Increase value" [disabled]="disabled||readonly" (click)="step(1)">+</button>
|
|
6145
6147
|
<span *ngIf="control==='slider'&&option.showValue">{{value}}</span>
|
|
6146
6148
|
<span *ngIf="option.unitLabel || option.unit">{{option.unitLabel || option.unit}}</span>
|
|
6147
|
-
</div>`, styles: [":host{display:block;min-width:0}.numeric-wrap{display:flex;align-items:center;gap:6px}input{min-width:0;flex:1
|
|
6149
|
+
</div>`, styles: [":host{display:block;min-width:0}.numeric-wrap{display:contents}.numeric-wrap--group{display:flex;align-items:center;gap:6px}.numeric-wrap--group input{min-width:0;flex:1}button{font:inherit;padding:7px 12px;cursor:pointer}\n"] }]
|
|
6148
6150
|
}] });
|
|
6149
6151
|
|
|
6150
6152
|
class ToggleControlComponent extends ControlBase {
|
|
@@ -6204,12 +6206,12 @@ class SelectionControlComponent extends ControlBase {
|
|
|
6204
6206
|
<label *ngFor="let item of choices;let index=index"><input type="radio" [name]="inputId" [id]="inputId+'-'+index"
|
|
6205
6207
|
[checked]="equal(value,item.value)" [disabled]="disabled||readonly" (change)="select(item)" (blur)="blurred.emit()" />{{item.label}}</label>
|
|
6206
6208
|
</div>
|
|
6207
|
-
<p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" [ngModel]="display"
|
|
6209
|
+
<p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" styleClass="custom-autocomplete" [class]="classes(inputStyle)" [ngModel]="display"
|
|
6208
6210
|
(ngModelChange)="typed($event)" [ngModelOptions]="{standalone:true}" [suggestions]="suggestions" optionLabel="label"
|
|
6209
6211
|
(completeMethod)="complete($event)" (onSelect)="select($event.value)" (onBlur)="blurred.emit()"
|
|
6210
|
-
[dropdown]="
|
|
6212
|
+
[dropdown]="option.showDropdown !== false" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
|
|
6211
6213
|
[minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
|
|
6212
|
-
[vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, isInline: true, styles: [":host{display:block;min-width:0}
|
|
6214
|
+
[vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, isInline: true, styles: [":host{display:block;min-width:0}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i18.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
|
|
6213
6215
|
}
|
|
6214
6216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SelectionControlComponent, decorators: [{
|
|
6215
6217
|
type: Component,
|
|
@@ -6225,12 +6227,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
6225
6227
|
<label *ngFor="let item of choices;let index=index"><input type="radio" [name]="inputId" [id]="inputId+'-'+index"
|
|
6226
6228
|
[checked]="equal(value,item.value)" [disabled]="disabled||readonly" (change)="select(item)" (blur)="blurred.emit()" />{{item.label}}</label>
|
|
6227
6229
|
</div>
|
|
6228
|
-
<p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" [ngModel]="display"
|
|
6230
|
+
<p-autocomplete *ngIf="control==='combobox'||control==='autocomplete'" [inputId]="inputId" styleClass="custom-autocomplete" [class]="classes(inputStyle)" [ngModel]="display"
|
|
6229
6231
|
(ngModelChange)="typed($event)" [ngModelOptions]="{standalone:true}" [suggestions]="suggestions" optionLabel="label"
|
|
6230
6232
|
(completeMethod)="complete($event)" (onSelect)="select($event.value)" (onBlur)="blurred.emit()"
|
|
6231
|
-
[dropdown]="
|
|
6233
|
+
[dropdown]="option.showDropdown !== false" [forceSelection]="control==='combobox'&&option.allowCustom!==true"
|
|
6232
6234
|
[minLength]="option.minChars ?? 1" [placeholder]="placeholder" [disabled]="disabled||readonly"
|
|
6233
|
-
[vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, styles: [":host{display:block;min-width:0}
|
|
6235
|
+
[vlCustomKeyboard]="keyboard" appendTo="body" [ngStyle]="styles(inputStyle)"></p-autocomplete>`, styles: [":host{display:block;min-width:0}.radio-list{display:flex;gap:10px}.radio-list label{display:flex;gap:6px;align-items:center}\n"] }]
|
|
6234
6236
|
}], propDecorators: { items: [{
|
|
6235
6237
|
type: Input
|
|
6236
6238
|
}] } });
|
|
@@ -6326,7 +6328,7 @@ class TemporalControlComponent extends ControlBase {
|
|
|
6326
6328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TemporalControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6327
6329
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TemporalControlComponent, isStandalone: true, selector: "vl-temporal-control", usesInheritance: true, ngImport: i0, template: `
|
|
6328
6330
|
<div class="picker-field">
|
|
6329
|
-
<p-datepicker #calendar [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
|
|
6331
|
+
<p-datepicker #calendar styleClass="custom-datepicker" [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
|
|
6330
6332
|
[ngModelOptions]="{standalone:true}" [disabled]="disabled||readonly" [readonlyInput]="option.allowManualInput === false"
|
|
6331
6333
|
[timeOnly]="control==='time'" [showTime]="control==='datetime'" [showSeconds]="option.showSeconds ?? false"
|
|
6332
6334
|
[hourFormat]="option.hourFormat || '24'" [dateFormat]="displayFormat" [placeholder]="placeholder"
|
|
@@ -6341,13 +6343,13 @@ class TemporalControlComponent extends ControlBase {
|
|
|
6341
6343
|
<button type="button" class="picker-field__icon" [disabled]="disabled||readonly" [attr.aria-label]="control==='time'?'Open time picker':'Open calendar'"
|
|
6342
6344
|
(pointerdown)="picker.openFromIcon($event,calendar)" (click)="picker.blockIconClick($event)"><i [class]="control==='time'?'pi pi-clock':'pi pi-calendar'"></i></button>
|
|
6343
6345
|
</div>
|
|
6344
|
-
<small *ngIf="error" role="alert">{{error}}</small>`, isInline: true, styles: [":host{display:block;min-width:0}.picker-field{position:relative
|
|
6346
|
+
<small *ngIf="error" role="alert">{{error}}</small>`, isInline: true, styles: [":host{display:block;min-width:0}.picker-field{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i12.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: CustomKeyboardDirective, selector: "[vlCustomKeyboard]", inputs: ["vlCustomKeyboard"] }] });
|
|
6345
6347
|
}
|
|
6346
6348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TemporalControlComponent, decorators: [{
|
|
6347
6349
|
type: Component,
|
|
6348
6350
|
args: [{ selector: 'vl-temporal-control', standalone: true, imports: [CommonModule, FormsModule, DatePickerModule, CustomKeyboardDirective], template: `
|
|
6349
6351
|
<div class="picker-field">
|
|
6350
|
-
<p-datepicker #calendar [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
|
|
6352
|
+
<p-datepicker #calendar styleClass="custom-datepicker" [inputId]="inputId" [ngModel]="dateValue" (ngModelChange)="choose($event)"
|
|
6351
6353
|
[ngModelOptions]="{standalone:true}" [disabled]="disabled||readonly" [readonlyInput]="option.allowManualInput === false"
|
|
6352
6354
|
[timeOnly]="control==='time'" [showTime]="control==='datetime'" [showSeconds]="option.showSeconds ?? false"
|
|
6353
6355
|
[hourFormat]="option.hourFormat || '24'" [dateFormat]="displayFormat" [placeholder]="placeholder"
|
|
@@ -6362,7 +6364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
6362
6364
|
<button type="button" class="picker-field__icon" [disabled]="disabled||readonly" [attr.aria-label]="control==='time'?'Open time picker':'Open calendar'"
|
|
6363
6365
|
(pointerdown)="picker.openFromIcon($event,calendar)" (click)="picker.blockIconClick($event)"><i [class]="control==='time'?'pi pi-clock':'pi pi-calendar'"></i></button>
|
|
6364
6366
|
</div>
|
|
6365
|
-
<small *ngIf="error" role="alert">{{error}}</small>`, styles: [":host{display:block;min-width:0}.picker-field{position:relative
|
|
6367
|
+
<small *ngIf="error" role="alert">{{error}}</small>`, styles: [":host{display:block;min-width:0}.picker-field{position:relative}\n"] }]
|
|
6366
6368
|
}] });
|
|
6367
6369
|
|
|
6368
6370
|
class MediaControlComponent extends ControlBase {
|
|
@@ -6461,9 +6463,21 @@ class FieldRendererComponent {
|
|
|
6461
6463
|
}
|
|
6462
6464
|
get afterLabel() { return ['checkbox', 'switch'].includes(this.control) && (this.option.labelPosition === 'right' || this.option.postfixCaption === true); }
|
|
6463
6465
|
get innerStyle() {
|
|
6464
|
-
|
|
6465
|
-
|
|
6466
|
-
|
|
6466
|
+
// Same layout defaults as ModelComponent.getFieldInnerLayoutStyle().
|
|
6467
|
+
const layoutStyle = this.field?.layoutStyle || {};
|
|
6468
|
+
if (this.field?.layout === 'horizontal') {
|
|
6469
|
+
return {
|
|
6470
|
+
display: 'grid',
|
|
6471
|
+
gridTemplateColumns: layoutStyle.gridTemplateColumns || layoutStyle['grid-template-columns'] || '80px minmax(0, 1fr)',
|
|
6472
|
+
alignItems: layoutStyle.alignItems || 'center',
|
|
6473
|
+
gap: layoutStyle.gap || '10px',
|
|
6474
|
+
width: '100%', minWidth: '0', boxSizing: 'border-box',
|
|
6475
|
+
...layoutStyle
|
|
6476
|
+
};
|
|
6477
|
+
}
|
|
6478
|
+
return { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)',
|
|
6479
|
+
gap: layoutStyle.gap || '6px', width: '100%', minWidth: '0',
|
|
6480
|
+
boxSizing: 'border-box', ...layoutStyle };
|
|
6467
6481
|
}
|
|
6468
6482
|
get resolvedOption() {
|
|
6469
6483
|
const p = this.property;
|
|
@@ -6511,11 +6525,11 @@ class FieldRendererComponent {
|
|
|
6511
6525
|
}
|
|
6512
6526
|
blur() { this.touched = true; this.onTouched(); this.fieldBlur.emit(); }
|
|
6513
6527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FieldRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6514
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FieldRendererComponent, isStandalone: true, selector: "vl-field-renderer", inputs: { field: "field", property: "property", items: "items", translations: "translations", errorMessages: "errorMessages", showErrors: "showErrors" }, outputs: { itemSelected: "itemSelected", fieldBlur: "fieldBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n [attr.aria-disabled]=\"disabled\">\n <label *ngIf=\"label && !afterLabel\"\n [attr.for]=\"control==='radiobutton'?null:inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">\n {{label}}<span *ngIf=\"resolvedOption.required\" aria-hidden=\"true\"> *</span>\n <span *ngIf=\"option.tooltip\" class=\"help\"\n [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n </label>\n <div class=\"control-area\"\n [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n <vl-text-control\n *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n <vl-numeric-control\n *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n <vl-selection-control\n *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n </ng-container>\n <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">{{label}}</label>\n <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n class=\"error\" role=\"alert\"\n [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block
|
|
6528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FieldRendererComponent, isStandalone: true, selector: "vl-field-renderer", inputs: { field: "field", property: "property", items: "items", translations: "translations", errorMessages: "errorMessages", showErrors: "showErrors" }, outputs: { itemSelected: "itemSelected", fieldBlur: "fieldBlur" }, host: { properties: { "class.form-group": "type !== 'media'", "class.mb-3": "type !== 'media'" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n [attr.aria-disabled]=\"disabled\">\n <label *ngIf=\"label && !afterLabel\"\n [attr.for]=\"control==='radiobutton'?null:inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">\n {{label}}<span *ngIf=\"resolvedOption.required && option.showRequiredIndicator === true\" aria-hidden=\"true\"> *</span>\n <span *ngIf=\"option.tooltip\" class=\"help\"\n [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n </label>\n <div class=\"control-area\"\n [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n <vl-text-control\n *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n <vl-numeric-control\n *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n <vl-selection-control\n *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n </ng-container>\n <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">{{label}}</label>\n <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n class=\"error text-danger\" role=\"alert\"\n [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block}.help{margin-inline-start:5px;cursor:help}.control-area>label{margin-inline-start:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i17.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TextControlComponent, selector: "vl-text-control" }, { kind: "component", type: NumericControlComponent, selector: "vl-numeric-control" }, { kind: "component", type: ToggleControlComponent, selector: "vl-toggle-control" }, { kind: "component", type: SelectionControlComponent, selector: "vl-selection-control", inputs: ["items"] }, { kind: "component", type: TemporalControlComponent, selector: "vl-temporal-control" }, { kind: "component", type: MediaControlComponent, selector: "vl-media-control" }] });
|
|
6515
6529
|
}
|
|
6516
6530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FieldRendererComponent, decorators: [{
|
|
6517
6531
|
type: Component,
|
|
6518
|
-
args: [{ selector: 'vl-field-renderer', standalone: true, imports: [CommonModule, MatTooltipModule, TextControlComponent, NumericControlComponent, ToggleControlComponent, SelectionControlComponent, TemporalControlComponent, MediaControlComponent], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n [attr.aria-disabled]=\"disabled\">\n <label *ngIf=\"label && !afterLabel\"\n [attr.for]=\"control==='radiobutton'?null:inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">\n {{label}}<span *ngIf=\"resolvedOption.required\" aria-hidden=\"true\"> *</span>\n <span *ngIf=\"option.tooltip\" class=\"help\"\n [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n </label>\n <div class=\"control-area\"\n [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n <vl-text-control\n *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n <vl-numeric-control\n *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n <vl-selection-control\n *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n </ng-container>\n <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">{{label}}</label>\n <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n class=\"error\" role=\"alert\"\n [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block
|
|
6532
|
+
args: [{ selector: 'vl-field-renderer', standalone: true, imports: [CommonModule, MatTooltipModule, TextControlComponent, NumericControlComponent, ToggleControlComponent, SelectionControlComponent, TemporalControlComponent, MediaControlComponent], host: { '[class.form-group]': "type !== 'media'", '[class.mb-3]': "type !== 'media'" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRendererComponent), multi: true }, { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldRendererComponent), multi: true }], template: "<div *ngIf=\"option.visible !== false\" [ngStyle]=\"innerStyle\"\n [attr.aria-disabled]=\"disabled\">\n <label *ngIf=\"label && !afterLabel\"\n [attr.for]=\"control==='radiobutton'?null:inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">\n {{label}}<span *ngIf=\"resolvedOption.required && option.showRequiredIndicator === true\" aria-hidden=\"true\"> *</span>\n <span *ngIf=\"option.tooltip\" class=\"help\"\n [matTooltip]=\"translations[option.tooltip] || option.tooltip\" tabindex=\"0\"\n [attr.aria-label]=\"translations[option.tooltip] || option.tooltip\">\u24D8</span>\n </label>\n <div class=\"control-area\"\n [attr.aria-invalid]=\"errors && (touched||showErrors)?'true':null\"\n [attr.aria-describedby]=\"errors && (touched||showErrors)?inputId+'-error':null\">\n <div *ngIf=\"!allowed\" role=\"alert\">{{errorText}}</div>\n <span *ngIf=\"allowed && protectedValue && type!=='media'\"\n [ngStyle]=\"styles(field.scope?.style)\">{{formattedValue}}</span>\n <ng-container *ngIf=\"allowed && (!protectedValue || type==='media')\">\n <vl-text-control\n *ngIf=\"type==='string' && ['textInput','textArea','password','email'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-text-control>\n <vl-numeric-control\n *ngIf=\"['number','integer','bigdecimal'].includes(type)\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-numeric-control>\n <vl-toggle-control *ngIf=\"['checkbox','switch'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-toggle-control>\n <vl-selection-control\n *ngIf=\"['dropdown','combobox','autocomplete','radiobutton'].includes(control)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\" [items]=\"items\"\n (itemSelected)=\"itemSelected.emit($event)\"></vl-selection-control>\n <vl-temporal-control *ngIf=\"['date','time','datetime'].includes(type)\"\n [value]=\"value\" [property]=\"property\" [option]=\"resolvedOption\"\n [control]=\"control\" [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-temporal-control>\n <vl-media-control *ngIf=\"type==='media'\" [value]=\"value\"\n [property]=\"property\" [option]=\"resolvedOption\" [control]=\"control\"\n [inputId]=\"inputId\"\n [inputStyle]=\"field.scope?.style\" [disabled]=\"disabled\"\n [readonly]=\"readonly\" [keyboard]=\"keyboard\"\n (changed)=\"change($event)\" (blurred)=\"blur()\"></vl-media-control>\n </ng-container>\n <label *ngIf=\"label && afterLabel\" [attr.for]=\"inputId\"\n [ngStyle]=\"styles(field.label?.style)\"\n [class]=\"classes(field.label?.style)\">{{label}}</label>\n <small *ngIf=\"errors && (touched||showErrors)\" [id]=\"inputId+'-error'\"\n class=\"error text-danger\" role=\"alert\"\n [ngStyle]=\"styles(field.validation?.style)\">{{errorText}}</small>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.control-area{min-width:0}.error{display:block}.help{margin-inline-start:5px;cursor:help}.control-area>label{margin-inline-start:8px}\n"] }]
|
|
6519
6533
|
}], propDecorators: { field: [{
|
|
6520
6534
|
type: Input
|
|
6521
6535
|
}], property: [{
|