@blackcube/aurelia2-bleet 1.0.0 → 1.0.1

package/dist/index.js

@@ -1035,6 +1035,8 @@ exports.Channels = void 0;
     Channels["Profile"] = "bleet:profile";
     Channels["ProfileStatus"] = "bleet:profile:status";
     Channels["Ajaxify"] = "bleet:ajaxify";
+    Channels["Popover"] = "bleet:popover";
+    Channels["PopoverStatus"] = "bleet:popover:status";
 })(exports.Channels || (exports.Channels = {}));
 exports.OverlayAction = void 0;
 (function (OverlayAction) {
@@ -1119,6 +1121,19 @@ exports.MenuStatus = void 0;
     MenuStatus["Opened"] = "opened";
     MenuStatus["Closed"] = "closed";
 })(exports.MenuStatus || (exports.MenuStatus = {}));
+exports.PopoverAction = void 0;
+(function (PopoverAction) {
+    PopoverAction["Open"] = "open";
+    PopoverAction["Close"] = "close";
+    PopoverAction["Toggle"] = "toggle";
+})(exports.PopoverAction || (exports.PopoverAction = {}));
+exports.PopoverStatus = void 0;
+(function (PopoverStatus) {
+    PopoverStatus["Opening"] = "opening";
+    PopoverStatus["Closing"] = "closing";
+    PopoverStatus["Opened"] = "opened";
+    PopoverStatus["Closed"] = "closed";
+})(exports.PopoverStatus || (exports.PopoverStatus = {}));
 exports.UiColor = void 0;
 (function (UiColor) {
     UiColor["Primary"] = "primary";
@@ -3162,6 +3177,181 @@ let BleetAjaxifyTriggerCustomAttribute = (() => {
     return _classThis;
 })();
 
+let BleetPopoverCustomAttribute = (() => {
+    let _classDecorators = [aurelia.customAttribute({ name: 'bleet-popover', defaultProperty: 'id' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    (class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _id_decorators = [aurelia.bindable];
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        logger;
+        element;
+        ea;
+        id = __runInitializers(this, _id_initializers, '');
+        isOpen = (__runInitializers(this, _id_extraInitializers), false);
+        subscription = null;
+        constructor(logger = aurelia.resolve(aurelia.ILogger).scopeTo('bleet-popover'), element = aurelia.resolve(aurelia.INode), ea = aurelia.resolve(aurelia.IEventAggregator)) {
+            this.logger = logger;
+            this.element = element;
+            this.ea = ea;
+            this.logger.trace('constructor');
+        }
+        attaching() {
+            this.logger.trace('attaching');
+            this.subscription = this.ea.subscribe(exports.Channels.Popover, this.onPopover);
+        }
+        attached() {
+            this.logger.trace('attached');
+        }
+        detaching() {
+            this.logger.trace('detaching');
+            this.subscription?.dispose();
+        }
+        dispose() {
+            this.logger.trace('dispose');
+            this.subscription?.dispose();
+        }
+        onPopover = (payload) => {
+            if (payload.id !== this.id)
+                return;
+            switch (payload.action) {
+                case exports.PopoverAction.Open:
+                    this.open(payload.rect);
+                    break;
+                case exports.PopoverAction.Close:
+                    this.close();
+                    break;
+                case exports.PopoverAction.Toggle:
+                    if (this.isOpen) {
+                        this.close();
+                    }
+                    else {
+                        this.open(payload.rect);
+                    }
+                    break;
+            }
+        };
+        open(rect) {
+            this.isOpen = true;
+            this.element.classList.add('is-open');
+            if (rect) {
+                this.positionAt(rect);
+            }
+            this.ea.publish(exports.Channels.PopoverStatus, {
+                status: exports.PopoverStatus.Opened,
+                id: this.id,
+            });
+        }
+        close() {
+            this.isOpen = false;
+            this.element.classList.remove('is-open');
+            this.ea.publish(exports.Channels.PopoverStatus, {
+                status: exports.PopoverStatus.Closed,
+                id: this.id,
+            });
+        }
+        positionAt(rect) {
+            this.element.style.visibility = 'hidden';
+            this.element.style.display = 'block';
+            const popoverRect = this.element.getBoundingClientRect();
+            // Center above trigger
+            let top = rect.top - popoverRect.height - 10;
+            let left = rect.left + (rect.width / 2) - (popoverRect.width / 2);
+            // Fallback below if not enough space above
+            if (top < 4)
+                top = rect.bottom + 10;
+            // Clamp to viewport
+            if (left < 4)
+                left = 4;
+            if (left + popoverRect.width > window.innerWidth - 4) {
+                left = window.innerWidth - popoverRect.width - 4;
+            }
+            this.element.style.top = `${top}px`;
+            this.element.style.left = `${left}px`;
+            this.element.style.visibility = '';
+            this.element.style.display = '';
+        }
+    });
+    return _classThis;
+})();
+
+let BleetPopoverTriggerCustomAttribute = (() => {
+    let _classDecorators = [aurelia.customAttribute({ name: 'bleet-popover-trigger', defaultProperty: 'id' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _absolute_decorators;
+    let _absolute_initializers = [];
+    let _absolute_extraInitializers = [];
+    (class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _id_decorators = [aurelia.bindable];
+            _absolute_decorators = [aurelia.bindable()];
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, null, _absolute_decorators, { kind: "field", name: "absolute", static: false, private: false, access: { has: obj => "absolute" in obj, get: obj => obj.absolute, set: (obj, value) => { obj.absolute = value; } }, metadata: _metadata }, _absolute_initializers, _absolute_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        logger;
+        element;
+        ea;
+        id = __runInitializers(this, _id_initializers, '');
+        absolute = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _absolute_initializers, true));
+        constructor(logger = aurelia.resolve(aurelia.ILogger).scopeTo('bleet-popover-trigger'), element = aurelia.resolve(aurelia.INode), ea = aurelia.resolve(aurelia.IEventAggregator)) {
+            this.logger = logger;
+            this.element = element;
+            this.ea = ea;
+            this.logger.trace('constructor');
+        }
+        attached() {
+            this.logger.trace('attached');
+            this.element.addEventListener('mouseenter', this.onMouseEnter);
+            this.element.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        detaching() {
+            this.logger.trace('detaching');
+            this.element.removeEventListener('mouseenter', this.onMouseEnter);
+            this.element.removeEventListener('mouseleave', this.onMouseLeave);
+        }
+        dispose() {
+            this.logger.trace('dispose');
+        }
+        onMouseEnter = (__runInitializers(this, _absolute_extraInitializers), () => {
+            this.ea.publish(exports.Channels.Popover, {
+                id: this.id,
+                action: exports.PopoverAction.Open,
+                rect: this.absolute ? this.element.getBoundingClientRect() : undefined,
+            });
+        });
+        onMouseLeave = () => {
+            this.ea.publish(exports.Channels.Popover, {
+                id: this.id,
+                action: exports.PopoverAction.Close,
+            });
+        };
+    });
+    return _classThis;
+})();
+
 let BleetOverlay = (() => {
     let _classDecorators = [aurelia.customElement({
             name: 'bleet-overlay',
@@ -4481,6 +4671,8 @@ const DefaultComponents = [
     BleetToasterTriggerCustomAttribute,
     BleetUploadCustomAttribute,
     BleetAjaxifyTriggerCustomAttribute,
+    BleetPopoverCustomAttribute,
+    BleetPopoverTriggerCustomAttribute,
     // components
     BleetOverlay,
     BleetToast,
@@ -4528,6 +4720,8 @@ exports.BleetModalTriggerCustomAttribute = BleetModalTriggerCustomAttribute;
 exports.BleetOverlay = BleetOverlay;
 exports.BleetPagerCustomAttribute = BleetPagerCustomAttribute;
 exports.BleetPasswordCustomAttribute = BleetPasswordCustomAttribute;
+exports.BleetPopoverCustomAttribute = BleetPopoverCustomAttribute;
+exports.BleetPopoverTriggerCustomAttribute = BleetPopoverTriggerCustomAttribute;
 exports.BleetProfileCustomAttribute = BleetProfileCustomAttribute;
 exports.BleetQuilljs = Quilljs;
 exports.BleetSelectCustomAttribute = BleetSelectCustomAttribute;