@social-mail/social-mail-client 1.2.73 → 1.2.75

package/content/pwa/service-worker.js

@@ -69,5 +69,6 @@ self.addEventListener('fetch', (event) => {
 self.addEventListener("push", function(event) {
     const options = JSON.parse(event.data.text());
     options.icon ||= "/pwa/images/logo-72.png";
+    const title = options.title;
     event.waitUntil(self.registration.showNotification(title, options));
 });

package/dist/admin/AdminAppIndex.pack.js

@@ -8857,10 +8857,11 @@ System.register(["tslib", "../../core/AtomBinder", "../../core/AtomComponent", "
         }
         const originalTarget = e.target;
         let start = originalTarget;
+        let clickEvent;
         while (start) {
+          clickEvent || (clickEvent = start.getAttribute("data-click-event"));
           if (start.tagName === "A") {
-            const clickEvent = start.getAttribute("data-click-event");
-            if (clickEvent === null) {
+            if (!clickEvent) {
               return;
             }
             if (clickEvent === "route") {
@@ -13251,7 +13252,7 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/ent
 System.register(["@web-atoms/date-time/dist/DateTime", "@web-atoms/entity/dist/services/BaseEntityService"], function (_export, _context) {
   "use strict";
 
-  var DateTime, Model, DefaultFactory, AppRole, AppFileContentDispositionArray, AppFile, AppFileVersion, AppFileAccessTypeArray, AppFileAccess, AppFileTag, FileContent, Configuration, Contact, ContactEmail, ContactPhone, ContactItem, ContactDomain, CachedItem, Domain, HostedDomain, DomainUser, DomainRelayTypeArray, DomainRelay, DomainKey, EmailStatusArray, Email, EmailEngagement, AppLog, EmailRecipientTypeArray, EmailRecipient, EmailTag, EmailAddress, EmailTemplate, Mailbox, MailboxEmail, MailboxContactStatusArray, MailboxContact, MailboxContactEmail, MailboxContactTag, MailboxSyncTargetDirectionArray, MailboxSyncTargetProtocolArray, MailboxSyncTargetLastSyncStatusArray, MailboxSyncTarget, ChannelConfig, SubscriberActivity, SearchWordStatusArray, SearchWord, SearchWordIndex, UserStatusArray, User, UserPin, UserRole, UserMailbox, UserAuthFactorMethodArray, UserAuthFactor, WebSiteFolder, WebSiteFolderHost, WebSiteFolderVersion, LoginSession, TextDocument, Tag, Product, ProductPrice, AppLicense, VirtualServer, DnsZone, DnsZoneRecordTypeArray, DnsZoneRecord, DnsSigningKey;
+  var DateTime, Model, DefaultFactory, AppRole, AppFileContentDispositionArray, AppFile, AppFileVersion, AppFileAccessTypeArray, AppFileAccess, AppFileTag, FileContent, Configuration, Contact, ContactEmail, ContactPhone, ContactItem, ContactDomain, CachedItem, Domain, HostedDomain, DomainUser, DomainRelayTypeArray, DomainRelay, DomainKey, EmailStatusArray, Email, EmailEngagement, AppLog, EmailRecipientTypeArray, EmailRecipient, EmailTag, EmailAddress, EmailTemplate, Mailbox, MailboxEmail, MailboxContactStatusArray, MailboxContact, MailboxContactEmail, MailboxContactTag, MailboxSyncTargetDirectionArray, MailboxSyncTargetProtocolArray, MailboxSyncTargetLastSyncStatusArray, MailboxSyncTarget, ChannelConfig, SubscriberActivity, SearchWordStatusArray, SearchWord, SearchWordIndex, UserStatusArray, User, UserPin, UserPushSubscription, UserRole, UserMailbox, UserAuthFactorMethodArray, UserAuthFactor, WebSiteFolder, WebSiteFolderHost, WebSiteFolderVersion, LoginSession, TextDocument, Tag;
   return {
     setters: [function (_webAtomsDateTimeDistDateTime) {
       DateTime = _webAtomsDateTimeDistDateTime.default;
@@ -13393,6 +13394,9 @@ System.register(["@web-atoms/date-time/dist/DateTime", "@web-atoms/entity/dist/s
       }, {
         "label": "sent-failed",
         "value": "sent-failed"
+      }, {
+        "label": "deleted",
+        "value": "deleted"
       }]);
       _export("Email", Email = new Model("Email", ["emailID"], {
         senderName: "",
@@ -13576,6 +13580,9 @@ System.register(["@web-atoms/date-time/dist/DateTime", "@web-atoms/entity/dist/s
         dateUpdated: new DefaultFactory(() => new DateTime())
       }));
       _export("UserPin", UserPin = new Model("UserPin", ["pinID"], {}));
+      _export("UserPushSubscription", UserPushSubscription = new Model("UserPushSubscription", ["subscriptionID"], {
+        notify: false
+      }));
       _export("UserRole", UserRole = new Model("UserRole", ["userID", "roleName"], {}));
       _export("UserMailbox", UserMailbox = new Model("UserMailbox", ["userID", "mailboxID"], {}));
       _export("UserAuthFactorMethodArray", UserAuthFactorMethodArray = [{
@@ -13616,85 +13623,6 @@ System.register(["@web-atoms/date-time/dist/DateTime", "@web-atoms/entity/dist/s
         name: "",
         isSystemTag: false
       }));
-      _export("Product", Product = new Model("Product", ["productID"], {
-        name: ""
-      }));
-      _export("ProductPrice", ProductPrice = new Model("ProductPrice", ["priceID"], {
-        quantity: 0,
-        amount: 0,
-        isActive: false,
-        currency: ""
-      }));
-      _export("AppLicense", AppLicense = new Model("AppLicense", ["licenseID", "priceID"], {
-        dateCreated: new DefaultFactory(() => new DateTime()),
-        dateExpiry: new DefaultFactory(() => new DateTime()),
-        dateUpdated: new DefaultFactory(() => new DateTime()),
-        maxCores: 0,
-        licenseCode: ""
-      }));
-      _export("VirtualServer", VirtualServer = new Model("VirtualServer", ["serverID"], {
-        serverName: "",
-        active: false,
-        host: "",
-        maxStorageGB: 0
-      }));
-      _export("DnsZone", DnsZone = new Model("DnsZone", ["zoneID"], {
-        zone: "",
-        dateCreated: new DefaultFactory(() => new DateTime()),
-        dateUpdated: new DefaultFactory(() => new DateTime())
-      }));
-      _export("DnsZoneRecordTypeArray", DnsZoneRecordTypeArray = [{
-        "label": "A",
-        "value": "A"
-      }, {
-        "label": "AAAA",
-        "value": "AAAA"
-      }, {
-        "label": "CNAME",
-        "value": "CNAME"
-      }, {
-        "label": "MX",
-        "value": "MX"
-      }, {
-        "label": "TXT",
-        "value": "TXT"
-      }, {
-        "label": "PTR",
-        "value": "PTR"
-      }, {
-        "label": "SRV",
-        "value": "SRV"
-      }, {
-        "label": "CAA",
-        "value": "CAA"
-      }, {
-        "label": "NS",
-        "value": "NS"
-      }, {
-        "label": "SOA",
-        "value": "SOA"
-      }]);
-      _export("DnsZoneRecord", DnsZoneRecord = new Model("DnsZoneRecord", ["recordID"], {
-        disabled: false,
-        name: "",
-        type: "A",
-        isAlias: false,
-        value: "",
-        ttl: 0,
-        dateCreated: new DefaultFactory(() => new DateTime()),
-        dateUpdated: new DefaultFactory(() => new DateTime()),
-        hosted: false
-      }));
-      _export("DnsSigningKey", DnsSigningKey = new Model("DnsSigningKey", ["keyID"], {
-        publicKey: "",
-        digestAlgorithm: 0,
-        signingAlgorithm: 0,
-        digest: "",
-        flags: 0,
-        dateCreated: new DefaultFactory(() => new DateTime()),
-        expiryDate: new DefaultFactory(() => new DateTime()),
-        fileName: ""
-      }));
     }
   };
 });
@@ -20844,7 +20772,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
 System.register(["tslib", "@web-atoms/core/dist/di/DITransient", "@web-atoms/core/dist/di/Inject", "../../../../services/EntityService", "../../../../model/model", "../../../Sql", "../../../SocialMailApp"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, DITransient, Inject, EntityService, HostedDomain, Mailbox, MailboxContact, Sql, SocialMailApp, MailboxService;
+  var __awaiter, __decorate, __metadata, DITransient, Inject, EntityService, HostedDomain, Mailbox, MailboxContact, UserPushSubscription, Sql, SocialMailApp, MailboxService;
   return {
     setters: [function (_tslib) {
       __awaiter = _tslib.__awaiter;
@@ -20860,6 +20788,7 @@ System.register(["tslib", "@web-atoms/core/dist/di/DITransient", "@web-atoms/cor
       HostedDomain = _modelModel.HostedDomain;
       Mailbox = _modelModel.Mailbox;
       MailboxContact = _modelModel.MailboxContact;
+      UserPushSubscription = _modelModel.UserPushSubscription;
     }, function (_Sql) {
       Sql = _Sql.Sql;
     }, function (_SocialMailApp) {
@@ -20893,9 +20822,27 @@ System.register(["tslib", "@web-atoms/core/dist/di/DITransient", "@web-atoms/cor
               size: 3,
               count: false
             });
+            yield this.updateNotify(top.items);
             return top.items;
           });
         }
+        updateNotify(items) {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              userID
+            } = SocialMailApp.user;
+            const ids = items.map(x => x.mailboxID);
+            const all = yield this.entityService.query(UserPushSubscription).where({
+              ids,
+              userID
+            }, p => x => x.userID === p.userID && Sql.in(x.mailboxID, p.ids) && x.emailAddressID === null).toArray();
+            const map = new Map(all.map(x => [x.mailboxID, x]));
+            for (const iterator of items) {
+              iterator.notify = (_b = (_a = map.get(iterator.mailboxID)) === null || _a === void 0 ? void 0 : _a.notify) !== null && _b !== void 0 ? _b : false;
+            }
+          });
+        }
         list({
           search = "",
           start = 0,
@@ -20904,36 +20851,62 @@ System.register(["tslib", "@web-atoms/core/dist/di/DITransient", "@web-atoms/cor
           version = 0,
           cancelToken
         }) {
-          let q = this.entityService.query(Mailbox);
-          if (domainID) {
-            q = q.where({
-              domainID
-            }, p => x => x.domainID === p.domainID);
-          }
-          if (search) {
-            if (search.endsWith("@")) {
-              search = `${search}%`;
-              q = q.where({
-                search
-              }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search));
-            } else if (search.startsWith("@")) {
-              search = `%${search}`;
+          return __awaiter(this, void 0, void 0, function* () {
+            let q = this.entityService.query(Mailbox);
+            if (domainID) {
               q = q.where({
-                search
-              }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search));
-            } else {
-              if (!search.includes("%")) {
-                search = `%${search}%`;
+                domainID
+              }, p => x => x.domainID === p.domainID);
+            }
+            if (search) {
+              if (search.endsWith("@")) {
+                search = `${search}%`;
+                q = q.where({
+                  search
+                }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search));
+              } else if (search.startsWith("@")) {
+                search = `%${search}`;
+                q = q.where({
+                  search
+                }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search));
+              } else {
+                if (!search.includes("%")) {
+                  search = `%${search}%`;
+                }
+                q = q.where({
+                  search
+                }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search) || Sql.text.like(x.emailAddress.name, p.search));
               }
-              q = q.where({
-                search
-              }, p => x => Sql.text.like(x.emailAddress.emailAddress, p.search) || Sql.text.like(x.emailAddress.name, p.search));
             }
-          }
-          return q.include(x => x.emailAddress).toPagedList({
-            start,
-            size,
-            cancelToken
+            const all = yield q.include(x => x.emailAddress).toPagedList({
+              start,
+              size,
+              cancelToken
+            });
+            yield this.updateNotify(all.items);
+            return all;
+          });
+        }
+        toggleNotify(m) {
+          return __awaiter(this, void 0, void 0, function* () {
+            const {
+              mailboxID
+            } = m;
+            let n = yield this.entityService.query(UserPushSubscription).where({
+              mailboxID
+            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === null).firstOrDefault();
+            if (!n) {
+              const {
+                userID
+              } = SocialMailApp.user;
+              n = UserPushSubscription.create({
+                userID,
+                mailboxID
+              });
+            }
+            n.notify = !m.notify;
+            yield this.entityService.save(n);
+            m.notify = n.notify;
           });
         }
         get(id) {
@@ -21798,7 +21771,7 @@ System.register(["@web-atoms/core/dist/core/EventScope"], function (_export, _co
 System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/core/dist/di/Inject", "../../../../services/EntityService", "../../../../model/model", "../../../../common/Sql", "../../../../common/events/CommonEvents"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, AppFile, Mailbox, MailboxContact, Sql, CommonEvents, MailService;
+  var __awaiter, __decorate, __metadata, DISingleton, Inject, EntityService, AppFile, Mailbox, MailboxContact, UserPushSubscription, Sql, CommonEvents, MailService;
   return {
     setters: [function (_tslib) {
       __awaiter = _tslib.__awaiter;
@@ -21814,6 +21787,7 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
       AppFile = _modelModel.AppFile;
       Mailbox = _modelModel.Mailbox;
       MailboxContact = _modelModel.MailboxContact;
+      UserPushSubscription = _modelModel.UserPushSubscription;
     }, function (_commonSql) {
       Sql = _commonSql.Sql;
     }, function (_commonEventsCommonEvents) {
@@ -21823,9 +21797,14 @@ System.register(["tslib", "@web-atoms/core/dist/di/DISingleton", "@web-atoms/cor
       MailService = class MailService {
         mailbox(mailboxID) {
           return __awaiter(this, void 0, void 0, function* () {
-            return this.entityService.query(Mailbox).where({
+            const mb = yield this.entityService.query(Mailbox).where({
               mailboxID
             }, p => x => x.mailboxID === p.mailboxID).include(x => x.emailAddress).firstOrDefault();
+            const notify = yield this.entityService.query(UserPushSubscription).where({
+              mailboxID
+            }, p => x => x.mailboxID === p.mailboxID && x.emailAddressID === null).firstOrDefault();
+            mb.notify = !!notify;
+            return mb;
           });
         }
         list({
@@ -34632,10 +34611,10 @@ System.register(["tslib", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/web/page/mails/contact/AddMiniContactPage");
 
-System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/core/XNode", "./service/MailService", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../common/controls/repeater/InfiniteRepeater", "@web-atoms/core/dist/core/Bind", "@web-atoms/web-controls/dist/mobile-app/MasterDetailPage", "@web-atoms/core/dist/view-model/Action", "./ConversationPage", "@web-atoms/web-controls/dist/PageNavigator", "./ComposeMailPage", "@web-atoms/core/dist/style/styled", "../../../services/socket/sockets", "./ChooseMailboxPage", "../../../common/pages/folders/ChooseTemplatePage", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "@web-atoms/web-controls/dist/basic/Resizable", "../../../common/events/CommonEvents", "@web-atoms/web-controls/dist/basic/ToggleButtonBar", "./contact/AddMiniContactPage"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atoms/core/dist/core/XNode", "./service/MailService", "@web-atoms/web-controls/dist/basic/AtomRepeater", "../../../common/controls/repeater/InfiniteRepeater", "@web-atoms/core/dist/core/Bind", "@web-atoms/web-controls/dist/mobile-app/MasterDetailPage", "@web-atoms/core/dist/view-model/Action", "./ConversationPage", "@web-atoms/web-controls/dist/PageNavigator", "./ComposeMailPage", "@web-atoms/core/dist/style/styled", "../../../services/socket/sockets", "./ChooseMailboxPage", "../../../common/pages/folders/ChooseTemplatePage", "@web-atoms/web-controls/dist/mobile-app/MobileApp", "@web-atoms/web-controls/dist/basic/Resizable", "../../../common/events/CommonEvents", "@web-atoms/web-controls/dist/basic/ToggleButtonBar", "./contact/AddMiniContactPage", "@web-atoms/core/dist/web/services/PopupService", "../../../common/pages/mailboxes/services/MailboxService"], function (_export, _context) {
   "use strict";
 
-  var __awaiter, __decorate, __metadata, InjectProperty, XNode, MailService, AtomRepeater, InfiniteRepeater, Bind, MasterDetailPage, Action, ConversationPage, PageNavigator, ComposeMailPage, styled, MailboxSocket, ChooseMailboxPage, ChooserTemplatePage, isMobileView, Resizable, CommonEvents, ToggleButtonBar, AddMiniContactPage, MailsPage, css, displayName, types;
+  var __awaiter, __decorate, __metadata, InjectProperty, XNode, MailService, AtomRepeater, InfiniteRepeater, Bind, MasterDetailPage, Action, ConversationPage, PageNavigator, ComposeMailPage, styled, MailboxSocket, ChooseMailboxPage, ChooserTemplatePage, isMobileView, Resizable, CommonEvents, ToggleButtonBar, AddMiniContactPage, PopupService, MailboxService, MailsPage, css, displayName, types;
   _export("default", void 0);
   return {
     setters: [function (_tslib) {
@@ -34682,6 +34661,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       ToggleButtonBar = _webAtomsWebControlsDistBasicToggleButtonBar.default;
     }, function (_contactAddMiniContactPage) {
       AddMiniContactPage = _contactAddMiniContactPage.default;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupService = _webAtomsCoreDistWebServicesPopupService.default;
+    }, function (_commonPagesMailboxesServicesMailboxService) {
+      MailboxService = _commonPagesMailboxesServicesMailboxService.default;
     }],
     execute: function () {
       css = styled.css`
@@ -34801,6 +34784,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             const mailbox = this.currentMailbox = yield this.mailService.mailbox(mailboxID);
             this.element.className = css;
             document.title = (_a = mailbox.emailAddress) === null || _a === void 0 ? void 0 : _a.emailAddress;
+            this.updateNotifications(mailbox);
             if (isMobileView) {
               this.headerRenderer = () => XNode.create("div", {
                 "data-layout": "row"
@@ -34965,6 +34949,28 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             this.selectedThread = existing;
           });
         }
+        updateMailboxNotify() {
+          var _a, _b, _c, _d;
+          return __awaiter(this, void 0, void 0, function* () {
+            const m = this.currentMailbox;
+            const message = m.notify ? `Disable notification for this ${((_a = m.emailAddress) === null || _a === void 0 ? void 0 : _a.name) || ""} ${(_b = m.emailAddress) === null || _b === void 0 ? void 0 : _b.emailAddress}?` : `Enable notification for this ${((_c = m.emailAddress) === null || _c === void 0 ? void 0 : _c.name) || ""} ${(_d = m.emailAddress) === null || _d === void 0 ? void 0 : _d.emailAddress}?`;
+            if (!(yield PopupService.confirm({
+              message,
+              title: "Are you sure"
+            }))) {
+              return;
+            }
+            yield this.resolve(MailboxService).toggleNotify(m);
+            this.updateNotifications(m);
+          });
+        }
+        updateNotifications(mailbox) {
+          this.actionRenderer = () => XNode.create("i", {
+            class: mailbox.notify ? "fad fa-bell" : "fad fa-bell-slash",
+            title: mailbox.notify ? "Disable Notifications" : "Enable Notifications",
+            "data-click-event": "update-mailbox-notify"
+          });
+        }
       });
       __decorate([InjectProperty, __metadata("design:type", MailService)], MailsPage.prototype, "mailService", void 0);
       __decorate([Action({
@@ -34993,6 +34999,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       __decorate([Action({
         onEvent: "add-new-contact"
       }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], MailsPage.prototype, "addNewContact", null);
+      __decorate([Action({
+        onEvent: "update-mailbox-notify"
+      }), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", Promise)], MailsPage.prototype, "updateMailboxNotify", null);
     }
   };
 });
@@ -42789,10 +42798,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/web-con
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/common/pages/user/login/LoginPage");
 
-System.register(["tslib", "@web-atoms/core/dist/core/XNode"], function (_export, _context) {
+System.register(["tslib", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  var __rest, XNode;
+  var __rest, XNode, styled;
   function MenuItem(_a) {
     var {
         label,
@@ -42802,11 +42811,15 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode"], function (_export,
         description = void 0,
         href = "",
         commandLink = "",
-        target = undefined
+        target = undefined,
+        bell = void 0,
+        bellTitle = void 0,
+        bellClick = void 0
       } = _a,
-      a = __rest(_a, ["label", "icon", "click", "title", "description", "href", "commandLink", "target"]);
+      a = __rest(_a, ["label", "icon", "click", "title", "description", "href", "commandLink", "target", "bell", "bellTitle", "bellClick"]);
     return href || commandLink ? XNode.create("a", Object.assign({
       "data-layout": "menu-item",
+      "data-text-decoration": "none",
       title: title,
       "data-click-event": commandLink ? "route" : void 0,
       href: href || commandLink,
@@ -42818,7 +42831,16 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode"], function (_export,
       text: label
     }), description && XNode.create("small", {
       text: description
-    })) : XNode.create("div", Object.assign({
+    }), bell !== void 0 && XNode.create("i", Object.assign({
+      "data-element": "badge",
+      title: bellTitle,
+      class: bell ? "fad fa-bell" : "fad fa-bell-slash"
+    }, typeof bellClick === "string" ? {
+      "data-click-event": bellClick
+    } : {
+      "data-click-event": "none",
+      "event-click": bellClick
+    }))) : XNode.create("div", Object.assign({
       title: title,
       "data-layout": "menu-item",
       "event-click": click
@@ -42828,6 +42850,11 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode"], function (_export,
       text: label
     }), description && XNode.create("small", {
       text: description
+    }), bell !== void 0 && XNode.create("i", {
+      "data-click-event": bellClick,
+      "data-element": "badge",
+      title: bellTitle,
+      class: bell ? "fad fa-bell" : "fad fa-bell-slash"
     }));
   }
   _export("default", MenuItem);
@@ -42836,8 +42863,20 @@ System.register(["tslib", "@web-atoms/core/dist/core/XNode"], function (_export,
       __rest = _tslib.__rest;
     }, function (_webAtomsCoreDistCoreXNode) {
       XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
     }],
-    execute: function () {}
+    execute: function () {
+      styled.css`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 1fr auto;
+    & > a {
+        grid-column: 1;
+        grid-row: 1;
+    }
+    `.installGlobal("[data-menu-item=menu-item]");
+    }
   };
 });
 //# sourceMappingURL=MenuItem.js.map