@apptegy/nuxt-navigation 0.1.125 → 0.2.0-alpha.0

package/dist/runtime/components/Nav/SidebarItem.vue

@@ -1,26 +1,38 @@
+<template>
+  <component
+    :is="component"
+    :class="['a-navbar-item', isBeaconNavEnabled ? 'beacon' : 'classic', { expanded, active, collapsed: !expanded }]"
+  >
+    <span class="icon-container">
+      <slot name="icon">
+        <a-icon
+          class="icon"
+          :icon="icon"
+        />
+      </slot>
+    </span>
+    <slot v-if="expanded" />
+  </component>
+</template>
+
 <script setup>
-import { useSidebar, computed, resolveComponent } from "#imports";
+import { useSidebar, computed, resolveComponent, useNuxtApp } from "#imports";
 const props = defineProps({
   icon: { type: String, required: false },
   active: { type: Boolean, required: false },
   as: { type: String, required: false },
   name: { type: String, required: false }
 });
+const { $ld } = useNuxtApp();
 const { state: expanded } = useSidebar();
 const component = computed(() => props.as || resolveComponent("NuxtLink"));
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 </script>
 
-<template>
-  <component :is="component" class="a-navbar-item" :class="{ expanded, active, collapsed: !expanded }">
-    <slot name="icon">
-      <a-icon class="icon" :icon="icon" font-size="24px"/>
-    </slot>
-    <slot v-if="expanded" />
-  </component>
-</template>
-
 <style scoped>
-.a-navbar-item {
+.a-navbar-item.classic {
   background-color: transparent;
   color: inherit;
   margin: 2px 12px;
@@ -33,38 +45,88 @@ const component = computed(() => props.as || resolveComponent("NuxtLink"));
   border-radius: 8px;
   user-select: none;
 }
-.a-navbar-item.collapsed {
+.a-navbar-item.classic.collapsed {
   justify-content: center;
   margin: 8px;
   cursor: pointer;
 }
-.a-navbar-item:focus-visible {
+.a-navbar-item.classic:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.a-navbar-item.active, .a-navbar-item.nuxt-link-exact-active, .a-navbar-item.router-link-exact-active {
-  background-color: var(--nav-icon-background, #F7F5F9);
+.a-navbar-item.classic.active, .a-navbar-item.classic.nuxt-link-exact-active, .a-navbar-item.classic.router-link-exact-active {
+  background-color: var(--nav-icon-background, #f7f5f9);
   font-weight: 500;
-  color: #2D2D2D;
+  color: #2d2d2d;
 }
-.a-navbar-item.active svg path, .a-navbar-item.nuxt-link-exact-active svg path, .a-navbar-item.router-link-exact-active svg path {
+.a-navbar-item.classic.active svg path, .a-navbar-item.classic.nuxt-link-exact-active svg path, .a-navbar-item.classic.router-link-exact-active svg path {
   stroke-width: 1.5px;
 }
-.a-navbar-item:hover {
-  background-color: var(--nav-icon-background, #F7F5F9);
+.a-navbar-item.classic:hover {
+  background-color: var(--nav-icon-background, #f7f5f9);
 }
-.a-navbar-item:focus-visible {
+.a-navbar-item.classic:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.a-navbar-item:last-child {
+.a-navbar-item.classic:last-child {
   margin-bottom: 8px;
 }
-
-.icon {
-  margin-right: 12px;
+.a-navbar-item.classic .icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.a-navbar-item.classic .icon-container .icon {
+  font-size: 24px;
+  margin-right: 24px;
   margin-left: 8px;
 }
+.a-navbar-item.beacon {
+  background-color: transparent;
+  color: inherit;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: capitalize;
+  border: none;
+  border-radius: 8px;
+  user-select: none;
+}
+.a-navbar-item.beacon.collapsed {
+  justify-content: center;
+  margin: 8px;
+  cursor: pointer;
+}
+.a-navbar-item.beacon:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.a-navbar-item.beacon.active, .a-navbar-item.beacon.nuxt-link-exact-active, .a-navbar-item.beacon.router-link-exact-active {
+  background-color: #662e80;
+  font-weight: 500;
+  color: #ffffff;
+}
+.a-navbar-item.beacon.active svg path, .a-navbar-item.beacon.nuxt-link-exact-active svg path, .a-navbar-item.beacon.router-link-exact-active svg path {
+  stroke-width: 1.5px;
+}
+.a-navbar-item.beacon:hover:not(.active):not(.nuxt-link-exact-active):not(.router-link-exact-active) {
+  background-color: #e9e9e9;
+  color: inherit;
+}
+.a-navbar-item.beacon:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: -1px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.a-navbar-item.beacon:last-child {
+  margin-bottom: 8px;
+}
+.a-navbar-item.beacon .icon-container {
+  display: none;
+}
 </style>

package/dist/runtime/components/Nav/SidebarSection.vue

@@ -1,16 +1,28 @@
 <template>
-  <div
-    class="a-nav-section"
-    :class="{ active }"
-  >
+  <div :class="['a-nav-section', isBeaconNavEnabled ? 'beacon' : 'classic', { active, collapsed }]">
     <NuxtLink
-      v-if="!collapsed"
+      v-if="isBeaconNavEnabled || !collapsed"
       class="a-nav-section--link"
       :to="applicationUrl"
       :target="application.target"
       :aria-label="appText"
     >
-      <span v-if="expanded">{{ appText }}</span>
+      <slot
+        v-if="isBeaconNavEnabled"
+        name="icon"
+      >
+        <Icon
+          class="app-icon"
+          :name="getApplicationIcon(application.text)"
+          size="16"
+          aria-hidden="true"
+        />
+      </slot>
+      <span
+        v-if="expanded"
+        :class="['app-name', { uppercase: isUpperCaseAppName(appText) }]"
+        >{{ appText }}</span
+      >
       <a-icon
         v-if="expanded && active"
         :class="['caret-icon', { collapse: !isOpen }]"
@@ -31,9 +43,11 @@
 </template>
 
 <script setup>
-import { useSidebar, computed, ref } from "#imports";
+import { useSidebar, computed, ref, useNuxtApp } from "#imports";
 import { isEngageApplication, rewriteEngageUrl } from "../../utils/application";
+import { APPLICATION_ICONS } from "../../utils/constants";
 const NEWSLETTERS_APP_TEXT = "Newsletters";
+const { $ld } = useNuxtApp();
 const props = defineProps({
   application: { type: Object, required: true },
   active: { type: Boolean, required: true },
@@ -42,6 +56,9 @@ const props = defineProps({
 const { state: expanded } = useSidebar();
 const isOpen = ref(true);
 const isEngageApp = computed(() => isEngageApplication(props.application?.text, props.application?.id));
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 const appText = computed(() => {
   const { text } = props.application || {};
   if (isEngageApp.value) {
@@ -59,27 +76,38 @@ const applicationUrl = computed(() => {
   }
   return url;
 });
+const isUpperCaseAppName = (appText2) => {
+  switch (appText2) {
+    case "cms":
+      return true;
+    default:
+      return false;
+  }
+};
+const getApplicationIcon = (applicationText) => {
+  return APPLICATION_ICONS[applicationText.toLowerCase()] || "lucide:square-menu";
+};
 </script>
 
 <style scoped>
-.a-nav-section {
-  box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
+.a-nav-section.classic {
   min-height: 48px;
+  box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
 }
-.a-nav-section.active {
+.a-nav-section.classic.active {
   box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, #dfdfdf);
 }
-.a-nav-section--content {
+.a-nav-section.classic .a-nav-section--content {
   display: flex;
   flex-direction: column;
   max-height: 100vh;
   overflow: auto;
   transition: max-height 0.3s ease;
 }
-.a-nav-section--content.collapse {
+.a-nav-section.classic .a-nav-section--content.collapse {
   max-height: 0;
 }
-.a-nav-section--link {
+.a-nav-section.classic .a-nav-section--link {
   display: flex;
   color: inherit;
   text-decoration: none;
@@ -92,37 +120,120 @@ const applicationUrl = computed(() => {
   width: 100%;
   user-select: none;
 }
-.a-nav-section--link svg:first-child {
+.a-nav-section.classic .a-nav-section--link svg:first-child {
   background: var(--nav-icon-background, #dfdfdf);
   color: var(--nav-icon-color, var(--eggplant-30));
   border-radius: 4px;
   min-width: 32px;
   min-height: 32px;
 }
-.a-nav-section--link svg:first-child.active {
+.a-nav-section.classic .a-nav-section--link svg:first-child.active {
   background: var(--nav-active-icon-background, var(--orange-40));
   color: var(--nav-active-icon-color, var(--primary-white));
 }
-.a-nav-section--link:not([href]) {
+.a-nav-section.classic .a-nav-section--link:not([href]) {
   cursor: default;
 }
-.a-nav-section--link:focus-visible {
+.a-nav-section.classic .a-nav-section--link:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
-.a-nav-section--link span {
+.a-nav-section.classic .a-nav-section--link .app-name {
   margin: 0 8px;
   white-space: nowrap;
   text-transform: uppercase;
   width: inherit;
 }
-.a-nav-section--link .caret-icon {
+.a-nav-section.classic .a-nav-section--link .caret-icon {
   cursor: pointer;
   font-size: 24px;
   transition: transform 0.2s ease-in-out;
 }
-.a-nav-section--link .caret-icon.collapse {
+.a-nav-section.classic .a-nav-section--link .caret-icon.collapse {
+  transform: rotate(0.5turn);
+}
+.a-nav-section.beacon.collapsed .a-nav-section--content {
+  display: none;
+}
+.a-nav-section.beacon.collapsed .a-nav-section--link {
+  justify-content: center;
+  gap: 0;
+  padding: 8px 0;
+}
+.a-nav-section.beacon.collapsed .a-nav-section--link .app-icon {
+  margin-right: 0;
+}
+.a-nav-section.beacon.collapsed.active .a-nav-section--link {
+  background-color: #662e80;
+  color: var(--primary-white, #ffffff);
+  border-radius: 8px;
+}
+.a-nav-section.beacon .a-nav-section--content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 100vh;
+  overflow: auto;
+  transition: max-height 0.3s ease;
+  padding-left: 24px;
+}
+.a-nav-section.beacon .a-nav-section--content.collapse {
+  max-height: 0;
+}
+.a-nav-section.beacon .a-nav-section--link {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 12px;
+  color: inherit;
+  text-decoration: none;
+  width: 100%;
+  min-height: 40px;
+  max-height: 40px;
+}
+.a-nav-section.beacon .a-nav-section--link:hover {
+  background-color: #e9e9e9;
+  color: inherit;
+  border-radius: 8px;
+}
+.a-nav-section.beacon .a-nav-section--link .app-icon {
+  margin-right: 4px;
+  min-width: 16px;
+  min-height: 16px;
+  max-width: 16px;
+  max-height: 16px;
+}
+.a-nav-section.beacon .a-nav-section--link svg:first-child {
+  color: inherit;
+  border-radius: 4px;
+}
+.a-nav-section.beacon .a-nav-section--link:not([href]) {
+  cursor: default;
+}
+.a-nav-section.beacon .a-nav-section--link:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.a-nav-section.beacon .a-nav-section--link .app-name {
+  white-space: nowrap;
+  text-transform: capitalize;
+  width: fit-content;
+  line-height: normal;
+}
+.a-nav-section.beacon .a-nav-section--link .app-name.uppercase {
+  text-transform: uppercase;
+}
+.a-nav-section.beacon .a-nav-section--link .caret-icon {
+  cursor: pointer;
+  min-height: 12px;
+  min-width: 12px;
+  max-height: 12px;
+  max-width: 12px;
+  transition: transform 0.2s ease-in-out;
+}
+.a-nav-section.beacon .a-nav-section--link .caret-icon.collapse {
   transform: rotate(0.5turn);
 }
 </style>

package/dist/runtime/components/Nav/SidebarSection.vue.d.ts

@@ -4,9 +4,11 @@ type __VLS_Props = {
     active: boolean;
     collapsed: boolean;
 };
-declare var __VLS_22: {};
+declare var __VLS_6: {}, __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    icon?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/Nav/UserDropdown.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { useDropdown, useAppConfig, computed, ref } from "#imports";
+import { useDropdown, useAppConfig, computed, ref, useNuxtApp } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 const appConfig = useAppConfig();
+const { $ld } = useNuxtApp();
 const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
 const props = defineProps({
   user: { type: Object, required: true },
@@ -10,19 +11,11 @@ const props = defineProps({
 });
 const dropdownTriggerRef = ref();
 const dropdownOptionsRef = ref();
-const {
-  active,
-  toggleDropdown,
-  closeDropdown,
-  keydownActionsOnTrigger,
-  handleKeydown,
-  onClickOutsideHandler
-} = useDropdown(
-  props.userDropdownOptions,
-  dropdownOptionsRef,
-  dropdownTriggerRef
-);
+const { active, toggleDropdown, closeDropdown, keydownActionsOnTrigger, handleKeydown, onClickOutsideHandler } = useDropdown(props.userDropdownOptions, dropdownOptionsRef, dropdownTriggerRef);
 const emit = defineEmits(["select-option"]);
+const isBeaconNavEnabled = computed(() => {
+  return Boolean($ld?.flags?.beaconNavEnabled);
+});
 function handleSelectedClick(index) {
   emit("select-option", index);
   closeDropdown();
@@ -44,31 +37,41 @@ function handleKeydownAction($event, index) {
     aria-haspopup="listbox"
     role="combobox"
     tabindex="0"
-    class="header__dropdown"
+    :class="['header__dropdown', isBeaconNavEnabled ? 'beacon' : 'classic']"
     @keydown="keydownActionsOnTrigger"
     @click.prevent="toggleDropdown"
   >
-    <NavAvatar :name="user.name" :src="user.avatar" />
-    <NavIconsUserDropdownMenu />
+    <NavAvatar
+      :name="user.name"
+      :src="user.avatar"
+      :is-beacon-nav-enabled="isBeaconNavEnabled"
+    />
+    <NavIconsUserDropdownMenu v-if="!isBeaconNavEnabled" />
     <span class="sr-only">{{ $t("navigation.userDropdown") }}</span>
   </div>
   <div
     v-show="active"
     id="user-dropdown"
-    class="options-dropdown"
+    :class="['options-dropdown', isBeaconNavEnabled ? 'beacon' : 'classic']"
     role="listbox"
   >
     <div class="user-info">
-        <span class="user-info-title">{{ $t("navigation.userDropdown") }}</span>
-        <div class="user-info-details">
-            <NavAvatar :name="user.name" :src="user.avatar" :is-impersonated="impersonatedUser?.show" style="--size: 40px"/>
-            <div class="user-info-details-container">
-            <span class="user-info-name"> {{ user.name }} </span>
-            <span class="user-info-email"> {{ user.email }} </span>
-            </div>
+      <span class="user-info-title">{{ $t("navigation.userDropdown") }}</span>
+      <div class="user-info-details">
+        <NavAvatar
+          :name="user.name"
+          :src="user.avatar"
+          :is-impersonated="impersonatedUser?.show"
+          :is-beacon-nav-enabled="isBeaconNavEnabled"
+          style="--size: 40px"
+        />
+        <div class="user-info-details-container">
+          <span class="user-info-name"> {{ user.name }} </span>
+          <span class="user-info-email"> {{ user.email }} </span>
         </div>
+      </div>
     </div>
-    <hr>
+    <hr />
     <div
       v-for="(option, idx) in userDropdownOptions"
       :key="option.label"
@@ -81,7 +84,10 @@ function handleKeydownAction($event, index) {
       @click="handleSelectedClick(idx)"
     >
       <!-- because of the the above handler, this component is never treated as a link and can't redirect natively? -->
-      <NuxtLink class="option" :to="option.url">
+      <NuxtLink
+        class="option"
+        :to="option.url"
+      >
         {{ option.label }}
       </NuxtLink>
     </div>
@@ -89,7 +95,7 @@ function handleKeydownAction($event, index) {
 </template>
 
 <style scoped>
-.header__dropdown {
+.header__dropdown.classic {
   font-size: 24px;
   min-width: 64px;
   width: 64px;
@@ -106,62 +112,123 @@ function handleKeydownAction($event, index) {
   align-items: center;
   cursor: pointer;
 }
-.header__dropdown:focus-visible {
+.header__dropdown.classic:focus-visible {
+  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
+}
+.header__dropdown.classic .avatar-container:focus-visible {
+  outline: none;
+}
+.header__dropdown.beacon {
+  width: fit-content;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: var(--purple);
+  background: var(--purple-20);
+  border-radius: 16px;
+  text-align: left;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+}
+.header__dropdown.beacon:focus-visible {
   box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }
-.header__dropdown .avatar-container:focus-visible {
+.header__dropdown.beacon .avatar-container:focus-visible {
   outline: none;
 }
 
-hr {
+.options-dropdown.classic {
+  min-height: 100px;
+  position: absolute;
+  max-width: 512px;
+  right: 65px;
+  top: 72px;
+  background-color: var(--primary-white);
+  border-radius: 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+  padding: 8px;
+  z-index: v-bind(zIndex);
+}
+.options-dropdown.classic hr {
   border: 0;
   border-top: 1px solid var(--grey-20);
   margin: 8px 0;
 }
-
-.user-info {
+.options-dropdown.classic .option-wrapper {
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.options-dropdown.classic .option-wrapper .option {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--primary-dark);
+  text-decoration: none;
+}
+.options-dropdown.classic .option-wrapper:focus-visible, .options-dropdown.classic .option-wrapper:hover {
+  background-color: var(--purple-20);
+}
+.options-dropdown.classic .option-wrapper:focus-visible .option, .options-dropdown.classic .option-wrapper:hover .option {
+  color: var(--purple);
+}
+.options-dropdown.classic .user-info {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 8px;
 }
-.user-info .user-info-title {
+.options-dropdown.classic .user-info .user-info-title {
   font-weight: bold;
   font-size: 12px;
   color: var(--grey-60);
   text-transform: uppercase;
 }
-.user-info .user-info-details {
+.options-dropdown.classic .user-info .user-info-details {
   display: flex;
   gap: 4px;
 }
-.user-info .user-info-details .user-info-details-container {
+.options-dropdown.classic .user-info .user-info-details .user-info-details-container {
   display: flex;
   flex-direction: column;
 }
-.user-info .user-info-details .user-info-details-container .user-info-email {
+.options-dropdown.classic .user-info .user-info-details .user-info-details-container .user-info-email {
   font-size: 12px;
   color: var(--grey-50);
 }
-
-.options-dropdown {
-  min-height: 100px;
+.options-dropdown.beacon {
   position: absolute;
+  min-height: 100px;
+  min-width: 200px;
   max-width: 512px;
-  right: 65px;
-  top: 72px;
+  right: 0;
+  top: 36px;
   background-color: var(--primary-white);
-  border-radius: 4px;
+  border-radius: 8px;
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
   padding: 8px;
   z-index: v-bind(zIndex);
+  border: 1px solid #d3d3d3;
 }
-.options-dropdown .option-wrapper {
+.options-dropdown.beacon hr {
+  border: 0;
+  border-top: 1px solid #d3d3d3;
+  margin: 8px 0;
+}
+.options-dropdown.beacon .option-wrapper {
   padding: 8px;
   border-radius: 4px;
   cursor: pointer;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.5px;
 }
-.options-dropdown .option-wrapper .option {
+.options-dropdown.beacon .option-wrapper .option {
   display: flex;
   gap: 8px;
   justify-content: space-between;
@@ -169,10 +236,42 @@ hr {
   color: var(--primary-dark);
   text-decoration: none;
 }
-.options-dropdown .option-wrapper:focus-visible, .options-dropdown .option-wrapper:hover {
+.options-dropdown.beacon .option-wrapper:focus-visible, .options-dropdown.beacon .option-wrapper:hover {
   background-color: var(--purple-20);
 }
-.options-dropdown .option-wrapper:focus-visible .option, .options-dropdown .option-wrapper:hover .option {
+.options-dropdown.beacon .option-wrapper:focus-visible .option, .options-dropdown.beacon .option-wrapper:hover .option {
   color: var(--purple);
 }
+.options-dropdown.beacon .user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px;
+}
+.options-dropdown.beacon .user-info .user-info-title {
+  display: none;
+}
+.options-dropdown.beacon .user-info .user-info-details {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.options-dropdown.beacon .user-info .user-info-details .user-info-details-container {
+  display: flex;
+  flex-direction: column;
+}
+.options-dropdown.beacon .user-info .user-info-details .user-info-details-container .user-info-name {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.5px;
+}
+.options-dropdown.beacon .user-info .user-info-details .user-info-details-container .user-info-email {
+  color: #757575;
+  font-family: font/body;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.5px;
+}
 </style>

package/dist/runtime/types/index.d.ts

@@ -12,4 +12,4 @@ export interface IUser {
     client: string;
     admin_email: string;
 }
-export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRoom, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, INotificationsHeaderModel, } from './notifications.js';
+export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, INotificationsHeaderModel, } from './notifications.js';