@vgip/meta-ui 2.2.0 → 2.3.0
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.
|
@@ -234,6 +234,14 @@ const referenceFieldNormalizer = (field) => {
|
|
|
234
234
|
else {
|
|
235
235
|
f.reference = field.reference;
|
|
236
236
|
}
|
|
237
|
+
if (f.reference instanceof Array) {
|
|
238
|
+
for (const r of f.reference) { // not using forEach on purpose as it is based on callback functions execution
|
|
239
|
+
if (r.defaultValue) {
|
|
240
|
+
r.default = r.defaultValue; // nomralize to V3 protocol naming conventions
|
|
241
|
+
delete r.defaultValue;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
237
245
|
}
|
|
238
246
|
else if (field.references) {
|
|
239
247
|
f.references = field.references;
|
|
@@ -1023,10 +1031,10 @@ class MetaHttpClient {
|
|
|
1023
1031
|
};
|
|
1024
1032
|
return options;
|
|
1025
1033
|
}
|
|
1026
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1027
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1034
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaHttpClient, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1035
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaHttpClient, providedIn: 'root' }); }
|
|
1028
1036
|
}
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaHttpClient, decorators: [{
|
|
1030
1038
|
type: Injectable,
|
|
1031
1039
|
args: [{
|
|
1032
1040
|
providedIn: 'root'
|
|
@@ -1161,10 +1169,10 @@ class MetaResourceService {
|
|
|
1161
1169
|
return this.httpClient.post(`${this.baseResourceUrl}`, payload);
|
|
1162
1170
|
}
|
|
1163
1171
|
}
|
|
1164
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1165
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResourceService, deps: [{ token: MetaHttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1173
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResourceService, providedIn: 'root' }); }
|
|
1166
1174
|
}
|
|
1167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResourceService, decorators: [{
|
|
1168
1176
|
type: Injectable,
|
|
1169
1177
|
args: [{
|
|
1170
1178
|
providedIn: 'root'
|
|
@@ -1210,10 +1218,10 @@ class MetaContextService {
|
|
|
1210
1218
|
delete this.onClick2Dial;
|
|
1211
1219
|
}
|
|
1212
1220
|
}
|
|
1213
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1214
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1222
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaContextService, providedIn: 'root' }); }
|
|
1215
1223
|
}
|
|
1216
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaContextService, decorators: [{
|
|
1217
1225
|
type: Injectable,
|
|
1218
1226
|
args: [{
|
|
1219
1227
|
providedIn: 'root'
|
|
@@ -1291,10 +1299,10 @@ class MetaMsgService {
|
|
|
1291
1299
|
}
|
|
1292
1300
|
}
|
|
1293
1301
|
}
|
|
1294
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1295
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1302
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaMsgService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1303
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaMsgService, providedIn: 'root' }); }
|
|
1296
1304
|
}
|
|
1297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaMsgService, decorators: [{
|
|
1298
1306
|
type: Injectable,
|
|
1299
1307
|
args: [{
|
|
1300
1308
|
providedIn: 'root'
|
|
@@ -1405,10 +1413,10 @@ class MetaReferenceService {
|
|
|
1405
1413
|
});
|
|
1406
1414
|
return modalObservable;
|
|
1407
1415
|
}
|
|
1408
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1409
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaReferenceService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1417
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaReferenceService, providedIn: 'root' }); }
|
|
1410
1418
|
}
|
|
1411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaReferenceService, decorators: [{
|
|
1412
1420
|
type: Injectable,
|
|
1413
1421
|
args: [{
|
|
1414
1422
|
providedIn: 'root'
|
|
@@ -1731,10 +1739,10 @@ class FieldAbstract {
|
|
|
1731
1739
|
}
|
|
1732
1740
|
});
|
|
1733
1741
|
}
|
|
1734
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1735
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1742
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1743
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: FieldAbstract, isStandalone: true, ngImport: i0 }); }
|
|
1736
1744
|
}
|
|
1737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldAbstract, decorators: [{
|
|
1738
1746
|
type: Directive
|
|
1739
1747
|
}] });
|
|
1740
1748
|
class MetaElem {
|
|
@@ -1812,10 +1820,10 @@ class MetaFieldContentDirective {
|
|
|
1812
1820
|
constructor(viewContainerRef) {
|
|
1813
1821
|
this.viewContainerRef = viewContainerRef;
|
|
1814
1822
|
}
|
|
1815
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1816
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1823
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaFieldContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1824
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MetaFieldContentDirective, isStandalone: false, selector: "[metaFieldContent]", ngImport: i0 }); }
|
|
1817
1825
|
}
|
|
1818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaFieldContentDirective, decorators: [{
|
|
1819
1827
|
type: Directive,
|
|
1820
1828
|
args: [{
|
|
1821
1829
|
selector: '[metaFieldContent]',
|
|
@@ -1830,6 +1838,8 @@ class MetaField extends FieldAbstract {
|
|
|
1830
1838
|
this.onChange = new EventEmitter();
|
|
1831
1839
|
// eslint-disable-next-line
|
|
1832
1840
|
this.onLeave = new EventEmitter();
|
|
1841
|
+
// eslint-disable-next-line
|
|
1842
|
+
this.onRefTypeChange = new EventEmitter();
|
|
1833
1843
|
}
|
|
1834
1844
|
async ngOnInit() {
|
|
1835
1845
|
const component = await FMAP(this.meta.type);
|
|
@@ -1848,6 +1858,7 @@ class MetaField extends FieldAbstract {
|
|
|
1848
1858
|
field.scope = this.scope;
|
|
1849
1859
|
field.elementRef = this.el;
|
|
1850
1860
|
field.onChange = this.onChange;
|
|
1861
|
+
field.onRefTypeChange = this.onRefTypeChange;
|
|
1851
1862
|
field.onLeave = this.onLeave;
|
|
1852
1863
|
field.preview = this.preview;
|
|
1853
1864
|
field.theme = this.theme;
|
|
@@ -1860,10 +1871,10 @@ class MetaField extends FieldAbstract {
|
|
|
1860
1871
|
enumerable: false
|
|
1861
1872
|
});
|
|
1862
1873
|
}
|
|
1863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaField, isStandalone: false, selector: "vgip-meta-field", inputs: { meta: "meta", parent: "parent", integrationCode: "integrationCode", resourceType: "resourceType", index: "index", scope: "scope", preview: "preview", theme: "theme", overlayContainer: "overlayContainer", delegate: "delegate" }, outputs: { onChange: "onChange", onLeave: "onLeave" }, viewQueries: [{ propertyName: "fieldContent", first: true, predicate: MetaFieldContentDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<ng-template metaFieldContent>Loading</ng-template>', isInline: true, styles: [":host ::ng-deep label.wrapper{padding:0;pointer-events:initial;position:initial;top:initial;transition:none}@media only screen and (max-width:575px){:host ::ng-deep .hidden-mobile{display:none}}@media only screen and (min-width:576px){:host ::ng-deep .hidden-desktop{display:none}}:host ::ng-deep .Vlt-form__element>.Vlt-label,:host ::ng-deep .Vlt-form__element>label>.Vlt-label{margin-top:-6px}:host ::ng-deep .Vlt-form__element .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{color:var(--vgip-meta-input-color)}@media(hover:none){:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{font-size:16px}}:host ::ng-deep .Vlt-form__element .Vlt-input input::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-select select::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea::placeholder{color:var(--vgip-meta-input-placeholder-color)}:host ::ng-deep .Vlt-form__element label{color:var(--vgip-meta-input-label-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled{background:var(--vgip-meta-input-disabled-bg-color);border-color:var(--vgip-meta-input-disabled-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon .active{border-color:var(--vgip-meta-input-active-border-color)}:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-select select:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-custom-select__input:focus{border-color:#f25a6b}:host ::ng-deep .Vlt-dropdown__link{padding:12px}:host ::ng-deep .Vlt-dropdown__link svg{margin-left:0}:host ::ng-deep .Vlt-dropdown__link small{line-height:inherit}:host ::ng-deep .Vlt-dropdown__link.Vlt-dropdown__link--selected:after{width:20px;top:14px;background:var(--vgip-meta-dropdown-check-icon) no-repeat right center;background-size:contain}:host ::ng-deep .Vlt-dropdown__block{padding:2px 16px}:host ::ng-deep .meta-field-reference .Vlt-dropdown__link.has-type.Vlt-dropdown__link--selected:after{position:initial}:host ::ng-deep .Vlt-dropdown__panel__content{background:var(--vgip-meta-dropdown-bg-color);box-shadow:var(--vgip-meta-dropdown-shadow)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__link,:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__block{color:var(--vgip-meta-input-color)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar{width:8px}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}:host ::ng-deep .Vlt-dropdown__panel__content.suggestions{background:var(--vgip-meta-suggestions-bg-color)}:host ::ng-deep .Vlt-dropdown__panel{z-index:999}:host ::ng-deep .Vlt-dropdown__panel__content--scroll-area{padding:0}:host ::ng-deep .Vlt-composite__append--icon{bottom:0;height:initial}:host ::ng-deep .search-progress{display:block;position:relative;width:100%;height:3px;margin-top:-3px;padding-top:0!important;margin-bottom:0!important}:host ::ng-deep .search-progress .container{display:block;position:relative;overflow:hidden;width:100%;height:3px;transform:translate(0) scale(1)}:host ::ng-deep .search-progress .container .bar{position:absolute;left:0;top:0;bottom:0;width:100%;height:3px;border-radius:50%;transition:all .3s linear;animation:query .9s infinite cubic-bezier(.3,.6,.6,1)}@keyframes query{0%{opacity:1;transform:translate(35%) scaleX(.3)}to{opacity:0;transform:translate(-50%) scaleX(0)}}::ng-deep vgip-meta-field.shown vgip-meta-field{display:initial}::ng-deep vgip-meta-field .vgip-meta-field-preview{display:flex;flex-direction:row;padding-bottom:5px;padding-top:5px;margin-left:10px;border-bottom:1px solid #e7ebee}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-label{flex:1 1 100%;max-width:20%;max-height:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:2px}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-value{min-width:0;width:0;box-sizing:border-box;flex:1;font-weight:700}\n"], dependencies: [{ kind: "directive", type: MetaFieldContentDirective, selector: "[metaFieldContent]" }] }); }
|
|
1874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaField, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: MetaField, isStandalone: false, selector: "vgip-meta-field", inputs: { meta: "meta", parent: "parent", integrationCode: "integrationCode", resourceType: "resourceType", index: "index", scope: "scope", preview: "preview", theme: "theme", overlayContainer: "overlayContainer", delegate: "delegate" }, outputs: { onChange: "onChange", onLeave: "onLeave", onRefTypeChange: "onRefTypeChange" }, viewQueries: [{ propertyName: "fieldContent", first: true, predicate: MetaFieldContentDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<ng-template metaFieldContent>Loading</ng-template>', isInline: true, styles: [":host ::ng-deep label.wrapper{padding:0;pointer-events:initial;position:initial;top:initial;transition:none}@media only screen and (max-width:575px){:host ::ng-deep .hidden-mobile{display:none}}@media only screen and (min-width:576px){:host ::ng-deep .hidden-desktop{display:none}}:host ::ng-deep .Vlt-form__element>.Vlt-label,:host ::ng-deep .Vlt-form__element>label>.Vlt-label{margin-top:-6px}:host ::ng-deep .Vlt-form__element .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{color:var(--vgip-meta-input-color)}@media(hover:none){:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{font-size:16px}}:host ::ng-deep .Vlt-form__element .Vlt-input input::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-select select::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea::placeholder{color:var(--vgip-meta-input-placeholder-color)}:host ::ng-deep .Vlt-form__element label{color:var(--vgip-meta-input-label-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled{background:var(--vgip-meta-input-disabled-bg-color);border-color:var(--vgip-meta-input-disabled-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon .active{border-color:var(--vgip-meta-input-active-border-color)}:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-select select:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-custom-select__input:focus{border-color:#f25a6b}:host ::ng-deep .Vlt-dropdown__link{padding:12px}:host ::ng-deep .Vlt-dropdown__link svg{margin-left:0}:host ::ng-deep .Vlt-dropdown__link small{line-height:inherit}:host ::ng-deep .Vlt-dropdown__link.Vlt-dropdown__link--selected:after{width:20px;top:14px;background:var(--vgip-meta-dropdown-check-icon) no-repeat right center;background-size:contain}:host ::ng-deep .Vlt-dropdown__block{padding:2px 16px}:host ::ng-deep .meta-field-reference .Vlt-dropdown__link.has-type.Vlt-dropdown__link--selected:after{position:initial}:host ::ng-deep .Vlt-dropdown__panel__content{background:var(--vgip-meta-dropdown-bg-color);box-shadow:var(--vgip-meta-dropdown-shadow)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__link,:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__block{color:var(--vgip-meta-input-color)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar{width:8px}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}:host ::ng-deep .Vlt-dropdown__panel__content.suggestions{background:var(--vgip-meta-suggestions-bg-color)}:host ::ng-deep .Vlt-dropdown__panel{z-index:999}:host ::ng-deep .Vlt-dropdown__panel__content--scroll-area{padding:0}:host ::ng-deep .Vlt-composite__append--icon{bottom:0;height:initial}:host ::ng-deep .search-progress{display:block;position:relative;width:100%;height:3px;margin-top:-3px;padding-top:0!important;margin-bottom:0!important}:host ::ng-deep .search-progress .container{display:block;position:relative;overflow:hidden;width:100%;height:3px;transform:translate(0) scale(1)}:host ::ng-deep .search-progress .container .bar{position:absolute;left:0;top:0;bottom:0;width:100%;height:3px;border-radius:50%;transition:all .3s linear;animation:query .9s infinite cubic-bezier(.3,.6,.6,1)}@keyframes query{0%{opacity:1;transform:translate(35%) scaleX(.3)}to{opacity:0;transform:translate(-50%) scaleX(0)}}::ng-deep vgip-meta-field.shown vgip-meta-field{display:initial}::ng-deep vgip-meta-field .vgip-meta-field-preview{display:flex;flex-direction:row;padding-bottom:5px;padding-top:5px;margin-left:10px;border-bottom:1px solid #e7ebee}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-label{flex:1 1 100%;max-width:20%;max-height:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:2px}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-value{min-width:0;width:0;box-sizing:border-box;flex:1;font-weight:700}\n"], dependencies: [{ kind: "directive", type: MetaFieldContentDirective, selector: "[metaFieldContent]" }] }); }
|
|
1865
1876
|
}
|
|
1866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaField, decorators: [{
|
|
1867
1878
|
type: Component,
|
|
1868
1879
|
args: [{ selector: 'vgip-meta-field', template: '<ng-template metaFieldContent>Loading</ng-template>', standalone: false, styles: [":host ::ng-deep label.wrapper{padding:0;pointer-events:initial;position:initial;top:initial;transition:none}@media only screen and (max-width:575px){:host ::ng-deep .hidden-mobile{display:none}}@media only screen and (min-width:576px){:host ::ng-deep .hidden-desktop{display:none}}:host ::ng-deep .Vlt-form__element>.Vlt-label,:host ::ng-deep .Vlt-form__element>label>.Vlt-label{margin-top:-6px}:host ::ng-deep .Vlt-form__element .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{color:var(--vgip-meta-input-color)}@media(hover:none){:host ::ng-deep .Vlt-form__element .Vlt-input input,:host ::ng-deep .Vlt-form__element .Vlt-select select,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea{font-size:16px}}:host ::ng-deep .Vlt-form__element .Vlt-input input::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-select select::placeholder,:host ::ng-deep .Vlt-form__element .Vlt-textarea textarea::placeholder{color:var(--vgip-meta-input-placeholder-color)}:host ::ng-deep .Vlt-form__element label{color:var(--vgip-meta-input-label-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:disabled,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:disabled{background:var(--vgip-meta-input-disabled-bg-color);border-color:var(--vgip-meta-input-disabled-border-color)}:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-form-error-style .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-input input.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-select select.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-textarea textarea.ng-untouched:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-custom-select__input:invalid .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-radio input.ng-untouched:invalid+.Vlt-checkbox__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-radio__icon .active,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:hover,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon:focus,:host ::ng-deep .Vlt-form__element:not(.Vlt-form__element--error) .Vlt-checkbox input.ng-untouched:invalid+.Vlt-checkbox__icon .active{border-color:var(--vgip-meta-input-active-border-color)}:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-input input:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-select select:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-textarea textarea:focus,:host ::ng-deep .Vlt-form__element.Vlt-form__element--error .Vlt-custom-select__input:focus{border-color:#f25a6b}:host ::ng-deep .Vlt-dropdown__link{padding:12px}:host ::ng-deep .Vlt-dropdown__link svg{margin-left:0}:host ::ng-deep .Vlt-dropdown__link small{line-height:inherit}:host ::ng-deep .Vlt-dropdown__link.Vlt-dropdown__link--selected:after{width:20px;top:14px;background:var(--vgip-meta-dropdown-check-icon) no-repeat right center;background-size:contain}:host ::ng-deep .Vlt-dropdown__block{padding:2px 16px}:host ::ng-deep .meta-field-reference .Vlt-dropdown__link.has-type.Vlt-dropdown__link--selected:after{position:initial}:host ::ng-deep .Vlt-dropdown__panel__content{background:var(--vgip-meta-dropdown-bg-color);box-shadow:var(--vgip-meta-dropdown-shadow)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__link,:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__block{color:var(--vgip-meta-input-color)}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar{width:8px}:host ::ng-deep .Vlt-dropdown__panel__content .Vlt-dropdown__scroll::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}:host ::ng-deep .Vlt-dropdown__panel__content.suggestions{background:var(--vgip-meta-suggestions-bg-color)}:host ::ng-deep .Vlt-dropdown__panel{z-index:999}:host ::ng-deep .Vlt-dropdown__panel__content--scroll-area{padding:0}:host ::ng-deep .Vlt-composite__append--icon{bottom:0;height:initial}:host ::ng-deep .search-progress{display:block;position:relative;width:100%;height:3px;margin-top:-3px;padding-top:0!important;margin-bottom:0!important}:host ::ng-deep .search-progress .container{display:block;position:relative;overflow:hidden;width:100%;height:3px;transform:translate(0) scale(1)}:host ::ng-deep .search-progress .container .bar{position:absolute;left:0;top:0;bottom:0;width:100%;height:3px;border-radius:50%;transition:all .3s linear;animation:query .9s infinite cubic-bezier(.3,.6,.6,1)}@keyframes query{0%{opacity:1;transform:translate(35%) scaleX(.3)}to{opacity:0;transform:translate(-50%) scaleX(0)}}::ng-deep vgip-meta-field.shown vgip-meta-field{display:initial}::ng-deep vgip-meta-field .vgip-meta-field-preview{display:flex;flex-direction:row;padding-bottom:5px;padding-top:5px;margin-left:10px;border-bottom:1px solid #e7ebee}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-label{flex:1 1 100%;max-width:20%;max-height:100%;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:2px}::ng-deep vgip-meta-field .vgip-meta-field-preview .vgip-meta-field-value{min-width:0;width:0;box-sizing:border-box;flex:1;font-weight:700}\n"] }]
|
|
1869
1880
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
|
|
@@ -1890,6 +1901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1890
1901
|
type: Output
|
|
1891
1902
|
}], onLeave: [{
|
|
1892
1903
|
type: Output
|
|
1904
|
+
}], onRefTypeChange: [{
|
|
1905
|
+
type: Output
|
|
1893
1906
|
}], fieldContent: [{
|
|
1894
1907
|
type: ViewChild,
|
|
1895
1908
|
args: [MetaFieldContentDirective, { static: true }]
|
|
@@ -2075,12 +2088,12 @@ class MetaLayout {
|
|
|
2075
2088
|
this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
|
|
2076
2089
|
}
|
|
2077
2090
|
}
|
|
2078
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }, { token: MetaMsgService }, { token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2092
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MetaLayout, isStandalone: false, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme", delegate: "delegate" }, usesOnChanges: true, ngImport: i0, template: "@for (section of meta.sections; track section) {\n <div class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n @if (section.label) {\n <h5 class=\"Vlt-section__title\">{{section.label}}</h5>\n }\n <div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n @if (section.description) {\n <small class=\"Vlt-form__element__hint\">{{section.description}}</small>\n }\n <div>\n @for (field of section.fields; track field) {\n @if (!field.$hidden && (showAll || section.visible || !field.$optional)) {\n <vgip-meta-field [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme' [delegate]='delegate'></vgip-meta-field>\n }\n }\n </div>\n </div>\n </div>\n}\n@if (isPersistedResource && meta.children && preview) {\n <div>\n @for (child of meta.children; track child) {\n <div>\n <h5 class='Vlt-children__title'>\n <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n {{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n </h5>\n @for (c of resource[child.name]; track c) {\n <div style='position: relative;'>\n <div class=\"Vlt-card Vlt-bg-white\">\n <div class=\"Vlt-card__content Vlt-btn-on-hover\">\n <h5>{{childResourceCardLabel(c)}}</h5>\n <div style='font-size: 12px; line-height: 16px;'>\n Created: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n Edited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n </div>\n <div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n <div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n @if (c._vgis.externalLink) {\n <a attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n }\n <button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n </div>\n </div>\n </div>\n </div>\n }\n <button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n </button>\n </div>\n }\n </div>\n}\n@if (!(meta.oneTimeOptional && showAll)) {\n <div [ngClass]='{ centered: !meta.oneTimeOptional }'>\n @if (!preview && optionalFieldsCount) {\n <button type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n <svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n {{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n </button>\n }\n </div>\n}\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave", "onRefTypeChange"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
|
|
2080
2093
|
}
|
|
2081
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2094
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaLayout, decorators: [{
|
|
2082
2095
|
type: Component,
|
|
2083
|
-
args: [{ selector: "vgip-meta-layout", standalone: false, template: "
|
|
2096
|
+
args: [{ selector: "vgip-meta-layout", standalone: false, template: "@for (section of meta.sections; track section) {\n <div class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n @if (section.label) {\n <h5 class=\"Vlt-section__title\">{{section.label}}</h5>\n }\n <div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n @if (section.description) {\n <small class=\"Vlt-form__element__hint\">{{section.description}}</small>\n }\n <div>\n @for (field of section.fields; track field) {\n @if (!field.$hidden && (showAll || section.visible || !field.$optional)) {\n <vgip-meta-field [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme' [delegate]='delegate'></vgip-meta-field>\n }\n }\n </div>\n </div>\n </div>\n}\n@if (isPersistedResource && meta.children && preview) {\n <div>\n @for (child of meta.children; track child) {\n <div>\n <h5 class='Vlt-children__title'>\n <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n {{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n </h5>\n @for (c of resource[child.name]; track c) {\n <div style='position: relative;'>\n <div class=\"Vlt-card Vlt-bg-white\">\n <div class=\"Vlt-card__content Vlt-btn-on-hover\">\n <h5>{{childResourceCardLabel(c)}}</h5>\n <div style='font-size: 12px; line-height: 16px;'>\n Created: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n Edited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n </div>\n <div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n <div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n @if (c._vgis.externalLink) {\n <a attr.href='{{c._vgis.externalLink}}' target='_blank' rel='noopener' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n }\n <button type='button' (click)='openChild(child, c)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\"><svg style='margin-left: 0; margin-right: 0;'><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ child.reference.editable ? 'edit' : 'eye-negative' }}\"/></svg></button>\n </div>\n </div>\n </div>\n </div>\n }\n <button style='width: 100%; margin-top: 0; max-width: 100%;' type='button' (click)='openChild(child)' class=\"Vlt-btn Vlt-btn--small Vlt-btn--secondary\" [disabled]='child.creatable === false'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n </button>\n </div>\n }\n </div>\n}\n@if (!(meta.oneTimeOptional && showAll)) {\n <div [ngClass]='{ centered: !meta.oneTimeOptional }'>\n @if (!preview && optionalFieldsCount) {\n <button type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n <svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n {{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n </button>\n }\n </div>\n}\n", styles: ["vgip-meta-field{display:none}vgip-meta-field.shown{display:initial}.Vlt-section__title{line-height:14px;padding:16px 16px 14px 3px;margin:-9px -1px 8px;background-color:var(--vgip-meta-resource-bg-color);color:var(--vgip-meta-resource-color);position:sticky;top:-9px;z-index:3;border-bottom:1px solid var(--vgip-meta-separator-color)}.Vlt-section{margin:0;padding-bottom:8px;display:none}.Vlt-section.shown{display:block}.Vlt-btn.vlt-add-child:hover{transform:scale(1.02)}.for-preview{margin-top:-6px}.Vlt-card{margin-bottom:16px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}button.more-button:focus{font-weight:700}.centered{text-align:center}.Vlt-btn--link{color:var(--vgip-meta-link-color)}.Vlt-btn--link:hover{color:var(--vgip-meta-link-hover-color)}.Vlt-btn--link svg{fill:var(--vgip-meta-link-color)}\n"] }]
|
|
2084
2097
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }, { type: MetaMsgService }, { type: MetaContextService }], propDecorators: { meta: [{
|
|
2085
2098
|
type: Input
|
|
2086
2099
|
}], resource: [{
|
|
@@ -2117,10 +2130,10 @@ class MetaAutofocusDirective {
|
|
|
2117
2130
|
}, 300);
|
|
2118
2131
|
}
|
|
2119
2132
|
}
|
|
2120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2121
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2134
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MetaAutofocusDirective, isStandalone: false, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 }); }
|
|
2122
2135
|
}
|
|
2123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
|
|
2124
2137
|
type: Directive,
|
|
2125
2138
|
args: [{
|
|
2126
2139
|
// eslint-disable-next-line
|
|
@@ -2646,12 +2659,12 @@ class MetaResource {
|
|
|
2646
2659
|
extractPreserveSectionFields(s);
|
|
2647
2660
|
}
|
|
2648
2661
|
}
|
|
2649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2662
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResource, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaContextService }, { token: MetaMsgService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2663
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MetaResource, isStandalone: false, selector: "vgip-meta-resource", inputs: { resource: "resource", model: "model", metaResourceServiceDelegated: "metaResourceServiceDelegated", theme: "theme", editMode: "editMode" }, outputs: { done: "done", resourceChange: "resourceChange" }, viewQueries: [{ propertyName: "resourceForm", first: true, predicate: ["resourceForm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (generalError) {\n <div class=\"Vlt-callout Vlt-callout--critical\" style='overflow: auto; margin: 20px;'>\n <i></i>\n <div class=\"Vlt-callout__content\">\n <p>{{generalError}}</p>\n </div>\n </div>\n}\n@if (!meta) {\n <div class=\"Vlt-progress\">\n <div class=\"Vlt-progress__bar\" [ngClass]=\"{ loading: metaLoading }\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuetext=\"Loading Metadata\" aria-valuemax=\"100\"></div>\n </div>\n}\n@if (meta && !generalError) {\n <form [vgipMetaFormAutofocus]='!resource || !resource.externalId' #resourceForm=\"ngForm\" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' (change)='onFormChange()' novalidate>\n <div class='form-content' style='overflow: hidden;'>\n <div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n <i></i>\n <div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n <p>There is a problem with one or more fields</p>\n @if (formErrors) {\n <small style='font-weight: 600; font-size: 1.0em;'>{{ formErrors.message || formErrors }}</small>\n }\n </div>\n <button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n </div>\n <div class=\"Vlt-card__content\" style='min-height: 40px;'>\n @if (edit) {\n <vgip-meta-layout [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n }\n @if (!edit) {\n <vgip-meta-layout [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit' [attr.data-vrn]='resourceVrn'></vgip-meta-layout>\n }\n </div>\n </div>\n <div class=\"Vlt-card__footer\">\n <button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n {{ edit ? 'Cancel' : 'Close' }}\n </button>\n @if (edit) {\n <button class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n {{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n </button>\n }\n @if (!edit && isEditable) {\n <button (click)='setEditMode()' [disabled]='!isEditable' class=\"Vlt-btn Vlt-btn--app Vlt-btn--primary\" type='button' aria-label='Edit'>\n Edit\n </button>\n }\n <div style='margin-right: 8px; flex: 1;'>\n @if (meta.availableLayouts && meta.availableLayouts.length) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" style='padding: 0; margin: -8px -18px -8px 0;'>\n <div class=\"Vlt-select\">\n <label style='all: inherit;'>\n <select style='border: 0; margin-top: 3px; background: transparent;' (change)='changeLayout()' [(ngModel)]='currentLayoutId' [ngModelOptions]='{ standalone: true }' [disabled]='lockedLayoutId === currentLayoutId'>\n <option selected disabled>Select layout</option>\n @for (layout of meta.availableLayouts; track layout) {\n <option [ngValue]='layout.id'>{{layout.name}}</option>\n }\n </select>\n <label>Layout</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n </div>\n </div>\n }\n </div>\n <div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n <div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n <div class=\"Vlt-dropdown__panel__content\">\n <a href='#' class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true, $event)'>\n <div>\n <svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg> Refresh metadata\n </div>\n </a>\n </div>\n </div>\n <div class=\"Vlt-dropdown__trigger\">\n <button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n <svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </form>\n}\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n <div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n <div class=\"Vlt-spinner\"></div>\n </div>\n</div>\n", styles: [":host{flex:1;display:flex;flex-direction:column;min-height:0;color:var(--vgip-meta-resource-color)}.Vlt-callout--banner{-webkit-box-pack:initial;justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-spinner:before,.Vlt-spinner:after{border:6px solid #616266;border-color:#616266 transparent transparent}.Vlt-card__content{padding:8px 8px 8px 16px;display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:scroll;overflow-x:hidden;background-color:var(--vgip-meta-resource-bg-color)}@media(hover:none){.Vlt-card__content{padding-right:16px}}.Vlt-card__content::-webkit-scrollbar{width:8px}.Vlt-card__content::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-card__footer{background:var(--vgip-meta-resource-bar-color);border-top:1px solid var(--vgip-meta-separator-color);display:flex;flex-direction:row;margin:16px -24px -24px;padding:8px 8px 8px 16px;box-shadow:0 0 4px #00000040;z-index:1}.Vlt-card__footer .Vlt-select select{color:var(--vgip-meta-input-color)}.Vlt-card__footer .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-card__footer .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon)}.Vlt-card__footer .resource-menu .Vlt-icon:not(:hover){fill:var(--vgip-meta-input-label-color)}.Vlt-card__footer button.Vlt-btn--secondary{border:none}.Vlt-card__footer button.Vlt-btn--secondary:not([type=submit]){color:var(--vgip-meta-input-color)}.Vlt-card__footer button.Vlt-btn--secondary{box-shadow:inset 0 0 0 1px var(--vgip-meta-button-border-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover[type=submit]{background-color:var(--vgip-meta-submit-hover-bg-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--vgip-meta-input-accent-color)}.Vlt-progress{margin:0;position:sticky}.Vlt-progress .Vlt-progress__bar{width:0;transition:width 5s}.Vlt-progress .Vlt-progress__bar.loading{width:100%}form{border-radius:6px;padding:24px;display:flex;flex-direction:column;min-height:0;flex:1}form .form-content{margin:-24px -24px -16px;padding-bottom:0;flex:1;display:flex;flex-direction:column}.busy-mask{position:absolute;inset:0;background:#00000052;opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MetaLayout, selector: "vgip-meta-layout", inputs: ["meta", "resource", "integration", "type", "preview", "theme", "delegate"] }, { kind: "directive", type: MetaAutofocusDirective, selector: "[vgipMetaFormAutofocus]", inputs: ["vgipMetaFormAutofocus"] }] }); }
|
|
2651
2664
|
}
|
|
2652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResource, decorators: [{
|
|
2653
2666
|
type: Component,
|
|
2654
|
-
args: [{ selector: 'vgip-meta-resource', standalone: false, template: "<div
|
|
2667
|
+
args: [{ selector: 'vgip-meta-resource', standalone: false, template: "@if (generalError) {\n <div class=\"Vlt-callout Vlt-callout--critical\" style='overflow: auto; margin: 20px;'>\n <i></i>\n <div class=\"Vlt-callout__content\">\n <p>{{generalError}}</p>\n </div>\n </div>\n}\n@if (!meta) {\n <div class=\"Vlt-progress\">\n <div class=\"Vlt-progress__bar\" [ngClass]=\"{ loading: metaLoading }\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuetext=\"Loading Metadata\" aria-valuemax=\"100\"></div>\n </div>\n}\n@if (meta && !generalError) {\n <form [vgipMetaFormAutofocus]='!resource || !resource.externalId' #resourceForm=\"ngForm\" [name]='resource.resourceType' (ngSubmit)='submit(resourceForm)' (change)='onFormChange()' novalidate>\n <div class='form-content' style='overflow: hidden;'>\n <div [ngClass]=\"{ 'Vlt-callout--dismissed': !formErrors }\" class=\"Vlt-callout Vlt-callout--banner Vlt-callout--critical\">\n <i></i>\n <div class=\"Vlt-callout__content\" style=\"margin-top: auto;\">\n <p>There is a problem with one or more fields</p>\n @if (formErrors) {\n <small style='font-weight: 600; font-size: 1.0em;'>{{ formErrors.message || formErrors }}</small>\n }\n </div>\n <button type='button' class=\"Vlt-callout__dismiss\" (click)='clearFormErrors()' aria-label=\"Dismiss\"></button>\n </div>\n <div class=\"Vlt-card__content\" style='min-height: 40px;'>\n @if (edit) {\n <vgip-meta-layout [meta]='meta.layout' [resource]='model' [preview]='false' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit'></vgip-meta-layout>\n }\n @if (!edit) {\n <vgip-meta-layout [meta]='meta.layout' [resource]='model' [preview]='true' [integration]='meta.integration' [type]='resource.resourceType' theme='inherit' [attr.data-vrn]='resourceVrn'></vgip-meta-layout>\n }\n </div>\n </div>\n <div class=\"Vlt-card__footer\">\n <button class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--outline\" type='button' aria-label='Cancel' (click)='close()'>\n {{ edit ? 'Cancel' : 'Close' }}\n </button>\n @if (edit) {\n <button class=\"Vlt-btn Vlt-btn--app\" [ngClass]=\"{ 'Vlt-btn--primary': isPersistent, 'Vlt-btn--secondary': !isPersistent }\" type='submit'>\n {{ (resource && resource.externalId) ? 'Update' : 'Create' }}\n </button>\n }\n @if (!edit && isEditable) {\n <button (click)='setEditMode()' [disabled]='!isEditable' class=\"Vlt-btn Vlt-btn--app Vlt-btn--primary\" type='button' aria-label='Edit'>\n Edit\n </button>\n }\n <div style='margin-right: 8px; flex: 1;'>\n @if (meta.availableLayouts && meta.availableLayouts.length) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" style='padding: 0; margin: -8px -18px -8px 0;'>\n <div class=\"Vlt-select\">\n <label style='all: inherit;'>\n <select style='border: 0; margin-top: 3px; background: transparent;' (change)='changeLayout()' [(ngModel)]='currentLayoutId' [ngModelOptions]='{ standalone: true }' [disabled]='lockedLayoutId === currentLayoutId'>\n <option selected disabled>Select layout</option>\n @for (layout of meta.availableLayouts; track layout) {\n <option [ngValue]='layout.id'>{{layout.name}}</option>\n }\n </select>\n <label>Layout</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n </div>\n </div>\n }\n </div>\n <div class=\"Vlt-dropdown resource-menu\" [ngClass]=\"{ 'Vlt-dropdown--expanded': resourceMenuVisible }\" style='margin-left: 2px;'>\n <div class=\"Vlt-dropdown__panel\" style='bottom: 40px; right: -4px; top: initial;'>\n <div class=\"Vlt-dropdown__panel__content\">\n <a href='#' class=\"Vlt-dropdown__link\" (click)='loadMetadata(currentLayoutId, true, $event)'>\n <div>\n <svg class='Vlt-icon Vlt-icon--smaller'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-refresh\"/></svg> Refresh metadata\n </div>\n </a>\n </div>\n </div>\n <div class=\"Vlt-dropdown__trigger\">\n <button type='button' (click)='openResourceMenu()' class=\"Vlt-btn Vlt-btn--link\" aria-label='Resource menu'>\n <svg class='Vlt-icon Vlt-icon--small' style='margin: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-more-v-negative\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </form>\n}\n<div class='busy-mask' [ngClass]=\"{ active: busy }\">\n <div style='height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;'>\n <div class=\"Vlt-spinner\"></div>\n </div>\n</div>\n", styles: [":host{flex:1;display:flex;flex-direction:column;min-height:0;color:var(--vgip-meta-resource-color)}.Vlt-callout--banner{-webkit-box-pack:initial;justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-spinner:before,.Vlt-spinner:after{border:6px solid #616266;border-color:#616266 transparent transparent}.Vlt-card__content{padding:8px 8px 8px 16px;display:flex;flex-direction:column;min-height:0;flex:1;overflow-y:scroll;overflow-x:hidden;background-color:var(--vgip-meta-resource-bg-color)}@media(hover:none){.Vlt-card__content{padding-right:16px}}.Vlt-card__content::-webkit-scrollbar{width:8px}.Vlt-card__content::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-card__footer{background:var(--vgip-meta-resource-bar-color);border-top:1px solid var(--vgip-meta-separator-color);display:flex;flex-direction:row;margin:16px -24px -24px;padding:8px 8px 8px 16px;box-shadow:0 0 4px #00000040;z-index:1}.Vlt-card__footer .Vlt-select select{color:var(--vgip-meta-input-color)}.Vlt-card__footer .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-card__footer .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon)}.Vlt-card__footer .resource-menu .Vlt-icon:not(:hover){fill:var(--vgip-meta-input-label-color)}.Vlt-card__footer button.Vlt-btn--secondary{border:none}.Vlt-card__footer button.Vlt-btn--secondary:not([type=submit]){color:var(--vgip-meta-input-color)}.Vlt-card__footer button.Vlt-btn--secondary{box-shadow:inset 0 0 0 1px var(--vgip-meta-button-border-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover[type=submit]{background-color:var(--vgip-meta-submit-hover-bg-color)}.Vlt-card__footer button.Vlt-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--vgip-meta-input-accent-color)}.Vlt-progress{margin:0;position:sticky}.Vlt-progress .Vlt-progress__bar{width:0;transition:width 5s}.Vlt-progress .Vlt-progress__bar.loading{width:100%}form{border-radius:6px;padding:24px;display:flex;flex-direction:column;min-height:0;flex:1}form .form-content{margin:-24px -24px -16px;padding-bottom:0;flex:1;display:flex;flex-direction:column}.busy-mask{position:absolute;inset:0;background:#00000052;opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"] }]
|
|
2655
2668
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaContextService }, { type: MetaMsgService }], propDecorators: { resource: [{
|
|
2656
2669
|
type: Input
|
|
2657
2670
|
}], model: [{
|
|
@@ -2793,12 +2806,12 @@ class MetaRefDialog {
|
|
|
2793
2806
|
this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
|
|
2794
2807
|
}
|
|
2795
2808
|
}
|
|
2796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaRefDialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2810
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MetaRefDialog, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class='Vlt-modal Vlt-modal--large'>\n <div class=\"Vlt-modal__panel\">\n <div class=\"Vlt-tabs\">\n <div class='Vlt-tabs__header--background'>\n <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n @for (r of resources | keyvalue: keepOrder; track r) {\n <a href='#' (click)='selectResource($event, r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n {{r.key}}\n </a>\n }\n <a href='#' class=\"Vlt-modal__dismiss\" (click)=\"dismiss($event)\">\n <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n </a>\n </div>\n </div>\n <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n @for (r of resources | keyvalue: keepOrder; track r) {\n @if (currentResource === r.key) {\n <div class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width:575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{-webkit-box-pack:initial;justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width:575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:#00000052;opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MetaResource, selector: "vgip-meta-resource", inputs: ["resource", "model", "metaResourceServiceDelegated", "theme", "editMode"], outputs: ["done", "resourceChange"] }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }] }); }
|
|
2798
2811
|
}
|
|
2799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaRefDialog, decorators: [{
|
|
2800
2813
|
type: Component,
|
|
2801
|
-
args: [{ standalone: false, template: "<div class='Vlt-modal Vlt-modal--large'>\n <div class=\"Vlt-modal__panel\">\n <div class=\"Vlt-tabs\">\n <div class='Vlt-tabs__header--background'>\n <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n
|
|
2814
|
+
args: [{ standalone: false, template: "<div class='Vlt-modal Vlt-modal--large'>\n <div class=\"Vlt-modal__panel\">\n <div class=\"Vlt-tabs\">\n <div class='Vlt-tabs__header--background'>\n <div class=\"Vlt-tabs__header Vlt-tabs__header--shadow\">\n <svg class=\"Vlt-icon\" [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\"><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" /></svg>\n @for (r of resources | keyvalue: keepOrder; track r) {\n <a href='#' (click)='selectResource($event, r.key)' class=\"Vlt-tabs__link\" [ngClass]=\"{ 'Vlt-tabs__link_active': currentResource === r.key}\">\n {{r.key}}\n </a>\n }\n <a href='#' class=\"Vlt-modal__dismiss\" (click)=\"dismiss($event)\">\n <svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" /></svg>\n </a>\n </div>\n </div>\n <div class=\"Vlt-tabs__content\" style='min-height: 90px;'>\n @for (r of resources | keyvalue: keepOrder; track r) {\n @if (currentResource === r.key) {\n <div class=\"Vlt-tabs__panel Vlt-tabs__panel_active\">\n <vgip-meta-resource [resource]='r.value' [model]='models[r.key]' [metaResourceServiceDelegated]='metaResource' (done)='onResourceDone($event)' theme='inherit' [attr.data-theme]='theme'></vgip-meta-resource>\n </div>\n }\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".Vlt-modal_visible{background:var(--vgip-meta-overlay-background)}.Vlt-modal__panel{padding:0;background:var(--vgip-meta-resource-bg-color);overflow:hidden}@media only screen and (max-width:575px){.Vlt-modal__panel{height:100%;width:100%;max-height:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin:10px 6px 0}.Vlt-modal__panel ::ng-deep .busy-mask{min-height:calc(100vh - 58px)}}.Vlt-modal__panel .Vlt-tabs__header--background{border-top-left-radius:5px;border-top-right-radius:5px}.Vlt-modal__panel .Vlt-tabs__header{background:var(--vgip-meta-resource-bar-color);padding-left:52px;padding-right:45px;border-bottom:0;flex-wrap:wrap;min-height:52px;max-height:52px;align-items:center}.Vlt-modal__panel .Vlt-tabs__header>.Vlt-icon{position:absolute;left:14px}.Vlt-modal__panel .Vlt-tabs__header h5{margin-bottom:0;font-weight:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link{padding-top:4px;padding-bottom:2px;color:var(--vgip-meta-input-label-color);text-transform:capitalize}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active{color:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-tabs__link_active:after{background:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss{background-image:none;width:18px;height:18px;opacity:initial}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss svg{width:16px;height:16px;fill:var(--vgip-meta-input-label-color)}.Vlt-modal__panel .Vlt-tabs__header .Vlt-modal__dismiss:hover svg{fill:var(--vgip-meta-input-accent-color)}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar{width:8px}.Vlt-modal__panel .Vlt-tabs__header::-webkit-scrollbar-thumb{background-color:var(--vgip-meta-scrollbar-color);border:2px solid transparent;border-radius:6px;background-clip:content-box}.Vlt-modal__panel .Vlt-tabs__content{margin-top:0}.Vlt-modal__panel .Vlt-tabs__content .Vlt-tabs__link{font-size:1.8rem}.Vlt-modal__panel .Vlt-callout--banner{-webkit-box-pack:initial;justify-content:initial;text-align:initial;overflow-y:auto}.Vlt-modal__panel .Vlt-callout--banner.Vlt-callout--dismissed{padding:0}.Vlt-modal__panel .Vlt-callout--banner:not(.Vlt-callout--dismissed){min-height:78px}.Vlt-modal__panel .Vlt-modal__cancel{z-index:899}.Vlt-modal__panel .Vlt-modal__dismiss{right:16px;top:14px}.Vlt-modal__panel .Vlt-card__footer button{margin-top:0;margin-bottom:0}.Vlt-modal__panel .Vlt-select select:disabled{background:initial;cursor:not-allowed}.Vlt-modal__panel ::ng-deep .form-content{min-height:0;max-height:calc(95vh - 172px)}@media only screen and (max-width:575px){.Vlt-modal__panel ::ng-deep .form-content{min-height:calc(100vh - 113px)}}.resource-menu button{margin:0 -10px}.resource-menu button:not(:hover) .Vlt-icon{color:#616266;fill:#616266}.busy-mask{position:absolute;inset:0;background:#00000052;opacity:1;z-index:898;display:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:1px;cursor:progress}.busy-mask.active{display:block}\n"] }]
|
|
2802
2815
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
2803
2816
|
|
|
2804
2817
|
var index$c = /*#__PURE__*/Object.freeze({
|
|
@@ -2828,12 +2841,12 @@ class MetaResourceCard {
|
|
|
2828
2841
|
// }
|
|
2829
2842
|
});
|
|
2830
2843
|
}
|
|
2831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2832
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2844
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResourceCard, deps: [{ token: MetaResourceService }, { token: MetaReferenceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2845
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MetaResourceCard, isStandalone: false, selector: "vgip-meta-resource-card", inputs: { resource: "resource", model: "model" }, ngImport: i0, template: "<div class=\"Vlt-card Vlt-bg-white\">\n <div class=\"Vlt-card__content Vlt-btn-on-hover\">\n <h5>{{model.Subject || model.subject || model.summary || model.title || model.CaseNumber || model.comment || model.body || model.name || model.topic || '...' }}</h5>\n <div style='font-size: 12px; line-height: 16px;'>\n Created: <span class='Vlt-black'>{{model._vgis.createdDate | date:'mediumDate'}}</span>\n Edited: <span class='Vlt-black'>{{model._vgis.modifiedDate | date:'medium'}}</span>\n </div>\n <div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{model._vgis.resourceType}}</div>\n <div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n @if (model._vgis.externalLink) {\n <a attr.href='{{model._vgis.externalLink}}' target='_blank' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n }\n <button type='button' (click)='open(resource, model)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Edit'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg></button>\n </div>\n </div>\n</div>\n", styles: [".Vlt-card{margin-bottom:8px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}\n"], dependencies: [{ kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
|
|
2833
2846
|
}
|
|
2834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaResourceCard, decorators: [{
|
|
2835
2848
|
type: Component,
|
|
2836
|
-
args: [{ selector: 'vgip-meta-resource-card', standalone: false, template: "<div class=\"Vlt-card Vlt-bg-white\">\n
|
|
2849
|
+
args: [{ selector: 'vgip-meta-resource-card', standalone: false, template: "<div class=\"Vlt-card Vlt-bg-white\">\n <div class=\"Vlt-card__content Vlt-btn-on-hover\">\n <h5>{{model.Subject || model.subject || model.summary || model.title || model.CaseNumber || model.comment || model.body || model.name || model.topic || '...' }}</h5>\n <div style='font-size: 12px; line-height: 16px;'>\n Created: <span class='Vlt-black'>{{model._vgis.createdDate | date:'mediumDate'}}</span>\n Edited: <span class='Vlt-black'>{{model._vgis.modifiedDate | date:'medium'}}</span>\n </div>\n <div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{model._vgis.resourceType}}</div>\n <div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n @if (model._vgis.externalLink) {\n <a attr.href='{{model._vgis.externalLink}}' target='_blank' rel='noopener' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Open external'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\"/></svg></a>\n }\n <button type='button' (click)='open(resource, model)' class=\"Vlt-btn Vlt-btn--tertiary Vlt-btn--icon\" aria-label='Edit'><svg style='margin-left: 0; margin-right: 0;'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg></button>\n </div>\n </div>\n</div>\n", styles: [".Vlt-card{margin-bottom:8px;padding:16px}.Vlt-card .Vlt-btn-group.Vlt-btn-group--hover{right:-8px}\n"] }]
|
|
2837
2850
|
}], ctorParameters: () => [{ type: MetaResourceService }, { type: MetaReferenceService }, { type: i0.ViewContainerRef }], propDecorators: { resource: [{
|
|
2838
2851
|
type: Input
|
|
2839
2852
|
}], model: [{
|
|
@@ -2847,12 +2860,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
2847
2860
|
* @Last Modified time: 2019-11-15 13:04:01
|
|
2848
2861
|
*/
|
|
2849
2862
|
class FieldUnknown extends FieldAbstract {
|
|
2850
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2851
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2863
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldUnknown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldUnknown, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"Vlt-form__element Vlt-form__element--big\">\n <div class=\"Vlt-input\">\n <label class='wrapper'>\n <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n </div>\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n</div>\n" }); }
|
|
2852
2865
|
}
|
|
2853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldUnknown, decorators: [{
|
|
2854
2867
|
type: Component,
|
|
2855
|
-
args: [{ standalone: false, template: "<div class=\"Vlt-form__element Vlt-form__element--big\">\n <div class=\"Vlt-input\">\n <label class='wrapper'>\n <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n </div>\n
|
|
2868
|
+
args: [{ standalone: false, template: "<div class=\"Vlt-form__element Vlt-form__element--big\">\n <div class=\"Vlt-input\">\n <label class='wrapper'>\n <input class='main model' type=\"text\" placeholder=\"\" value=\"Unknown field type '{{meta.type}}'.\" disabled/>\n <label class=\"Vlt-label Vlt-truncate\" style='padding-right: 20px;'>{{meta.label || meta.name}}</label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n </div>\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n</div>\n" }]
|
|
2856
2869
|
}] });
|
|
2857
2870
|
|
|
2858
2871
|
var index$b = /*#__PURE__*/Object.freeze({
|
|
@@ -2919,10 +2932,10 @@ class MetaModelPipe {
|
|
|
2919
2932
|
transform(value) {
|
|
2920
2933
|
return value;
|
|
2921
2934
|
}
|
|
2922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2923
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2935
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaModelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2936
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: MetaModelPipe, isStandalone: false, name: "metaModel" }); }
|
|
2924
2937
|
}
|
|
2925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaModelPipe, decorators: [{
|
|
2926
2939
|
type: Pipe,
|
|
2927
2940
|
args: [{
|
|
2928
2941
|
name: 'metaModel',
|
|
@@ -3387,12 +3400,12 @@ class FieldInput extends FieldAbstract {
|
|
|
3387
3400
|
}
|
|
3388
3401
|
}
|
|
3389
3402
|
}
|
|
3390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldInput, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n <a *ngIf=\"isPhoneNumber; else elseBlock\" href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n </svg>\n {{model}}\n </a>\n <ng-template #elseBlock>{{model}}</ng-template>\n </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n <div *ngIf='multiple' class='items-container'>\n <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n {{item}}\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n </div>\n </div>\n </div>\n <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n <div class='Vlt-composite__append right-actions'>\n <a href='#' *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n </div>\n <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n Suggestions\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n <label [title]='suggestion.label || suggestion'>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{suggestion.label || suggestion}}\n </label>\n </div>\n <div *ngIf='!multiple' style='padding: 12px 20px;'>\n {{suggestion.label || suggestion}}\n </div>\n </a>\n </div>\n <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n </div>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required. </span>\n <span *ngIf=\"f.errors.minlength\">Must be longer than {{validations.minlength}} characters. </span>\n <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters. </span>\n <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio:0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
3403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldInput, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldInput, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n @if (isPhoneNumber) {\n <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n </svg>\n {{model}}\n </a>\n } @else {\n {{model}}\n }\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n @if (multiple) {\n <div class='items-container'>\n @if (model) {\n <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n @for (item of model; track item) {\n <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n {{item}}\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n </div>\n }\n </div>\n }\n </div>\n }\n <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n @if (multiple) {\n <input class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n }\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model && multiple) {\n <span class='Vlt-black'>({{model.length}})</span>\n }\n </label>\n </label>\n <div class='Vlt-composite__append right-actions'>\n @if (model && showClear) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n }\n </div>\n <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n @if (suggestions.length) {\n <div class=\"Vlt-dropdown__panel\">\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n Suggestions\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n @if (dropdown) {\n <div class=\"Vlt-dropdown__scroll\">\n @for (suggestion of suggestions; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n @if (multiple) {\n <div class=\"Vlt-checkbox\" style='width: 100%;'>\n <label [title]='suggestion.label || suggestion'>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{suggestion.label || suggestion}}\n </label>\n </div>\n }\n @if (!multiple) {\n <div style='padding: 12px 20px;'>\n {{suggestion.label || suggestion}}\n </div>\n }\n </a>\n }\n </div>\n }\n @if (!multiple) {\n <div class=\"Vlt-dropdown__block\"></div>\n }\n @if (multiple) {\n <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.minlength) {\n <span>Must be longer than {{validations.minlength}} characters. </span>\n }\n @if (f.errors.maxlength) {\n <span>Must be lest than {{validations.maxlength}} characters. </span>\n }\n @if (f.errors.pattern) {\n <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio:0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
3392
3405
|
}
|
|
3393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldInput, decorators: [{
|
|
3394
3407
|
type: Component,
|
|
3395
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n <a *ngIf=\"isPhoneNumber; else elseBlock\" href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n </svg>\n {{model}}\n </a>\n <ng-template #elseBlock>{{model}}</ng-template>\n </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n <div *ngIf='multiple' class='items-container'>\n <div *ngIf='model' class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n {{item}}\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n </div>\n </div>\n </div>\n <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <input *ngIf='multiple' class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span class='Vlt-black' *ngIf='model && multiple'>({{model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n </label>\n <div class='Vlt-composite__append right-actions'>\n <a href='#' *ngIf='model && showClear' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n </div>\n <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n <div *ngIf=\"suggestions.length\" class=\"Vlt-dropdown__panel\">\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n Suggestions\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='dropdown' class=\"Vlt-dropdown__scroll\">\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n <label [title]='suggestion.label || suggestion'>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{suggestion.label || suggestion}}\n </label>\n </div>\n <div *ngIf='!multiple' style='padding: 12px 20px;'>\n {{suggestion.label || suggestion}}\n </div>\n </a>\n </div>\n <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n </div>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required. </span>\n <span *ngIf=\"f.errors.minlength\">Must be longer than {{validations.minlength}} characters. </span>\n <span *ngIf=\"f.errors.maxlength\">Must be lest than {{validations.maxlength}} characters. </span>\n <span *ngIf=\"f.errors.pattern\">{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio:0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"] }]
|
|
3408
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n @if (isPhoneNumber) {\n <a href='#' (click)=\"click2dial($event)\" class=\"Vlt-text-link\" aria-label='Dial'>\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style=\"margin-top: -3px;\">\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-phone-full\" />\n </svg>\n {{model}}\n </a>\n } @else {\n {{model}}\n }\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'multiple': multiple, 'has-value': f.value, active: keyListenerActive }\">\n @if (multiple) {\n <div class='items-container'>\n @if (model) {\n <div class='badges-container keep-focus' (click)='focus()'> <!-- eslint-disable-line -->\n @for (item of model; track item) {\n <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\">\n {{item}}\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)'></button> <!-- eslint-disable-line @angular-eslint/template/elements-content -->\n </div>\n }\n </div>\n }\n </div>\n }\n <div class=\"Vlt-input Vlt-dropdown\" style='display: block;' [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]=\"readonly\" [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"multiple ? 'hidden' : (logicalSubtype || meta.subtype || 'text')\" placeholder=\" \" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n @if (multiple) {\n <input class='main' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [(ngModel)]='addText' [ngModelOptions]=\"{ standalone: true }\" [type]=\"logicalSubtype || meta.subtype || 'text'\" [disabled]='disabled' [readonly]='readonly' placeholder=\"+Add\" (keydown.enter)='onAdd($event)' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n }\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model && multiple) {\n <span class='Vlt-black'>({{model.length}})</span>\n }\n </label>\n </label>\n <div class='Vlt-composite__append right-actions'>\n @if (model && showClear) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n }\n </div>\n <!-- <div *ngIf=\"!meta.subtype || meta.subtype == 'text'\" class=\"Vlt-composite__append Vlt-composite__append--icon\" style='bottom: 7px; right: 10px; padding: 3px; width: initial; height: initial; cursor: pointer;'>\n <div *ngIf=\"!meta.type || meta.type === 'string'\" class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n @if (suggestions.length) {\n <div class=\"Vlt-dropdown__panel\">\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area suggestions\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 13px;'>\n Suggestions\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n @if (dropdown) {\n <div class=\"Vlt-dropdown__scroll\">\n @for (suggestion of suggestions; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': (activeSuggestionIndex === i) }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link\" style='padding: 0;'>\n @if (multiple) {\n <div class=\"Vlt-checkbox\" style='width: 100%;'>\n <label [title]='suggestion.label || suggestion'>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(suggestion) !== -1'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{suggestion.label || suggestion}}\n </label>\n </div>\n }\n @if (!multiple) {\n <div style='padding: 12px 20px;'>\n {{suggestion.label || suggestion}}\n </div>\n }\n </a>\n }\n </div>\n }\n @if (!multiple) {\n <div class=\"Vlt-dropdown__block\"></div>\n }\n @if (multiple) {\n <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\" style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\">Clear all</button>\n <button (click)='dismissDropdown($event)' type='button' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.minlength) {\n <span>Must be longer than {{validations.minlength}} characters. </span>\n }\n @if (f.errors.maxlength) {\n <span>Must be lest than {{validations.maxlength}} characters. </span>\n }\n @if (f.errors.pattern) {\n <span>{{ validations.pattern.text || \"Should match '\"+validations.pattern+\"' pattern.\" }}. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element--big .Vlt-input input{padding-right:40px;text-overflow:ellipsis}@media screen and (-webkit-min-device-pixel-ratio:0){.Vlt-form__element--big .Vlt-input input{line-height:20px}}.Vlt-form__element--big .Vlt-input input:disabled{cursor:not-allowed}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover input,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) input,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) input{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container.creatable{margin-right:62px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;max-height:140px;padding:6px 4px 0 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value input{border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error input{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}label.Vlt-truncate{padding-right:42px}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}\n"] }]
|
|
3396
3409
|
}], ctorParameters: () => [{ type: MetaContextService }] });
|
|
3397
3410
|
|
|
3398
3411
|
var index$a = /*#__PURE__*/Object.freeze({
|
|
@@ -3465,12 +3478,12 @@ class FieldText extends FieldAbstract {
|
|
|
3465
3478
|
textToSpeech() {
|
|
3466
3479
|
this.focus();
|
|
3467
3480
|
}
|
|
3468
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3481
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldText, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <label class='wrapper'>\n <div class=\"Vlt-textarea\">\n <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n </div>\n </label>\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
3470
3483
|
}
|
|
3471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldText, decorators: [{
|
|
3472
3485
|
type: Component,
|
|
3473
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview'
|
|
3486
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <label class='wrapper'>\n <div class=\"Vlt-textarea\">\n <textarea class='main model' [required]='validations.required' [maxlength]='validations.maxlength' rows=\"{{ meta.rows || 4 }}\" placeholder=' ' [(ngModel)]='model' (ngModelChange)=\"onModelChangeLocal($event)\" #f='ngModel' [name]='name'></textarea>\n <!-- <div class=\"Vlt-composite__append Vlt-composite__append--icon\">\n <div class=\"Vlt-composite__icon\" (click)='textToSpeech()'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-microphone\"/></svg>\n </div>\n </div> -->\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n </div>\n </label>\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n</div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element--big .Vlt-textarea .Vlt-label{right:18px;background:transparent}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
|
|
3474
3487
|
}], ctorParameters: () => [{ type: MetaContextService }] });
|
|
3475
3488
|
|
|
3476
3489
|
var index$9 = /*#__PURE__*/Object.freeze({
|
|
@@ -4043,12 +4056,12 @@ class FieldSelect extends FieldAbstract {
|
|
|
4043
4056
|
delete this.searching;
|
|
4044
4057
|
});
|
|
4045
4058
|
}
|
|
4046
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4047
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldSelect, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{showText}}\n </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\"\n [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n <div class=\"Vlt-select\">\n <label class='wrapper'>\n <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required && options.length' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\n <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n [disabled]='disabled' [attr.aria-label]='meta.label' />\n </label>\n <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n <div *ngIf='searching' class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n <div class='Vlt-composite__append right-actions'>\n <a href='#' *ngIf='model && !meta.noX && !disabled' class=\"Vlt-composite__append--icon\"\n (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n </div>\n </div>\n <div class='Vlt-dropdown__panel'>\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n Select ({{options.length}})\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block Vlt-search_wrap\">\n <div *ngIf=\"optionsBackup.length > 12\" class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n style=\"top: 0; padding-top: 15px;\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-grey'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n </svg>\n </div>\n </div>\n <div class=\"Vlt-input\">\n <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n </div>\n <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-icon Vlt-icon--small'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n </svg>\n </div>\n </a>\n </div>\n </div>\n <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n (click)='onOptionSelect($event, option)' *ngFor='let option of options; let i = index'\n class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n <label>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{option.label || (option.id === '' ? '--empty--' : option)}}\n </label>\n </div>\n <div *ngIf='!multiple' style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n '--empty--' : option)}}</div>\n </a>\n <!-- No Option Found -->\n <div class=\"Vlt-dropdown__link\" *ngIf=\"options.length === 0\">\n <span style='padding: 12px 20px;'>\n No Option Found\n </span>\n <button *ngIf='isCreatable && !disabled' type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg> Add new\n </button>\n </div>\n </div>\n <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n style='margin-right: 8px;'>Clear all</button>\n <button (click)='dismissDropdown($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n </div>\n </div>\n <!-- <span *ngIf='isCreatable'>\n <button type='button' (click)='openResource($event)' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n </span> -->\n <div *ngIf='isCreatable && !disabled' class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n <svg>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n </svg>\n </button>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))'\n class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
4059
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldSelect, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldSelect, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{showText}}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\"\n [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n <div class=\"Vlt-select\">\n <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required && options.length) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n [disabled]='disabled' [attr.aria-label]='meta.label' />\n </label>\n <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n @if (searching) {\n <div class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n }\n <div class='Vlt-composite__append right-actions'>\n @if (model && !meta.noX && !disabled) {\n <a href='#' class=\"Vlt-composite__append--icon\"\n (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n }\n </div>\n </div>\n <div class='Vlt-dropdown__panel'>\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n Select ({{options.length}})\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block Vlt-search_wrap\">\n @if (optionsBackup.length > 12) {\n <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n style=\"top: 0; padding-top: 15px;\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-grey'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n </svg>\n </div>\n </div>\n <div class=\"Vlt-input\">\n <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n </div>\n <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-icon Vlt-icon--small'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n </svg>\n </div>\n </a>\n </div>\n }\n </div>\n @if (dropdown) {\n <div class='Vlt-dropdown__scroll'>\n @for (option of options; track option; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n (click)='onOptionSelect($event, option)'\n class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n @if (multiple) {\n <div class=\"Vlt-checkbox\" style='width: 100%;'>\n <label>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{option.label || (option.id === '' ? '--empty--' : option)}}\n </label>\n </div>\n }\n @if (!multiple) {\n <div style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n '--empty--' : option)}}</div>\n }\n </a>\n }\n <!-- No Option Found -->\n @if (options.length === 0) {\n <div class=\"Vlt-dropdown__link\">\n <span style='padding: 12px 20px;'>\n No Option Found\n </span>\n @if (isCreatable && !disabled) {\n <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg> Add new\n </button>\n }\n </div>\n }\n </div>\n }\n @if (!multiple) {\n <div class=\"Vlt-dropdown__block\"></div>\n }\n @if (multiple) {\n <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n style='margin-right: 8px;'>Clear all</button>\n <button (click)='dismissDropdown($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n }\n </div>\n </div>\n <!-- <span *ngIf='isCreatable'>\n <button type='button' (click)='openResource($event)' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n </span> -->\n @if (isCreatable && !disabled) {\n <div class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n <svg>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n </svg>\n </button>\n </div>\n }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n <small\n class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
4048
4061
|
}
|
|
4049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldSelect, decorators: [{
|
|
4050
4063
|
type: Component,
|
|
4051
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{showText}}\n </div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\"\n [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n <div class=\"Vlt-select\">\n <label class='wrapper'>\n <label class='Vlt-truncate'>{{meta.label || meta.name}}<span *ngIf='validations.required && options.length' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\n <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n [disabled]='disabled' [attr.aria-label]='meta.label' />\n </label>\n <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n <div *ngIf='searching' class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n <div class='Vlt-composite__append right-actions'>\n <a href='#' *ngIf='model && !meta.noX && !disabled' class=\"Vlt-composite__append--icon\"\n (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n </div>\n </div>\n <div class='Vlt-dropdown__panel'>\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n Select ({{options.length}})\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block Vlt-search_wrap\">\n <div *ngIf=\"optionsBackup.length > 12\" class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n style=\"top: 0; padding-top: 15px;\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-grey'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n </svg>\n </div>\n </div>\n <div class=\"Vlt-input\">\n <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n </div>\n <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-icon Vlt-icon--small'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n </svg>\n </div>\n </a>\n </div>\n </div>\n <div *ngIf='dropdown' class='Vlt-dropdown__scroll'>\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n (click)='onOptionSelect($event, option)' *ngFor='let option of options; let i = index'\n class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n <div *ngIf='multiple' class=\"Vlt-checkbox\" style='width: 100%;'>\n <label>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{option.label || (option.id === '' ? '--empty--' : option)}}\n </label>\n </div>\n <div *ngIf='!multiple' style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n '--empty--' : option)}}</div>\n </a>\n <!-- No Option Found -->\n <div class=\"Vlt-dropdown__link\" *ngIf=\"options.length === 0\">\n <span style='padding: 12px 20px;'>\n No Option Found\n </span>\n <button *ngIf='isCreatable && !disabled' type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg> Add new\n </button>\n </div>\n </div>\n <div *ngIf='!multiple' class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='multiple' class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n style='margin-right: 8px;'>Clear all</button>\n <button (click)='dismissDropdown($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n </div>\n </div>\n <!-- <span *ngIf='isCreatable'>\n <button type='button' (click)='openResource($event)' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n </span> -->\n <div *ngIf='isCreatable && !disabled' class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n <svg>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n </svg>\n </button>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))'\n class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"] }]
|
|
4064
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{showText}}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\"\n [ngClass]=\"{ 'Vlt-form__element--big': !meta.small ,'has-value': f.value, active: keyListenerActive, 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched), 'no-x': meta.noX }\">\n <div class=\"Vlt-composite Vlt-dropdown Vlt-input\" style='display: block;'\n [ngClass]=\"{ 'has-append-button': isCreatable && !disabled }\">\n <div class=\"Vlt-select\">\n <label class='wrapper'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required && options.length) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <input class='main' [required]='validations.required && !!options.length' readonly [ngModel]='showText'\n #ft='ngModel' [ngModelOptions]=\"{standalone: true}\" type=\"text\"\n [placeholder]=\"meta.placeholder || ' '\" (click)='onActivated($event)' (focus)='onActivated($event)'\n (blur)='onBlur($event)' [ngClass]=\"{ 'standalone': meta.standalone }\"\n [disabled]='disabled' [attr.aria-label]='meta.label' />\n </label>\n <select class='model' [required]='validations.required && !!options.length' style='display: none;'\n [(ngModel)]='model' [ngModelOptions]=\"{standalone: meta.standalone}\"\n (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name'></select>\n @if (searching) {\n <div class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n }\n <div class='Vlt-composite__append right-actions'>\n @if (model && !meta.noX && !disabled) {\n <a href='#' class=\"Vlt-composite__append--icon\"\n (click)='clear($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n }\n </div>\n </div>\n <div class='Vlt-dropdown__panel'>\n <div class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\">\n <!-- <div class=\"Vlt-dropdown__title\" style='padding-left: 15px;'>\n Select ({{options.length}})\n <div class=\"Vlt-dropdown__close Vlt-white\" (click)='dismissDropdown($event)'>\n <svg class='Vlt-icon Vlt-icon--small'><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div> -->\n <div class=\"Vlt-dropdown__block Vlt-search_wrap\">\n @if (optionsBackup.length > 12) {\n <div class=\"Vlt-composite\" [ngClass]=\"{'vgip-disable': disabled}\">\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\"\n style=\"top: 0; padding-top: 15px;\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-grey'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-search\"></use>\n </svg>\n </div>\n </div>\n <div class=\"Vlt-input\">\n <input type=\"text\" class=\"vgip-search_input\" [(ngModel)]=\"searchInputText\" placeholder=\"Search\" (input)=\"onSearchChange()\" (blur)='onBlur($event)' [ngModelOptions]=\"{standalone: true}\">\n </div>\n <a href='#' class=\"Vlt-composite__append--icon\" style=\"top: 2px;\" (click)=\"clearSearchField($event)\" [hidden]=\"!searchInputText\">\n <div class=\"Vlt-composite__icon\">\n <svg class='Vlt-icon Vlt-icon--small'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/>\n </svg>\n </div>\n </a>\n </div>\n }\n </div>\n @if (dropdown) {\n <div class='Vlt-dropdown__scroll'>\n @for (option of options; track option; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\"\n (click)='onOptionSelect($event, option)'\n class=\"Vlt-dropdown__link\" title=\"{{option.hint}}\">\n @if (multiple) {\n <div class=\"Vlt-checkbox\" style='width: 100%;'>\n <label>\n <span class=\"Vlt-checkbox__button\">\n <input type=\"checkbox\" [checked]='model && model.indexOf(option) !== -1' />\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{option.label || (option.id === '' ? '--empty--' : option)}}\n </label>\n </div>\n }\n @if (!multiple) {\n <div style='padding: 12px 20px;'>{{option.label || (option.id === '' ?\n '--empty--' : option)}}</div>\n }\n </a>\n }\n <!-- No Option Found -->\n @if (options.length === 0) {\n <div class=\"Vlt-dropdown__link\">\n <span style='padding: 12px 20px;'>\n No Option Found\n </span>\n @if (isCreatable && !disabled) {\n <button type=\"button\" class=\"Vlt-btn Vlt-btn--link\" (click)='openResource($event)'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg> Add new\n </button>\n }\n </div>\n }\n </div>\n }\n @if (!multiple) {\n <div class=\"Vlt-dropdown__block\"></div>\n }\n @if (multiple) {\n <div class=\"Vlt-dropdown__block Vlt-dropdown__block--nowrap\"\n style='padding: 8px 16px 16px;'>\n <button (click)='clear($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small Vlt-btn--outline\"\n style='margin-right: 8px;'>Clear all</button>\n <button (click)='dismissDropdown($event)' type='button'\n class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small\">Done</button>\n </div>\n }\n </div>\n </div>\n <!-- <span *ngIf='isCreatable'>\n <button type='button' (click)='openResource($event)' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n </span> -->\n @if (isCreatable && !disabled) {\n <div class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' (click)='openResource($event)'\n class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon add-button\" aria-label='Add new'>\n <svg>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ (isUpdatable && model) ? 'edit' : 'plus'}}\" />\n </svg>\n </button>\n </div>\n }\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched))) {\n <small\n class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element.no-x input.main{padding-right:40px}.Vlt-form__element--big:not(.has-value)>.Vlt-input>.Vlt-select>label>label{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big input[readonly].main:not([disabled]){background:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color)}.Vlt-form__element--big:hover input[readonly].main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:focus input[readonly].main,.Vlt-form__element--big:focus .Vlt-composite__append button,.Vlt-form__element--big.active input[readonly].main,.Vlt-form__element--big.active .Vlt-composite__append button{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error input[readonly].main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{border-color:#f25a6b;box-shadow:none}.Vlt-form__element--big .Vlt-select:after{background-image:var(--vgip-meta-dropdown-icon);margin-right:2px}.Vlt-form__element--big .Vlt-form__element__hint{color:var(--vgip-meta-input-hint-color)}.Vlt-composite.has-append-button input[readonly].main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-composite.has-append-button .Vlt-select:after{margin-right:-10px}.Vlt-composite__append{z-index:initial}.Vlt-composite__append button{height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-right:16px;padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-dropdown__panel{width:100%}.Vlt-dropdown__panel .Vlt-dropdown__link{padding:0 20px 0 0}.Vlt-dropdown__panel .Vlt-dropdown__link.Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel label{margin-top:0;padding:12px 20px;top:0;left:0;pointer-events:initial;position:initial;color:initial;font-size:inherit;transition:none;cursor:pointer}.Vlt-dropdown__panel label input{height:0}input.main{cursor:pointer}input.main:disabled{cursor:not-allowed}input.main{padding-right:76px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:42px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:53px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-search_wrap{padding-top:10px}.Vlt-search_wrap .vgip-search_input{padding:8px 36px 8px 38px;width:100%;border:1px solid var(--vgip-meta-input-border-color)!important;border-radius:6px!important}.Vlt-search_wrap .vgip-search_input:focus,.Vlt-search_wrap .vgip-search_input:active,.Vlt-search_wrap .vgip-search_input:hover{border-color:var(--vgip-meta-input-active-border-color)!important}.Vlt-search_wrap .Vlt-composite__append--icon{cursor:pointer}.Vlt-search_wrap .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-search_wrap .Vlt-composite__append--icon:focus svg,.Vlt-search_wrap .Vlt-composite__append--icon:active svg,.Vlt-search_wrap .Vlt-composite__append--icon:hover svg{fill:var(--vgip-meta-input-accent-color)}\n"] }]
|
|
4052
4065
|
}], ctorParameters: () => [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: i0.ViewContainerRef }] });
|
|
4053
4066
|
|
|
4054
4067
|
var index$8 = /*#__PURE__*/Object.freeze({
|
|
@@ -4075,10 +4088,10 @@ class MetaTrackerService {
|
|
|
4075
4088
|
}
|
|
4076
4089
|
this.events.emit(event);
|
|
4077
4090
|
}
|
|
4078
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4079
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4092
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaTrackerService, providedIn: 'root' }); }
|
|
4080
4093
|
}
|
|
4081
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4094
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaTrackerService, decorators: [{
|
|
4082
4095
|
type: Injectable,
|
|
4083
4096
|
args: [{
|
|
4084
4097
|
providedIn: 'root'
|
|
@@ -4261,6 +4274,9 @@ class FieldReference extends FieldAbstract {
|
|
|
4261
4274
|
this.metaReference.forEach((r) => {
|
|
4262
4275
|
if (!r.hidden) {
|
|
4263
4276
|
this.searchResourceTypeMeta.options.push({ id: r.name, label: r.label || r.name });
|
|
4277
|
+
if (r.default) {
|
|
4278
|
+
this.searchResourceTypeMeta.default = r.name;
|
|
4279
|
+
}
|
|
4264
4280
|
}
|
|
4265
4281
|
});
|
|
4266
4282
|
}
|
|
@@ -4479,6 +4495,7 @@ class FieldReference extends FieldAbstract {
|
|
|
4479
4495
|
}
|
|
4480
4496
|
}
|
|
4481
4497
|
delete this.searchError;
|
|
4498
|
+
this.onRefTypeChange.emit(resourceType);
|
|
4482
4499
|
}
|
|
4483
4500
|
onSearchTextChanged(value) {
|
|
4484
4501
|
this.searchTextChanged.next(value);
|
|
@@ -4897,12 +4914,12 @@ class FieldReference extends FieldAbstract {
|
|
|
4897
4914
|
});
|
|
4898
4915
|
}
|
|
4899
4916
|
}
|
|
4900
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4901
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldReference, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div *ngIf='!multiple' class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n </div>\n <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n </span>\n </div>\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-darker' style='font-weight: normal;'>({{item.type}})</span></span>\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n </div>\n </div>\n </div>\n <div class=\"Vlt-composite\">\n <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n <div class=\"Vlt-dropdown__panel\">\n <div *ngIf='searchError'>\n <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n <i></i>\n <div class=\"Vlt-callout__content\">{{searchError}}</div>\n </div>\n </div>\n <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\"\n class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n <div class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n </div>\n <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n </div>\n <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n <small>\n {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n </small>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n </div>\n </div>\n </div>\n <div class=\"Vlt-composite__prepend\"\n *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n </svg>\n </div>\n </div>\n <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'>\n <!-- required by css -->\n </div>\n <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n <label class='wrapper'>\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n <div class=\"Vlt-composite__icon\">\n <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n </svg>\n <svg *ngIf='!isSearchable || (model && !multiple)'\n [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n </div>\n <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n {{suggestions.length}}</div>\n </div>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n </label>\n <div *ngIf='searching' class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n <div class='Vlt-composite__append right-actions'>\n <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n </div>\n </div> -->\n <a href='#' *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n </div>\n </div>\n <!-- <span *ngIf='hasCreatables'>\n <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n </button>\n </span> -->\n <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple'\n (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg>\n </button>\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple'\n (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n </svg>\n </button>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button:disabled{opacity:.2}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width:575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
4917
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldReference, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: MetaMsgService }, { token: MetaContextService }, { token: MetaTrackerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldReference, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model && (!multiple || (multiple && model.length))) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n @if (!multiple) {\n <div class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n </div>\n }\n @if (multiple) {\n <div class='vgip-meta-field-value __gu'>\n @for (m of (model || []); track m) {\n <span class='Vlt-badge Vlt-badge--app'>\n {{m.label || m.id || m}} @if (isPolymorphic) {\n <span class='Vlt-grey-dark'>({{m.type}})</span>\n }\n </span>\n }\n </div>\n }\n @if (externalLink && (model && !multiple)) {\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n }\n</div>\n}\n@if (!preview) {\n <div class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n @if (multiple) {\n <div class='items-container' [ngClass]='{ creatable: isCreatable }'>\n @if (model) {\n <div class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n @for (item of model; track item) {\n <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n <span class='Vlt-truncate'>{{item.label || item.id || item }} @if (isPolymorphic) {\n <span class='Vlt-grey-darker' style='font-weight: normal;'>({{item.type}})</span>\n }</span>\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n </div>\n }\n </div>\n }\n </div>\n }\n <div class=\"Vlt-composite\">\n <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n <div class=\"Vlt-dropdown__panel\">\n @if (searchError) {\n <div>\n <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n <i></i>\n <div class=\"Vlt-callout__content\">{{searchError}}</div>\n </div>\n </div>\n }\n @if (!searchError && (suggestions.length || searchResults)) {\n <div [ngClass]=\"{ suggestions: !searchResults}\"\n class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n <div class=\"Vlt-dropdown__block\"></div>\n @if (!searchResults) {\n <div class=\"Vlt-dropdown__scroll\">\n @for (suggestion of suggestions; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n }\n </div>\n }\n @if (searchResults) {\n <div class=\"Vlt-dropdown__scroll\">\n @if (!searchResults.length) {\n <div class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n }\n @for (suggestion of searchResults; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n }\n </div>\n }\n <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n <small>\n {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n </small>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n </div>\n }\n </div>\n </div>\n @if (isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))) {\n <div class=\"Vlt-composite__prepend\"\n >\n <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n </svg>\n </div>\n </div>\n }\n @if (!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))) {\n <div>\n <!-- required by css -->\n </div>\n }\n <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n <label class='wrapper'>\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n <div class=\"Vlt-composite__icon\">\n @if (isSearchable && (!model || multiple)) {\n <svg class='Vlt-grey'>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n </svg>\n }\n @if (!isSearchable || (model && !multiple)) {\n <svg\n [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n }\n </div>\n @if (suggestions.length) {\n <div class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n {{suggestions.length}}</div>\n }\n </div>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model) {\n <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;'>({{model.type || model.resourceType || model.length}})</span>\n }\n </label>\n <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model) {\n <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;'>({{model.type || model.resourceType || model.length}})</span>\n }\n </label>\n </label>\n @if (searching) {\n <div class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n }\n <div class='Vlt-composite__append right-actions'>\n <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n </div>\n </div> -->\n @if (model && !multiple) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n }\n @if (externalLink && (model && !multiple)) {\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n }\n </div>\n </div>\n <!-- <span *ngIf='hasCreatables'>\n <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n </button>\n</span> -->\n@if (hasAppendButton && !disabled) {\n <div class=\"Vlt-composite__append\">\n @if (!model || multiple) {\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button'\n (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg>\n </button>\n }\n @if (model && !multiple) {\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button'\n (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n </svg>\n </button>\n }\n </div>\n}\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))) {\n <small\n class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.pattern) {\n <span>Should match '{{validations.pattern}}' pattern</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.helpText || meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button:disabled{opacity:.2}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width:575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave", "onRefTypeChange"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
4902
4919
|
}
|
|
4903
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldReference, decorators: [{
|
|
4904
4921
|
type: Component,
|
|
4905
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview' *ngIf='preview && model && (!multiple || (multiple && model.length))'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div *ngIf='!multiple' class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n </div>\n <div *ngIf='multiple' class='vgip-meta-field-value __gu'>\n <span *ngFor='let m of (model || [])' class='Vlt-badge Vlt-badge--app'>\n {{m.label || m.id || m}} <span class='Vlt-grey-dark' *ngIf='isPolymorphic'>({{m.type}})</span>\n </span>\n </div>\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n</div>\n<div *ngIf='!preview' class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n <div *ngIf='multiple' class='items-container' [ngClass]='{ creatable: isCreatable }'>\n <div *ngIf='model' class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n <div *ngFor='let item of model' class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n <span class='Vlt-truncate'>{{item.label || item.id || item }} <span *ngIf='isPolymorphic' class='Vlt-grey-darker' style='font-weight: normal;'>({{item.type}})</span></span>\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n </div>\n </div>\n </div>\n <div class=\"Vlt-composite\">\n <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n <div class=\"Vlt-dropdown__panel\">\n <div *ngIf='searchError'>\n <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n <i></i>\n <div class=\"Vlt-callout__content\">{{searchError}}</div>\n </div>\n </div>\n <div *ngIf='!searchError && (suggestions.length || searchResults)' [ngClass]=\"{ suggestions: !searchResults}\"\n class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n <div class=\"Vlt-dropdown__block\"></div>\n <div *ngIf='!searchResults' class=\"Vlt-dropdown__scroll\">\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of suggestions; let i = index' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n </div>\n <div *ngIf='searchResults' class=\"Vlt-dropdown__scroll\">\n <div *ngIf='!searchResults.length' class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' *ngFor='let suggestion of searchResults; let i = index' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n </div>\n <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n <small>\n {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n </small>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n </div>\n </div>\n </div>\n <div class=\"Vlt-composite__prepend\"\n *ngIf='isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))'>\n <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n </svg>\n </div>\n </div>\n <div *ngIf='!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))'>\n <!-- required by css -->\n </div>\n <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n <label class='wrapper'>\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n <div class=\"Vlt-composite__icon\">\n <svg *ngIf='isSearchable && (!model || multiple)' class='Vlt-grey'>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n </svg>\n <svg *ngIf='!isSearchable || (model && !multiple)'\n [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n </div>\n <div *ngIf='suggestions.length' class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n {{suggestions.length}}</div>\n </div>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'>{{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span> <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;' *ngIf='model'>({{model.type || model.resourceType || model.length}})</span></label> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n </label>\n <div *ngIf='searching' class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n <div class='Vlt-composite__append right-actions'>\n <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n </div>\n </div> -->\n <a href='#' *ngIf='model && !multiple' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' *ngIf='externalLink && (model && !multiple)' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n </div>\n </div>\n <!-- <span *ngIf='hasCreatables'>\n <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n </button>\n </span> -->\n <div *ngIf='hasAppendButton && !disabled' class=\"Vlt-composite__append\">\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='!model || multiple'\n (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg>\n </button>\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button' *ngIf='model && !multiple'\n (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n </svg>\n </button>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))'\n class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.pattern\">Should match '{{validations.pattern}}' pattern</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText || meta.hint' class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n</div>\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button:disabled{opacity:.2}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width:575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"] }]
|
|
4922
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model && (!multiple || (multiple && model.length))) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n @if (!multiple) {\n <div class='vgip-meta-field-value __gu' [ngClass]=\"{ 'has-external-link': externalLink || model.externalLink }\">\n <svg class=\"Vlt-icon Vlt-icon--smaller\" style='margin-top: -3px;'>\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n {{model.label || model.id}} <span class='Vlt-grey'>({{model.type}})</span>\n </div>\n }\n @if (multiple) {\n <div class='vgip-meta-field-value __gu'>\n @for (m of (model || []); track m) {\n <span class='Vlt-badge Vlt-badge--app'>\n {{m.label || m.id || m}} @if (isPolymorphic) {\n <span class='Vlt-grey-dark'>({{m.type}})</span>\n }\n </span>\n }\n </div>\n }\n @if (externalLink && (model && !multiple)) {\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener'\n class=\"Vlt-composite__append--icon preview\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n }\n</div>\n}\n@if (!preview) {\n <div class=\"meta-field-reference Vlt-form__element Vlt-form__element--big\"\n [ngClass]=\"{ 'Vlt-form__element--error': (searchError && keyListenerActive) || (f.invalid && ((f | metaModel)._parent.submitted || (ft | metaModel ).touched)), 'multiple': multiple, 'has-value': model, active: keyListenerActive }\">\n @if (multiple) {\n <div class='items-container' [ngClass]='{ creatable: isCreatable }'>\n @if (model) {\n <div class='badges-container keep-focus' (click)='focus()' style='width: 100%;'> <!-- eslint-disable-line -->\n @for (item of model; track item) {\n <div class=\"Vlt-badge Vlt-badge--transparent Vlt-badge--app Vlt-badge--large keep-focus\" [ngClass]=\"{ grid: (item.label || item.id || '').length > 56}\">\n <span class='Vlt-truncate'>{{item.label || item.id || item }} @if (isPolymorphic) {\n <span class='Vlt-grey-darker' style='font-weight: normal;'>({{item.type}})</span>\n }</span>\n <button class=\"Vlt-badge__dismiss keep-focus\" (click)='remove($event, item)' style='position: absolute; right: 12px; top: 8px;' aria-label='Remove'></button>\n </div>\n }\n </div>\n }\n </div>\n }\n <div class=\"Vlt-composite\">\n <div class='dropdown-wrapper Vlt-dropdown' style='width: 100%; position: absolute; top: 48px;'>\n <div class=\"Vlt-dropdown__panel\">\n @if (searchError) {\n <div>\n <div class=\"Vlt-callout Vlt-callout--critical keep-focus\">\n <i></i>\n <div class=\"Vlt-callout__content\">{{searchError}}</div>\n </div>\n </div>\n }\n @if (!searchError && (suggestions.length || searchResults)) {\n <div [ngClass]=\"{ suggestions: !searchResults}\"\n class=\"Vlt-dropdown__panel__content Vlt-dropdown__panel__content--scroll-area\" style='padding: 0;'>\n <div class=\"Vlt-dropdown__block\"></div>\n @if (!searchResults) {\n <div class=\"Vlt-dropdown__scroll\">\n @for (suggestion of suggestions; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i, smart: suggestion.smart }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n }\n </div>\n }\n @if (searchResults) {\n <div class=\"Vlt-dropdown__scroll\">\n @if (!searchResults.length) {\n <div class='Vlt-dropdown__block'> No records matching '<b style='pointer-events: none;'>{{searchText}}</b>' were found.</div>\n }\n @for (suggestion of searchResults; track suggestion; let i = $index) {\n <a href='#' [ngClass]=\"{ 'Vlt-dropdown__link--selected': activeSuggestionIndex === i }\" (click)='onSuggestionSelect($event, suggestion)' class=\"Vlt-dropdown__link has-type\">\n <svg class='Vlt-icon Vlt-icon--small'><use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\"/></svg>\n <div class='__gu' [title]='suggestion.label'>{{ suggestion.label }}</div>\n <small class='Vlt-grey-dark' style='text-transform: capitalize;'>{{suggestion.type}}</small>\n </a>\n }\n </div>\n }\n <!-- <div *ngIf='searchResults' class=\"Vlt-dropdown__block\" style='text-align: right; padding-top: 0;'>\n <small>\n {{ searchResults ? searchResults.length+' results' : 'Suggestions' }} <span style='font-style: italic; font-weight: normal;' *ngIf='searchResults'>~{{ model ? 'last search' : searchText}}</span>\n </small>\n </div> -->\n <div class=\"Vlt-dropdown__block\"></div>\n </div>\n }\n </div>\n </div>\n @if (isPolymorphic && showTypes && (multiple || !model || (dropdownVisible && ((suggestions || searchResults || []).length || searchResourceType.resourceType)))) {\n <div class=\"Vlt-composite__prepend\"\n >\n <div class=\"search-scope\" [ngClass]=\"{ 'has-value': searchResourceType.resourceType }\">\n <vgip-meta-field class='shown' [meta]='searchResourceTypeMeta' [parent]='searchResourceType'\n (onChange)='onSearchResourceTypeChanged($event)' (onLeave)='onBlur($event)'\n [integrationCode]='integrationCode' theme='inherit'></vgip-meta-field>\n <svg class='Vlt-icon Vlt-grey Vlt-icon--smaller visible-mobile mobile-icon'\n style='position: absolute; top: 15px; left: 14px; pointer-events: none;'>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-menu\" />\n </svg>\n </div>\n </div>\n }\n @if (!(isPolymorphic && showTypes && (multiple || !model || dropdownVisible))) {\n <div>\n <!-- required by css -->\n </div>\n }\n <div class=\"Vlt-composite__wrapper Vlt-input\" style='overflow: hidden;'\n [ngClass]=\"{ 'has-append-button': hasAppendButton && !disabled, 'vgip-disable': disabled }\">\n <label class='wrapper'>\n <div class=\"Vlt-composite__prepend Vlt-composite__prepend--icon\" style='top: 0; padding-top: 15px;'>\n <div class=\"Vlt-composite__icon\">\n @if (isSearchable && (!model || multiple)) {\n <svg class='Vlt-grey'>\n <use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-{{ multiple ? 'stack' : 'search'}}\" />\n </svg>\n }\n @if (!isSearchable || (model && !multiple)) {\n <svg\n [ngStyle]=\"{fill: integrationIcon === 'Brand-icon-vonage' ? 'var(--vgip-meta-input-color)' : ''}\">\n <use attr.xlink:href=\"volta/volta-brand-icons.svg#{{integrationIcon}}\" />\n </svg>\n }\n </div>\n @if (suggestions.length) {\n <div class=\"Vlt-badge Vlt-badge--small Vlt-badge--purple\"\n style='padding: 0px 4px; position: absolute; top: 26px; left: 4px; pointer-events: none; min-width: 14px;'>\n {{suggestions.length}}</div>\n }\n </div>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n <input class='main' [readonly]='!isSearchable || (model && !multiple)' [ngModel]='searchText' #ft='ngModel' (ngModelChange)='onSearchTextChanged($event)' [ngModelOptions]=\"{standalone: true}\" type=\"text\" placeholder=\"{{ placeHolderLabel || ' ' }}\" [ngClass]='{ ext: externalLink }' (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)' [disabled]='disabled' [title]=\"model ? model.label : ''\"/>\n <label class='Vlt-truncate hidden-mobile' style='padding-left: 25px; padding-right: 42px;'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{ (multiple && isPolymorphic) ? '+Add ' : ((model || !isPolymorphic) ? meta.label : ( meta.searchLabel || 'Search')) }}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model) {\n <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;'>({{model.type || model.resourceType || model.length}})</span>\n }\n </label>\n <label class='Vlt-truncate hidden-desktop' style='padding-left: 25px; padding-right: 42px;'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n \n @if (model) {\n <span style='color: var(--vgip-meta-input-color); text-transform: capitalize;'>({{model.type || model.resourceType || model.length}})</span>\n }\n </label>\n </label>\n @if (searching) {\n <div class='search-progress'>\n <div class=\"container\">\n <div class=\"bar Vlt-bg-purple\"></div>\n </div>\n </div>\n }\n <div class='Vlt-composite__append right-actions'>\n <!-- <div *ngIf='prevModel && !model' class=\"Vlt-composite__append--icon\" (click)='revert()'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-reply\"/></svg>\n </div>\n </div> -->\n @if (model && !multiple) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='removeSelection($event)'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\" />\n </svg>\n </div>\n </a>\n }\n @if (externalLink && (model && !multiple)) {\n <a [href]='externalLink || model.externalLink' target='_blank' rel='noopener' class=\"Vlt-composite__append--icon\" aria-label='Open external'>\n <div class=\"Vlt-composite__icon\">\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-open\" />\n </svg>\n </div>\n </a>\n }\n </div>\n </div>\n <!-- <span *ngIf='hasCreatables'>\n <button type='button' *ngIf='!model || multiple' (click)='openResource()' class=\"Vlt-btn Vlt-btn--secondary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>\n </button>\n <button type='button' *ngIf='model && !multiple' (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--primary Vlt-btn--icon Vlt-btn--large\" style='margin-left: 12px;'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\"/></svg>\n </button>\n</span> -->\n@if (hasAppendButton && !disabled) {\n <div class=\"Vlt-composite__append\">\n @if (!model || multiple) {\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button'\n (click)='openResource()' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Add new' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\" />\n </svg>\n </button>\n }\n @if (model && !multiple) {\n <button (focus)='onActivated($event)' (blur)='onBlur($event)' type='button'\n (click)='openResource(model)' class=\"Vlt-btn Vlt-btn--white Vlt-btn--icon\" aria-label='Edit' [disabled]='delegate'>\n <svg>\n <use xlink:href=\"volta/volta-icons.svg#Vlt-icon-edit\" />\n </svg>\n </button>\n }\n </div>\n}\n</div>\n@if (f.invalid && ((f | metaModel)._parent.submitted || ((ft | metaModel).touched && keyListenerActive))) {\n <small\n class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.pattern) {\n <span>Should match '{{validations.pattern}}' pattern</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n}\n@if (meta.helpText || meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText || meta.hint}}</small>\n}\n</div>\n}\n", styles: [".Vlt-form__element--big .Vlt-input input:placeholder-shown:not(:focus)~label.Vlt-truncate{font-size:1.6rem;margin-top:-.8rem;top:50%}.Vlt-form__element--big ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Vlt-form__element--big:hover .items-container,.Vlt-form__element--big:hover .main,.Vlt-form__element--big:hover .Vlt-composite__append button,.Vlt-form__element--big:hover ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.active .items-container,.Vlt-form__element--big.active .main,.Vlt-form__element--big.active .Vlt-composite__append button,.Vlt-form__element--big.active ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.Vlt-form__element--error .items-container,.Vlt-form__element--big.Vlt-form__element--error .main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button,.Vlt-form__element--big.Vlt-form__element--error ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:#f25a6b}.Vlt-form__element--big.multiple .Vlt-composite.Vlt-dropdown{margin-top:3px}.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple:hover:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .items-container,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .main,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) .Vlt-composite__append button,.Vlt-form__element--big.multiple.active:not(.Vlt-form__element--error) ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element--big.multiple .items-container{background-color:var(--vgip-meta-input-bg-color);border:1px solid var(--vgip-meta-input-border-color);border-bottom:0;border-top-left-radius:6px;border-top-right-radius:6px}.Vlt-form__element--big.multiple .items-container .badges-container{overflow:auto;padding:6px 4px 3px 6px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge{margin-bottom:3px;margin-left:0;margin-right:3px;overflow:hidden;max-width:100%;position:relative;padding-right:30px}.Vlt-form__element--big.multiple .items-container .badges-container .Vlt-badge.grid{display:grid}.Vlt-form__element--big.multiple:not(.has-value) .items-container{border:0}.Vlt-form__element--big.multiple.has-value .main:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button:not(.Vlt-btn--icon),.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone:not(.Vlt-btn--icon){border-top:0}.Vlt-form__element--big.multiple.has-value .main,.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button,.Vlt-form__element--big.multiple.has-value ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-left-radius:0;border-top-right-radius:0;height:48px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__prepend ::ng-deep .search-scope vgip-meta-field .Vlt-input input.main.standalone{border-top-right-radius:6px}.Vlt-form__element--big.multiple.has-value .Vlt-composite__append button{border-top-left-radius:6px;border-top:0}.Vlt-composite__prepend{z-index:initial}.Vlt-composite__prepend--icon{top:0;padding-top:15px;left:3px}.Vlt-input.has-append-button .Vlt-composite__append.right-actions{right:0}.Vlt-input.has-append-button .Vlt-composite__append.right-actions .Vlt-composite__append--icon:last-child{width:36px}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:5px;cursor:pointer}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:var(--vgip-meta-input-accent-color)}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}.Vlt-composite__append--icon.preview{bottom:initial;padding:0 2px}.Vlt-composite__append button{height:48px;padding-right:16px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);padding-left:16px;border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px}.Vlt-composite__append button:hover{background:var(--vgip-meta-input-action-hover-bg-color)}.Vlt-composite__append button svg{margin:-2px 0 0;fill:var(--vgip-meta-input-accent-color)}.Vlt-composite__append button:disabled{opacity:.2}.Vlt-input input{padding-left:38px;text-overflow:ellipsis;padding-right:36px}.Vlt-input input.ext{padding-right:72px}.Vlt-composite__wrapper.has-append-button input.main{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.Vlt-input input{background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color);font-weight:700}.Vlt-dropdown__panel{max-width:100%;width:100%;min-width:280px}.Vlt-dropdown__panel .Vlt-dropdown__link.smart{font-weight:700;background:var(--vgip-meta-dropdown-bg-color)}.Vlt-dropdown__panel .Vlt-dropdown__link.smart.hidden{display:none}.Vlt-dropdown__panel .Vlt-dropdown__link.bold:after{background-color:#e1e2e6;content:\"\";height:1px;left:0;position:absolute;right:0;bottom:0}.Vlt-dropdown__panel .Vlt-dropdown__link--selected{background:#2c2d300d}.Vlt-dropdown__panel .Vlt-dropdown__link>div{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Vlt-dropdown__panel .Vlt-dropdown__link>svg{margin-right:8px}.vgip-meta-field-preview .Vlt-badge{margin:1px 3px 1px 0;overflow:hidden;max-width:100%}:host .search-scope{width:130px}:host .search-scope ::ng-deep .Vlt-form__element.has-value .Vlt-select:after{display:none}:host .search-scope ::ng-deep .Vlt-form__element .right-actions{right:12px}:host .search-scope ::ng-deep .Vlt-form__element label.Vlt-truncate{padding-right:48px}:host .search-scope .mobile-icon{display:none}@media only screen and (max-width:575px){:host .search-scope{width:60px}:host .search-scope:not(.has-value) .mobile-icon{display:block}:host .search-scope.has-value .mobile-label{display:block}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-composite__append{display:none}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big .Vlt-select:after{margin-right:-7px}:host .search-scope ::ng-deep .Vlt-form__element.Vlt-form__element--big label.Vlt-truncate{visibility:hidden}}:host .search-scope ::ng-deep vgip-meta-field .Vlt-input input.main.standalone{padding-right:initial;background:var(--vgip-meta-input-accent-bg-color);border-color:var(--vgip-meta-input-border-color)}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element{padding:0}:host .search-scope ::ng-deep vgip-meta-field .Vlt-form__element .Vlt-dropdown__panel{width:initial}\n"] }]
|
|
4906
4923
|
}], ctorParameters: () => [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: MetaMsgService }, { type: MetaContextService }, { type: MetaTrackerService }, { type: i0.ViewContainerRef }] });
|
|
4907
4924
|
|
|
4908
4925
|
var index$7 = /*#__PURE__*/Object.freeze({
|
|
@@ -4982,12 +4999,12 @@ class FieldComposite extends FieldAbstract {
|
|
|
4982
4999
|
onValueChange() {
|
|
4983
5000
|
this.onChange.emit(this.value);
|
|
4984
5001
|
}
|
|
4985
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5002
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldComposite, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n @for (field of fields; track field) {\n @if (!field.$hidden && !field.$invisible) {\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\">\n @if (!meta.$invisible) {\n <vgip-meta-field [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [scope]='scope' [meta]='field'\n [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' (onChange)='onValueChange()'\n theme='inherit'></vgip-meta-field>\n }\n </div>\n }\n }\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave", "onRefTypeChange"] }] }); }
|
|
4987
5004
|
}
|
|
4988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldComposite, decorators: [{
|
|
4989
5006
|
type: Component,
|
|
4990
|
-
args: [{ standalone: false, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n
|
|
5007
|
+
args: [{ standalone: false, template: "<div [ngClass]=\"{ 'Vlt-grid Vlt-grid--narrow': isRow }\">\n @for (field of fields; track field) {\n @if (!field.$hidden && !field.$invisible) {\n <div style='margin: 0;' [ngClass]=\"{ 'Vlt-col': isRow, 'Vlt-col--1of3': isRow && fields.length > 3 }\">\n @if (!meta.$invisible) {\n <vgip-meta-field [ngClass]=\"{ shown: !field.$invisible}\" [index]='index' [scope]='scope' [meta]='field'\n [parent]='value' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' (onChange)='onValueChange()'\n theme='inherit'></vgip-meta-field>\n }\n </div>\n }\n }\n</div>\n", styles: ["div>vgip-meta-field{display:none}div>vgip-meta-field.shown{display:initial}\n"] }]
|
|
4991
5008
|
}] });
|
|
4992
5009
|
|
|
4993
5010
|
var index$6 = /*#__PURE__*/Object.freeze({
|
|
@@ -5033,12 +5050,12 @@ class FieldBoolean extends FieldAbstract {
|
|
|
5033
5050
|
onOptionChange() {
|
|
5034
5051
|
this.onModelChange(this.model);
|
|
5035
5052
|
}
|
|
5036
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldBoolean, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldBoolean, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{ model ? '\u2714' : '\u2718'}}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @if (meta.subtype === 'switch') {\n <div class=\"Vlt-switch\">\n <label style='vertical-align: middle;'>\n <input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n <span class=\"Vlt-switch__slider\"></span>\n <span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n </label>\n </div>\n }\n @if (meta.subtype !== 'switch') {\n <div class=\"Vlt-checkbox\">\n <label style='cursor: pointer;'>\n <span class=\"Vlt-checkbox__button\">\n <input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{meta.label || meta.name}}\n </label>\n </div>\n }\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
5038
5055
|
}
|
|
5039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldBoolean, decorators: [{
|
|
5040
5057
|
type: Component,
|
|
5041
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview'
|
|
5058
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{ model ? '\u2714' : '\u2718'}}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @if (meta.subtype === 'switch') {\n <div class=\"Vlt-switch\">\n <label style='vertical-align: middle;'>\n <input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n <span class=\"Vlt-switch__slider\"></span>\n <span style='margin-left: 60px; line-height: 30px; white-space: nowrap;'>{{meta.label || meta.name}}</span>\n </label>\n </div>\n }\n @if (meta.subtype !== 'switch') {\n <div class=\"Vlt-checkbox\">\n <label style='cursor: pointer;'>\n <span class=\"Vlt-checkbox__button\">\n <input class='model' type=\"checkbox\" [(ngModel)]='model' (change)='onOptionChange()' [name]='name'/>\n <span class=\"Vlt-checkbox__icon\"></span>\n </span>\n {{meta.label || meta.name}}\n </label>\n </div>\n }\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-checkbox+.Vlt-form__element__hint{margin-top:4px}.Vlt-checkbox__button input:not(:checked)~.Vlt-checkbox__icon{background-color:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-checkbox__button input:hover:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:not(:checked)~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:not(:checked)~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-checkbox__button input:hover:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:focus:checked~.Vlt-checkbox__icon,.Vlt-checkbox__button input:active:checked~.Vlt-checkbox__icon{border-color:var(--vgip-meta-input-accent-color)}\n"] }]
|
|
5042
5059
|
}] });
|
|
5043
5060
|
|
|
5044
5061
|
var index$5 = /*#__PURE__*/Object.freeze({
|
|
@@ -5119,12 +5136,12 @@ class FieldRadio extends FieldAbstract {
|
|
|
5119
5136
|
ev.srcElement.removeEventListener('keydown', this.keydown);
|
|
5120
5137
|
}
|
|
5121
5138
|
}
|
|
5122
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5139
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5140
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldRadio, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{ model.label || model }}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @for (option of options; track option) {\n <fieldset class=\"Vlt-radio Vlt-radio--inline\">\n <label style='cursor: pointer;'>\n <span class=\"Vlt-radio__button\">\n <input class='main' (change)='onOptionChange(option)' type=\"radio\" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <span class=\"Vlt-radio__icon\"></span>\n </span>\n <span style='white-space: nowrap;'>{{option.label || option}}</span>\n </label>\n </fieldset>\n }\n @if (f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched)) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-form__element{padding-bottom:4px}.Vlt-form__element__hint,.Vlt-form__element__error{margin-top:4px}.Vlt-radio--inline{margin-bottom:4px}.Vlt-radio .Vlt-radio__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-radio:hover .Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon:after{background:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:focus+.Vlt-radio__icon,.Vlt-radio input:active+.Vlt-radio__icon{background:var(--vgip-meta-input-bg-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
5124
5141
|
}
|
|
5125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldRadio, decorators: [{
|
|
5126
5143
|
type: Component,
|
|
5127
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview'
|
|
5144
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>\n {{ model.label || model }}\n </div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched) }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @for (option of options; track option) {\n <fieldset class=\"Vlt-radio Vlt-radio--inline\">\n <label style='cursor: pointer;'>\n <span class=\"Vlt-radio__button\">\n <input class='main' (change)='onOptionChange(option)' type=\"radio\" [checked]='option === model' [value]='option' [name]='name' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <span class=\"Vlt-radio__icon\"></span>\n </span>\n <span style='white-space: nowrap;'>{{option.label || option}}</span>\n </label>\n </fieldset>\n }\n @if (f && f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched)) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-form__element{padding-bottom:4px}.Vlt-form__element__hint,.Vlt-form__element__error{margin-top:4px}.Vlt-radio--inline{margin-bottom:4px}.Vlt-radio .Vlt-radio__icon{border-color:var(--vgip-meta-input-border-color)}.Vlt-radio:hover .Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:checked~.Vlt-radio__icon:after{background:var(--vgip-meta-input-active-border-color)}.Vlt-radio input:focus+.Vlt-radio__icon,.Vlt-radio input:active+.Vlt-radio__icon{background:var(--vgip-meta-input-bg-color)}\n"] }]
|
|
5128
5145
|
}] });
|
|
5129
5146
|
|
|
5130
5147
|
var index$4 = /*#__PURE__*/Object.freeze({
|
|
@@ -5190,12 +5207,12 @@ class FieldList extends FieldAbstract {
|
|
|
5190
5207
|
onChildChange() {
|
|
5191
5208
|
this.onChange.emit(this.model);
|
|
5192
5209
|
}
|
|
5193
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldList, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (true) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}} ({{(model || []).length}})\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n @if (meta.hint) {\n <small style='margin-bottom: 4px;' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @if (model) {\n @for (item of model; track item; let i = $index) {\n <div style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [scope]='scope' [meta]='cloneList' [parent]='item' [integrationCode]='integrationCode' [resourceType]='meta.resourceType || resourceType' theme='inherit' [preview]='preview' (onChange)='onChildChange()'></vgip-meta-field>\n @if (meta.selectable) {\n <vgip-meta-field [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;' (onChange)='onChildChange()'></vgip-meta-field>\n }\n @if (!preview) {\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link item-remove-button\" [disabled]='model.length === (validations.min || 0)' aria-label='Remove'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-bin\"/></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n @if (!preview && (!validations.max || !model || model.length < validations.max)) {\n <button style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app Vlt-btn--no-focus item-add-button\" [disabled]='validations.max && model && model.length === validations.max'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{list.label}}\n </button>\n }\n @if ((f | metaModel)._parent.submitted && f.invalid) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n </div>\n}\n", styles: [".Vlt-btn--link:not([disabled]) svg{fill:#e84545}.Vlt-btn--link:not([disabled]):hover svg{fill:#de1c1c}.item-add-button{background-color:var(--vgip-meta-input-action-hover-bg-color);color:var(--vgip-meta-input-color)}.item-add-button svg{fill:var(--vgip-meta-input-color)}.item-add-button:hover{transform:scale(1.02);box-shadow:inset 0 0 0 1px var(--vgip-meta-input-active-border-color)}.item-remove-button{border:0}.item-remove-button:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaField, selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "scope", "preview", "theme", "overlayContainer", "delegate"], outputs: ["onChange", "onLeave", "onRefTypeChange"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
5195
5212
|
}
|
|
5196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldList, decorators: [{
|
|
5197
5214
|
type: Component,
|
|
5198
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div
|
|
5215
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (true) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': (f | metaModel)._parent.submitted && f.invalid }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}} ({{(model || []).length}})\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n @if (meta.hint) {\n <small style='margin-bottom: 4px;' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n <input class='model' type='hidden' [required]='validations.required' [(ngModel)]='model' #f='ngModel' [name]='name' />\n @if (model) {\n @for (item of model; track item; let i = $index) {\n <div style='display: flex; border-bottom: 1px solid var(--vgip-meta-separator-color);'>\n <vgip-meta-field style='flex: 1;' [index]='i' [scope]='scope' [meta]='cloneList' [parent]='item' [integrationCode]='integrationCode' [resourceType]='meta.resourceType || resourceType' theme='inherit' [preview]='preview' (onChange)='onChildChange()'></vgip-meta-field>\n @if (meta.selectable) {\n <vgip-meta-field [meta]=\"{ name: meta.selectable.name, label: ' ', type: 'radio', options: [ { id: meta.selectable.value, label: meta.selectable.label } ] }\" [parent]='item' [integrationCode]='integrationCode' theme='inherit' style='margin-left: 12px; margin-top: 12px; margin-right: -12px;' (onChange)='onChildChange()'></vgip-meta-field>\n }\n @if (!preview) {\n <div style='padding-left: 12px; margin-top: 3px;'>\n <button type='button' (click)='remove(i)' class=\"Vlt-btn Vlt-btn--link item-remove-button\" [disabled]='model.length === (validations.min || 0)' aria-label='Remove'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-bin\"/></svg>\n </button>\n </div>\n }\n </div>\n }\n }\n @if (!preview && (!validations.max || !model || model.length < validations.max)) {\n <button style='width: 100%;' type='button' (click)='add()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--tertiary Vlt-btn--app Vlt-btn--no-focus item-add-button\" [disabled]='validations.max && model && model.length === validations.max'>\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{list.label}}\n </button>\n }\n @if ((f | metaModel)._parent.submitted && f.invalid) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n </div>\n}\n", styles: [".Vlt-btn--link:not([disabled]) svg{fill:#e84545}.Vlt-btn--link:not([disabled]):hover svg{fill:#de1c1c}.item-add-button{background-color:var(--vgip-meta-input-action-hover-bg-color);color:var(--vgip-meta-input-color)}.item-add-button svg{fill:var(--vgip-meta-input-color)}.item-add-button:hover{transform:scale(1.02);box-shadow:inset 0 0 0 1px var(--vgip-meta-input-active-border-color)}.item-remove-button{border:0}.item-remove-button:disabled{cursor:not-allowed}\n"] }]
|
|
5199
5216
|
}] });
|
|
5200
5217
|
|
|
5201
5218
|
var index$3 = /*#__PURE__*/Object.freeze({
|
|
@@ -5270,18 +5287,18 @@ class FieldRichtext extends FieldAbstract {
|
|
|
5270
5287
|
textToSpeech() {
|
|
5271
5288
|
this.focus();
|
|
5272
5289
|
}
|
|
5273
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5274
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldRichtext, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class='vgip-meta-field-preview' *ngIf='preview && parent[meta.name]'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched) }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\n <div class=\"Vlt-textarea\" [ngClass]='{ active: active }'>\n <input type='hidden' class='main model' [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [(ngModel)]='parent[meta.name]' #f='ngModel' [name]='name'/>\n <quill-editor (onFocus)='active = true' (onBlur)='active = false' class='main model' [(ngModel)]='parent[meta.name]' #fq='ngModel' (ngModelChange)=\"onModelChangeLocal($event)\" [ngModelOptions]='{ standalone: true }' placeholder=' ' [modules]=\"quillConfigModules\"></quill-editor>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched)' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border-color:#f25a6b}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-color:#f25a6b}.Vlt-form__element ::ng-deep quill-editor{display:initial}.Vlt-form__element ::ng-deep .Vlt-textarea em{font-style:italic}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border:1px solid var(--vgip-meta-input-border-color);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:0;background:var(--vgip-meta-input-accent-bg-color);padding:11px 8px}@media only screen and (max-width:575px){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-formats{margin-right:8px;zoom:84%}}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label{color:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label .ql-stroke{stroke:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--vgip-meta-input-accent-color);stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-bottom-left-radius:5px;border-bottom-right-radius:5px;min-height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{color:var(--vgip-meta-input-color)!important}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h1,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h2,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h3,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h4,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h5,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h6{color:inherit}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor p{color:inherit}@media(hover:none){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{font-size:16px}}.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-container{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-editor:focus{border-color:var(--vgip-meta-input-active-border-color)!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ql-bubble.ql-toolbar:after,:host ::ng-deep .ql-bubble .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble.ql-toolbar button,:host ::ng-deep .ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-bubble.ql-toolbar button svg,:host ::ng-deep .ql-bubble .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-bubble.ql-toolbar button:active:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-bubble.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-bubble.ql-toolbar button:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:hover,:host ::ng-deep .ql-bubble.ql-toolbar button:focus,:host ::ng-deep .ql-bubble .ql-toolbar button:focus,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media(pointer:coarse){:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}:host ::ng-deep .ql-bubble{box-sizing:border-box}:host ::ng-deep .ql-bubble *{box-sizing:border-box}:host ::ng-deep .ql-bubble .ql-hidden{display:none}:host ::ng-deep .ql-bubble .ql-out-bottom,:host ::ng-deep .ql-bubble .ql-out-top{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-bubble .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-bubble .ql-fill,:host ::ng-deep .ql-bubble .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble .ql-empty{fill:none}:host ::ng-deep .ql-bubble .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-bubble .ql-thin,:host ::ng-deep .ql-bubble .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-bubble .ql-transparent{opacity:.4}:host ::ng-deep .ql-bubble .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-bubble .ql-editor h1{font-size:2em}:host ::ng-deep .ql-bubble .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-editor h4{font-size:1em}:host ::ng-deep .ql-bubble .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-bubble .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-bubble .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-bubble .ql-editor code,:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-bubble .ql-editor img{max-width:100%}:host ::ng-deep .ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-bubble .ql-color-picker,:host ::ng-deep .ql-bubble .ql-icon-picker{width:28px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-bubble .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-bubble .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-bubble .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}:host ::ng-deep .ql-bubble .ql-color-picker svg{margin:1px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:\" \";display:block;left:50%;margin-left:-6px;position:absolute}:host ::ng-deep .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip-editor{display:none}:host ::ng-deep .ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}:host ::ng-deep .ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}:host ::ng-deep .ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:\"\\d7\";font-size:16px;font-weight:700}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:\" \";height:0;width:0}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:after{visibility:visible}:host ::ng-deep .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}:host ::ng-deep .ql-container.ql-disabled .ql-tooltip{visibility:hidden}:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}:host ::ng-deep .ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}:host ::ng-deep .ql-clipboard p{margin:0;padding:0}:host ::ng-deep .ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ql-editor>*{cursor:text}:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor ol,:host ::ng-deep .ql-editor pre,:host ::ng-deep .ql-editor blockquote,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{margin:0;padding:0}@supports (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor table{border-collapse:collapse}:host ::ng-deep .ql-editor td{border:1px solid #000;padding:2px 5px}:host ::ng-deep .ql-editor ol{padding-left:1.5em}:host ::ng-deep .ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}:host ::ng-deep .ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui{color:#777}:host ::ng-deep .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered]{counter-increment:list-0}:host ::ng-deep .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}:host ::ng-deep .ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}:host ::ng-deep .ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}:host ::ng-deep .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}:host ::ng-deep .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}:host ::ng-deep .ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}:host ::ng-deep .ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}:host ::ng-deep .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}:host ::ng-deep .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}:host ::ng-deep .ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}:host ::ng-deep .ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}:host ::ng-deep .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}:host ::ng-deep .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}:host ::ng-deep .ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}:host ::ng-deep .ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}:host ::ng-deep .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}:host ::ng-deep .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}:host ::ng-deep .ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}:host ::ng-deep .ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}:host ::ng-deep .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}:host ::ng-deep .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}:host ::ng-deep .ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}:host ::ng-deep .ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}:host ::ng-deep .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}:host ::ng-deep .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}:host ::ng-deep .ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}:host ::ng-deep .ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}:host ::ng-deep .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}:host ::ng-deep .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}:host ::ng-deep .ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}:host ::ng-deep .ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}:host ::ng-deep .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}:host ::ng-deep .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}:host ::ng-deep .ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}:host ::ng-deep .ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}:host ::ng-deep .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}:host ::ng-deep .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl{padding-right:1.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}:host ::ng-deep .ql-editor table{table-layout:fixed;width:100%}:host ::ng-deep .ql-editor table td{outline:none}:host ::ng-deep .ql-editor .ql-code-block-container{font-family:monospace}:host ::ng-deep .ql-editor .ql-video{display:block;max-width:100%}:host ::ng-deep .ql-editor .ql-video.ql-align-center{margin:0 auto}:host ::ng-deep .ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}:host ::ng-deep .ql-editor .ql-bg-black{background-color:#000}:host ::ng-deep .ql-editor .ql-bg-red{background-color:#e60000}:host ::ng-deep .ql-editor .ql-bg-orange{background-color:#f90}:host ::ng-deep .ql-editor .ql-bg-yellow{background-color:#ff0}:host ::ng-deep .ql-editor .ql-bg-green{background-color:#008a00}:host ::ng-deep .ql-editor .ql-bg-blue{background-color:#06c}:host ::ng-deep .ql-editor .ql-bg-purple{background-color:#93f}:host ::ng-deep .ql-editor .ql-color-white{color:#fff}:host ::ng-deep .ql-editor .ql-color-red{color:#e60000}:host ::ng-deep .ql-editor .ql-color-orange{color:#f90}:host ::ng-deep .ql-editor .ql-color-yellow{color:#ff0}:host ::ng-deep .ql-editor .ql-color-green{color:#008a00}:host ::ng-deep .ql-editor .ql-color-blue{color:#06c}:host ::ng-deep .ql-editor .ql-color-purple{color:#93f}:host ::ng-deep .ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-editor .ql-size-small{font-size:.75em}:host ::ng-deep .ql-editor .ql-size-large{font-size:1.5em}:host ::ng-deep .ql-editor .ql-size-huge{font-size:2.5em}:host ::ng-deep .ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}:host ::ng-deep .ql-editor .ql-align-center{text-align:center}:host ::ng-deep .ql-editor .ql-align-justify{text-align:justify}:host ::ng-deep .ql-editor .ql-align-right{text-align:right}:host ::ng-deep .ql-editor .ql-ui{position:absolute}:host ::ng-deep .ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}:host ::ng-deep .ql-snow.ql-toolbar:after,:host ::ng-deep .ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-snow.ql-toolbar button svg,:host ::ng-deep .ql-snow .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-snow.ql-toolbar button:active:hover,:host ::ng-deep .ql-snow .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-snow.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-snow .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-snow.ql-toolbar button:hover,:host ::ng-deep .ql-snow .ql-toolbar button:hover,:host ::ng-deep .ql-snow.ql-toolbar button:focus,:host ::ng-deep .ql-snow .ql-toolbar button:focus,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}:host ::ng-deep .ql-snow{box-sizing:border-box}:host ::ng-deep .ql-snow *{box-sizing:border-box}:host ::ng-deep .ql-snow .ql-hidden{display:none}:host ::ng-deep .ql-snow .ql-out-bottom,:host ::ng-deep .ql-snow .ql-out-top{visibility:hidden}:host ::ng-deep .ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-snow .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-snow .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-snow .ql-fill,:host ::ng-deep .ql-snow .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow .ql-empty{fill:none}:host ::ng-deep .ql-snow .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-snow .ql-thin,:host ::ng-deep .ql-snow .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-snow .ql-transparent{opacity:.4}:host ::ng-deep .ql-snow .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-snow .ql-editor h1{font-size:2em}:host ::ng-deep .ql-snow .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-snow .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-snow .ql-editor h4{font-size:1em}:host ::ng-deep .ql-snow .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-snow .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-snow .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-snow .ql-editor code,:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-snow .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-snow .ql-editor img{max-width:100%}:host ::ng-deep .ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-snow .ql-color-picker,:host ::ng-deep .ql-snow .ql-icon-picker{width:28px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-snow .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-snow .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-snow .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-code-block-container{position:relative}:host ::ng-deep .ql-code-block-container .ql-ui{right:5px;top:5px}:host ::ng-deep .ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{margin-right:15px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}:host ::ng-deep .ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}:host ::ng-deep .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}:host ::ng-deep .ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}:host ::ng-deep .ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}:host ::ng-deep .ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}:host ::ng-deep .ql-snow .ql-tooltip a{line-height:26px}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-preview,:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}:host ::ng-deep .ql-snow a{color:#06c}:host ::ng-deep .ql-container.ql-snow{border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [
|
|
5290
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldRichtext, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5291
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldRichtext, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && parent[meta.name]) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched) }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <div class=\"Vlt-textarea\" [ngClass]='{ active: active }'>\n <input type='hidden' class='main model' [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [(ngModel)]='parent[meta.name]' #f='ngModel' [name]='name'/>\n <quill-editor (onFocus)='active = true' (onBlur)='active = false' class='main model' [(ngModel)]='parent[meta.name]' #fq='ngModel' (ngModelChange)=\"onModelChangeLocal($event)\" [ngModelOptions]='{ standalone: true }' placeholder=' ' [modules]=\"quillConfigModules\"></quill-editor>\n </div>\n @if (f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched)) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n </div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border-color:#f25a6b}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-color:#f25a6b}.Vlt-form__element ::ng-deep quill-editor{display:initial}.Vlt-form__element ::ng-deep .Vlt-textarea em{font-style:italic}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border:1px solid var(--vgip-meta-input-border-color);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:0;background:var(--vgip-meta-input-accent-bg-color);padding:11px 8px}@media only screen and (max-width:575px){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-formats{margin-right:8px;zoom:84%}}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label{color:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label .ql-stroke{stroke:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--vgip-meta-input-accent-color);stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-bottom-left-radius:5px;border-bottom-right-radius:5px;min-height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{color:var(--vgip-meta-input-color)!important}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h1,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h2,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h3,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h4,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h5,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h6{color:inherit}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor p{color:inherit}@media(hover:none){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{font-size:16px}}.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-container{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-editor:focus{border-color:var(--vgip-meta-input-active-border-color)!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ql-bubble.ql-toolbar:after,:host ::ng-deep .ql-bubble .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble.ql-toolbar button,:host ::ng-deep .ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-bubble.ql-toolbar button svg,:host ::ng-deep .ql-bubble .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-bubble.ql-toolbar button:active:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-bubble.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-bubble.ql-toolbar button:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:hover,:host ::ng-deep .ql-bubble.ql-toolbar button:focus,:host ::ng-deep .ql-bubble .ql-toolbar button:focus,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media(pointer:coarse){:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}:host ::ng-deep .ql-bubble{box-sizing:border-box}:host ::ng-deep .ql-bubble *{box-sizing:border-box}:host ::ng-deep .ql-bubble .ql-hidden{display:none}:host ::ng-deep .ql-bubble .ql-out-bottom,:host ::ng-deep .ql-bubble .ql-out-top{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-bubble .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-bubble .ql-fill,:host ::ng-deep .ql-bubble .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble .ql-empty{fill:none}:host ::ng-deep .ql-bubble .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-bubble .ql-thin,:host ::ng-deep .ql-bubble .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-bubble .ql-transparent{opacity:.4}:host ::ng-deep .ql-bubble .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-bubble .ql-editor h1{font-size:2em}:host ::ng-deep .ql-bubble .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-editor h4{font-size:1em}:host ::ng-deep .ql-bubble .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-bubble .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-bubble .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-bubble .ql-editor code,:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-bubble .ql-editor img{max-width:100%}:host ::ng-deep .ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-bubble .ql-color-picker,:host ::ng-deep .ql-bubble .ql-icon-picker{width:28px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-bubble .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-bubble .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-bubble .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}:host ::ng-deep .ql-bubble .ql-color-picker svg{margin:1px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:\" \";display:block;left:50%;margin-left:-6px;position:absolute}:host ::ng-deep .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip-editor{display:none}:host ::ng-deep .ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}:host ::ng-deep .ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}:host ::ng-deep .ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:\"\\d7\";font-size:16px;font-weight:700}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:\" \";height:0;width:0}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:after{visibility:visible}:host ::ng-deep .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}:host ::ng-deep .ql-container.ql-disabled .ql-tooltip{visibility:hidden}:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}:host ::ng-deep .ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}:host ::ng-deep .ql-clipboard p{margin:0;padding:0}:host ::ng-deep .ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ql-editor>*{cursor:text}:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor ol,:host ::ng-deep .ql-editor pre,:host ::ng-deep .ql-editor blockquote,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{margin:0;padding:0}@supports (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor table{border-collapse:collapse}:host ::ng-deep .ql-editor td{border:1px solid #000;padding:2px 5px}:host ::ng-deep .ql-editor ol{padding-left:1.5em}:host ::ng-deep .ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}:host ::ng-deep .ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui{color:#777}:host ::ng-deep .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered]{counter-increment:list-0}:host ::ng-deep .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}:host ::ng-deep .ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}:host ::ng-deep .ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}:host ::ng-deep .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}:host ::ng-deep .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}:host ::ng-deep .ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}:host ::ng-deep .ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}:host ::ng-deep .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}:host ::ng-deep .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}:host ::ng-deep .ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}:host ::ng-deep .ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}:host ::ng-deep .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}:host ::ng-deep .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}:host ::ng-deep .ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}:host ::ng-deep .ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}:host ::ng-deep .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}:host ::ng-deep .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}:host ::ng-deep .ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}:host ::ng-deep .ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}:host ::ng-deep .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}:host ::ng-deep .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}:host ::ng-deep .ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}:host ::ng-deep .ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}:host ::ng-deep .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}:host ::ng-deep .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}:host ::ng-deep .ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}:host ::ng-deep .ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}:host ::ng-deep .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}:host ::ng-deep .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}:host ::ng-deep .ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}:host ::ng-deep .ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}:host ::ng-deep .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}:host ::ng-deep .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}:host ::ng-deep .ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}:host ::ng-deep .ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}:host ::ng-deep .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}:host ::ng-deep .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl{padding-right:1.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}:host ::ng-deep .ql-editor table{table-layout:fixed;width:100%}:host ::ng-deep .ql-editor table td{outline:none}:host ::ng-deep .ql-editor .ql-code-block-container{font-family:monospace}:host ::ng-deep .ql-editor .ql-video{display:block;max-width:100%}:host ::ng-deep .ql-editor .ql-video.ql-align-center{margin:0 auto}:host ::ng-deep .ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}:host ::ng-deep .ql-editor .ql-bg-black{background-color:#000}:host ::ng-deep .ql-editor .ql-bg-red{background-color:#e60000}:host ::ng-deep .ql-editor .ql-bg-orange{background-color:#f90}:host ::ng-deep .ql-editor .ql-bg-yellow{background-color:#ff0}:host ::ng-deep .ql-editor .ql-bg-green{background-color:#008a00}:host ::ng-deep .ql-editor .ql-bg-blue{background-color:#06c}:host ::ng-deep .ql-editor .ql-bg-purple{background-color:#93f}:host ::ng-deep .ql-editor .ql-color-white{color:#fff}:host ::ng-deep .ql-editor .ql-color-red{color:#e60000}:host ::ng-deep .ql-editor .ql-color-orange{color:#f90}:host ::ng-deep .ql-editor .ql-color-yellow{color:#ff0}:host ::ng-deep .ql-editor .ql-color-green{color:#008a00}:host ::ng-deep .ql-editor .ql-color-blue{color:#06c}:host ::ng-deep .ql-editor .ql-color-purple{color:#93f}:host ::ng-deep .ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-editor .ql-size-small{font-size:.75em}:host ::ng-deep .ql-editor .ql-size-large{font-size:1.5em}:host ::ng-deep .ql-editor .ql-size-huge{font-size:2.5em}:host ::ng-deep .ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}:host ::ng-deep .ql-editor .ql-align-center{text-align:center}:host ::ng-deep .ql-editor .ql-align-justify{text-align:justify}:host ::ng-deep .ql-editor .ql-align-right{text-align:right}:host ::ng-deep .ql-editor .ql-ui{position:absolute}:host ::ng-deep .ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}:host ::ng-deep .ql-snow.ql-toolbar:after,:host ::ng-deep .ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-snow.ql-toolbar button svg,:host ::ng-deep .ql-snow .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-snow.ql-toolbar button:active:hover,:host ::ng-deep .ql-snow .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-snow.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-snow .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-snow.ql-toolbar button:hover,:host ::ng-deep .ql-snow .ql-toolbar button:hover,:host ::ng-deep .ql-snow.ql-toolbar button:focus,:host ::ng-deep .ql-snow .ql-toolbar button:focus,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}:host ::ng-deep .ql-snow{box-sizing:border-box}:host ::ng-deep .ql-snow *{box-sizing:border-box}:host ::ng-deep .ql-snow .ql-hidden{display:none}:host ::ng-deep .ql-snow .ql-out-bottom,:host ::ng-deep .ql-snow .ql-out-top{visibility:hidden}:host ::ng-deep .ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-snow .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-snow .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-snow .ql-fill,:host ::ng-deep .ql-snow .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow .ql-empty{fill:none}:host ::ng-deep .ql-snow .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-snow .ql-thin,:host ::ng-deep .ql-snow .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-snow .ql-transparent{opacity:.4}:host ::ng-deep .ql-snow .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-snow .ql-editor h1{font-size:2em}:host ::ng-deep .ql-snow .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-snow .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-snow .ql-editor h4{font-size:1em}:host ::ng-deep .ql-snow .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-snow .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-snow .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-snow .ql-editor code,:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-snow .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-snow .ql-editor img{max-width:100%}:host ::ng-deep .ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-snow .ql-color-picker,:host ::ng-deep .ql-snow .ql-icon-picker{width:28px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-snow .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-snow .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-snow .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-code-block-container{position:relative}:host ::ng-deep .ql-code-block-container .ql-ui{right:5px;top:5px}:host ::ng-deep .ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{margin-right:15px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}:host ::ng-deep .ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}:host ::ng-deep .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}:host ::ng-deep .ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}:host ::ng-deep .ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}:host ::ng-deep .ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}:host ::ng-deep .ql-snow .ql-tooltip a{line-height:26px}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-preview,:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}:host ::ng-deep .ql-snow a{color:#06c}:host ::ng-deep .ql-container.ql-snow{border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [
|
|
5275
5292
|
{ provide: ControlContainer, useExisting: NgForm },
|
|
5276
5293
|
// { provide: QUILL_CONFIG_TOKEN, useValue: quillConfig }
|
|
5277
5294
|
] }); }
|
|
5278
5295
|
}
|
|
5279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldRichtext, decorators: [{
|
|
5280
5297
|
type: Component,
|
|
5281
5298
|
args: [{ viewProviders: [
|
|
5282
5299
|
{ provide: ControlContainer, useExisting: NgForm },
|
|
5283
5300
|
// { provide: QUILL_CONFIG_TOKEN, useValue: quillConfig }
|
|
5284
|
-
], standalone: false, template: "<div class='vgip-meta-field-preview' *ngIf='preview && parent[meta.name]'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched) }\">\n <label class=\"Vlt-label\">{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label> <!-- eslint-disable-line -->\n <div class=\"Vlt-textarea\" [ngClass]='{ active: active }'>\n <input type='hidden' class='main model' [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [(ngModel)]='parent[meta.name]' #f='ngModel' [name]='name'/>\n <quill-editor (onFocus)='active = true' (onBlur)='active = false' class='main model' [(ngModel)]='parent[meta.name]' #fq='ngModel' (ngModelChange)=\"onModelChangeLocal($event)\" [ngModelOptions]='{ standalone: true }' placeholder=' ' [modules]=\"quillConfigModules\"></quill-editor>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched)' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required</span>\n <span *ngIf=\"f.errors.maxlength\">Length can not exceed {{validations.maxlength}} characters</span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.helpText' class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n</div>\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border-color:#f25a6b}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-color:#f25a6b}.Vlt-form__element ::ng-deep quill-editor{display:initial}.Vlt-form__element ::ng-deep .Vlt-textarea em{font-style:italic}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border:1px solid var(--vgip-meta-input-border-color);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:0;background:var(--vgip-meta-input-accent-bg-color);padding:11px 8px}@media only screen and (max-width:575px){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-formats{margin-right:8px;zoom:84%}}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label{color:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label .ql-stroke{stroke:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--vgip-meta-input-accent-color);stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-bottom-left-radius:5px;border-bottom-right-radius:5px;min-height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{color:var(--vgip-meta-input-color)!important}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h1,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h2,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h3,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h4,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h5,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h6{color:inherit}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor p{color:inherit}@media(hover:none){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{font-size:16px}}.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-container{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-editor:focus{border-color:var(--vgip-meta-input-active-border-color)!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ql-bubble.ql-toolbar:after,:host ::ng-deep .ql-bubble .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble.ql-toolbar button,:host ::ng-deep .ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-bubble.ql-toolbar button svg,:host ::ng-deep .ql-bubble .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-bubble.ql-toolbar button:active:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-bubble.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-bubble.ql-toolbar button:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:hover,:host ::ng-deep .ql-bubble.ql-toolbar button:focus,:host ::ng-deep .ql-bubble .ql-toolbar button:focus,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media(pointer:coarse){:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}:host ::ng-deep .ql-bubble{box-sizing:border-box}:host ::ng-deep .ql-bubble *{box-sizing:border-box}:host ::ng-deep .ql-bubble .ql-hidden{display:none}:host ::ng-deep .ql-bubble .ql-out-bottom,:host ::ng-deep .ql-bubble .ql-out-top{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-bubble .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-bubble .ql-fill,:host ::ng-deep .ql-bubble .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble .ql-empty{fill:none}:host ::ng-deep .ql-bubble .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-bubble .ql-thin,:host ::ng-deep .ql-bubble .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-bubble .ql-transparent{opacity:.4}:host ::ng-deep .ql-bubble .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-bubble .ql-editor h1{font-size:2em}:host ::ng-deep .ql-bubble .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-editor h4{font-size:1em}:host ::ng-deep .ql-bubble .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-bubble .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-bubble .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-bubble .ql-editor code,:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-bubble .ql-editor img{max-width:100%}:host ::ng-deep .ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-bubble .ql-color-picker,:host ::ng-deep .ql-bubble .ql-icon-picker{width:28px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-bubble .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-bubble .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-bubble .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}:host ::ng-deep .ql-bubble .ql-color-picker svg{margin:1px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:\" \";display:block;left:50%;margin-left:-6px;position:absolute}:host ::ng-deep .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip-editor{display:none}:host ::ng-deep .ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}:host ::ng-deep .ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}:host ::ng-deep .ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:\"\\d7\";font-size:16px;font-weight:700}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:\" \";height:0;width:0}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:after{visibility:visible}:host ::ng-deep .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}:host ::ng-deep .ql-container.ql-disabled .ql-tooltip{visibility:hidden}:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}:host ::ng-deep .ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}:host ::ng-deep .ql-clipboard p{margin:0;padding:0}:host ::ng-deep .ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ql-editor>*{cursor:text}:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor ol,:host ::ng-deep .ql-editor pre,:host ::ng-deep .ql-editor blockquote,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{margin:0;padding:0}@supports (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor table{border-collapse:collapse}:host ::ng-deep .ql-editor td{border:1px solid #000;padding:2px 5px}:host ::ng-deep .ql-editor ol{padding-left:1.5em}:host ::ng-deep .ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}:host ::ng-deep .ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui{color:#777}:host ::ng-deep .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered]{counter-increment:list-0}:host ::ng-deep .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}:host ::ng-deep .ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}:host ::ng-deep .ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}:host ::ng-deep .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}:host ::ng-deep .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}:host ::ng-deep .ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}:host ::ng-deep .ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}:host ::ng-deep .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}:host ::ng-deep .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}:host ::ng-deep .ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}:host ::ng-deep .ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}:host ::ng-deep .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}:host ::ng-deep .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}:host ::ng-deep .ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}:host ::ng-deep .ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}:host ::ng-deep .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}:host ::ng-deep .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}:host ::ng-deep .ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}:host ::ng-deep .ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}:host ::ng-deep .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}:host ::ng-deep .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}:host ::ng-deep .ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}:host ::ng-deep .ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}:host ::ng-deep .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}:host ::ng-deep .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}:host ::ng-deep .ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}:host ::ng-deep .ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}:host ::ng-deep .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}:host ::ng-deep .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}:host ::ng-deep .ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}:host ::ng-deep .ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}:host ::ng-deep .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}:host ::ng-deep .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}:host ::ng-deep .ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}:host ::ng-deep .ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}:host ::ng-deep .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}:host ::ng-deep .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl{padding-right:1.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}:host ::ng-deep .ql-editor table{table-layout:fixed;width:100%}:host ::ng-deep .ql-editor table td{outline:none}:host ::ng-deep .ql-editor .ql-code-block-container{font-family:monospace}:host ::ng-deep .ql-editor .ql-video{display:block;max-width:100%}:host ::ng-deep .ql-editor .ql-video.ql-align-center{margin:0 auto}:host ::ng-deep .ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}:host ::ng-deep .ql-editor .ql-bg-black{background-color:#000}:host ::ng-deep .ql-editor .ql-bg-red{background-color:#e60000}:host ::ng-deep .ql-editor .ql-bg-orange{background-color:#f90}:host ::ng-deep .ql-editor .ql-bg-yellow{background-color:#ff0}:host ::ng-deep .ql-editor .ql-bg-green{background-color:#008a00}:host ::ng-deep .ql-editor .ql-bg-blue{background-color:#06c}:host ::ng-deep .ql-editor .ql-bg-purple{background-color:#93f}:host ::ng-deep .ql-editor .ql-color-white{color:#fff}:host ::ng-deep .ql-editor .ql-color-red{color:#e60000}:host ::ng-deep .ql-editor .ql-color-orange{color:#f90}:host ::ng-deep .ql-editor .ql-color-yellow{color:#ff0}:host ::ng-deep .ql-editor .ql-color-green{color:#008a00}:host ::ng-deep .ql-editor .ql-color-blue{color:#06c}:host ::ng-deep .ql-editor .ql-color-purple{color:#93f}:host ::ng-deep .ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-editor .ql-size-small{font-size:.75em}:host ::ng-deep .ql-editor .ql-size-large{font-size:1.5em}:host ::ng-deep .ql-editor .ql-size-huge{font-size:2.5em}:host ::ng-deep .ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}:host ::ng-deep .ql-editor .ql-align-center{text-align:center}:host ::ng-deep .ql-editor .ql-align-justify{text-align:justify}:host ::ng-deep .ql-editor .ql-align-right{text-align:right}:host ::ng-deep .ql-editor .ql-ui{position:absolute}:host ::ng-deep .ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}:host ::ng-deep .ql-snow.ql-toolbar:after,:host ::ng-deep .ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-snow.ql-toolbar button svg,:host ::ng-deep .ql-snow .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-snow.ql-toolbar button:active:hover,:host ::ng-deep .ql-snow .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-snow.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-snow .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-snow.ql-toolbar button:hover,:host ::ng-deep .ql-snow .ql-toolbar button:hover,:host ::ng-deep .ql-snow.ql-toolbar button:focus,:host ::ng-deep .ql-snow .ql-toolbar button:focus,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}:host ::ng-deep .ql-snow{box-sizing:border-box}:host ::ng-deep .ql-snow *{box-sizing:border-box}:host ::ng-deep .ql-snow .ql-hidden{display:none}:host ::ng-deep .ql-snow .ql-out-bottom,:host ::ng-deep .ql-snow .ql-out-top{visibility:hidden}:host ::ng-deep .ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-snow .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-snow .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-snow .ql-fill,:host ::ng-deep .ql-snow .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow .ql-empty{fill:none}:host ::ng-deep .ql-snow .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-snow .ql-thin,:host ::ng-deep .ql-snow .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-snow .ql-transparent{opacity:.4}:host ::ng-deep .ql-snow .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-snow .ql-editor h1{font-size:2em}:host ::ng-deep .ql-snow .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-snow .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-snow .ql-editor h4{font-size:1em}:host ::ng-deep .ql-snow .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-snow .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-snow .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-snow .ql-editor code,:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-snow .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-snow .ql-editor img{max-width:100%}:host ::ng-deep .ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-snow .ql-color-picker,:host ::ng-deep .ql-snow .ql-icon-picker{width:28px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-snow .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-snow .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-snow .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-code-block-container{position:relative}:host ::ng-deep .ql-code-block-container .ql-ui{right:5px;top:5px}:host ::ng-deep .ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{margin-right:15px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}:host ::ng-deep .ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}:host ::ng-deep .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}:host ::ng-deep .ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}:host ::ng-deep .ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}:host ::ng-deep .ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}:host ::ng-deep .ql-snow .ql-tooltip a{line-height:26px}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-preview,:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}:host ::ng-deep .ql-snow a{color:#06c}:host ::ng-deep .ql-container.ql-snow{border:1px solid #ccc}\n"] }]
|
|
5301
|
+
], standalone: false, template: "@if (preview && parent[meta.name]) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{parent[meta.name]}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element\" [ngClass]=\"{ 'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched) }\">\n <label class=\"Vlt-label\"> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control-->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n <div class=\"Vlt-textarea\" [ngClass]='{ active: active }'>\n <input type='hidden' class='main model' [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [(ngModel)]='parent[meta.name]' #f='ngModel' [name]='name'/>\n <quill-editor (onFocus)='active = true' (onBlur)='active = false' class='main model' [(ngModel)]='parent[meta.name]' #fq='ngModel' (ngModelChange)=\"onModelChangeLocal($event)\" [ngModelOptions]='{ standalone: true }' placeholder=' ' [modules]=\"quillConfigModules\"></quill-editor>\n </div>\n @if (f.invalid && ((f | metaModel)._parent.submitted || (fq | metaModel).touched)) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required</span>\n }\n @if (f.errors.maxlength) {\n <span>Length can not exceed {{validations.maxlength}} characters</span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.helpText) {\n <small class=\"Vlt-form__element__hint\">{{meta.helpText}}</small>\n }\n </div>\n}\n", styles: [".Vlt-composite__append--icon{bottom:7px;right:16px;padding:3px;width:initial;height:initial;cursor:pointer}.Vlt-composite__append--icon:hover svg{fill:#2c2d30}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border-color:#f25a6b}.Vlt-form__element.Vlt-form__element--error ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-color:#f25a6b}.Vlt-form__element ::ng-deep quill-editor{display:initial}.Vlt-form__element ::ng-deep .Vlt-textarea em{font-style:italic}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow{border:1px solid var(--vgip-meta-input-border-color);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:0;background:var(--vgip-meta-input-accent-bg-color);padding:11px 8px}@media only screen and (max-width:575px){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-formats{margin-right:8px;zoom:84%}}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label{color:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label .ql-stroke{stroke:var(--vgip-meta-input-label-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--vgip-meta-input-accent-color);stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow button:hover .ql-stroke,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--vgip-meta-input-accent-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow{border-bottom-left-radius:5px;border-bottom-right-radius:5px;min-height:48px;background:var(--vgip-meta-input-bg-color);border-color:var(--vgip-meta-input-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{color:var(--vgip-meta-input-color)!important}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h1,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h2,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h3,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h4,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h5,.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor h6{color:inherit}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor p{color:inherit}@media(hover:none){.Vlt-form__element ::ng-deep .Vlt-textarea .ql-container.ql-snow .ql-editor{font-size:16px}}.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:hover .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea:focus .ql-container,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-toolbar,.Vlt-form__element ::ng-deep .Vlt-textarea.active .ql-container{border-color:var(--vgip-meta-input-active-border-color)}.Vlt-form__element ::ng-deep .Vlt-textarea .ql-editor:focus{border-color:var(--vgip-meta-input-active-border-color)!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ql-bubble.ql-toolbar:after,:host ::ng-deep .ql-bubble .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble.ql-toolbar button,:host ::ng-deep .ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-bubble.ql-toolbar button svg,:host ::ng-deep .ql-bubble .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-bubble.ql-toolbar button:active:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-bubble.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-bubble.ql-toolbar button:hover,:host ::ng-deep .ql-bubble .ql-toolbar button:hover,:host ::ng-deep .ql-bubble.ql-toolbar button:focus,:host ::ng-deep .ql-bubble .ql-toolbar button:focus,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media(pointer:coarse){:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}:host ::ng-deep .ql-bubble{box-sizing:border-box}:host ::ng-deep .ql-bubble *{box-sizing:border-box}:host ::ng-deep .ql-bubble .ql-hidden{display:none}:host ::ng-deep .ql-bubble .ql-out-bottom,:host ::ng-deep .ql-bubble .ql-out-top{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-bubble .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-bubble .ql-fill,:host ::ng-deep .ql-bubble .ql-stroke.ql-fill{fill:#ccc}:host ::ng-deep .ql-bubble .ql-empty{fill:none}:host ::ng-deep .ql-bubble .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-bubble .ql-thin,:host ::ng-deep .ql-bubble .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-bubble .ql-transparent{opacity:.4}:host ::ng-deep .ql-bubble .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-bubble .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-bubble .ql-editor h1{font-size:2em}:host ::ng-deep .ql-bubble .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-editor h4{font-size:1em}:host ::ng-deep .ql-bubble .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-bubble .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-bubble .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-bubble .ql-editor code,:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-bubble .ql-editor img{max-width:100%}:host ::ng-deep .ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}:host ::ng-deep .ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-bubble .ql-color-picker,:host ::ng-deep .ql-bubble .ql-icon-picker{width:28px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-bubble .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-bubble .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-bubble .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}:host ::ng-deep .ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}:host ::ng-deep .ql-bubble .ql-color-picker svg{margin:1px}:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}:host ::ng-deep .ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:\" \";display:block;left:50%;margin-left:-6px;position:absolute}:host ::ng-deep .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}:host ::ng-deep .ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}:host ::ng-deep .ql-bubble .ql-tooltip-editor{display:none}:host ::ng-deep .ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}:host ::ng-deep .ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}:host ::ng-deep .ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:\"\\d7\";font-size:16px;font-weight:700}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:\" \";height:0;width:0}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:before,:host ::ng-deep .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:after{visibility:visible}:host ::ng-deep .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}:host ::ng-deep .ql-container.ql-disabled .ql-tooltip{visibility:hidden}:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}:host ::ng-deep .ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}:host ::ng-deep .ql-clipboard p{margin:0;padding:0}:host ::ng-deep .ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}:host ::ng-deep .ql-editor>*{cursor:text}:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor ol,:host ::ng-deep .ql-editor pre,:host ::ng-deep .ql-editor blockquote,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{margin:0;padding:0}@supports (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor p,:host ::ng-deep .ql-editor h1,:host ::ng-deep .ql-editor h2,:host ::ng-deep .ql-editor h3,:host ::ng-deep .ql-editor h4,:host ::ng-deep .ql-editor h5,:host ::ng-deep .ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor table{border-collapse:collapse}:host ::ng-deep .ql-editor td{border:1px solid #000;padding:2px 5px}:host ::ng-deep .ql-editor ol{padding-left:1.5em}:host ::ng-deep .ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}:host ::ng-deep .ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui,:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui{color:#777}:host ::ng-deep .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}:host ::ng-deep .ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}:host ::ng-deep .ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered]{counter-increment:list-0}:host ::ng-deep .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set: none){:host ::ng-deep .ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}:host ::ng-deep .ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}:host ::ng-deep .ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}:host ::ng-deep .ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}:host ::ng-deep .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}:host ::ng-deep .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}:host ::ng-deep .ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}:host ::ng-deep .ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}:host ::ng-deep .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}:host ::ng-deep .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}:host ::ng-deep .ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}:host ::ng-deep .ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}:host ::ng-deep .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}:host ::ng-deep .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}:host ::ng-deep .ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}:host ::ng-deep .ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}:host ::ng-deep .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}:host ::ng-deep .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}:host ::ng-deep .ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}:host ::ng-deep .ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}:host ::ng-deep .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}:host ::ng-deep .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}:host ::ng-deep .ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}:host ::ng-deep .ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}:host ::ng-deep .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}:host ::ng-deep .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}:host ::ng-deep .ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}:host ::ng-deep .ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}:host ::ng-deep .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}:host ::ng-deep .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}:host ::ng-deep .ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}:host ::ng-deep .ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}:host ::ng-deep .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}:host ::ng-deep .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}:host ::ng-deep .ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}:host ::ng-deep .ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}:host ::ng-deep .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}:host ::ng-deep .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl{padding-right:1.5em}:host ::ng-deep .ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}:host ::ng-deep .ql-editor table{table-layout:fixed;width:100%}:host ::ng-deep .ql-editor table td{outline:none}:host ::ng-deep .ql-editor .ql-code-block-container{font-family:monospace}:host ::ng-deep .ql-editor .ql-video{display:block;max-width:100%}:host ::ng-deep .ql-editor .ql-video.ql-align-center{margin:0 auto}:host ::ng-deep .ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}:host ::ng-deep .ql-editor .ql-bg-black{background-color:#000}:host ::ng-deep .ql-editor .ql-bg-red{background-color:#e60000}:host ::ng-deep .ql-editor .ql-bg-orange{background-color:#f90}:host ::ng-deep .ql-editor .ql-bg-yellow{background-color:#ff0}:host ::ng-deep .ql-editor .ql-bg-green{background-color:#008a00}:host ::ng-deep .ql-editor .ql-bg-blue{background-color:#06c}:host ::ng-deep .ql-editor .ql-bg-purple{background-color:#93f}:host ::ng-deep .ql-editor .ql-color-white{color:#fff}:host ::ng-deep .ql-editor .ql-color-red{color:#e60000}:host ::ng-deep .ql-editor .ql-color-orange{color:#f90}:host ::ng-deep .ql-editor .ql-color-yellow{color:#ff0}:host ::ng-deep .ql-editor .ql-color-green{color:#008a00}:host ::ng-deep .ql-editor .ql-color-blue{color:#06c}:host ::ng-deep .ql-editor .ql-color-purple{color:#93f}:host ::ng-deep .ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-editor .ql-size-small{font-size:.75em}:host ::ng-deep .ql-editor .ql-size-large{font-size:1.5em}:host ::ng-deep .ql-editor .ql-size-huge{font-size:2.5em}:host ::ng-deep .ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}:host ::ng-deep .ql-editor .ql-align-center{text-align:center}:host ::ng-deep .ql-editor .ql-align-justify{text-align:justify}:host ::ng-deep .ql-editor .ql-align-right{text-align:right}:host ::ng-deep .ql-editor .ql-ui{position:absolute}:host ::ng-deep .ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}:host ::ng-deep .ql-snow.ql-toolbar:after,:host ::ng-deep .ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}:host ::ng-deep .ql-snow.ql-toolbar button svg,:host ::ng-deep .ql-snow .ql-toolbar button svg{float:left;height:100%}:host ::ng-deep .ql-snow.ql-toolbar button:active:hover,:host ::ng-deep .ql-snow .ql-toolbar button:active:hover{outline:none}:host ::ng-deep .ql-snow.ql-toolbar input.ql-image[type=file],:host ::ng-deep .ql-snow .ql-toolbar input.ql-image[type=file]{display:none}:host ::ng-deep .ql-snow.ql-toolbar button:hover,:host ::ng-deep .ql-snow .ql-toolbar button:hover,:host ::ng-deep .ql-snow.ql-toolbar button:focus,:host ::ng-deep .ql-snow .ql-toolbar button:focus,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:focus .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active),:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,:host ::ng-deep .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,:host ::ng-deep .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}:host ::ng-deep .ql-snow{box-sizing:border-box}:host ::ng-deep .ql-snow *{box-sizing:border-box}:host ::ng-deep .ql-snow .ql-hidden{display:none}:host ::ng-deep .ql-snow .ql-out-bottom,:host ::ng-deep .ql-snow .ql-out-top{visibility:hidden}:host ::ng-deep .ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}:host ::ng-deep .ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}:host ::ng-deep .ql-snow .ql-formats{display:inline-block;vertical-align:middle}:host ::ng-deep .ql-snow .ql-formats:after{clear:both;content:\"\";display:table}:host ::ng-deep .ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}:host ::ng-deep .ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}:host ::ng-deep .ql-snow .ql-fill,:host ::ng-deep .ql-snow .ql-stroke.ql-fill{fill:#444}:host ::ng-deep .ql-snow .ql-empty{fill:none}:host ::ng-deep .ql-snow .ql-even{fill-rule:evenodd}:host ::ng-deep .ql-snow .ql-thin,:host ::ng-deep .ql-snow .ql-stroke.ql-thin{stroke-width:1}:host ::ng-deep .ql-snow .ql-transparent{opacity:.4}:host ::ng-deep .ql-snow .ql-direction svg:last-child{display:none}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:last-child{display:inline}:host ::ng-deep .ql-snow .ql-direction.ql-active svg:first-child{display:none}:host ::ng-deep .ql-snow .ql-editor h1{font-size:2em}:host ::ng-deep .ql-snow .ql-editor h2{font-size:1.5em}:host ::ng-deep .ql-snow .ql-editor h3{font-size:1.17em}:host ::ng-deep .ql-snow .ql-editor h4{font-size:1em}:host ::ng-deep .ql-snow .ql-editor h5{font-size:.83em}:host ::ng-deep .ql-snow .ql-editor h6{font-size:.67em}:host ::ng-deep .ql-snow .ql-editor a{text-decoration:underline}:host ::ng-deep .ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}:host ::ng-deep .ql-snow .ql-editor code,:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}:host ::ng-deep .ql-snow .ql-editor code{font-size:85%;padding:2px 4px}:host ::ng-deep .ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}:host ::ng-deep .ql-snow .ql-editor img{max-width:100%}:host ::ng-deep .ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}:host ::ng-deep .ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}:host ::ng-deep .ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}:host ::ng-deep .ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}:host ::ng-deep .ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}:host ::ng-deep .ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}:host ::ng-deep .ql-snow .ql-color-picker,:host ::ng-deep .ql-snow .ql-icon-picker{width:28px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-label svg,:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}:host ::ng-deep .ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}:host ::ng-deep .ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}:host ::ng-deep .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}:host ::ng-deep .ql-snow .ql-picker.ql-header{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}:host ::ng-deep .ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}:host ::ng-deep .ql-snow .ql-picker.ql-font{width:108px}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}:host ::ng-deep .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}:host ::ng-deep .ql-snow .ql-picker.ql-size{width:98px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}:host ::ng-deep .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}:host ::ng-deep .ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}:host ::ng-deep .ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}:host ::ng-deep .ql-code-block-container{position:relative}:host ::ng-deep .ql-code-block-container .ql-ui{right:5px;top:5px}:host ::ng-deep .ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{margin-right:15px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,:host ::ng-deep .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}:host ::ng-deep .ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}:host ::ng-deep .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}:host ::ng-deep .ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}:host ::ng-deep .ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}:host ::ng-deep .ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}:host ::ng-deep .ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}:host ::ng-deep .ql-snow .ql-tooltip a{line-height:26px}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-preview,:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}:host ::ng-deep .ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}:host ::ng-deep .ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}:host ::ng-deep .ql-snow a{color:#06c}:host ::ng-deep .ql-container.ql-snow{border:1px solid #ccc}\n"] }]
|
|
5285
5302
|
}], ctorParameters: () => [{ type: MetaContextService }] });
|
|
5286
5303
|
|
|
5287
5304
|
var index$2 = /*#__PURE__*/Object.freeze({
|
|
@@ -5639,12 +5656,12 @@ class FieldDatetime extends FieldAbstract {
|
|
|
5639
5656
|
}
|
|
5640
5657
|
}
|
|
5641
5658
|
}
|
|
5642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FieldDatetime, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{model}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n <div class=\"Vlt-input\" [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n </label>\n <div class='Vlt-composite__append right-actions'>\n @if (model) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='clear($event)' tabindex='0'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n }\n </div>\n </div>\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.min) {\n <span>Must be later than {{validations.min}}. </span>\n }\n @if (f.errors.max) {\n <span>Must be no later than {{validations}}. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MetaModelPipe, name: "metaModel" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
|
|
5644
5661
|
}
|
|
5645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldDatetime, decorators: [{
|
|
5646
5663
|
type: Component,
|
|
5647
|
-
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<div class='vgip-meta-field-preview'
|
|
5664
|
+
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (preview && model) {\n <div class='vgip-meta-field-preview'>\n <div class='vgip-meta-field-label' [title]='meta.label || meta.name'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{model}}</div>\n </div>\n}\n@if (!preview) {\n <div class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n <div class=\"Vlt-input\" [ngClass]=\"{'vgip-disable': disabled}\">\n <label class='wrapper'>\n <input class='main model' [pattern]=\"validations.pattern ? validations.pattern.value || validations.pattern : null\" [required]='validations.required' [minlength]='validations.minlength' [maxlength]='validations.maxlength' [min]='validations.min' [max]='validations.max' [step]='validations.step' [disabled]='disabled' [readonly]='readonly' [(ngModel)]='model' (ngModelChange)=\"onModelChange($event)\" #f='ngModel' [name]='name' [type]=\"type\" [placeholder]=\"placeholder\" (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'/>\n <label class='Vlt-truncate'> <!-- eslint-disable-line @angular-eslint/template/label-has-associated-control -->\n {{meta.label || meta.name}}\n @if (validations.required) {\n <span class='Vlt-red'>*</span>\n }\n </label>\n </label>\n <div class='Vlt-composite__append right-actions'>\n @if (model) {\n <a href='#' class=\"Vlt-composite__append--icon\" (click)='clear($event)' tabindex='0'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </a>\n }\n </div>\n </div>\n @if (f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))) {\n <small class=\"Vlt-form__element__error\">\n @if (f.errors.required) {\n <span>Required. </span>\n }\n @if (f.errors.min) {\n <span>Must be later than {{validations.min}}. </span>\n }\n @if (f.errors.max) {\n <span>Must be no later than {{validations}}. </span>\n }\n @if (f.errors.custom) {\n <span>{{f.errors.custom}} </span>\n }\n </small>\n }\n @if (meta.hint) {\n <small class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n }\n </div>\n}\n", styles: [".Vlt-form__element--big.Vlt-form__element--error input.main,.Vlt-form__element--big.Vlt-form__element--error .Vlt-composite__append button{background:var(--vgip-meta-input-bg-color);border-color:#f25a6b;box-shadow:none}@-moz-document url-prefix(){.Vlt-composite__append.right-actions{right:10px!important}}.Vlt-composite__append.right-actions{position:absolute;top:5px;right:10px;cursor:pointer}@media screen and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.Vlt-composite__append.right-actions{right:53px}}.Vlt-composite__append.right-actions .Vlt-composite__append--icon{width:36px;outline:none;position:initial;display:inline-block}.Vlt-composite__append.right-actions .Vlt-composite__append--icon svg{height:14px;width:14px}.Vlt-composite__append.right-actions .Vlt-composite__append--icon:hover svg,.Vlt-composite__append.right-actions .Vlt-composite__append--icon:focus svg{fill:#2c2d30}.vgip-disable .Vlt-composite__append{cursor:not-allowed;pointer-events:none}:host-context ::ng-deep input::-webkit-calendar-picker-indicator{height:48px;width:51px;margin-top:-15px;margin-right:-15px;padding:0 2px 0 0;cursor:pointer;color:transparent;background-origin:content-box;background-size:initial;background-repeat:no-repeat;background-position:center;opacity:1;visibility:visible;background-image:var(--vgip-meta-date-icon)}:host-context ::ng-deep input::-webkit-calendar-picker-indicator:hover{background-color:var(--vgip-meta-input-action-hover-bg-color)}:host-context ::ng-deep input[type=time]::-webkit-calendar-picker-indicator{background-image:var(--vgip-meta-time-icon)}:host-context ::ng-deep input[readonly]::-webkit-calendar-picker-indicator{visibility:visible}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button{opacity:0;pointer-events:none}:host-context ::ng-deep input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button{opacity:0;pointer-events:none}\n"] }]
|
|
5648
5665
|
}] });
|
|
5649
5666
|
|
|
5650
5667
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -5659,10 +5676,10 @@ var index$1 = /*#__PURE__*/Object.freeze({
|
|
|
5659
5676
|
* @Last Modified time: 2019-11-15 13:04:01
|
|
5660
5677
|
*/
|
|
5661
5678
|
class FieldHidden extends FieldAbstract {
|
|
5662
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5663
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5679
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldHidden, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5680
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: FieldHidden, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "" }); }
|
|
5664
5681
|
}
|
|
5665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FieldHidden, decorators: [{
|
|
5666
5683
|
type: Component,
|
|
5667
5684
|
args: [{ standalone: false, template: "" }]
|
|
5668
5685
|
}] });
|
|
@@ -5688,10 +5705,10 @@ class MetaIconsPipe {
|
|
|
5688
5705
|
return value; //this.sanitizer.bypassSecurityTrustHtml(value);
|
|
5689
5706
|
}
|
|
5690
5707
|
}
|
|
5691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5692
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
5708
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaIconsPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5709
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: MetaIconsPipe, isStandalone: false, name: "metaIcons" }); }
|
|
5693
5710
|
}
|
|
5694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaIconsPipe, decorators: [{
|
|
5695
5712
|
type: Pipe,
|
|
5696
5713
|
args: [{
|
|
5697
5714
|
name: 'metaIcons',
|
|
@@ -5709,10 +5726,10 @@ class MetaStripHtmlPipe {
|
|
|
5709
5726
|
transform(value) {
|
|
5710
5727
|
return value.replace(/<[^>]*>/g, '');
|
|
5711
5728
|
}
|
|
5712
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5713
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
5729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaStripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5730
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: MetaStripHtmlPipe, isStandalone: false, name: "metaStripHtml" }); }
|
|
5714
5731
|
}
|
|
5715
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaStripHtmlPipe, decorators: [{
|
|
5716
5733
|
type: Pipe,
|
|
5717
5734
|
args: [{
|
|
5718
5735
|
name: 'metaStripHtml',
|
|
@@ -6003,10 +6020,10 @@ class ResourceDraftsService {
|
|
|
6003
6020
|
this.store.destroyById(COLLECTION, draft.id, cb);
|
|
6004
6021
|
}
|
|
6005
6022
|
}
|
|
6006
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6007
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6023
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ResourceDraftsService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6024
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ResourceDraftsService, providedIn: 'root' }); }
|
|
6008
6025
|
}
|
|
6009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ResourceDraftsService, decorators: [{
|
|
6010
6027
|
type: Injectable,
|
|
6011
6028
|
args: [{
|
|
6012
6029
|
providedIn: 'root'
|
|
@@ -6026,8 +6043,8 @@ class MetaModule {
|
|
|
6026
6043
|
providers: customProviders
|
|
6027
6044
|
};
|
|
6028
6045
|
}
|
|
6029
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6030
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
6046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6047
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: MetaModule, declarations: [MetaIconsPipe,
|
|
6031
6048
|
MetaModelPipe,
|
|
6032
6049
|
MetaStripHtmlPipe,
|
|
6033
6050
|
MetaField,
|
|
@@ -6058,7 +6075,7 @@ class MetaModule {
|
|
|
6058
6075
|
MetaResource,
|
|
6059
6076
|
MetaResourceCard,
|
|
6060
6077
|
MetaAutofocusDirective] }); }
|
|
6061
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
6078
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
|
|
6062
6079
|
FormsModule,
|
|
6063
6080
|
ReactiveFormsModule,
|
|
6064
6081
|
QuillModule.forRoot()
|
|
@@ -6076,7 +6093,7 @@ class MetaModule {
|
|
|
6076
6093
|
// })
|
|
6077
6094
|
] }); }
|
|
6078
6095
|
}
|
|
6079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MetaModule, decorators: [{
|
|
6080
6097
|
type: NgModule,
|
|
6081
6098
|
args: [{ declarations: [
|
|
6082
6099
|
MetaIconsPipe,
|