raise-common-lib 0.0.232-beta → 0.0.234-beta

package/fesm5/raise-common-lib.js

@@ -1164,6 +1164,26 @@ var FloatBoxComponent = /** @class */ (function () {
                 _this.ref.markForCheck();
             }
         });
+        this.onContextMenuOutside = (/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            /** @type {?} */
+            var floatElement;
+            if (_this._floatClass) {
+                floatElement = document.querySelector("" + _this._floatClass);
+            }
+            if (!_this.rootElement.nativeElement.contains((/** @type {?} */ (event.target))) &&
+                !_this.fixedContainerEl.contains((/** @type {?} */ (event.target))) &&
+                (!floatElement || !floatElement.contains((/** @type {?} */ (event.target))))) {
+                _this.opened = "no";
+                _this.openChange.emit(false);
+                window.removeEventListener("contextmenu", _this.onContextMenuOutside);
+                window.removeEventListener("click", _this.onContextMenuOutside);
+                _this.ref.markForCheck();
+            }
+        });
         this.onMoveOutside = (/**
          * @param {?} event
          * @return {?}
@@ -1218,6 +1238,9 @@ var FloatBoxComponent = /** @class */ (function () {
             if (this._trigger === "click") {
                 return "click";
             }
+            if (this._trigger === "rightClick") {
+                return "rightClick";
+            }
             return "hover";
         },
         enumerable: true,
@@ -1388,6 +1411,25 @@ var FloatBoxComponent = /** @class */ (function () {
         this.setFixedContentPosition();
         window.addEventListener("click", this.onClickOutside);
     };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    FloatBoxComponent.prototype.onRightClickContainer = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        if (this.trigger !== "rightClick") {
+            return;
+        }
+        event.preventDefault(); // 阻止默认右键菜单
+        this.opened = "yes";
+        this.openChange.emit(true);
+        this.setFixedContentPosition();
+        window.addEventListener("contextmenu", this.onContextMenuOutside);
+        window.addEventListener("click", this.onContextMenuOutside);
+    };
     /**
      * @return {?}
      */
@@ -1424,8 +1466,8 @@ var FloatBoxComponent = /** @class */ (function () {
     FloatBoxComponent.decorators = [
         { type: Component, args: [{
                     selector: "rs-float-box",
-                    template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    styles: [".float-box-container{position:relative}.float-box-container[data-trigger=click]>.float-box-content[data-opened=no],.float-box-container[data-trigger=hover]:not(:hover)>.float-box-content{display:none}.float-box-container>.float-box-content[data-fixed=no]{padding:8px;--top:0;--left:0;--translate-x:0;--translate-y:0;position:absolute;top:var(--top);left:var(--left);transform:translate(var(--translate-x),var(--translate-y));z-index:10}.float-box-container>.float-box-content[data-fixed=no][data-animation=yes]{-webkit-animation:.25s ease-in-out;animation:.25s ease-in-out}.float-box-container>.float-box-content[data-fixed=no][data-placement=top]{--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-animation=true]{-webkit-animation-name:open-from-top;animation-name:open-from-top}.float-box-container>.float-box-content[data-fixed=no][data-placement=left]{--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=right]{--left:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom]{--top:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=start]{--left:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=center]{--left:50%;--translate-x:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=end]{--left:calc(100% + 8px);--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start]{--top:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center]{--top:50%;--translate-y:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end]{--top:calc(100% + 8px);--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end][data-animation=yes]{-webkit-animation-name:open-from-top;animation-name:open-from-top}@-webkit-keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@-webkit-keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}::ng-deep #kt-float-box-fixed-container{width:0;height:0;z-index:100000}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes]{padding:8px;position:fixed;z-index:10}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes][data-opened=no]{display:none}.float-box-show-content{padding:8px 8px 12px;border-radius:8px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}"]
+                    template: "<div\r\n  #element\r\n  class=\"float-box-container\"\r\n  [attr.data-trigger]=\"trigger\"\r\n  (click)=\"onClickContainer()\"\r\n  (contextmenu)=\"onRightClickContainer($event)\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n>\r\n  <ng-content></ng-content>\r\n  <div\r\n    #content\r\n    class=\"float-box-content\"\r\n    [attr.data-placement]=\"placement\"\r\n    [attr.data-position]=\"position\"\r\n    [attr.data-animation]=\"animation\"\r\n    [attr.data-fixed]=\"fixed\"\r\n    [attr.data-opened]=\"opened\"\r\n  >\r\n    <div class=\"float-box-show-content\">\r\n      <ng-content select=\"[float-content]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    styles: [".float-box-container{position:relative}.float-box-container[data-trigger=click]>.float-box-content[data-opened=no],.float-box-container[data-trigger=hover]:not(:hover)>.float-box-content,.float-box-container[data-trigger=rightClick]>.float-box-content[data-opened=no]{display:none}.float-box-container>.float-box-content[data-fixed=no]{padding:8px;--top:0;--left:0;--translate-x:0;--translate-y:0;position:absolute;top:var(--top);left:var(--left);transform:translate(var(--translate-x),var(--translate-y));z-index:10}.float-box-container>.float-box-content[data-fixed=no][data-animation=yes]{-webkit-animation:.25s ease-in-out;animation:.25s ease-in-out}.float-box-container>.float-box-content[data-fixed=no][data-placement=top]{--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-animation=true]{-webkit-animation-name:open-from-top;animation-name:open-from-top}.float-box-container>.float-box-content[data-fixed=no][data-placement=left]{--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=right]{--left:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom]{--top:100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=start]{--left:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=center]{--left:50%;--translate-x:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=bottom][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=top][data-position=end]{--left:calc(100% + 8px);--translate-x:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start]{--top:-8px}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=start][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=start][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center]{--top:50%;--translate-y:-50%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=center][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=center][data-animation=yes]{-webkit-animation-name:open-from-bottom;animation-name:open-from-bottom}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end]{--top:calc(100% + 8px);--translate-y:-100%}.float-box-container>.float-box-content[data-fixed=no][data-placement=left][data-position=end][data-animation=yes],.float-box-container>.float-box-content[data-fixed=no][data-placement=right][data-position=end][data-animation=yes]{-webkit-animation-name:open-from-top;animation-name:open-from-top}@-webkit-keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-top{from{margin-top:-8px;opacity:.4}to{margin:0;opacity:1}}@-webkit-keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}@keyframes open-from-bottom{from{margin-top:8px;opacity:.4}to{margin:0;opacity:1}}::ng-deep #kt-float-box-fixed-container{width:0;height:0;z-index:100000}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes]{padding:8px;position:fixed;z-index:10}::ng-deep #kt-float-box-fixed-container .float-box-content[data-fixed=yes][data-opened=no]{display:none}.float-box-show-content{padding:8px 8px 12px;border-radius:8px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25)}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1473,6 +1515,8 @@ if (false) {
     /** @type {?} */
     FloatBoxComponent.prototype.onClickOutside;
     /** @type {?} */
+    FloatBoxComponent.prototype.onContextMenuOutside;
+    /** @type {?} */
     FloatBoxComponent.prototype.onMoveOutside;
     /**
      * @type {?}