@blackcube/aurelia2-bleet 1.0.0 → 1.0.1

package/dist/index.es.js

@@ -1033,6 +1033,8 @@ var Channels;
     Channels["Profile"] = "bleet:profile";
     Channels["ProfileStatus"] = "bleet:profile:status";
     Channels["Ajaxify"] = "bleet:ajaxify";
+    Channels["Popover"] = "bleet:popover";
+    Channels["PopoverStatus"] = "bleet:popover:status";
 })(Channels || (Channels = {}));
 var OverlayAction;
 (function (OverlayAction) {
@@ -1117,6 +1119,19 @@ var MenuStatus;
     MenuStatus["Opened"] = "opened";
     MenuStatus["Closed"] = "closed";
 })(MenuStatus || (MenuStatus = {}));
+var PopoverAction;
+(function (PopoverAction) {
+    PopoverAction["Open"] = "open";
+    PopoverAction["Close"] = "close";
+    PopoverAction["Toggle"] = "toggle";
+})(PopoverAction || (PopoverAction = {}));
+var PopoverStatus;
+(function (PopoverStatus) {
+    PopoverStatus["Opening"] = "opening";
+    PopoverStatus["Closing"] = "closing";
+    PopoverStatus["Opened"] = "opened";
+    PopoverStatus["Closed"] = "closed";
+})(PopoverStatus || (PopoverStatus = {}));
 var UiColor;
 (function (UiColor) {
     UiColor["Primary"] = "primary";
@@ -3160,6 +3175,181 @@ let BleetAjaxifyTriggerCustomAttribute = (() => {
     return _classThis;
 })();
 
+let BleetPopoverCustomAttribute = (() => {
+    let _classDecorators = [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 = [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 = resolve(ILogger).scopeTo('bleet-popover'), element = resolve(INode), ea = resolve(IEventAggregator)) {
+            this.logger = logger;
+            this.element = element;
+            this.ea = ea;
+            this.logger.trace('constructor');
+        }
+        attaching() {
+            this.logger.trace('attaching');
+            this.subscription = this.ea.subscribe(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 PopoverAction.Open:
+                    this.open(payload.rect);
+                    break;
+                case PopoverAction.Close:
+                    this.close();
+                    break;
+                case 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(Channels.PopoverStatus, {
+                status: PopoverStatus.Opened,
+                id: this.id,
+            });
+        }
+        close() {
+            this.isOpen = false;
+            this.element.classList.remove('is-open');
+            this.ea.publish(Channels.PopoverStatus, {
+                status: 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 = [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 = [bindable];
+            _absolute_decorators = [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 = resolve(ILogger).scopeTo('bleet-popover-trigger'), element = resolve(INode), ea = resolve(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(Channels.Popover, {
+                id: this.id,
+                action: PopoverAction.Open,
+                rect: this.absolute ? this.element.getBoundingClientRect() : undefined,
+            });
+        });
+        onMouseLeave = () => {
+            this.ea.publish(Channels.Popover, {
+                id: this.id,
+                action: PopoverAction.Close,
+            });
+        };
+    });
+    return _classThis;
+})();
+
 let BleetOverlay = (() => {
     let _classDecorators = [customElement({
             name: 'bleet-overlay',
@@ -4479,6 +4669,8 @@ const DefaultComponents = [
     BleetToasterTriggerCustomAttribute,
     BleetUploadCustomAttribute,
     BleetAjaxifyTriggerCustomAttribute,
+    BleetPopoverCustomAttribute,
+    BleetPopoverTriggerCustomAttribute,
     // components
     BleetOverlay,
     BleetToast,
@@ -4510,5 +4702,5 @@ function createBleetConfiguration(optionsCallback) {
 }
 const BleetConfiguration = createBleetConfiguration();
 
-export { AjaxifyAction, AjaxifyCodec, BadgeAction, BleetAjaxify, BleetAjaxifyTriggerCustomAttribute, BleetAlertCustomAttribute, BleetBadgeCustomAttribute, BleetBurgerCustomAttribute, BleetConfiguration, BleetDrawer, BleetDrawerTriggerCustomAttribute, BleetDropdownCustomAttribute, BleetMenuCustomAttribute, BleetModal, BleetModalTriggerCustomAttribute, BleetOverlay, BleetPagerCustomAttribute, BleetPasswordCustomAttribute, BleetProfileCustomAttribute, Quilljs as BleetQuilljs, BleetSelectCustomAttribute, BleetTabsCustomAttribute, BleetToast, BleetToaster, BleetToasterTrigger, BleetToasterTriggerCustomAttribute, BleetUploadCustomAttribute, Channels, CsrfCodec, DialogAction, DrawerAction, DrawerStatus, IApiService, IHttpService, ISocketioService, IStorageService, ISvgService, ITransitionService, ITrapFocusService, MenuAction, MenuStatus, ModalAction, ModalStatus, OverlayAction, OverlayStatus, ProfileAction, ProfileStatus, RequestCodec, ToasterAction, ToasterStatus, Transport, UiColor, UiIcon, UiToastIcon };
+export { AjaxifyAction, AjaxifyCodec, BadgeAction, BleetAjaxify, BleetAjaxifyTriggerCustomAttribute, BleetAlertCustomAttribute, BleetBadgeCustomAttribute, BleetBurgerCustomAttribute, BleetConfiguration, BleetDrawer, BleetDrawerTriggerCustomAttribute, BleetDropdownCustomAttribute, BleetMenuCustomAttribute, BleetModal, BleetModalTriggerCustomAttribute, BleetOverlay, BleetPagerCustomAttribute, BleetPasswordCustomAttribute, BleetPopoverCustomAttribute, BleetPopoverTriggerCustomAttribute, BleetProfileCustomAttribute, Quilljs as BleetQuilljs, BleetSelectCustomAttribute, BleetTabsCustomAttribute, BleetToast, BleetToaster, BleetToasterTrigger, BleetToasterTriggerCustomAttribute, BleetUploadCustomAttribute, Channels, CsrfCodec, DialogAction, DrawerAction, DrawerStatus, IApiService, IHttpService, ISocketioService, IStorageService, ISvgService, ITransitionService, ITrapFocusService, MenuAction, MenuStatus, ModalAction, ModalStatus, OverlayAction, OverlayStatus, PopoverAction, PopoverStatus, ProfileAction, ProfileStatus, RequestCodec, ToasterAction, ToasterStatus, Transport, UiColor, UiIcon, UiToastIcon };
 //# sourceMappingURL=index.es.js.map