@pacem/pacem-ui 1.0.0-abel

package/dist/esm/balloon.js

@@ -0,0 +1,583 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, CustomElement, Watch, Utils, PropertyConverters, Components, PropertyChangeEvent, ViewChild, stopPropagationHandler, preventDefaultHandler } from '@pacem/pacem-core';
+import { ElementOrPointPropertyConverter } from './types';
+//namespace Pacem.Components.UI {
+export var BalloonBehavior;
+(function (BalloonBehavior) {
+    BalloonBehavior["Menu"] = "menu";
+    BalloonBehavior["Tooltip"] = "tooltip";
+    BalloonBehavior["Inert"] = "inert";
+})(BalloonBehavior || (BalloonBehavior = {}));
+export var BalloonTrigger;
+(function (BalloonTrigger) {
+    BalloonTrigger["Hover"] = "hover";
+    BalloonTrigger["Click"] = "click";
+    BalloonTrigger["ContextMenu"] = "contextmenu";
+    BalloonTrigger["Focus"] = "focus";
+})(BalloonTrigger || (BalloonTrigger = {}));
+export var BalloonAlignment;
+(function (BalloonAlignment) {
+    BalloonAlignment["Start"] = "start";
+    BalloonAlignment["Center"] = "center";
+    BalloonAlignment["End"] = "end";
+    BalloonAlignment["Auto"] = "auto";
+})(BalloonAlignment || (BalloonAlignment = {}));
+export var BalloonPosition;
+(function (BalloonPosition) {
+    BalloonPosition["Top"] = "top";
+    BalloonPosition["Left"] = "left";
+    BalloonPosition["Bottom"] = "bottom";
+    BalloonPosition["Right"] = "right";
+    BalloonPosition["Auto"] = "auto";
+    BalloonPosition["HorizontalAuto"] = "x";
+    BalloonPosition["VerticalAuto"] = "y";
+})(BalloonPosition || (BalloonPosition = {}));
+export var BalloonSizing;
+(function (BalloonSizing) {
+    BalloonSizing["Auto"] = "auto";
+    BalloonSizing["Match"] = "match";
+})(BalloonSizing || (BalloonSizing = {}));
+export const BalloonPopupEventName = 'popup';
+export const BalloonPopoutEventName = 'popout';
+const BalloonConsts = {
+    Defaults: {
+        'trigger': BalloonTrigger.Hover,
+        'position': BalloonPosition.Auto,
+        'size': BalloonSizing.Auto,
+        'behavior': BalloonBehavior.Menu,
+        'verticalOffset': 0,
+        'horizontalOffset': 0,
+        'hoverDelay': 250,
+        'hoverTimeout': 500,
+        'align': BalloonAlignment.Center,
+        'track': true
+    }
+};
+const positioningStyles = 'balloon-right balloon-left balloon-bottom balloon-top balloon-start balloon-center balloon-end';
+const allStyles = PCSS + '-balloon ' + positioningStyles + ' balloon-out balloon-in balloon-on';
+let PacemBalloonElement = class PacemBalloonElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._options = BalloonConsts.Defaults;
+        this._originalNeighborhood = null;
+        this._popoutDelegate = (_) => {
+            this.popout();
+        };
+        this._hoverDelegate = (evt) => {
+            // window.clearTimeout(this._timer);
+            if (!this.disabled) {
+                this.popup(this._options.hoverDelay);
+                // this._timer = window.setTimeout(this._popupDelegate, this._options.hoverDelay);
+            }
+        };
+        this._outConditionalDelegate = (evt) => {
+            if ((evt.srcElement || evt.target) != this) {
+                this._outDelegate(evt);
+            }
+        };
+        this._mousedownConditionalDelegate = (evt) => {
+            preventDefaultHandler(evt);
+            if (this._visible) {
+                stopPropagationHandler(evt);
+            }
+        };
+        this._outDelegate = (_) => {
+            this.popout(this._options.hoverTimeout);
+        };
+        this._toggleDelegate = (evt) => {
+            evt.preventDefault();
+            if (this._visible) {
+                this._outDelegate(evt);
+            }
+            else {
+                this._hoverDelegate(evt);
+            }
+        };
+        //#endregion
+    }
+    /** Gets whether the balloon is open and visible. */
+    get visible() {
+        return this._visible;
+    }
+    // #region LIFECYCLE
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'target') {
+            if (old instanceof Element) {
+                this._removeHandlers(old);
+            }
+            if (!(val instanceof Element)) {
+                this._adjust();
+            }
+        }
+        else if (name === 'options') {
+            if (this.target instanceof Element) {
+                this._removeHandlers(this.target);
+            }
+            this._options = Utils.extend({}, Utils.clone(BalloonConsts.Defaults), val);
+            this._synchronizeOptions();
+        }
+        else if (name === 'disabled') {
+            //this.container.style.visibility = val ? 'hidden' : 'visible';
+            if (val) {
+                this.popout();
+            }
+        }
+        if (this.target instanceof Element && name !== 'disabled') {
+            this._setHandlers(this.target);
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._ensurePopup();
+        this.target = this.target || this.parentElement;
+        this._synchronizeOptions();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._destroyPopup();
+        if (this.target instanceof Element) {
+            this._removeHandlers(this.target);
+        }
+    }
+    // #endregion
+    //#region METHODS
+    _synchronizeOptions() {
+        const popup = this, options = popup.options || {};
+        // moveToRoot
+        if (!!options.moveToRoot && Utils.isNull(this._originalNeighborhood)) {
+            this._originalNeighborhood = { parent: popup.parentElement, nextSibling: popup.nextElementSibling };
+            document.body.appendChild(popup);
+        }
+        else if (!options.moveToRoot && !Utils.isNull(this._originalNeighborhood)) {
+            const parent = this._originalNeighborhood.parent;
+            // has something changed in the neighborhood?...
+            if (!Utils.isNull(parent)) {
+                parent.appendChild(popup);
+            }
+            this._originalNeighborhood = null;
+        }
+    }
+    _ensurePopup() {
+        const popup = this, container = popup._container;
+        //
+        if (popup && container && !Utils.hasClass(popup, PCSS + '-balloon')) {
+            Utils.addClass(popup, PCSS + '-balloon');
+            popup.style.position = 'absolute';
+            container.style.position = 'relative';
+            container.style.zIndex = '1';
+            popup.style.visibility = 'hidden';
+        }
+        return popup;
+    }
+    _destroyPopup() {
+        var popup = this, container = popup._container;
+        Utils.removeClass(popup, allStyles);
+        popup.style.position = '';
+        if (!Utils.isNull(container)) {
+            container.style.position = '';
+            container.style.zIndex = '';
+        }
+    }
+    _registerEvents() {
+        const popup = this._ensurePopup(), options = this._options;
+        switch (options.behavior) {
+            case BalloonBehavior.Menu:
+                switch (options.trigger) {
+                    case BalloonTrigger.Focus:
+                        popup.addEventListener('mousedown', stopPropagationHandler, false);
+                        popup.addEventListener('focus', this._hoverDelegate, false);
+                        // do nothing else: only the blur event will pop the balloon out
+                        break;
+                    case BalloonTrigger.Click:
+                    case BalloonTrigger.ContextMenu:
+                        popup.addEventListener('mousedown', stopPropagationHandler, false);
+                        window.document.body.addEventListener('mousedown', this._outConditionalDelegate, false);
+                        break;
+                    default:
+                        popup.addEventListener('mouseenter', this._hoverDelegate, false);
+                        popup.addEventListener('mouseleave', this._outDelegate, false);
+                        break;
+                }
+                break;
+            case BalloonBehavior.Tooltip:
+                switch (options.trigger) {
+                    case BalloonTrigger.Focus:
+                    case BalloonTrigger.Click:
+                    case BalloonTrigger.ContextMenu:
+                        window.document.body.addEventListener('mousedown', this._outConditionalDelegate, false);
+                        break;
+                    default:
+                        break;
+                }
+                break;
+        }
+    }
+    _unregisterEvents() {
+        var popup = this._ensurePopup();
+        var opts = this._options;
+        switch (opts.behavior) {
+            case BalloonBehavior.Menu:
+                switch (opts.trigger) {
+                    case BalloonTrigger.Focus:
+                        popup.removeEventListener('mousedown', stopPropagationHandler, false);
+                        popup.removeEventListener('focus', this._hoverDelegate, false);
+                        // do nothing else: only the blur event will pop the balloon out
+                        break;
+                    case BalloonTrigger.Click:
+                    case BalloonTrigger.ContextMenu:
+                        popup.removeEventListener('mousedown', stopPropagationHandler, false);
+                        window.document.body.removeEventListener('mousedown', this._outConditionalDelegate, false);
+                        break;
+                    default:
+                        popup.removeEventListener('mouseenter', this._hoverDelegate, false);
+                        popup.removeEventListener('mouseleave', this._outDelegate, false);
+                        break;
+                }
+                break;
+            case BalloonBehavior.Tooltip:
+                switch (opts.trigger) {
+                    case BalloonTrigger.Click:
+                    case BalloonTrigger.ContextMenu:
+                        window.document.body.removeEventListener('mousedown', this._outConditionalDelegate, false);
+                        break;
+                }
+                break;
+        }
+    }
+    _onLayoutChange(evt) {
+        if (this._visible) {
+            this._adjust();
+        }
+    }
+    _adjust() {
+        const popup = this, el = popup.target;
+        if (Utils.isNull(el)) {
+            return;
+        }
+        const coords = el instanceof Element ? Utils.offset(el) : { top: el.y, left: el.x, width: 0, height: 0 };
+        const vieportSize = Utils.windowSize;
+        var opts = this._options;
+        var chosenPosition = opts.position, chosenAlignment = opts.align;
+        if (chosenPosition != BalloonPosition.Top &&
+            chosenPosition != BalloonPosition.Bottom && chosenPosition != BalloonPosition.Left && chosenPosition != BalloonPosition.Right) {
+            let viewportHeight = vieportSize.height;
+            let viewportWidth = vieportSize.width;
+            const offsetLeft = coords.left - Utils.scrollLeft;
+            const offsetTop = coords.top - Utils.scrollTop;
+            const offsetBottom = viewportHeight - (offsetTop + coords.height);
+            const offsetRight = viewportWidth - (offsetLeft + coords.width);
+            switch (chosenPosition) {
+                case BalloonPosition.HorizontalAuto:
+                    chosenPosition = offsetLeft > offsetRight ? BalloonPosition.Left : BalloonPosition.Right;
+                    break;
+                default:
+                    // (!) exclude 'left' and 'right' also when position is simply set to 'auto'
+                    chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
+                    break;
+            }
+        }
+        if (opts.size === BalloonSizing.Match) {
+            switch (chosenPosition) {
+                case BalloonPosition.Bottom:
+                case BalloonPosition.Top:
+                    popup.style.minWidth = coords.width + 'px';
+                    popup.style.minHeight = '';
+                    break;
+                case BalloonPosition.Left:
+                case BalloonPosition.Right:
+                    popup.style.minHeight = coords.height + 'px';
+                    popup.style.minWidth = '';
+                    break;
+            }
+        }
+        else {
+            popup.style.minWidth = popup.style.minHeight = '';
+        }
+        const popupSize = { width: popup.offsetWidth, height: popup.offsetHeight };
+        const fullOffsetWidth = coords.width - popupSize.width, halfOffsetWidth = fullOffsetWidth * .5, fullOffsetHeight = coords.height - popupSize.height, halfOffsetHeight = fullOffsetHeight * .5;
+        switch (chosenAlignment) {
+            case BalloonAlignment.Center:
+            case BalloonAlignment.Start:
+            case BalloonAlignment.End:
+                break;
+            case BalloonAlignment.Auto:
+                chosenAlignment = BalloonAlignment.Center;
+                switch (chosenPosition) {
+                    case BalloonPosition.Right:
+                    case BalloonPosition.Left:
+                        const halfHeight = Utils.scrollTop + vieportSize.height / 2;
+                        if /* completely inside the first half of the screen */ ((coords.top + coords.height) < halfHeight) {
+                            chosenAlignment = BalloonAlignment.Start;
+                        }
+                        else if /* completely beyond the half line of the screen */ (coords.top > halfHeight) {
+                            chosenAlignment = BalloonAlignment.End;
+                        }
+                        break;
+                    case BalloonPosition.Top:
+                    case BalloonPosition.Bottom:
+                        const halfWidth = Utils.scrollLeft + vieportSize.width / 2;
+                        if /* completely inside the first half of the screen */ ((coords.left + coords.width) < halfWidth) {
+                            chosenAlignment = BalloonAlignment.Start;
+                        }
+                        else if /* completely beyond the half line of the screen */ (coords.left > halfWidth) {
+                            chosenAlignment = BalloonAlignment.End;
+                        }
+                        break;
+                }
+                break;
+            default:
+                chosenAlignment = BalloonConsts.Defaults.align;
+                break;
+        }
+        Utils.removeClass(popup, positioningStyles);
+        Utils.addClass(popup, 'balloon-' + chosenPosition);
+        Utils.addClass(popup, 'balloon-' + chosenAlignment);
+        const tailSize = Utils.Css.getVariableValue(`--${PCSS}-balloon-tail-size`), tailInset = Utils.Css.getVariableValue(`--${PCSS}-balloon-tail-inset`);
+        const inset = parseInt(tailInset) + .5 * parseInt(tailSize);
+        const threshold = { width: coords.width / 2, height: coords.height / 2 };
+        const adjustX = opts.autoAdjust && inset > threshold.width;
+        const adjustY = opts.autoAdjust && inset > threshold.height;
+        switch (chosenPosition) {
+            case BalloonPosition.Top:
+                coords.top -= popupSize.height;
+                switch (chosenAlignment) {
+                    case BalloonAlignment.Center:
+                        coords.left += halfOffsetWidth;
+                        break;
+                    case BalloonAlignment.End:
+                        coords.left += fullOffsetWidth;
+                        if (adjustX) {
+                            coords.left += (inset - threshold.width);
+                        }
+                        break;
+                    case BalloonAlignment.Start:
+                        if (adjustX) {
+                            coords.left -= (inset - threshold.width);
+                        }
+                        break;
+                }
+                break;
+            case BalloonPosition.Left:
+                coords.left -= popupSize.width;
+                switch (chosenAlignment) {
+                    case BalloonAlignment.Center:
+                        coords.top += halfOffsetHeight;
+                        break;
+                    case BalloonAlignment.End:
+                        coords.top += fullOffsetHeight;
+                        if (adjustY) {
+                            coords.top += (inset - threshold.height);
+                        }
+                        break;
+                    case BalloonAlignment.Start:
+                        if (adjustY) {
+                            coords.top -= (inset - threshold.height);
+                        }
+                        break;
+                }
+                break;
+            case BalloonPosition.Right:
+                coords.left += coords.width;
+                switch (chosenAlignment) {
+                    case BalloonAlignment.Center:
+                        coords.top += halfOffsetHeight;
+                        break;
+                    case BalloonAlignment.End:
+                        coords.top += fullOffsetHeight;
+                        if (adjustY) {
+                            coords.top += (inset - threshold.height);
+                        }
+                        break;
+                    case BalloonAlignment.Start:
+                        if (adjustY) {
+                            coords.top -= (inset - threshold.height);
+                        }
+                        break;
+                }
+                break;
+            default:
+                // bottom
+                coords.top += coords.height;
+                switch (chosenAlignment) {
+                    case BalloonAlignment.Center:
+                        coords.left += halfOffsetWidth;
+                        break;
+                    case BalloonAlignment.End:
+                        coords.left += fullOffsetWidth;
+                        if (adjustX) {
+                            coords.left += (inset - threshold.width);
+                        }
+                        break;
+                    case BalloonAlignment.Start:
+                        if (adjustX) {
+                            coords.left -= (inset - threshold.width);
+                        }
+                        break;
+                }
+                break;
+        }
+        coords.left = Math.min(vieportSize.width - popupSize.width, Math.max(0, coords.left));
+        //coords.top = Math.max(0, coords.top);
+        // coords for balloon positioning
+        coords.top += opts.verticalOffset;
+        coords.left += opts.horizontalOffset;
+        popup.style.top = Math.round(coords.top) + 'px';
+        popup.style.left = Math.round(coords.left) + 'px';
+        // popup.style.transform = `translateX(${Math.round(coords.left)}px) translateY(${Math.round(coords.top)}px) translateZ(0)`;
+        //popup.style.visibility = 'visible';
+    }
+    _adjustWatchers(visible) {
+        const options = this.options || {};
+        if (!Utils.isNull(this._resize)) {
+            // track position and size
+            this._resize.disabled = !visible;
+            this._position.disabled = !visible || !(options.track || options.trackPosition);
+        }
+    }
+    /**
+     * Shows the balloon, if hidden.
+     */
+    popup(delay = 0) {
+        clearTimeout(this._timer);
+        if (delay > 0) {
+            this._timer = setTimeout(() => this.popup(), delay);
+            return;
+        }
+        const popup = this, isVisible = Utils.isVisible(popup);
+        this._adjustWatchers(true);
+        if (isVisible || this.disabled) {
+            return;
+        }
+        // attach closured behavior to popup
+        //if (!sameTrigger) {
+        this._registerEvents(); // $popup.on('mouseenter', obj.methods.hover).on('mouseleave', obj.methods.out).data(vars.TRIGGER, obj);
+        //}
+        //
+        popup.style.pointerEvents = 'none';
+        this._visible = true;
+        popup.style.visibility = 'visible';
+        this._adjust();
+        //requestAnimationFrame(() => {
+        Utils.addClass(popup, 'balloon-in');
+        Utils.addAnimationEndCallback(popup, () => {
+            Utils.addClass(popup, 'balloon-on');
+            popup.dispatchEvent(new PropertyChangeEvent({ propertyName: 'visible', oldValue: false, currentValue: true }));
+            popup.dispatchEvent(new Event(BalloonPopupEventName));
+            popup.style.pointerEvents = 'auto';
+        }, 500);
+        //});
+    }
+    /**
+     * Hides the balloon, if visible.
+     */
+    popout(delay = 0) {
+        clearTimeout(this._timer);
+        if (delay > 0) {
+            this._timer = setTimeout(() => this.popout(), delay);
+            return;
+        }
+        var popup = this;
+        const isVisible = Utils.isVisible(popup);
+        this._adjustWatchers(false);
+        if (!isVisible) {
+            return;
+        }
+        // detach closured behavior from popup
+        this._unregisterEvents();
+        //
+        popup.style.pointerEvents = 'none';
+        Utils.removeClass(popup, 'balloon-in balloon-on');
+        Utils.addClass(popup, 'balloon-out');
+        Utils.addAnimationEndCallback(popup, () => {
+            popup.style.visibility = 'hidden';
+            this._visible = false;
+            Utils.removeClass(popup, allStyles);
+            popup.dispatchEvent(new Event(BalloonPopoutEventName));
+            popup.dispatchEvent(new PropertyChangeEvent({ propertyName: 'visible', oldValue: true, currentValue: false }));
+        }, 500);
+    }
+    /**
+     * Shows the balloon, if hidden. Otherwise hides it.
+     */
+    toggle(delay = 0) {
+        if (!Utils.isVisible(this) && !this.disabled) {
+            this.popup(delay);
+        }
+        else {
+            this.popout(delay);
+        }
+    }
+    _removeHandlers(el) {
+        if (Utils.isNull(el)) {
+            return;
+        }
+        el.removeEventListener('mouseenter', this._hoverDelegate, false);
+        el.removeEventListener('mouseleave', this._outDelegate, false);
+        el.removeEventListener('mousedown', this._popoutDelegate, false);
+        el.removeEventListener('mousedown', this._mousedownConditionalDelegate, false);
+        el.removeEventListener('click', this._toggleDelegate, false);
+        el.removeEventListener('focus', this._hoverDelegate, false);
+        el.removeEventListener('blur', this._outDelegate, false);
+        el.removeEventListener('contextmenu', this._toggleDelegate, false);
+    }
+    _setHandlers(el) {
+        this.popout();
+        // regenerate opts popup
+        var opts = this._options;
+        if (opts.behavior == BalloonBehavior.Inert) {
+            return;
+        }
+        switch (opts.trigger) {
+            case BalloonTrigger.Hover:
+                el.addEventListener('mouseenter', this._hoverDelegate, false);
+                el.addEventListener('mouseleave', this._outDelegate, false);
+                el.addEventListener('mousedown', this._popoutDelegate, false);
+                break;
+            case BalloonTrigger.Focus:
+                el.addEventListener('focus', this._hoverDelegate, false);
+                el.addEventListener('blur', this._outDelegate, false);
+                break;
+            case BalloonTrigger.Click:
+                opts.hoverDelay = opts.hoverTimeout = 0;
+                el.addEventListener('mousedown', this._mousedownConditionalDelegate, false);
+                el.addEventListener('click', this._toggleDelegate, false) /*.blur(obj.methods.out)*/;
+                break;
+            case BalloonTrigger.ContextMenu:
+                opts.hoverDelay = opts.hoverTimeout = 0;
+                el.addEventListener('contextmenu', this._toggleDelegate, false);
+                break;
+        }
+    }
+};
+__decorate([
+    ViewChild(`.${PCSS}-balloon`)
+], PacemBalloonElement.prototype, "_container", void 0);
+__decorate([
+    ViewChild(P + '-resize[content]')
+], PacemBalloonElement.prototype, "_resize", void 0);
+__decorate([
+    ViewChild(P + '-resize[watch-position=true]')
+], PacemBalloonElement.prototype, "_position", void 0);
+__decorate([
+    Watch({ converter: ElementOrPointPropertyConverter })
+], PacemBalloonElement.prototype, "target", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemBalloonElement.prototype, "options", void 0);
+PacemBalloonElement = __decorate([
+    CustomElement({
+        tagName: P + '-balloon',
+        shadow: true,
+        template: `<${P}-resize target="{{ :host.target }}" disabled="true" watch-position="true" on-${Components.ResizeEventName}=":host._onLayoutChange($event)"></${P}-resize>
+<div class="${PCSS}-balloon"><${P}-resize on-${Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content><slot></slot></${P}-resize></div>
+<div class="corner top-left" part="corner-topleft"></div><div class="corner bottom-left" part="corner-bottomleft"></div><div class="corner top-right" part="corner-topright"></div><div class="corner bottom-right" part="corner-bottomright"></div>`
+    })
+], PacemBalloonElement);
+export { PacemBalloonElement };
+//}