@hestia-earth/ui-components 0.41.23 → 0.41.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -43,7 +43,7 @@ import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/s
43
43
  import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
44
44
  import set from 'lodash.set';
45
45
  import uniqBy from 'lodash.uniqby';
46
- import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
46
+ import { ScrollStrategyOptions, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
47
47
  import { ResizableDirective, ResizeHandleDirective } from 'angular-resizable-element';
48
48
  import * as semver from 'semver';
49
49
  import { parse } from 'papaparse';
@@ -7632,7 +7632,7 @@ const dataWithConfigModelLogs = (logs, termId) => (data) => {
7632
7632
  const termsLog = termId in log && data.key === 'input'
7633
7633
  ? log[termId].models.reduce((p, c) => {
7634
7634
  // extend requirements if none found
7635
- p[c].requirements = p[c].requirements || log[c]?.requirements;
7635
+ p[c].requirements = p[c]?.requirements || log[c]?.requirements;
7636
7636
  return p;
7637
7637
  }, log[termId])
7638
7638
  : log;
@@ -8001,6 +8001,7 @@ class GuideOverlayComponent {
8001
8001
  this.domSanitizer = inject(DomSanitizer);
8002
8002
  this.localStorage = inject(LocalStorageService);
8003
8003
  this.guideEnabled = inject(GUIDE_ENABLED);
8004
+ this.scrollStrategy = inject(ScrollStrategyOptions);
8004
8005
  this.responsiveService = inject(ResponsiveService);
8005
8006
  this.service = inject(GuideOverlayService);
8006
8007
  this.pageId = input('', ...(ngDevMode ? [{ debugName: "pageId" }] : []));
@@ -8032,6 +8033,14 @@ class GuideOverlayComponent {
8032
8033
  offsetX: 24
8033
8034
  }
8034
8035
  ], ...(ngDevMode ? [{ debugName: "positions" }] : []));
8036
+ this.mobilePosition = {
8037
+ originX: 'start',
8038
+ originY: 'center',
8039
+ overlayX: 'end',
8040
+ overlayY: 'top'
8041
+ };
8042
+ this.blockStrategy = this.scrollStrategy.block();
8043
+ this.repositiontrategy = this.scrollStrategy.reposition();
8035
8044
  this.url = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl([baseUrl(false), 'guide', 'overlay', this.pageId()].filter(Boolean).join('/')), ...(ngDevMode ? [{ debugName: "url" }] : []));
8036
8045
  this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
8037
8046
  effect(() => {
@@ -8052,7 +8061,7 @@ class GuideOverlayComponent {
8052
8061
  this.localStorage.store(storageKey$1, JSON.stringify({ width, height }));
8053
8062
  }
8054
8063
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8055
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n class=\"has-text-secondary\"\n (click)=\"$event.stopPropagation(); open.set(!open())\"\n [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n container=\"body\">\n <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions()\"\n [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n (backdropClick)=\"open.set(false)\">\n <div\n class=\"is-relative has-background-white | guide-overlay-container\"\n [style.width]=\"width() + 'px'\"\n [style.height]=\"height() + 'px'\"\n mwlResizable\n [mouseMoveThrottleMS]=\"100\"\n (resizing)=\"onResize($event)\"\n (resizeEnd)=\"onResizeEnd($event)\">\n <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n <iframe [src]=\"url()\"></iframe>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
8064
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GuideOverlayComponent, isStandalone: true, selector: "he-guide-overlay", inputs: { pageId: { classPropertyName: "pageId", publicName: "pageId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", height: "heightChange" }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "<a\n class=\"has-text-secondary\"\n (click)=\"$event.stopPropagation(); open.set(!open())\"\n [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n container=\"body\">\n <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n (backdropClick)=\"open.set(false)\">\n <div\n class=\"is-relative has-background-white | guide-overlay-container\"\n [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n mwlResizable\n [mouseMoveThrottleMS]=\"100\"\n (resizing)=\"onResize($event)\"\n (resizeEnd)=\"onResizeEnd($event)\">\n @if (!responsiveService.isMobile()) {\n <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n }\n <iframe [src]=\"url()\"></iframe>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
8056
8065
  }
8057
8066
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GuideOverlayComponent, decorators: [{
8058
8067
  type: Component$1,
@@ -8063,7 +8072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
8063
8072
  ResizableDirective,
8064
8073
  ResizeHandleDirective,
8065
8074
  HESvgIconComponent
8066
- ], template: "<a\n class=\"has-text-secondary\"\n (click)=\"$event.stopPropagation(); open.set(!open())\"\n [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n container=\"body\">\n <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions()\"\n [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n (backdropClick)=\"open.set(false)\">\n <div\n class=\"is-relative has-background-white | guide-overlay-container\"\n [style.width]=\"width() + 'px'\"\n [style.height]=\"height() + 'px'\"\n mwlResizable\n [mouseMoveThrottleMS]=\"100\"\n (resizing)=\"onResize($event)\"\n (resizeEnd)=\"onResizeEnd($event)\">\n <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n <iframe [src]=\"url()\"></iframe>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{max-width:calc(100vw - 2 * var(--content-screen-padding-min-size))}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}\n"] }]
8075
+ ], template: "<a\n class=\"has-text-secondary\"\n (click)=\"$event.stopPropagation(); open.set(!open())\"\n [ngbTooltip]=\"responsiveService.isTouch() || open() ? null : 'Click to open the Guide'\"\n container=\"body\">\n <he-svg-icon name=\"guide-overlay\" size=\"24\" />\n <span class=\"shadow-origin\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"></span>\n</a>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayHasBackdrop\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop']\"\n [cdkConnectedOverlayPositions]=\"responsiveService.isMobile() ? undefined : positions()\"\n [cdkConnectedOverlayScrollStrategy]=\"responsiveService.isMobile() ? blockStrategy : repositiontrategy\"\n [cdkConnectedOverlayPanelClass]=\"responsiveService.isMobile() ? 'fullscreen-overlay' : undefined\"\n (backdropClick)=\"open.set(false)\">\n <div\n class=\"is-relative has-background-white | guide-overlay-container\"\n [style.width]=\"responsiveService.isMobile() ? '100%' : width() + 'px'\"\n [style.height]=\"responsiveService.isMobile() ? '100%' : height() + 'px'\"\n mwlResizable\n [mouseMoveThrottleMS]=\"100\"\n (resizing)=\"onResize($event)\"\n (resizeEnd)=\"onResizeEnd($event)\">\n @if (!responsiveService.isMobile()) {\n <div class=\"is-absolute | resize-handle-left\" mwlResizeHandle [resizeEdges]=\"{ left: true }\"></div>\n <div class=\"is-absolute | resize-handle-bottom\" mwlResizeHandle [resizeEdges]=\"{ bottom: true }\"></div>\n }\n <iframe [src]=\"url()\"></iframe>\n </div>\n</ng-template>\n", styles: ["@media screen and (max-width:767px){.shadow-origin{position:absolute;right:16px}}.resize-handle-bottom{cursor:row-resize;height:5px;width:100%;bottom:0}.resize-handle-left{cursor:col-resize;height:100%;width:5px;left:0}::ng-deep .cdk-overlay-container .guide-overlay-container{max-height:80vh;max-width:80vw;border-radius:6px;border:1px solid rgba(221,225,230,.5);box-shadow:16px 16px 24px #00000014}@media screen and (max-width:767px){::ng-deep .cdk-overlay-container .guide-overlay-container{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}}::ng-deep .cdk-overlay-container iframe{display:block;height:100%;width:100%;border:none}::ng-deep .fullscreen-overlay{width:100vw!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;max-width:100vw!important}\n"] }]
8067
8076
  }], ctorParameters: () => [], propDecorators: { pageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageId", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], hidden: [{
8068
8077
  type: HostBinding,
8069
8078
  args: ['class.is-none']