@vgip/meta-ui 2.3.5 → 2.3.7
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.
|
@@ -663,6 +663,9 @@ const metaNormalizer = (meta, integration, resourceType) => {
|
|
|
663
663
|
}
|
|
664
664
|
}
|
|
665
665
|
}
|
|
666
|
+
if (f.type === 'select') {
|
|
667
|
+
f.acceptNew = true; // (VIST-1202) allow new values for select fields, as SF can have record types with different picklist values, which are not listed in meta
|
|
668
|
+
}
|
|
666
669
|
break;
|
|
667
670
|
}
|
|
668
671
|
case 'SUGAR': {
|
|
@@ -1031,10 +1034,10 @@ class MetaHttpClient {
|
|
|
1031
1034
|
};
|
|
1032
1035
|
return options;
|
|
1033
1036
|
}
|
|
1034
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1035
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1037
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaHttpClient, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1038
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaHttpClient, providedIn: 'root' }); }
|
|
1036
1039
|
}
|
|
1037
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1040
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaHttpClient, decorators: [{
|
|
1038
1041
|
type: Injectable,
|
|
1039
1042
|
args: [{
|
|
1040
1043
|
providedIn: 'root'
|
|
@@ -1169,10 +1172,10 @@ class MetaResourceService {
|
|
|
1169
1172
|
return this.httpClient.post(`${this.baseResourceUrl}`, payload);
|
|
1170
1173
|
}
|
|
1171
1174
|
}
|
|
1172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1173
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1175
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResourceService, deps: [{ token: MetaHttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1176
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResourceService, providedIn: 'root' }); }
|
|
1174
1177
|
}
|
|
1175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResourceService, decorators: [{
|
|
1176
1179
|
type: Injectable,
|
|
1177
1180
|
args: [{
|
|
1178
1181
|
providedIn: 'root'
|
|
@@ -1218,10 +1221,10 @@ class MetaContextService {
|
|
|
1218
1221
|
delete this.onClick2Dial;
|
|
1219
1222
|
}
|
|
1220
1223
|
}
|
|
1221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1222
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1225
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaContextService, providedIn: 'root' }); }
|
|
1223
1226
|
}
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaContextService, decorators: [{
|
|
1225
1228
|
type: Injectable,
|
|
1226
1229
|
args: [{
|
|
1227
1230
|
providedIn: 'root'
|
|
@@ -1299,10 +1302,10 @@ class MetaMsgService {
|
|
|
1299
1302
|
}
|
|
1300
1303
|
}
|
|
1301
1304
|
}
|
|
1302
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1303
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1305
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaMsgService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1306
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaMsgService, providedIn: 'root' }); }
|
|
1304
1307
|
}
|
|
1305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaMsgService, decorators: [{
|
|
1306
1309
|
type: Injectable,
|
|
1307
1310
|
args: [{
|
|
1308
1311
|
providedIn: 'root'
|
|
@@ -1413,10 +1416,10 @@ class MetaReferenceService {
|
|
|
1413
1416
|
});
|
|
1414
1417
|
return modalObservable;
|
|
1415
1418
|
}
|
|
1416
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1417
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1419
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaReferenceService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1420
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaReferenceService, providedIn: 'root' }); }
|
|
1418
1421
|
}
|
|
1419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaReferenceService, decorators: [{
|
|
1420
1423
|
type: Injectable,
|
|
1421
1424
|
args: [{
|
|
1422
1425
|
providedIn: 'root'
|
|
@@ -1741,10 +1744,10 @@ class FieldAbstract {
|
|
|
1741
1744
|
}
|
|
1742
1745
|
});
|
|
1743
1746
|
}
|
|
1744
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1745
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1748
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: FieldAbstract, isStandalone: true, ngImport: i0 }); }
|
|
1746
1749
|
}
|
|
1747
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1750
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldAbstract, decorators: [{
|
|
1748
1751
|
type: Directive
|
|
1749
1752
|
}] });
|
|
1750
1753
|
class MetaElem {
|
|
@@ -1822,10 +1825,10 @@ class MetaFieldContentDirective {
|
|
|
1822
1825
|
constructor(viewContainerRef) {
|
|
1823
1826
|
this.viewContainerRef = viewContainerRef;
|
|
1824
1827
|
}
|
|
1825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1826
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1828
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFieldContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1829
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaFieldContentDirective, isStandalone: false, selector: "[metaFieldContent]", ngImport: i0 }); }
|
|
1827
1830
|
}
|
|
1828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFieldContentDirective, decorators: [{
|
|
1829
1832
|
type: Directive,
|
|
1830
1833
|
args: [{
|
|
1831
1834
|
selector: '[metaFieldContent]',
|
|
@@ -1873,10 +1876,10 @@ class MetaField extends FieldAbstract {
|
|
|
1873
1876
|
enumerable: false
|
|
1874
1877
|
});
|
|
1875
1878
|
}
|
|
1876
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", 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]" }] }); }
|
|
1879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaField, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1880
|
+
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", 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]" }] }); }
|
|
1878
1881
|
}
|
|
1879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaField, decorators: [{
|
|
1880
1883
|
type: Component,
|
|
1881
1884
|
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"] }]
|
|
1882
1885
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
|
|
@@ -2090,10 +2093,10 @@ class MetaLayout {
|
|
|
2090
2093
|
this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
|
|
2091
2094
|
}
|
|
2092
2095
|
}
|
|
2093
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2094
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2096
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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 }); }
|
|
2097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
|
|
2095
2098
|
}
|
|
2096
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaLayout, decorators: [{
|
|
2097
2100
|
type: Component,
|
|
2098
2101
|
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"] }]
|
|
2099
2102
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }, { type: MetaMsgService }, { type: MetaContextService }], propDecorators: { meta: [{
|
|
@@ -2132,10 +2135,10 @@ class MetaAutofocusDirective {
|
|
|
2132
2135
|
}, 300);
|
|
2133
2136
|
}
|
|
2134
2137
|
}
|
|
2135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2136
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2139
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: MetaAutofocusDirective, isStandalone: false, selector: "[vgipMetaFormAutofocus]", inputs: { vgipMetaFormAutofocus: "vgipMetaFormAutofocus" }, ngImport: i0 }); }
|
|
2137
2140
|
}
|
|
2138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaAutofocusDirective, decorators: [{
|
|
2139
2142
|
type: Directive,
|
|
2140
2143
|
args: [{
|
|
2141
2144
|
// eslint-disable-next-line
|
|
@@ -2661,10 +2664,10 @@ class MetaResource {
|
|
|
2661
2664
|
extractPreserveSectionFields(s);
|
|
2662
2665
|
}
|
|
2663
2666
|
}
|
|
2664
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2665
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2667
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResource, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaContextService }, { token: MetaMsgService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2668
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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],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]),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"] }] }); }
|
|
2666
2669
|
}
|
|
2667
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2670
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResource, decorators: [{
|
|
2668
2671
|
type: Component,
|
|
2669
2672
|
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"] }]
|
|
2670
2673
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaContextService }, { type: MetaMsgService }], propDecorators: { resource: [{
|
|
@@ -2808,10 +2811,10 @@ class MetaRefDialog {
|
|
|
2808
2811
|
this.el.nativeElement.style.setProperty(key, metaTheme.properties[key]);
|
|
2809
2812
|
}
|
|
2810
2813
|
}
|
|
2811
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2812
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaRefDialog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
|
|
2813
2816
|
}
|
|
2814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaRefDialog, decorators: [{
|
|
2815
2818
|
type: Component,
|
|
2816
2819
|
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"] }]
|
|
2817
2820
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
@@ -2843,10 +2846,10 @@ class MetaResourceCard {
|
|
|
2843
2846
|
// }
|
|
2844
2847
|
});
|
|
2845
2848
|
}
|
|
2846
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2847
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2849
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResourceCard, deps: [{ token: MetaResourceService }, { token: MetaReferenceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2850
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] }); }
|
|
2848
2851
|
}
|
|
2849
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaResourceCard, decorators: [{
|
|
2850
2853
|
type: Component,
|
|
2851
2854
|
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"] }]
|
|
2852
2855
|
}], ctorParameters: () => [{ type: MetaResourceService }, { type: MetaReferenceService }, { type: i0.ViewContainerRef }], propDecorators: { resource: [{
|
|
@@ -2862,10 +2865,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
2862
2865
|
* @Last Modified time: 2019-11-15 13:04:01
|
|
2863
2866
|
*/
|
|
2864
2867
|
class FieldUnknown extends FieldAbstract {
|
|
2865
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2866
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2868
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldUnknown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2869
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }); }
|
|
2867
2870
|
}
|
|
2868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2871
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldUnknown, decorators: [{
|
|
2869
2872
|
type: Component,
|
|
2870
2873
|
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" }]
|
|
2871
2874
|
}] });
|
|
@@ -2934,10 +2937,10 @@ class MetaModelPipe {
|
|
|
2934
2937
|
transform(value) {
|
|
2935
2938
|
return value;
|
|
2936
2939
|
}
|
|
2937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2938
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2940
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaModelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2941
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MetaModelPipe, isStandalone: false, name: "metaModel" }); }
|
|
2939
2942
|
}
|
|
2940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaModelPipe, decorators: [{
|
|
2941
2944
|
type: Pipe,
|
|
2942
2945
|
args: [{
|
|
2943
2946
|
name: 'metaModel',
|
|
@@ -3402,10 +3405,10 @@ class FieldInput extends FieldAbstract {
|
|
|
3402
3405
|
}
|
|
3403
3406
|
}
|
|
3404
3407
|
}
|
|
3405
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 [attr.title]='model' 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 [attr.title]=\"suggestion.hint ? `${suggestion.label} - ${suggestion.hint}` : (suggestion.label || suggestion)\">\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;text-overflow: ellipsis;overflow: hidden;'>\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 }] }); }
|
|
3408
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldInput, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3409
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 [attr.title]='model' 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 [attr.title]=\"suggestion.hint ? `${suggestion.label} - ${suggestion.hint}` : (suggestion.label || suggestion)\">\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;text-overflow: ellipsis;overflow: hidden;'>\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 }] }); }
|
|
3407
3410
|
}
|
|
3408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3411
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldInput, decorators: [{
|
|
3409
3412
|
type: Component,
|
|
3410
3413
|
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 [attr.title]='model' 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 [attr.title]=\"suggestion.hint ? `${suggestion.label} - ${suggestion.hint}` : (suggestion.label || suggestion)\">\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;text-overflow: ellipsis;overflow: hidden;'>\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"] }]
|
|
3411
3414
|
}], ctorParameters: () => [{ type: MetaContextService }] });
|
|
@@ -3480,10 +3483,10 @@ class FieldText extends FieldAbstract {
|
|
|
3480
3483
|
textToSpeech() {
|
|
3481
3484
|
this.focus();
|
|
3482
3485
|
}
|
|
3483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3486
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldText, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3487
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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:var(--vgip-meta-input-bg-color)}.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 }] }); }
|
|
3485
3488
|
}
|
|
3486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldText, decorators: [{
|
|
3487
3490
|
type: Component,
|
|
3488
3491
|
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:var(--vgip-meta-input-bg-color)}.Vlt-form__element--error textarea{border-color:#f25a6b;background:var(--vgip-meta-input-bg-color)}\n"] }]
|
|
3489
3492
|
}], ctorParameters: () => [{ type: MetaContextService }] });
|
|
@@ -4055,10 +4058,10 @@ class FieldSelect extends FieldAbstract {
|
|
|
4055
4058
|
delete this.searching;
|
|
4056
4059
|
});
|
|
4057
4060
|
}
|
|
4058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4059
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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' #ft='ngModel'\n [ngModelOptions]=\"{standalone: true}\" type=\"text\" [placeholder]=\"meta.placeholder || ' '\"\n (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'\n [ngClass]=\"{ 'standalone': meta.standalone }\" [disabled]='disabled' [attr.aria-label]='meta.label'\n [attr.title]=\"showText\" />\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)' class=\"Vlt-dropdown__link\"\n [attr.title]=\"option.label || option.id || option\">\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;overflow: hidden;text-overflow: ellipsis;'>{{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 }] }); }
|
|
4061
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldSelect, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4062
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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' #ft='ngModel'\n [ngModelOptions]=\"{standalone: true}\" type=\"text\" [placeholder]=\"meta.placeholder || ' '\"\n (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'\n [ngClass]=\"{ 'standalone': meta.standalone }\" [disabled]='disabled' [attr.aria-label]='meta.label'\n [attr.title]=\"showText\" />\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)' class=\"Vlt-dropdown__link\"\n [attr.title]=\"option.label || option.id || option\">\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;overflow: hidden;text-overflow: ellipsis;'>{{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 }] }); }
|
|
4060
4063
|
}
|
|
4061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldSelect, decorators: [{
|
|
4062
4065
|
type: Component,
|
|
4063
4066
|
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' #ft='ngModel'\n [ngModelOptions]=\"{standalone: true}\" type=\"text\" [placeholder]=\"meta.placeholder || ' '\"\n (click)='onActivated($event)' (focus)='onActivated($event)' (blur)='onBlur($event)'\n [ngClass]=\"{ 'standalone': meta.standalone }\" [disabled]='disabled' [attr.aria-label]='meta.label'\n [attr.title]=\"showText\" />\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)' class=\"Vlt-dropdown__link\"\n [attr.title]=\"option.label || option.id || option\">\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;overflow: hidden;text-overflow: ellipsis;'>{{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"] }]
|
|
4064
4067
|
}], ctorParameters: () => [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: i0.ViewContainerRef }] });
|
|
@@ -4087,10 +4090,10 @@ class MetaTrackerService {
|
|
|
4087
4090
|
}
|
|
4088
4091
|
this.events.emit(event);
|
|
4089
4092
|
}
|
|
4090
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4091
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4093
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4094
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTrackerService, providedIn: 'root' }); }
|
|
4092
4095
|
}
|
|
4093
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaTrackerService, decorators: [{
|
|
4094
4097
|
type: Injectable,
|
|
4095
4098
|
args: [{
|
|
4096
4099
|
providedIn: 'root'
|
|
@@ -4342,6 +4345,7 @@ class FieldReference extends FieldAbstract {
|
|
|
4342
4345
|
else {
|
|
4343
4346
|
this.value = !this.model ? this.model : this.model.map((m) => this.modelToValue(m, this.meta.valueType || 'object'));
|
|
4344
4347
|
}
|
|
4348
|
+
this.onSubjectChange(this.value);
|
|
4345
4349
|
this.meta.$optional = this.isOptional;
|
|
4346
4350
|
},
|
|
4347
4351
|
get: () => this.value,
|
|
@@ -4913,10 +4917,10 @@ class FieldReference extends FieldAbstract {
|
|
|
4913
4917
|
});
|
|
4914
4918
|
}
|
|
4915
4919
|
}
|
|
4916
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 }] }); }
|
|
4920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldReference, deps: [{ token: MetaReferenceService }, { token: MetaResourceService }, { token: MetaMsgService }, { token: MetaContextService }, { token: MetaTrackerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4921
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }] }); }
|
|
4918
4922
|
}
|
|
4919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldReference, decorators: [{
|
|
4920
4924
|
type: Component,
|
|
4921
4925
|
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"] }]
|
|
4922
4926
|
}], ctorParameters: () => [{ type: MetaReferenceService }, { type: MetaResourceService }, { type: MetaMsgService }, { type: MetaContextService }, { type: MetaTrackerService }, { type: i0.ViewContainerRef }] });
|
|
@@ -4998,10 +5002,10 @@ class FieldComposite extends FieldAbstract {
|
|
|
4998
5002
|
onValueChange() {
|
|
4999
5003
|
this.onChange.emit(this.value);
|
|
5000
5004
|
}
|
|
5001
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5002
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldComposite, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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"] }] }); }
|
|
5003
5007
|
}
|
|
5004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5008
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldComposite, decorators: [{
|
|
5005
5009
|
type: Component,
|
|
5006
5010
|
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"] }]
|
|
5007
5011
|
}] });
|
|
@@ -5049,10 +5053,10 @@ class FieldBoolean extends FieldAbstract {
|
|
|
5049
5053
|
onOptionChange() {
|
|
5050
5054
|
this.onModelChange(this.model);
|
|
5051
5055
|
}
|
|
5052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldBoolean, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }] }); }
|
|
5054
5058
|
}
|
|
5055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldBoolean, decorators: [{
|
|
5056
5060
|
type: Component,
|
|
5057
5061
|
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"] }]
|
|
5058
5062
|
}] });
|
|
@@ -5135,10 +5139,10 @@ class FieldRadio extends FieldAbstract {
|
|
|
5135
5139
|
ev.srcElement.removeEventListener('keydown', this.keydown);
|
|
5136
5140
|
}
|
|
5137
5141
|
}
|
|
5138
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5143
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }] }); }
|
|
5140
5144
|
}
|
|
5141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRadio, decorators: [{
|
|
5142
5146
|
type: Component,
|
|
5143
5147
|
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"] }]
|
|
5144
5148
|
}] });
|
|
@@ -5206,10 +5210,10 @@ class FieldList extends FieldAbstract {
|
|
|
5206
5210
|
onChildChange() {
|
|
5207
5211
|
this.onChange.emit(this.model);
|
|
5208
5212
|
}
|
|
5209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5213
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }] }); }
|
|
5211
5215
|
}
|
|
5212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldList, decorators: [{
|
|
5213
5217
|
type: Component,
|
|
5214
5218
|
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"] }]
|
|
5215
5219
|
}] });
|
|
@@ -5286,13 +5290,13 @@ class FieldRichtext extends FieldAbstract {
|
|
|
5286
5290
|
textToSpeech() {
|
|
5287
5291
|
this.focus();
|
|
5288
5292
|
}
|
|
5289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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: [
|
|
5293
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRichtext, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: [
|
|
5291
5295
|
{ provide: ControlContainer, useExisting: NgForm },
|
|
5292
5296
|
// { provide: QUILL_CONFIG_TOKEN, useValue: quillConfig }
|
|
5293
5297
|
] }); }
|
|
5294
5298
|
}
|
|
5295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRichtext, decorators: [{
|
|
5296
5300
|
type: Component,
|
|
5297
5301
|
args: [{ viewProviders: [
|
|
5298
5302
|
{ provide: ControlContainer, useExisting: NgForm },
|
|
@@ -5655,10 +5659,10 @@ class FieldDatetime extends FieldAbstract {
|
|
|
5655
5659
|
}
|
|
5656
5660
|
}
|
|
5657
5661
|
}
|
|
5658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5662
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldDatetime, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5663
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }] }); }
|
|
5660
5664
|
}
|
|
5661
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldDatetime, decorators: [{
|
|
5662
5666
|
type: Component,
|
|
5663
5667
|
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"] }]
|
|
5664
5668
|
}] });
|
|
@@ -5675,10 +5679,10 @@ var index$1 = /*#__PURE__*/Object.freeze({
|
|
|
5675
5679
|
* @Last Modified time: 2019-11-15 13:04:01
|
|
5676
5680
|
*/
|
|
5677
5681
|
class FieldHidden extends FieldAbstract {
|
|
5678
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldHidden, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FieldHidden, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "" }); }
|
|
5680
5684
|
}
|
|
5681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldHidden, decorators: [{
|
|
5682
5686
|
type: Component,
|
|
5683
5687
|
args: [{ standalone: false, template: "" }]
|
|
5684
5688
|
}] });
|
|
@@ -5704,10 +5708,10 @@ class MetaIconsPipe {
|
|
|
5704
5708
|
return value; //this.sanitizer.bypassSecurityTrustHtml(value);
|
|
5705
5709
|
}
|
|
5706
5710
|
}
|
|
5707
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5708
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
5711
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaIconsPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5712
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MetaIconsPipe, isStandalone: false, name: "metaIcons" }); }
|
|
5709
5713
|
}
|
|
5710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaIconsPipe, decorators: [{
|
|
5711
5715
|
type: Pipe,
|
|
5712
5716
|
args: [{
|
|
5713
5717
|
name: 'metaIcons',
|
|
@@ -5725,10 +5729,10 @@ class MetaStripHtmlPipe {
|
|
|
5725
5729
|
transform(value) {
|
|
5726
5730
|
return value.replace(/<[^>]*>/g, '');
|
|
5727
5731
|
}
|
|
5728
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5729
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
5732
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStripHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5733
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MetaStripHtmlPipe, isStandalone: false, name: "metaStripHtml" }); }
|
|
5730
5734
|
}
|
|
5731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStripHtmlPipe, decorators: [{
|
|
5732
5736
|
type: Pipe,
|
|
5733
5737
|
args: [{
|
|
5734
5738
|
name: 'metaStripHtml',
|
|
@@ -6019,10 +6023,10 @@ class ResourceDraftsService {
|
|
|
6019
6023
|
this.store.destroyById(COLLECTION, draft.id, cb);
|
|
6020
6024
|
}
|
|
6021
6025
|
}
|
|
6022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6023
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResourceDraftsService, deps: [{ token: MetaContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6027
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResourceDraftsService, providedIn: 'root' }); }
|
|
6024
6028
|
}
|
|
6025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6029
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ResourceDraftsService, decorators: [{
|
|
6026
6030
|
type: Injectable,
|
|
6027
6031
|
args: [{
|
|
6028
6032
|
providedIn: 'root'
|
|
@@ -6042,8 +6046,8 @@ class MetaModule {
|
|
|
6042
6046
|
providers: customProviders
|
|
6043
6047
|
};
|
|
6044
6048
|
}
|
|
6045
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6046
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
6049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6050
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MetaModule, declarations: [MetaIconsPipe,
|
|
6047
6051
|
MetaModelPipe,
|
|
6048
6052
|
MetaStripHtmlPipe,
|
|
6049
6053
|
MetaField,
|
|
@@ -6074,7 +6078,7 @@ class MetaModule {
|
|
|
6074
6078
|
MetaResource,
|
|
6075
6079
|
MetaResourceCard,
|
|
6076
6080
|
MetaAutofocusDirective] }); }
|
|
6077
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
6081
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
|
|
6078
6082
|
FormsModule,
|
|
6079
6083
|
ReactiveFormsModule,
|
|
6080
6084
|
QuillModule.forRoot()
|
|
@@ -6092,7 +6096,7 @@ class MetaModule {
|
|
|
6092
6096
|
// })
|
|
6093
6097
|
] }); }
|
|
6094
6098
|
}
|
|
6095
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaModule, decorators: [{
|
|
6096
6100
|
type: NgModule,
|
|
6097
6101
|
args: [{ declarations: [
|
|
6098
6102
|
MetaIconsPipe,
|