@vgip/meta-ui 1.5.3 → 1.5.5
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.
- package/esm2020/lib/common/metaNormalizer.mjs +3 -10
- package/esm2020/lib/common/utils/resourceCardLabel.mjs +24 -0
- package/esm2020/lib/field.mjs +12 -5
- package/fesm2015/vgip-meta-ui.mjs +36 -13
- package/fesm2015/vgip-meta-ui.mjs.map +1 -1
- package/fesm2020/vgip-meta-ui.mjs +36 -13
- package/fesm2020/vgip-meta-ui.mjs.map +1 -1
- package/lib/common/utils/resourceCardLabel.d.ts +1 -0
- package/lib/field.d.ts +1 -0
- package/package.json +1 -1
|
@@ -486,7 +486,7 @@ const fieldNormalizer = (field, uniqFieldNames) => {
|
|
|
486
486
|
* @Author: Alexander.Vangelov@vonage.com
|
|
487
487
|
* @Date: 2019-09-19 17:34:49
|
|
488
488
|
* @Last Modified by: Alexander.Vangelov@vonage.com
|
|
489
|
-
* @Last Modified time:
|
|
489
|
+
* @Last Modified time: 2023-02-10 09:44:59
|
|
490
490
|
*/
|
|
491
491
|
const sortObj = (obj) => {
|
|
492
492
|
if (typeof (obj) !== 'object' || obj === null) {
|
|
@@ -684,6 +684,7 @@ const metaNormalizer = (meta, integration, resourceType) => {
|
|
|
684
684
|
}
|
|
685
685
|
};
|
|
686
686
|
}
|
|
687
|
+
break;
|
|
687
688
|
}
|
|
688
689
|
}
|
|
689
690
|
if (f.type === 'composite' && f.fields) {
|
|
@@ -796,14 +797,6 @@ const metaNormalizer = (meta, integration, resourceType) => {
|
|
|
796
797
|
if (resourceType === 'CandidateNote' || resourceType === 'ContactNote') {
|
|
797
798
|
metaV3.layout.editable = false;
|
|
798
799
|
}
|
|
799
|
-
// } else if (integrationCode === 'CLIO') {
|
|
800
|
-
// if (resourceType === 'PhoneCommunication') {
|
|
801
|
-
// for (const f of metaV3.layout.sections[0].fields) {
|
|
802
|
-
// if (f.name === 'time_entries') {
|
|
803
|
-
// f.visible = 'CREATE';
|
|
804
|
-
// }
|
|
805
|
-
// }
|
|
806
|
-
// }
|
|
807
800
|
}
|
|
808
801
|
return sortObj(metaV3);
|
|
809
802
|
};
|
|
@@ -2373,6 +2366,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
2373
2366
|
args: [{ viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div class='vgip-meta-field-preview' *ngIf='preview && model'>\n <div class='vgip-meta-field-label'>{{meta.label || meta.name}}</div>\n <div class='vgip-meta-field-value __gu'>{{model}}</div>\n</div>\n<div *ngIf='!preview' class=\"Vlt-form__element Vlt-form__element--big\" [ngClass]=\"{'Vlt-form__element--error': f.invalid && ((f | metaModel)._parent.submitted || (f | metaModel ).touched), 'has-value': f.value, active: keyListenerActive }\">\n <div class=\"Vlt-input\">\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'>{{meta.label || meta.name}}<span *ngIf='validations.required' class='Vlt-red'>*</span></label>\n </label>\n <div class='Vlt-composite__append right-actions'>\n <div *ngIf='model' class=\"Vlt-composite__append--icon\" (click)='clear()'>\n <div class=\"Vlt-composite__icon\">\n <svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-cross\"/></svg>\n </div>\n </div>\n </div>\n </div>\n <small *ngIf='f.invalid && ((f | metaModel)._parent.submitted || ((f | metaModel ).touched && keyListenerActive))' class=\"Vlt-form__element__error\">\n <span *ngIf=\"f.errors.required\">Required. </span>\n <span *ngIf=\"f.errors.min\">Must be later than {{validations.min}}. </span>\n <span *ngIf=\"f.errors.max\">Must be no later than {{validations}}. </span>\n <span *ngIf=\"f.errors.custom\">{{f.errors.custom}} </span>\n </small>\n <small *ngIf='meta.hint' class=\"Vlt-form__element__hint\">{{meta.hint}}</small>\n</div>", 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 (-webkit-min-device-pixel-ratio: 0),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}: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"] }]
|
|
2374
2367
|
}] });
|
|
2375
2368
|
|
|
2369
|
+
/*
|
|
2370
|
+
* @Author: Alexander.Vangelov@vonage.com
|
|
2371
|
+
* @Date: 2023-02-08 12:41:56
|
|
2372
|
+
* @Last Modified by: Alexander.Vangelov@vonage.com
|
|
2373
|
+
* @Last Modified time: 2023-02-08 14:04:46
|
|
2374
|
+
*/
|
|
2375
|
+
const pad2Digit = (t) => t < 10 ? '0' + t : t;
|
|
2376
|
+
const resourceCardLabel = (r) => {
|
|
2377
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
2378
|
+
if (r._vgis && r._vgis.connector === 'CLIO' && r._vgis.resourceType === 'PhoneCommunicationTimer') {
|
|
2379
|
+
const duration = r.quantity || 0; // in seconds
|
|
2380
|
+
let durationText = '00:00';
|
|
2381
|
+
if (duration > 0) {
|
|
2382
|
+
const hours = Math.floor(duration / 3600);
|
|
2383
|
+
const minutes = Math.floor((duration % 3600) / 60);
|
|
2384
|
+
const seconds = Math.round(duration % 60);
|
|
2385
|
+
const checkHours = hours ? pad2Digit(hours) + ':' : '';
|
|
2386
|
+
durationText = checkHours + pad2Digit(minutes) + ':' + pad2Digit(seconds);
|
|
2387
|
+
}
|
|
2388
|
+
return `⏱ ${durationText} | $${(Math.round(r.price) * 100) / 100} | ${r.non_billable ? 'Non-billable' : 'Billable'}`;
|
|
2389
|
+
}
|
|
2390
|
+
return r.Subject || r.subject || r.summary || r.title || r.CaseNumber || r.comment || r.body || r.name || r.topic || r.content || '...';
|
|
2391
|
+
};
|
|
2392
|
+
|
|
2376
2393
|
/*
|
|
2377
2394
|
* @Author: Alexander.Vangelov@vonage.com
|
|
2378
2395
|
* @Date: 2019-09-19 17:35:19
|
|
@@ -2802,7 +2819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
|
|
|
2802
2819
|
* @Author: Alexander.Vangelov@vonage.com
|
|
2803
2820
|
* @Date: 2019-09-19 17:35:19
|
|
2804
2821
|
* @Last Modified by: Alexander.Vangelov@vonage.com
|
|
2805
|
-
* @Last Modified time: 2023-
|
|
2822
|
+
* @Last Modified time: 2023-02-08 14:23:26
|
|
2806
2823
|
*/
|
|
2807
2824
|
//// REF DIALOG
|
|
2808
2825
|
class MetaRefDialog {
|
|
@@ -4331,6 +4348,7 @@ class MetaLayout {
|
|
|
4331
4348
|
this.optionalFields = {};
|
|
4332
4349
|
this.showAll = false;
|
|
4333
4350
|
this.fieldsVisibilityChanged = new Subject();
|
|
4351
|
+
this.childResourceCardLabel = resourceCardLabel;
|
|
4334
4352
|
}
|
|
4335
4353
|
get isPersistedResource() {
|
|
4336
4354
|
// eslint-disable-next-line no-underscore-dangle
|
|
@@ -4424,7 +4442,12 @@ class MetaLayout {
|
|
|
4424
4442
|
if (!this.resource[childResource.name]) {
|
|
4425
4443
|
this.resource[childResource.name] = [];
|
|
4426
4444
|
}
|
|
4427
|
-
|
|
4445
|
+
if (childModel) {
|
|
4446
|
+
Object.assign(childModel, result.raw);
|
|
4447
|
+
}
|
|
4448
|
+
else {
|
|
4449
|
+
this.resource[childResource.name].push(result.raw);
|
|
4450
|
+
}
|
|
4428
4451
|
}
|
|
4429
4452
|
});
|
|
4430
4453
|
}
|
|
@@ -4436,10 +4459,10 @@ class MetaLayout {
|
|
|
4436
4459
|
}
|
|
4437
4460
|
}
|
|
4438
4461
|
MetaLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaLayout, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MetaResourceService }, { token: MetaReferenceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4439
|
-
MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MetaLayout, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{c
|
|
4462
|
+
MetaLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: MetaLayout, selector: "vgip-meta-layout", inputs: { meta: "meta", resource: "resource", integration: "integration", type: "type", preview: "preview", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' 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\t\t\t\t\t\t<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\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<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\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\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: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return MetaField; }), selector: "vgip-meta-field", inputs: ["meta", "parent", "integrationCode", "resourceType", "index", "preview", "theme"], outputs: ["onChange", "onLeave"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.DatePipe; }), name: "date" }] });
|
|
4440
4463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: MetaLayout, decorators: [{
|
|
4441
4464
|
type: Component,
|
|
4442
|
-
args: [{ selector: 'vgip-meta-layout', template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{c
|
|
4465
|
+
args: [{ selector: 'vgip-meta-layout', template: "<div *ngFor='let section of meta.sections' class='Vlt-section' [ngClass]=\"{ shown: showAll || section.visible || (!meta.oneTimeOptional && !section.$optional) || (meta.oneTimeOptional && !optionalFieldsCount) }\">\n\t<h5 *ngIf='section.label' class=\"Vlt-section__title\">{{section.label}}</h5>\n\t<div style='overflow: visible;' [ngClass]=\"{ 'for-preview': preview }\">\n\t\t<small *ngIf='section.description' class=\"Vlt-form__element__hint\">{{section.description}}</small>\n\t\t<div>\n\t\t\t<ng-container *ngFor='let field of section.fields'>\n\t\t\t\t<vgip-meta-field *ngIf='!field.$hidden && (showAll || section.visible || !field.$optional)' [meta]='field' [parent]='resource' [integrationCode]='integrationCode' [resourceType]='resourceType' [preview]='preview' [ngClass]=\"{ shown: !field.$invisible && (showAll || true) }\" theme='inherit' [attr.data-theme]='theme'></vgip-meta-field>\n\t\t\t</ng-container>\n\t\t</div>\n\t</div>\n</div>\n<div *ngIf='isPersistedResource && meta.children && preview'>\n\t<div *ngFor='let child of meta.children'>\n\t\t<h5 class='Vlt-children__title'>\n\t\t\t<svg class=\"Vlt-icon\"><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-stack\" /></svg> \n\t\t\t{{child.label}} <span class='Vlt-grey'>({{(resource[child.name] || []).length}})</span>\n\t\t</h5>\n\t\t<div *ngFor=\"let c of resource[child.name]\" style='position: relative;'>\n\n\t\t\t<div class=\"Vlt-card Vlt-bg-white\">\n\t\t\t\t<div class=\"Vlt-card__content Vlt-btn-on-hover\">\n\t\t\t\t\t<h5>{{childResourceCardLabel(c)}}</h5>\n\t\t\t\t\t<div style='font-size: 12px; line-height: 16px;'>\n\t\t\t\t\t\tCreated: <span class='Vlt-black'>{{c._vgis.createdDate | date:'mediumDate'}}</span>\n\t\t\t\t\t\tEdited: <span class='Vlt-black'>{{c._vgis.modifiedDate | date:'medium'}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"Vlt-badge Vlt-badge--app Vlt-badge--purple Vlt-badge--small\">{{c._vgis.resourceType}}</div>\n\t\t\t\t\t<div class=\"Vlt-btn-group Vlt-btn-group--hover\">\n\t\t\t\t\t\t<a *ngIf='c._vgis.externalLink' 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\t\t\t\t\t\t<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\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<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\t\t\t<svg><use xlink:href=\"volta/volta-icons.svg#Vlt-icon-plus\"/></svg>{{child.reference.label}}\n\t\t</button>\n\t</div>\n</div>\n<div *ngIf='!(meta.oneTimeOptional && showAll)' [ngClass]='{ centered: !meta.oneTimeOptional }'>\n\t<button *ngIf='!preview && optionalFieldsCount' type='button' (click)='toggleOptionalFields()' class=\"Vlt-btn Vlt-btn--small Vlt-btn--link more-button\" style='margin: 0; margin-bottom: 10px;'>\n\t\t<svg><use attr.xlink:href=\"volta/volta-icons.svg#Vlt-icon-chevron-{{ showAll ? 'up' : 'down' }}\"/></svg>\n\t\t{{ showAll ? 'Hide' : 'Show' }} Optional Fields ({{optionalFieldsCount}})\n\t</button>\n</div>\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"] }]
|
|
4443
4466
|
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: MetaResourceService }, { type: MetaReferenceService }]; }, propDecorators: { meta: [{
|
|
4444
4467
|
type: Input
|
|
4445
4468
|
}], resource: [{
|