@lblod/ember-rdfa-editor-lblod-plugins 27.1.0 → 28.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 28.0.0
+
+### Major Changes
+
+- [#547](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/547) [`8dc7f0f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8dc7f0f3f57755ae2807e38c7f75a6b6fbff6248) Thanks [@abeforgit](https://github.com/abeforgit)! - Bump peerdeps to be compatible with editor v11
+
+### Minor Changes
+
+- [#547](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/547) [`648e04b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/648e04b4c4d59d717f9e9c2f24a57c22f45c222d) Thanks [@abeforgit](https://github.com/abeforgit)! - Make ToC compatible with new structure nodes
+
+- [#548](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/548) [`9b90845`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9b90845c524d8255dda98b872876b8fbd1728026) Thanks [@piemonkey](https://github.com/piemonkey)! - Convert snippet preview list into a generic component for displaying a list of documents
+
+### Patch Changes
+
+- [#548](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/548) [`704b9b7`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/704b9b776ed61e374852c0cdf51fb7330dac557b) Thanks [@piemonkey](https://github.com/piemonkey)! - Add ability to mark favourites in a preview list
+
 ## 27.1.0
 
 ### Minor Changes

package/addon/components/common/documents/preview-list.gts

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import AuList from '@appuniversum/ember-appuniversum/components/au-list';
+import Preview from './preview';
+import { PreviewableDocument } from './types';
+
+interface Sig<Doc extends PreviewableDocument> {
+  Args: {
+    docs: Doc[];
+    onInsert: (toInsert: Doc) => void;
+    isFavourite?: (doc: Doc) => boolean;
+    toggleFavourite?: (doc: Doc) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class PreviewList<
+  Doc extends PreviewableDocument,
+> extends Component<Sig<Doc>> {
+  <template>
+    {{#if @docs.length}}
+      <AuList as |Item|>
+        {{#each @docs as |doc|}}
+          <Item>
+            <Preview
+              @doc={{doc}}
+              @onInsert={{@onInsert}}
+              @isFavourite={{@isFavourite}}
+              @toggleFavourite={{@toggleFavourite}}
+            />
+          </Item>
+        {{/each}}
+      </AuList>
+    {{/if}}
+  </template>
+}

package/addon/components/{snippet-plugin/snippets/snippet-preview.gts → common/documents/preview.gts}

@@ -2,41 +2,35 @@ import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
 import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
+import { VoteStarFilledIcon } from '@appuniversum/ember-appuniversum/components/icons/vote-star-filled';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-
-import { SayController } from '@lblod/ember-rdfa-editor';
-import {
-  Snippet,
-  SnippetPluginConfig,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import t from 'ember-intl/helpers/t';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { PreviewableDocument } from './types';
+import { VoteStarUnfilledIcon } from '../vote-star-unfilled-icon';
 
-interface Signature {
+interface Signature<Doc extends PreviewableDocument> {
   Args: {
-    config: SnippetPluginConfig;
-    snippet: Snippet;
-    onInsert: (content: string, title: string) => void;
+    doc: Doc;
+    onInsert: (toInsert: Doc) => void;
+    isFavourite?: (doc: Doc) => boolean;
+    toggleFavourite?: (doc: Doc) => void;
   };
   Element: HTMLDivElement;
 }
 
-export default class SnippetPreviewComponent extends Component<Signature> {
+export default class DocumentPreview<
+  Doc extends PreviewableDocument,
+> extends Component<Signature<Doc>> {
   @tracked controller?: SayController;
   @tracked isExpanded = false;
 
-  get snippet(): Snippet {
-    return this.args.snippet;
-  }
-
   @action
   onInsert() {
-    this.args.onInsert(
-      this.args.snippet.content?.toHTML() ?? '',
-      this.args.snippet.title ?? '',
-    );
+    this.args.onInsert(this.args.doc);
   }
 
   @action
@@ -44,6 +38,14 @@ export default class SnippetPreviewComponent extends Component<Signature> {
     this.isExpanded = !this.isExpanded;
   }
 
+  get isFavourite() {
+    return this.args.isFavourite?.(this.args.doc);
+  }
+  toggleFavourite = (event: MouseEvent) => {
+    event.stopPropagation();
+    this.args.toggleFavourite?.(this.args.doc);
+  };
+
   <template>
     <div
       class='snippet-preview {{if this.isExpanded "snippet-preview--expanded"}}'
@@ -63,9 +65,23 @@ export default class SnippetPreviewComponent extends Component<Signature> {
               <AuIcon @icon={{NavDownIcon}} @size='large' />
             {{/if}}
           </AuButton>
+          {{#if @isFavourite}}
+            {{#if this.isFavourite}}
+              <AuButton
+                @skin='naked'
+                @icon={{VoteStarFilledIcon}}
+                {{on 'click' this.toggleFavourite}}
+              />
+            {{else}}
+              {{! This is weird but needed to get around the stroke-width styling of svgs in au-icons }}
+              <AuButton @skin='naked' {{on 'click' this.toggleFavourite}}>
+                <VoteStarUnfilledIcon />
+              </AuButton>
+            {{/if}}
+          {{/if}}
           {{! template-lint-disable no-heading-inside-button}}
           <h3 class='snippet-preview__title'>
-            {{@snippet.title}}
+            {{@doc.title}}
           </h3>
         </div>
         <div
@@ -84,8 +100,8 @@ export default class SnippetPreviewComponent extends Component<Signature> {
         <div
           class='say-editor say-content rdfa-annotations rdfa-annotations-highlight rdfa-annotations-hover snippet-preview__content'
         >
-          {{#if @snippet.content}}
-            {{@snippet.content}}
+          {{#if @doc.content}}
+            {{@doc.content}}
           {{else}}
             <p class='au-u-italic'>{{t 'snippet-plugin.modal.no-content'}}</p>
           {{/if}}

package/addon/components/common/documents/types.ts

@@ -0,0 +1,19 @@
+import { htmlSafe } from '@ember/template';
+
+import { optionMapOr } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+
+interface PreviewableDocumentArgs {
+  title: string | null;
+  content: string | null;
+}
+
+export class PreviewableDocument {
+  content: SafeString | null;
+  title: string | null;
+
+  constructor({ title, content }: PreviewableDocumentArgs) {
+    this.content = optionMapOr(null, htmlSafe, content);
+    this.title = title;
+  }
+}

package/addon/components/common/search/alert-load-error.gts

@@ -1,23 +1,32 @@
+import { TemplateOnlyComponent } from '@ember/component/template-only';
 import t from 'ember-intl/helpers/t';
-import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuAlert, {
+  AuAlertSignature,
+} from '@appuniversum/ember-appuniversum/components/au-alert';
 import AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
 import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
 
-<template>
+interface Sig {
+  Args: {
+    error: unknown;
+    fullSize?: boolean;
+  };
+  Element: AuAlertSignature['Element'];
+}
+
+const AlertLoadError: TemplateOnlyComponent<Sig> = <template>
   <AuAlert
     @title={{t 'common.search.error-title'}}
     @skin='error'
     @icon={{AlertTriangleIcon}}
     @closable={{false}}
-    {{! @glint-expect-error: not typesafe yet }}
     @size={{if @fullSize undefined 'small'}}
     class='au-u-margin'
-    {{! @glint-expect-error: not typesafe yet }}
     ...attributes
   >
     <p>{{t 'common.search.error-intro'}}</p>
-    {{! @glint-expect-error: not typesafe yet }}
+    {{! @glint-expect-error: This seems to work... I guess Error has a toString that is called? }}
     <code class='au-u-error error-code'>{{@error}}</code>
     <p>
       {{t 'common.search.error-outro'}}
@@ -31,4 +40,6 @@ import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail
       </AuLinkExternal>.
     </p>
   </AuAlert>
-</template>
+</template>;
+
+export default AlertLoadError;

package/addon/components/common/search/alert-no-items.gts

@@ -1,18 +1,27 @@
+import { TemplateOnlyComponent } from '@ember/component/template-only';
 import t from 'ember-intl/helpers/t';
-import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuAlert, {
+  AuAlertSignature,
+} from '@appuniversum/ember-appuniversum/components/au-alert';
 import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 
-<template>
+interface Sig {
+  Args: {
+    fullSize?: boolean;
+  };
+  Element: AuAlertSignature['Element'];
+}
+
+const AlertNoItems: TemplateOnlyComponent<Sig> = <template>
   <AuAlert
     @title={{t 'common.search.no-results'}}
     @skin='warning'
     @icon={{CrossIcon}}
-    {{! @glint-expect-error: not typesafe yet }}
     @size={{if @fullSize undefined 'small'}}
     @closable={{false}}
-    {{! @glint-expect-error: not typesafe yet }}
     class={{unless @fullSize 'au-u-margin-small'}}
-    {{! @glint-expect-error: not typesafe yet }}
     ...attributes
   />
-</template>
+</template>;
+
+export default AlertNoItems;

package/addon/components/common/search/loading.gts

@@ -0,0 +1,13 @@
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+import t from 'ember-intl/helpers/t';
+import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+
+interface Sig {}
+
+const SearchLoading: TemplateOnlyComponent<Sig> = <template>
+  <AuLoader @hideMessage={{true}}>
+    {{t 'common.search.loading'}}
+  </AuLoader>
+</template>;
+
+export default SearchLoading;

package/addon/components/common/vote-star-unfilled-icon.gts

@@ -0,0 +1,25 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface VoteStarUnfilledIconSignature {
+  Element: SVGSVGElement;
+}
+
+/**
+ * There is no unfilled version in AU. Unfortunately, due to AU including a `stroke-width: 0` style
+ * for icons, this icon shouldn't be used inside an `AuIcon`, it should be used in place of one.
+ */
+export const VoteStarUnfilledIcon: TOC<VoteStarUnfilledIconSignature> =
+  <template>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 16 17'
+      class='au-c-icon'
+      {{! template-lint-disable no-inline-styles }}
+      style='stroke-width:10%;'
+      ...attributes
+    ><path
+        {{! template-lint-disable no-inline-styles }}
+        style='fill:none;'
+        d='M12 15.167a.668.668 0 0 1-.37-.112L8 12.635l-3.63 2.42a.667.667 0 0 1-1.01-.737l1.225-4.29-3.056-3.056A.668.668 0 0 1 2 5.834h3.588l1.816-3.631c.226-.452.967-.452 1.193 0l1.816 3.631H14a.667.667 0 0 1 .471 1.138l-3.056 3.056 1.226 4.29a.667.667 0 0 1-.641.85Z'
+      /></svg>
+  </template>;

package/addon/components/snippet-plugin/nodes/snippet.gts

@@ -33,6 +33,7 @@ import { createSnippetPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins
 import { hasDecendant } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/has-descendant';
 import SnippetPlaceholder from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/nodes/placeholder';
 import { getSnippetListUrisFromNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { Snippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
 interface ButtonSig {
   Args: {
@@ -177,7 +178,7 @@ export default class SnippetNode extends Component<Signature> {
     return ancestor && ancestor.node === this.node;
   }
   @action
-  onInsert(content: string, title: string) {
+  onInsert(snippet: Snippet) {
     this.closeModal();
     let start = 0;
     let end = 0;
@@ -196,8 +197,8 @@ export default class SnippetNode extends Component<Signature> {
     }
     this.controller.doCommand(
       insertSnippet({
-        content,
-        title,
+        content: snippet.content?.toHTML() ?? '',
+        title: snippet.title ?? '',
         listProperties: {
           placeholderId: this.node.attrs.placeholderId,
           listUris: getSnippetListUrisFromNode(this.node),

package/addon/components/snippet-plugin/search-modal.gts

@@ -0,0 +1,216 @@
+import pagination from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/pagination';
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import t from 'ember-intl/helpers/t';
+import { not } from 'ember-truth-helpers';
+import AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
+import AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+
+import AuNativeInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-native-input';
+import Loading from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/loading';
+import AlertLoadError from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-load-error';
+import { fetchSnippets } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/fetch-data';
+import {
+  Snippet,
+  SnippetPluginConfig,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import PreviewList from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/documents/preview-list';
+import AlertNoItems from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-no-items';
+import PaginationView from '@lblod/ember-rdfa-editor-lblod-plugins/components/pagination/pagination-view';
+
+interface Args {
+  config: SnippetPluginConfig;
+  snippetListUris: string[] | undefined;
+  snippetListNames: string[] | undefined;
+  closeModal: () => void;
+  open: boolean;
+  onInsert: (snippet: Snippet) => void;
+}
+
+export default class SnippetPluginSearchModalComponent extends Component<Args> {
+  // Filtering
+  @tracked inputSearchText: string | null = null;
+
+  // Display
+  @tracked error: unknown;
+
+  // Pagination
+  @tracked pageNumber = 0;
+  @tracked pageSize = 20;
+  @tracked totalCount = 0;
+
+  get config() {
+    return this.args.config;
+  }
+
+  get searchText() {
+    return this.inputSearchText;
+  }
+
+  get snippetListNames() {
+    return this.args.snippetListNames?.map((name) => `"${name}"`).join(', ');
+  }
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+
+    this.inputSearchText = event.target.value;
+  }
+
+  @action
+  async closeModal() {
+    await this.snippetsResource.cancel();
+    this.args.closeModal();
+  }
+
+  snippetsSearch = restartableTask(async () => {
+    await timeout(500);
+
+    const abortController = new AbortController();
+
+    try {
+      const queryResult = await fetchSnippets({
+        endpoint: this.args.config.endpoint,
+        abortSignal: abortController.signal,
+        filter: {
+          name: this.inputSearchText ?? undefined,
+          snippetListUris: this.args.snippetListUris ?? undefined,
+        },
+        pagination: {
+          pageNumber: this.pageNumber,
+          pageSize: this.pageSize,
+        },
+      });
+
+      this.totalCount = queryResult.totalCount;
+
+      return queryResult.results;
+    } catch (error) {
+      this.error = error;
+      return [];
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  snippetsResource = trackedTask<Snippet[]>(this, this.snippetsSearch, () => [
+    this.inputSearchText,
+    this.pageNumber,
+    this.pageSize,
+    this.args.snippetListUris,
+  ]);
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+
+  <template>
+    <AuModal
+      class='snippet-modal'
+      @modalOpen={{@open}}
+      @closeModal={{this.closeModal}}
+      @title={{t
+        'snippet-plugin.modal.title'
+        snippetListNames=this.snippetListNames
+      }}
+      @size='large'
+      @padding='none'
+      as |modal|
+    >
+      <modal.Body>
+        <AuMainContainer class='snippet-modal--main-container' as |mc|>
+          <mc.sidebar>
+            <div class='au-c-sidebar'>
+              <div class='au-c-sidebar__content au-u-padding'>
+                <AuHeading
+                  @level='3'
+                  @skin='4'
+                  class='au-u-padding-bottom-small'
+                >
+                  {{t 'snippet-plugin.modal.search.title'}}
+                </AuHeading>
+                <AuLabel
+                  class='au-margin-bottom-small'
+                  for='searchTerm'
+                  @inline={{false}}
+                  @required={{false}}
+                  @error={{false}}
+                  @warning={{false}}
+                >
+                  {{t 'snippet-plugin.modal.search.label'}}
+                </AuLabel>
+                <AuNativeInput
+                  @type='text'
+                  @width='block'
+                  id='searchTerm'
+                  value={{this.searchText}}
+                  placeholder={{t 'snippet-plugin.modal.search.placeholder'}}
+                  {{on 'input' this.setInputSearchText}}
+                />
+              </div>
+            </div>
+          </mc.sidebar>
+          <mc.content @scroll={{true}}>
+            <div class='au-u-padding-top snippet-modal--list-container'>
+              {{#if this.snippetsResource.isRunning}}
+                <div class='au-u-margin'>
+                  <Loading />
+                </div>
+              {{else}}
+                {{#if this.error}}
+                  <AlertLoadError @error={{this.error}} />
+                {{else}}
+                  {{#if this.snippetsResource.value.length}}
+                    <PreviewList
+                      @docs={{this.snippetsResource.value}}
+                      @onInsert={{@onInsert}}
+                    />
+                  {{else}}
+                    <AlertNoItems />
+                  {{/if}}
+                {{/if}}
+              {{/if}}
+            </div>
+            {{#if this.snippetsResource.value.length}}
+              {{#let
+                (pagination
+                  page=this.pageNumber
+                  pageSize=this.pageSize
+                  count=this.totalCount
+                )
+                as |pg|
+              }}
+                <PaginationView
+                  @totalCount={{pg.count}}
+                  @rangeStart={{pg.pageStart}}
+                  @rangeEnd={{pg.pageEnd}}
+                  @onNextPage={{this.nextPage}}
+                  @onPreviousPage={{this.previousPage}}
+                  @isFirstPage={{not pg.hasPreviousPage}}
+                  @isLastPage={{not pg.hasNextPage}}
+                />
+              {{/let}}
+            {{/if}}
+          </mc.content>
+        </AuMainContainer>
+      </modal.Body>
+    </AuModal>
+  </template>
+}

package/addon/components/snippet-plugin/snippet-insert.gts

@@ -10,7 +10,10 @@ import {
   type SayController,
   Slice,
 } from '@lblod/ember-rdfa-editor';
-import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import {
+  Snippet,
+  SnippetPluginConfig,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import { type SnippetListProperties } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 import insertSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands/insert-snippet';
 import SearchModal from './search-modal';
@@ -56,13 +59,13 @@ export default class SnippetInsertComponent extends Component<Sig> {
   }
 
   @action
-  onInsert(content: string, title: string) {
+  onInsert(snippet: Snippet) {
     this.closeModal();
     if (this.args.listProperties) {
       this.controller.doCommand(
         insertSnippet({
-          content,
-          title,
+          content: snippet.content?.toHTML() ?? '',
+          title: snippet.title ?? '',
           listProperties: this.args.listProperties,
           allowMultipleSnippets: this.args.allowMultipleSnippets,
         }),

package/addon/components/table-of-contents-plugin/ember-nodes/outline.hbs

@@ -6,7 +6,7 @@
         {{! template-lint-disable no-capital-arguments }}
         @block={{true}}
         @skin='link-secondary'
-        onclick={{fn @onEntryClick outlineEntry.pos}}
+        {{on 'click' (fn @onEntryClick outlineEntry.pos)}}
       >
         {{outlineEntry.content}}
       </AuButton>

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs

@@ -1,5 +1,8 @@
 {{! @glint-nocheck: not typesafe yet }}
-<div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
+<div
+  class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'
+  contenteditable='false'
+>
   <h3>{{this.title}}</h3>
   {{#if this.outline}}
     <TableOfContentsPlugin::EmberNodes::Outline

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -8,8 +8,8 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
   @service declare intl: IntlService;
-  get config() {
-    return this.args.node.attrs['config'] as TableOfContentsConfig;
+  get config(): TableOfContentsConfig | undefined {
+    return this.args.node.attrs['config'] as TableOfContentsConfig | undefined;
   }
 
   get documentLanguage() {
@@ -49,9 +49,14 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
         const coords = this.controller.mainEditorView.coordsAtPos(
           selection.from,
         );
-        const config = this.config[0];
+        let config;
+        if (Array.isArray(this.config)) {
+          config = this.config[0];
+        } else {
+          config = this.config;
+        }
         let scrollContainer: HTMLElement | undefined;
-        if (config.scrollContainer) {
+        if (config?.scrollContainer) {
           scrollContainer = config.scrollContainer();
         } else {
           scrollContainer = this.getScrollContainer();

package/addon/helpers/pagination.ts

@@ -7,12 +7,24 @@ interface PaginationArguments {
   pageSize: number;
   page: number;
 }
+interface PaginationResult {
+  count: number;
+  pageSize: number;
+  page: number;
+  totalPages: number;
+  pageStart: number;
+  pageEnd: number;
+  nextPage: number | null;
+  previousPage: number | null;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+}
 
 export function pagination({
   page = 0,
   count = 0,
   pageSize = 20,
-}: PaginationArguments) {
+}: PaginationArguments): PaginationResult {
   const totalPages = count / pageSize;
   const pageStart = page * pageSize + 1;
   const pageEnd = Math.min((page + 1) * pageSize, count);
@@ -35,6 +47,6 @@ export function pagination({
   };
 }
 
-export default helper<unknown[], PaginationArguments>((_, named) =>
-  pagination(named),
+export default helper<unknown[], PaginationArguments, PaginationResult>(
+  (_, named) => pagination(named),
 );