@crowdfarming/oliva-ds 1.97.1 → 1.98.0-rc.1

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -8174,57 +8174,133 @@ class TooltipDirective {
     tooltipPosition = TooltipPosition.TOP;
     tooltipForceOpen = false; // Development flag to force tooltip open. To delete when we have the final version of the tooltip.
     overlayRef = null;
+    // Touch devices ('hover: none') emit emulated mouse events that flicker the overlay,
+    // so split the interaction: hover on desktop, tap-to-toggle on touch.
+    supportsHover = typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(hover: hover)').matches;
     constructor(elementRef, overlay, positionBuilder) {
         this.elementRef = elementRef;
         this.overlay = overlay;
         this.positionBuilder = positionBuilder;
     }
+    onMouseEnter() {
+        // Ignore emulated mouseenter on touch devices — handled via tap.
+        if (!this.supportsHover) {
+            return;
+        }
+        this.show();
+    }
+    onMouseLeave() {
+        if (!this.supportsHover) {
+            return;
+        }
+        this.hide();
+    }
+    // Touch: tap toggles the tooltip; tapping outside closes it via the overlay backdrop.
+    onClick() {
+        if (this.supportsHover) {
+            return;
+        }
+        if (this.overlayRef) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
     show() {
         if (this.overlayRef) {
             return;
         }
-        // 1. Create the position strategy based on the Input 'tooltipPosition'
         const positionStrategy = this.positionBuilder
             .flexibleConnectedTo(this.elementRef)
-            .withPositions([this.getPosition()]);
-        // 2. Create the overlay
-        this.overlayRef = this.overlay.create({ positionStrategy });
-        // 3. Create and attach the component portal
+            .withPositions(this.getPositions());
+        // On touch: a transparent backdrop closes on outside tap; close on scroll.
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            hasBackdrop: !this.supportsHover,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        // Scroll-to-close detaches (not disposes); reset our ref so the next tap re-opens.
+        this.overlayRef.detachments().subscribe(() => this.disposeOverlay());
+        if (!this.supportsHover) {
+            this.overlayRef.backdropClick().subscribe(() => this.hide());
+        }
         const tooltipPortal = new ComponentPortal(TooltipComponent);
         const componentRef = this.overlayRef.attach(tooltipPortal);
-        // 4. Pass the text to the component
         componentRef.instance.text = this.libTooltip;
         componentRef.instance.position = this.tooltipPosition;
+        // Keep the arrow on the side CDK actually applied (getPositions may flip it).
+        positionStrategy.positionChanges.subscribe((change) => {
+            componentRef.instance.position = this.toTooltipPosition(change.connectionPair);
+            componentRef.changeDetectorRef.detectChanges();
+        });
     }
     hide() {
         // Don't hide if forceOpen is true. Useful to test the tooltip.
         if (this.tooltipForceOpen) {
             return;
         }
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
+        this.disposeOverlay();
     }
     // Clean up when the component that is launching the tooltip is destroyed
     ngOnDestroy() {
-        this.hide();
+        this.disposeOverlay();
     }
     /**
      * Manually hide the tooltip. Useful to test the tooltip.
      */
     forceHide() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
+        this.disposeOverlay();
+    }
+    disposeOverlay() {
+        // Null before disposing: dispose() emits detachments(), which re-enters this
+        // method — clearing first prevents a double dispose.
+        const ref = this.overlayRef;
+        this.overlayRef = null;
+        ref?.dispose();
+    }
+    /**
+     * Maps the position CDK actually applied back to a TooltipPosition, so the arrow
+     * points to the right side after a flip.
+     */
+    toTooltipPosition(pair) {
+        if (pair.overlayY === 'bottom') {
+            return TooltipPosition.TOP;
+        }
+        if (pair.overlayY === 'top') {
+            return TooltipPosition.BOTTOM;
+        }
+        if (pair.overlayX === 'end') {
+            return TooltipPosition.LEFT;
         }
+        return TooltipPosition.RIGHT;
     }
     /**
-     * Returns the CDK position configuration based on the 'tooltipPosition' value.
+     * Ordered positions handed to CDK when the tooltip opens: the preferred one first,
+     * its opposite as a fallback so CDK flips to the other side when the preferred one
+     * doesn't fit.
      */
-    getPosition() {
+    getPositions() {
+        const opposite = {
+            [TooltipPosition.TOP]: TooltipPosition.BOTTOM,
+            [TooltipPosition.BOTTOM]: TooltipPosition.TOP,
+            [TooltipPosition.LEFT]: TooltipPosition.RIGHT,
+            [TooltipPosition.RIGHT]: TooltipPosition.LEFT,
+        };
+        return [
+            this.getPosition(this.tooltipPosition),
+            this.getPosition(opposite[this.tooltipPosition]),
+        ];
+    }
+    /**
+     * Returns the CDK position configuration for a given tooltip position.
+     */
+    getPosition(position) {
         const offset = 2; // Space between the element and the tooltip
-        switch (this.tooltipPosition) {
+        switch (position) {
             case 'bottom':
                 return {
                     originX: 'center',
@@ -8249,18 +8325,26 @@ class TooltipDirective {
                     overlayY: 'center',
                     offsetX: offset,
                 };
-            default: // 'top'
+            default: {
+                // 'top' — bottom-anchored. On iOS with viewport-fit=cover the fixed overlay
+                // container is `innerHeight` tall while CDK anchors `bottom` using
+                // `documentElement.clientHeight`; the gap pushes the tooltip down over the
+                // origin (only affects `top`, only on touch). Compensate it in the offset.
+                const viewportGap = this.supportsHover
+                    ? 0
+                    : Math.max(0, window.innerHeight - document.documentElement.clientHeight);
                 return {
                     originX: 'center',
                     originY: 'top',
                     overlayX: 'center',
                     overlayY: 'bottom',
-                    offsetY: -offset,
+                    offsetY: -offset - viewportGap,
                 };
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: "libTooltip", tooltipPosition: "tooltipPosition", tooltipForceOpen: "tooltipForceOpen" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: "libTooltip", tooltipPosition: "tooltipPosition", tooltipForceOpen: "tooltipForceOpen" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -8273,12 +8357,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }], tooltipForceOpen: [{
                 type: Input
-            }], show: [{
+            }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
-            }], hide: [{
+            }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 class TooltipComponent {
@@ -8288,11 +8375,11 @@ class TooltipComponent {
         return `position-${this.position}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, host: { properties: { "class": "this.positionClass" } }, ngImport: i0, template: "<div class=\"c-tooltip\">\n  <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, host: { properties: { "class": "this.positionClass" } }, ngImport: i0, template: "<div class=\"c-tooltip\">\n  <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tooltip', template: "<div class=\"c-tooltip\">\n  <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'lib-tooltip', template: "<div class=\"c-tooltip\">\n  <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], position: [{