@veloceapps/sdk 8.0.0-75 → 8.0.0-77
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -244,10 +244,10 @@ export class MetricsComponent {
|
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
246
|
MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, deps: [{ token: i1.ContextService }, { token: i1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1.MetricsCalculationService }, { token: i1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }, { token: i1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
-
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i12.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i12.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i12.ErrorPipe, name: "error" }, { kind: "pipe", type: i1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
247
|
+
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i12.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i12.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i12.ErrorPipe, name: "error" }, { kind: "pipe", type: i1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
248
248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, decorators: [{
|
|
249
249
|
type: Component,
|
|
250
|
-
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
250
|
+
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
251
251
|
}], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i1.QuoteDraftService }, { type: i0.ChangeDetectorRef }, { type: i1.MetricsCalculationService }, { type: i1.FlowConfigurationService }, { type: i2.ShoppingCartSettingsApiService }, { type: i1.RuntimeSettingsService }]; }, propDecorators: { overlayPanel: [{
|
|
252
252
|
type: ViewChild,
|
|
253
253
|
args: [OverlayPanel]
|
|
@@ -968,10 +968,10 @@ class MetricsComponent {
|
|
|
968
968
|
}
|
|
969
969
|
}
|
|
970
970
|
MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1$1.MetricsCalculationService }, { token: i1$1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
971
|
-
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$1.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$1.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$1.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
971
|
+
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$1.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$1.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$1.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
972
972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, decorators: [{
|
|
973
973
|
type: Component,
|
|
974
|
-
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
974
|
+
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
975
975
|
}], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i0.ChangeDetectorRef }, { type: i1$1.MetricsCalculationService }, { type: i1$1.FlowConfigurationService }, { type: i2.ShoppingCartSettingsApiService }, { type: i1$1.RuntimeSettingsService }]; }, propDecorators: { overlayPanel: [{
|
|
976
976
|
type: ViewChild,
|
|
977
977
|
args: [OverlayPanel]
|
|
@@ -957,10 +957,10 @@ class MetricsComponent {
|
|
|
957
957
|
}
|
|
958
958
|
}
|
|
959
959
|
MetricsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, deps: [{ token: i1$1.ContextService }, { token: i1$1.QuoteDraftService }, { token: i0.ChangeDetectorRef }, { token: i1$1.MetricsCalculationService }, { token: i1$1.FlowConfigurationService }, { token: i2.ShoppingCartSettingsApiService }, { token: i1$1.RuntimeSettingsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
960
|
-
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$1.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$1.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$1.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
960
|
+
MetricsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MetricsComponent, selector: "vl-metrics", viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: OverlayPanel, descendants: true }], ngImport: i0, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i7.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "component", type: i11.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "component", type: i3$1.ErrorTooltipComponent, selector: "vl-error-tooltip", inputs: ["tooltip", "visible", "top"] }, { kind: "directive", type: i3$1.AppHiddenTextTooltipDirective, selector: "[vlHiddenTextTooltip]", inputs: ["vlHiddenTextTooltip"] }, { kind: "pipe", type: i3$1.ErrorPipe, name: "error" }, { kind: "pipe", type: i1$1.PricePipe, name: "vlPrice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
961
961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MetricsComponent, decorators: [{
|
|
962
962
|
type: Component,
|
|
963
|
-
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:55px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
963
|
+
args: [{ selector: 'vl-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header-metrics\" (click)=\"toggleOverlay($event, overlayPanel, metricsTarget)\">\n <div class=\"metrics\">\n <div *ngFor=\"let metric of visibleSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n\n <ng-container *ngIf=\"!visibleSelectedMetrics.length\">\n <div *ngFor=\"let metric of emptyStateMetrics\" class=\"metric empty-state-metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ metric.value | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.value | vlPrice }}\n </span>\n </div>\n </ng-container>\n </div>\n\n <div #metricsTarget class=\"metrics-overlay-target\" [class.expanded]=\"overlayPanel?.overlayVisible\">\n <i class=\"vl-icon vl-arrow-down\"></i>\n </div>\n</div>\n\n<p-overlayPanel\n styleClass=\"catalog-overlay metrics-overlay-container right no-padding\"\n showTransitionOptions=\"0ms\"\n hideTransitionOptions=\"0ms\"\n>\n <ng-template pTemplate>\n <div class=\"overlay-metrics\">\n <div *ngFor=\"let metric of restSelectedMetrics\" class=\"metric\">\n <span\n class=\"name\"\n [vlHiddenTextTooltip]=\"metric.name\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ metric.name }}\n </span>\n <span class=\"filler\"></span>\n <span\n class=\"value\"\n vlHiddenTextTooltip=\"{{ getMetricValue(metric.key) | vlPrice }}\"\n tooltipStyleClass=\"metric-tooltip\"\n tooltipPosition=\"bottom\"\n >\n {{ getMetricValue(metric.key) | vlPrice }}\n </span>\n </div>\n </div>\n <button class=\"config\" (click)=\"openSidebar()\">\n Metrics Config\n <i class=\"vl-icon vl-arrow-right\"></i>\n </button>\n </ng-template>\n</p-overlayPanel>\n\n<p-sidebar\n [visible]=\"sidebarVisible\"\n (visibleChange)=\"closeSidebar()\"\n position=\"right\"\n [baseZIndex]=\"1000\"\n [style]=\"{ width: '300px' }\"\n>\n <div class=\"container\">\n <div class=\"header\">\n Quote Metrics Config\n <i class=\"vl-icon vl-cross\" (click)=\"closeSidebar()\"></i>\n </div>\n\n <label class=\"search-container\" [class.active]=\"searchControl.value || isFocused\">\n <i class=\"vl-icon vl-search\"></i>\n <input\n data-test-id=\"search\"\n [formControl]=\"searchControl\"\n pInputText\n placeholder=\"Search for metric\u2026\"\n class=\"w-full search-input\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n <i *ngIf=\"searchControl.value\" class=\"vl-icon vl-cross\" (click)=\"clearSearch($event)\"></i>\n </label>\n\n <div class=\"content\">\n <div class=\"sidebar-metrics\" cdkDropList (cdkDropListDropped)=\"changeMetricOrder($event)\">\n <div\n *ngFor=\"let metric of filteredMetrics\"\n class=\"sidebar-metric\"\n [class.edit]=\"metric.key === editingMetric?.key\"\n cdkDrag\n [cdkDragDisabled]=\"!!searchControl.value\"\n >\n <div class=\"drag-icon\">\n <i class=\"vl-icon vl-drag\" cdkDragHandle></i>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"metricTemplate\"\n [ngTemplateOutletContext]=\"{ metric: metric }\"\n ></ng-container>\n </div>\n </div>\n\n <div class=\"empty-state\" *ngIf=\"!filteredMetrics.length\">There are no items matching your search criteria</div>\n </div>\n <div class=\"footer\">\n <p-button\n label=\"Reset to Default\"\n styleClass=\"p-button-outlined p-button-sm\"\n (onClick)=\"resetToDefault()\"\n ></p-button>\n <p-button label=\"Save\" styleClass=\"p-button p-button-filled p-button-sm\" (onClick)=\"save()\"></p-button>\n </div>\n </div>\n</p-sidebar>\n\n<ng-template #metricTemplate let-metric=\"metric\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" class=\"preview-state\">\n <p-checkbox\n [ngModel]=\"metric.visible\"\n (ngModelChange)=\"metric.visible = !metric.visible\"\n [binary]=\"true\"\n checkboxIcon=\"vl-icon vl-check\"\n ></p-checkbox>\n <div class=\"title\">{{ metric.name }}</div>\n </div>\n\n <div *ngIf=\"editingMetric?.key === metric.key\" class=\"edit-state\">\n <input data-test-id=\"name\" [formControl]=\"nameControl\" pInputText placeholder=\"Metric name\" class=\"w-full\" />\n <vl-error-tooltip [tooltip]=\"nameControl | error : 'name'\" [visible]=\"!!nameControl.errors\"></vl-error-tooltip>\n </div>\n <div class=\"actions\">\n <div *ngIf=\"editingMetric?.key !== metric.key\" (click)=\"editMetric(metric)\" class=\"action edit\">\n <i class=\"vl-icon vl-edit\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"cancelMetric()\" class=\"action cancel\">\n <i class=\"vl-icon vl-cross\"></i>\n </div>\n <div *ngIf=\"editingMetric?.key === metric.key\" (click)=\"saveMetric()\" class=\"action save\">\n <i class=\"vl-icon vl-check\"></i>\n </div>\n </div>\n</ng-template>\n", styles: [":host .header-metrics{display:flex;gap:8px;cursor:pointer}:host .header-metrics *{font-family:var(--cg-font-family)}:host .header-metrics .metrics{min-width:130px;max-width:260px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 8px;height:32px;align-items:flex-start}:host .header-metrics .metric{flex:1;flex-basis:114px;max-width:122px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;line-height:16px;letter-spacing:.3px}:host .header-metrics .metric .name{color:#ffffffb3;max-width:30px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .header-metrics .metric .value{overflow:hidden;text-overflow:ellipsis;max-width:7rem}:host .header-metrics .metric.empty-state-metric{filter:blur(1.5px)}:host .metrics-overlay-target{display:flex;align-items:center;width:16px;border-radius:4px;background:rgba(255,255,255,.1)}:host .metrics-overlay-target .vl-icon{color:var(--cg-white)}:host .metrics-overlay-target.expanded .vl-icon:before{transform:rotate(180deg)}:host ::ng-deep .p-sidebar-header{display:none}:host ::ng-deep .p-sidebar-content{padding:0;height:100%}::ng-deep .p-overlaypanel.metrics-overlay-container{width:280px}::ng-deep .p-overlaypanel.metrics-overlay-container *{font-family:var(--cg-font-family)}::ng-deep .p-overlaypanel.metrics-overlay-container .p-overlaypanel-content{padding:0;margin-top:0}::ng-deep .p-overlaypanel.metrics-overlay-container .overlay-metrics{padding:16px;max-height:112px;overflow:auto}::ng-deep .p-overlaypanel.metrics-overlay-container .metric{display:flex;font-size:12px;line-height:16px;letter-spacing:.3px;align-items:flex-end}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .name{color:var(--cg-text-color-secondary);max-width:50%;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .value{overflow:hidden;text-overflow:ellipsis}::ng-deep .p-overlaypanel.metrics-overlay-container .metric .filler:before{background-image:radial-gradient(circle at 1px 1px,var(--cg-text-color-secondary) 1px,transparent 0)}::ng-deep .p-overlaypanel.metrics-overlay-container .config{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;cursor:pointer;background:var(--cg-white);outline:none;border:none;border-top:1px solid var(--cg-border-color);width:100%;font-size:12px;line-height:16px;letter-spacing:.3px}::ng-deep .p-overlaypanel.metrics-overlay-container .config .vl-icon-chevron-down{color:var(--cg-primary-color)}.filler{flex:1;margin:0 4px 7px;min-width:7px}.filler:before{display:block;width:100%;height:2px;content:\"\";background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.7) 1px,transparent 0);background-size:5px 2px}.container{display:flex;flex-direction:column;height:100%}.container .header{box-sizing:content-box;padding:24px 24px 0;margin-bottom:16px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--vl-font-family);font-size:20px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:-.6px;color:var(--vl-accent-color)}.container .header i{cursor:pointer}.container .search-container{cursor:pointer;display:flex;height:32px;margin:0 24px 8px;padding:8px;background:var(--cg-bg-color);border:1px solid transparent;border-radius:32px}.container .search-container:hover,.container .search-container.active{background:var(--cg-white);border-color:var(--cg-primary-color)}.container .search-container .vl-icon{flex:0 0 auto}.container .search-container .search-input{width:100%;height:16px;padding:0 8px;border:none;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-black-color);background:none}.container .search-container .search-input::placeholder{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.3px;color:var(--cg-text-color-secondary)}.container .content{padding:0 24px;display:flex;flex-direction:column;flex:1;overflow:hidden}.container .footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--cg-border-color)}.container .footer p-button{flex:1}.container .footer p-button ::ng-deep button{border-radius:24px;width:100%;font-size:12px;font-family:var(--cg-font-family);font-weight:300;line-height:16px;letter-spacing:.3px;white-space:nowrap}.container .footer p-button ::ng-deep .p-button-outlined{background-color:var(--cg-white);color:var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-outlined:hover{background-color:var(--cg-primary-color);color:var(--cg-white)}.container .footer p-button ::ng-deep .p-button-filled{background-color:var(--cg-primary-color);color:var(--cg-white);border:1px solid var(--cg-primary-color)}.container .footer p-button ::ng-deep .p-button-filled:hover{background-color:var(--cg-primary-color-hover);border-color:var(--cg-primary-color-hover)}.container app-empty-state::ng-deep{margin-bottom:12px}.container app-empty-state::ng-deep .container{width:100%;padding-bottom:0}.sidebar-metrics{width:100%;overflow:auto;padding:1px 0}.empty-state{display:flex;align-items:center;justify-content:center;padding:16px;color:var(--cg-text-color-secondary);font-size:12px;font-weight:300;line-height:16px;letter-spacing:.3px}.sidebar-metric{display:flex;align-items:center;height:32px;position:relative;border-bottom:1px solid var(--cg-border-color)}.sidebar-metric.edit{border-bottom-color:var(--cg-primary-color)}.sidebar-metric.edit .drag-icon{display:none}.sidebar-metric:hover:not(.edit){background:var(--cg-bg-color)}.sidebar-metric:hover:not(.edit) .edit{visibility:visible}.sidebar-metric p-checkbox{margin-right:8px}.sidebar-metric .drag-icon{width:16px;height:16px;margin-right:8px}.sidebar-metric .drag-icon i{cursor:pointer;color:var(--cg-text-color-disabled)}.sidebar-metric.cdk-drag-disabled .drag-icon i{cursor:default}.sidebar-metric .title{font-weight:400;font-size:12px;line-height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text;cursor:text;color:var(--cg-black)}.sidebar-metric .preview-state,.sidebar-metric .edit-state{position:relative;margin-right:8px;min-width:0;display:flex;align-items:center;flex:1}.sidebar-metric .preview-state input,.sidebar-metric .edit-state input{padding-left:48px;border:none;background:transparent;width:100%}.sidebar-metric .actions{display:flex;gap:4px}.sidebar-metric .action{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px}.sidebar-metric .action:hover{background:var(--cg-primary-color);color:var(--cg-white)}.sidebar-metric .edit{visibility:hidden}.sidebar-metric .save{border-color:var(--cg-primary-color);border-radius:4px}.sidebar-metric ::ng-deep .p-checkbox{width:16px;height:16px}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box{width:16px;height:16px;border-width:1px;border-color:var(--cg-border-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box:hover{border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{background:var(--cg-primary-color);border-color:var(--cg-primary-color)}.sidebar-metric ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{flex:0 0 auto;width:12px;height:12px}.cdk-drag-preview{z-index:10001!important;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .metric-tooltip .p-tooltip-text{font-size:11px;line-height:14px;letter-spacing:.3px;background:var(--cg-primary-color-hover)}\n"] }]
|
|
964
964
|
}], ctorParameters: function () { return [{ type: i1$1.ContextService }, { type: i1$1.QuoteDraftService }, { type: i0.ChangeDetectorRef }, { type: i1$1.MetricsCalculationService }, { type: i1$1.FlowConfigurationService }, { type: i2.ShoppingCartSettingsApiService }, { type: i1$1.RuntimeSettingsService }]; }, propDecorators: { overlayPanel: [{
|
|
965
965
|
type: ViewChild,
|
|
966
966
|
args: [OverlayPanel]
|