@hestia-earth/ui-components 0.41.15 → 0.41.17

package/fesm2022/hestia-earth-ui-components.mjs

@@ -5191,8 +5191,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgbHighlight, NgTemplateOutlet, HESvgIconComponent], template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSources", required: false }] }, { type: i0.Output, args: ["searchSourcesChange"] }], searchBibliographies: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBibliographies", required: false }] }, { type: i0.Output, args: ["searchBibliographiesChange"] }], searchBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBy", required: false }] }, { type: i0.Output, args: ["searchByChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+// show label 8px from bar
+const gapX = 8;
+const placementGap = (placement) => (placement === 'right' ? +gapX : -gapX);
+const placementX = (x, chart, data, placement) => placement === 'right' ? (data < 0 ? positionAtZero(chart) : x) : x;
+const positionAtZero = (chart) => chart.scales.x.getPixelForValue(0);
 const defaultBarDrawSettings = {
-    xPosFn: (x, index, width, chart, data) => (data < 0 || isEmpty(data) ? chart.scales.x.getPixelForValue(0) : x) + 10,
+    placement: 'right',
+    xPosFn: (x, index, width, chart, data, placement) => (isEmpty(data) ? positionAtZero(chart) : placementX(x, chart, data, placement)) + placementGap(placement),
     yPosFn: y => y + 3,
     colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
     textFn: ({ data }) => `${data}`,
@@ -5200,13 +5206,25 @@ const defaultBarDrawSettings = {
     maxWidth: 90,
     emptyValueLabel: 'No data'
 };
+const drawText = (ctx, { text, font, fillStyle, placement, xPos, yPos, maxWidth }) => {
+    ctx.font = font;
+    ctx.fillStyle = fillStyle;
+    ctx.textAlign = placement === 'left' ? 'right' : 'left';
+    if (Array.isArray(text)) {
+        ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
+        ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
+    }
+    else {
+        ctx.fillText(text, xPos, yPos, maxWidth);
+    }
+};
 const afterBarDrawPlugin = settings => ({
-    id: 'afterBarDrawPlugin',
+    id: ['afterBarDrawPlugin', settings?.placement].filter(Boolean).join('-'),
     afterDatasetsDraw: (chart) => {
         if (!chart.data.datasets?.length) {
             return;
         }
-        const { xPosFn, yPosFn, colorFn, textFn, maxWidth, font, emptyValueLabel } = {
+        const { placement, xPosFn, yPosFn, colorFn, textFn, maxWidth, font, emptyValueLabel } = {
             ...defaultBarDrawSettings,
             ...(settings ?? {})
         };
@@ -5218,24 +5236,25 @@ const afterBarDrawPlugin = settings => ({
         elements
             .filter(element => !element.skip)
             .forEach((element, index) => {
-            const { x, y } = element;
+            const { x, y, base } = element;
             const label = chart.data.labels?.[index] ?? '';
             const data = dataset.data[index];
-            const xPos = xPosFn(x, index, width, chart, data);
-            const yPos = yPosFn(y, index, height, chart, data);
+            const anchorX = placement === 'left' ? base : x;
+            const xPos = xPosFn(anchorX, index, width, chart, data, placement);
+            const yPos = yPosFn(y, index, height, chart, data, placement);
             const text = isUndefined(data) ? emptyValueLabel : textFn({ label, data }, index, chart);
-            if (text) {
-                ctx.font = font;
-                ctx.fillStyle = colorFn(element.options, index, chart, data);
-                if (Array.isArray(text)) {
-                    ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
-                    ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
-                }
-                else {
-                    ctx.fillText(text, xPos, yPos, maxWidth);
-                }
-            }
+            text &&
+                drawText(ctx, {
+                    text,
+                    font,
+                    fillStyle: colorFn(element.options, index, chart, data),
+                    placement,
+                    xPos,
+                    yPos,
+                    maxWidth
+                });
         });
+        ctx.restore();
     }
 });
 
@@ -10071,7 +10090,6 @@ class EngineModelsStageDeepComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EngineModelsStageDeepComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-engine-models-stage-deep', imports: [
-                        DatePipe,
                         KeyToLabelPipe,
                         HESvgIconComponent,
                         NgbPopoverModule,