@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 17.0.0

package/.woodpecker/.test.yml

@@ -14,15 +14,16 @@ steps:
     group: check
     commands:
       - npm run lint:hbs
-  test:
+  check-types:
     image: danlynn/ember-cli:4.8.0
     group: check
     commands:
-      - ember test
-  precompile:
+      - npm run lint:types
+  test:
     image: danlynn/ember-cli:4.8.0
+    group: check
     commands:
-      - ember ts:precompile
+      - ember test
 
 
   release:

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 17.0.0
+
+### Major Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`f2a7660`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f2a7660d32c6c54016c0547cd71e25ae239168a8) Thanks [@piemonkey](https://github.com/piemonkey)! - BREAKING: Update ember-appuniversum dependency to 3.4.1 in order to support the use of inline svg components for e.g. embeddable
+
+### Minor Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`d4b8814`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d4b8814df14a5f66354ce3948db898c928a658a7) Thanks [@piemonkey](https://github.com/piemonkey)! - Modernise typescript configuration
+
+### Patch Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`f7d257b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f7d257bbc03e7b7f9375ade79a08f9e103e0c3df) Thanks [@piemonkey](https://github.com/piemonkey)! - Update deprecated use of AppUniversum
+
+## 16.4.0
+
+### Minor Changes
+
+- [#404](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/404) [`9382c7f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9382c7f3e1c0e9495e2d9a7c21a58505653693b4) Thanks [@piemonkey](https://github.com/piemonkey)! - Add plugin to handle inserting worship services (erediensten)
+
 ## 16.3.0
 
 ### Minor Changes

package/addon/components/article-structure-plugin/article-structure-card.hbs

@@ -1,7 +1,8 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
   {{#each this.structureTypes as |structureType|}}
   <li class="au-c-list__item">
-    <AuButton @icon="add" @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
+    <AuButton @icon={{this.AddIcon}} @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
       {{on 'click' (fn this.insertStructure structureType)}}>
       {{t structureType.translations.insert}}
     </AuButton>

package/addon/components/article-structure-plugin/article-structure-card.ts

@@ -8,12 +8,14 @@ import {
 import { action } from '@ember/object';
 import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
 import { SayController } from '@lblod/ember-rdfa-editor';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
   options: ArticleStructurePluginOptions;
 };
 export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
   @service declare intl: IntlService;
 
   get structureTypes() {

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#unless this.isOutsideStructure}}
   <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
     <c.header class="au-u-hidden-visually">
@@ -7,7 +8,7 @@
       <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>
         <Item>
           <AuButton
-            @icon="chevron-up"
+            @icon={{this.ChevronUpIcon}}
             @iconAlignment="left"
             @skin="link"
             @disabled={{not this.canMoveUp}}
@@ -17,7 +18,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon="chevron-down"
+            @icon={{this.ChevronDownIcon}}
             @iconAlignment="left"
             @skin="link"
             @disabled={{not this.canMoveDown}}
@@ -30,7 +31,7 @@
             <HoverTooltip>
               <:hover as |hover|>
                 <AuButton
-                  @icon="bin"
+                  @icon={{this.BinIcon}}
                   @iconAlignment="left"
                   @skin="link"
                   @alert={{true}}
@@ -55,7 +56,7 @@
             <HoverTooltip>
               <:hover as |hover|>
                 <AuButton
-                  @icon="bin"
+                  @icon={{this.BinIcon}}
                   @iconAlignment="left"
                   @skin="link"
                   aria-describedby="remove-content-tooltip"
@@ -115,4 +116,4 @@
       </AuList>
     </c.content>
   </AuCard>
-{{/unless}}
+{{/unless}}

package/addon/components/article-structure-plugin/structure-card.ts

@@ -12,6 +12,9 @@ import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugi
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
+import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
+import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 
 type Args = {
   controller: SayController;
@@ -19,6 +22,9 @@ type Args = {
 };
 
 export default class EditorPluginsStructureCardComponent extends Component<Args> {
+  BinIcon = BinIcon;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
   @service declare intl: IntlService;
   @tracked removeStructureContent = false;
   @tracked startNumber: number | null = null;

package/addon/components/au-native-input.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if @icon}}
   <span class='au-c-input-wrapper {{this.iconAlignment}} {{this.width}}'>
     <input

package/addon/components/au-native-input.ts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { ComponentLike } from '@glint/template';
 
 interface Args {
   width?: 'block';
@@ -7,7 +8,7 @@ interface Args {
   warning?: boolean;
   disabled?: boolean;
   type?: string;
-  icon?: string;
+  icon?: ComponentLike;
 }
 
 export default class AuNativeInput extends Component<Args> {

package/addon/components/besluit-type-plugin/besluit-type-select.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div ...attributes>
   <PowerSelect
     @renderInPlace={{true}}
@@ -16,7 +17,7 @@
   {{#if @showWarningWhenEmpty}}
     {{#unless @selected}}
       <AuAlert
-        @icon="alert-triangle"
+        @icon={{this.AlertTriangleIcon}}
         @title={{t "besluit-type-plugin.alert-title"}}
         @skin="warning"
         @size="small"
@@ -25,4 +26,4 @@
       </AuAlert>
     {{/unless}}
   {{/if}}
-</div>
+</div>

package/addon/components/besluit-type-plugin/besluit-type-select.ts

@@ -2,11 +2,15 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+
 type Args = {
   besluitTypes: BesluitType[];
 };
 
 export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
+  AlertTriangleIcon = AlertTriangleIcon;
+
   @tracked besluitTypes;
   constructor(parent: unknown, args: Args) {
     super(parent, args);

package/addon/components/besluit-type-plugin/toolbar-dropdown.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div
   {{did-update this.updateBesluitTypes @controller.mainEditorState}}
   {{did-update this.updateBesluitTypes this.types.value}}
@@ -6,7 +7,7 @@
     {{#if this.types.isError}}
       <AuPill
         @skin='error'
-        @icon='circle-x'
+        @icon={{this.CircleXIcon}}
         @iconAlignment='left'
         class='au-c-pill--link besluit-toolbar-pill'
         {{on 'click' this.toggleCard}}
@@ -26,7 +27,7 @@
         </AuPill>
       {{else}}
         <AuPill
-          @icon='alert-triangle'
+          @icon={{this.AlertTriangleIcon}}
           @iconAlignment='left'
           @skin='link'
           {{on 'click' this.toggleCard}}
@@ -51,14 +52,14 @@
           <AuAlert
             @title={{t 'besluit-type-plugin.error-title'}}
             @skin='error'
-            @icon='cross'
+            @icon={{this.CrossIcon}}
           >
             <p>
               {{t 'besluit-type-plugin.error-first-body'}}
               {{! template-lint-disable no-bare-strings  }}
               <AuLinkExternal
                 href='mailto:gelinktnotuleren@vlaanderen.be'
-                @icon='mail'
+                @icon={{this.MailIcon}}
                 @iconAlignment='left'
               >
                 GelinktNotuleren@vlaanderen.be

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -15,6 +15,10 @@ import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugi
 import { trackedFunction } from 'ember-resources/util/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
+import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
+import { CircleXIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-x';
 
 declare module 'ember__owner' {
   export default interface Owner {
@@ -28,6 +32,10 @@ type Args = {
 };
 
 export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
+  CircleIcon = CircleXIcon;
+  MailIcon = MailIcon;
+  CrossIcon = CrossIcon;
+  AlertTriangleIcon = AlertTriangleIcon;
   /**
    * Actual besluit type selected
    * @property besluitType

package/addon/components/citation-plugin/citation-card.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard
     @flex={{true}}
@@ -58,7 +59,7 @@
             @warning={{false}}
           >{{t 'citaten-plugin.search.term'}}</AuLabel>
           <AuNativeInput
-            @icon='search'
+            @icon={{this.SearchIcon}}
             @type='text'
             @width='block'
             @iconAlignment='right'
@@ -71,7 +72,7 @@
         <AuFormRow>
           <AuButton
             @skin='link'
-            @icon='search'
+            @icon={{this.SearchIcon}}
             @iconAlignment='left'
             {{on 'click' this.openSearchModal}}
           >{{t 'citaten-plugin.search.advanced'}}</AuButton>
@@ -86,7 +87,7 @@
           }}</span>
       {{else}}
         {{#if this.error}}
-          <CitationPlugin::Helpers::AlertLoadError
+          <Common::Search::AlertLoadError
             @fullSize={{false}}
             @error={{this.error}}
           />

package/addon/components/citation-plugin/citation-card.ts

@@ -27,6 +27,7 @@ import {
   LegalDocument,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { cleanCaches } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cache';
+import { SearchIcon } from '@appuniversum/ember-appuniversum/components/icons/search';
 
 interface Args {
   controller: SayController;
@@ -36,6 +37,8 @@ interface Args {
 
 /* A component card that will only show up when certain keywords are typed */
 export default class CitationCardComponent extends Component<Args> {
+  SearchIcon = SearchIcon;
+
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
   @tracked totalSize = 0;

package/addon/components/citation-plugin/citation-insert.hbs

@@ -1,6 +1,7 @@
+{{! @glint-nocheck: not typesafe yet }}
 <li class="au-c-list__item">
   <AuButton
-    @icon='add'
+    @icon={{this.AddIcon}}
     @iconAlignment='left'
     @skin='link'
     @disabled={{this.disableInsert}}

package/addon/components/citation-plugin/citation-insert.ts

@@ -17,6 +17,7 @@ import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 import { Article } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 interface Args {
   controller: SayController;
@@ -24,6 +25,8 @@ interface Args {
 }
 
 export default class EditorPluginsCitationInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @tracked showModal = false;
   @tracked legislationTypeUri = LEGISLATION_TYPES.decreet;
   @tracked text = '';

package/addon/components/citation-plugin/citations/article-list.hbs

@@ -9,5 +9,5 @@
     {{/each}}
   </AuList>
 {{else}}
-  <CitationPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
-{{/if}}
+  <Common::Search::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+{{/if}}

package/addon/components/citation-plugin/citations/article-preview.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div class="au-u-margin" ...attributes>
   <AuHeading @level="3" @skin="5" class="au-u-margin-bottom-small">
   {{@article.number}} ({{@article.dateInForce}} - {{if @article.dateNoLongerInForce @article.dateNoLongerInForce "…"}})
@@ -7,10 +8,10 @@
   </p>
   <AuButton
     @skin="primary"
-    @icon="plus-text"
+    @icon={{this.PlusTextIcon}}
     @iconAlignment="left"
     class="au-u-margin-top-small"
     {{on "click" @insertArticleCitation}}>
     {{t "citaten-plugin.references.refer-article"}}
   </AuButton>
-</div>
+</div>

package/addon/components/citation-plugin/citations/article-preview.ts

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { Article } from '../../../plugins/citation-plugin/utils/article';
+import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
 
 interface Args {
   article: Article;
 }
 
 export default class ArticlePreviewComponent extends Component<Args> {
+  PlusTextIcon = PlusTextIcon;
   get content() {
     return htmlSafe(this.args.article.content ?? '');
   }

package/addon/components/citation-plugin/citations/legal-document-detail.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div class="citaten--main-container au-u-flex au-u-flex--column au-u-flex--between">
   <div class="citaten--container-content">
     {{! Heading with title and actions }}
@@ -9,7 +10,7 @@
         <AuPill
           class="au-u-margin-top-small au-u-margin-bottom-small"
           @skin="border"
-          @icon="calendar"
+          @icon={{this.CalendarIcon}}
           @iconAlignment="left">
           {{@legalDocument.publicationDate}}
         </AuPill>
@@ -17,7 +18,7 @@
       <br/>
       <AuButton
         @skin="primary"
-        @icon="plus-text"
+        @icon={{this.PlusTextIcon}}
         @iconAlignment="left"
         class="au-u-margin-right"
         {{on "click" (fn @insertLegalDocumentCitation @legalDocument)}}>
@@ -25,7 +26,7 @@
       </AuButton>
       <AuLinkExternal
         @skin="primary"
-        @icon="link-external"
+        @icon={{this.LinkExternalIcon}}
         @iconAlignment="left"
         href={{@legalDocument.uri}}
         rel="noreferrer noopener">
@@ -34,9 +35,16 @@
       {{! Search field }}
       <AuLabel class="au-u-margin-top-small au-margin-bottom-small" for="searchCodex" @inline={{true}}
                @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.article"}}</AuLabel>
-      <AuInput id="searchCodex" placeholder="{{t "citaten-plugin.search.article-placeholder"}}" @type="text"
-               @width="default" @icon="search" @iconAlignment="right" @value={{this.articleFilter}} {{on "input"
-                                                                                                         (perform this.updateArticleFilter)}}/>
+      <AuInput
+        id="searchCodex"
+        placeholder="{{t "citaten-plugin.search.article-placeholder"}}"
+        type="text"
+        @width="default"
+        @icon={{this.SearchIcon}}
+        @iconAlignment="right"
+        value={{this.articleFilter}}
+        {{on "input" (perform this.updateArticleFilter)}}
+      />
     </div>
     {{! Search results }}
     <div>
@@ -47,7 +55,7 @@
         </div>
       {{else}}
         {{#if this.error}}
-          <CitationPlugin::Helpers::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box"/>
+          <Common::Search::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box"/>
         {{else}}
           <CitationPlugin::Citations::ArticleList
             @insertArticleCitation={{fn @insertArticleCitation @legalDocument}}
@@ -69,7 +77,7 @@
           <div class="au-c-pagination__list-item">
             <AuButton
               @skin="link"
-              @icon="hierarchical-back"
+              @icon={{this.HierarchicalBackIcon}}
               @iconAlignment="left"
               {{on "click" this.close}}>
               {{t "citaten-plugin.search.back"}}
@@ -89,7 +97,7 @@
               {{#unless this.isFirstPage}}
                 <AuButton
                   @skin="link"
-                  @icon="nav-left"
+                  @icon={{this.NavLeftIcon}}
                   @iconAlignment="left"
                   {{on "click" this.previousPage}}>
                   {{t "citaten-plugin.pagination.previous"}}
@@ -98,7 +106,7 @@
               {{#unless this.isLastPage}}
                 <AuButton
                   @skin="link"
-                  @icon="nav-right"
+                  @icon={{this.NavRightIcon}}
                   @iconAlignment="right"
                   {{on "click" this.nextPage}}>
                   {{t "citaten-plugin.pagination.next"}}
@@ -110,4 +118,4 @@
       </AuToolbar>
     </div>
   </div>
-</div>
+</div>

package/addon/components/citation-plugin/citations/legal-document-detail.ts

@@ -3,6 +3,13 @@ import { restartableTask, timeout } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { CalendarIcon } from '@appuniversum/ember-appuniversum/components/icons/calendar';
+import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
+import { LinkExternalIcon } from '@appuniversum/ember-appuniversum/components/icons/link-external';
+import { SearchIcon } from '@appuniversum/ember-appuniversum/components/icons/search';
+import { HierarchicalBackIcon } from '@appuniversum/ember-appuniversum/components/icons/hierarchical-back';
+import { NavLeftIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-left';
+import { NavRightIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-right';
 
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { fetchArticles } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
@@ -14,6 +21,14 @@ interface Args {
 }
 
 export default class LegalDocumentDetailComponent extends Component<Args> {
+  NavRightIcon = NavRightIcon;
+  NavLeftIcon = NavLeftIcon;
+  HierarchicalBackIcon = HierarchicalBackIcon;
+  SearchIcon = SearchIcon;
+  LinkExternalIcon = LinkExternalIcon;
+  PlusTextIcon = PlusTextIcon;
+  CalendarIcon = CalendarIcon;
+
   @tracked error: unknown;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
@@ -22,7 +37,9 @@ export default class LegalDocumentDetailComponent extends Component<Args> {
   @tracked articleFilter = '';
   @tracked articleFilterAfterTimeout = '';
 
-  updateArticleFilter = restartableTask(async () => {
+  updateArticleFilter = restartableTask(async (event: InputEvent) => {
+    const target = event.target as HTMLInputElement;
+    this.articleFilter = target.value;
     await timeout(500);
     this.pageNumber = 0;
     this.articleFilterAfterTimeout = this.articleFilter;

package/addon/components/citation-plugin/citations/legal-document-list.hbs

@@ -11,5 +11,5 @@
     {{/each}}
   </AuList>
 {{else}}
-  <CitationPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
-{{/if}}
+  <Common::Search::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+{{/if}}

package/addon/components/citation-plugin/citations/legal-document-preview.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div class="citaten--decision-list-item {{if @fullSize "au-u-padding-small"}}" ...attributes>
   <p class="citaten--decision-title {{if @fullSize "au-u-h6 au-u-medium" "au-u-h-functional"}}">
     {{if @fullSize (capitalize @legalDocument.fullTitle) @legalDocument.title}}
@@ -6,7 +7,7 @@
     <AuPill
       class="au-u-margin-top-small au-u-margin-bottom-small"
       @skin="border"
-      @icon="calendar"
+      @icon={{this.CalendarIcon}}
       @iconAlignment="left">
       {{@legalDocument.publicationDate}}
     </AuPill>
@@ -16,7 +17,7 @@
       <AuButtonGroup @inline={{false}}>
         <AuButton
           @skin="primary"
-          @icon="plus-text"
+          @icon={{this.PlusTextIcon}}
           @iconAlignment="left"
           {{on "click" @onCitationInsert}}>
           {{t "citaten-plugin.references.insert"}}
@@ -25,7 +26,7 @@
           {{#if this.hasPublicationLink}}
             <AuLinkExternal
               @skin="button"
-              @icon="link-external"
+              @icon={{this.LinkExternalIcon}}
               @iconAlignment="left"
               href={{@legalDocument.meta.publicationLink}}
               rel="noreferrer noopener">
@@ -34,7 +35,7 @@
           {{else}}
             <AuButton
               @skin='button'
-              @icon="link-external"
+              @icon={{this.LinkExternalIcon}}
               @iconAlignment="left"
               @disabled={{true}}
             >
@@ -44,7 +45,7 @@
         {{else}}
           <AuButton
             @skin="secondary"
-            @icon="manual"
+            @icon={{this.ManualIcon}}
             @iconAlignment="left"
             {{on "click" @onCitationDetails}}>
             {{t "citaten-plugin.references.details"}}
@@ -57,7 +58,7 @@
     <div class="au-u-flex au-u-flex--row au-u-flex--no-wrap au-u-flex--between au-u-margin-top-tiny">
       <AuButton
         @skin="link-secondary"
-        @icon="plus-text"
+        @icon={{this.PlusTextIcon}}
         @iconAlignment="left"
         class="au-u-h-functional"
         {{on "click" @onCitationInsert}}>
@@ -67,7 +68,7 @@
         {{#if this.hasPublicationLink}}
           <AuLinkExternal
             @skin="link"
-            @icon="link-external"
+            @icon={{this.LinkExternalIcon}}
             @iconAlignment="left"
             href={{@legalDocument.meta.publicationLink}}
             rel="noreferrer noopener"
@@ -87,7 +88,7 @@
       {{else}}
         <AuButton
           @skin="link"
-          @icon="manual"
+          @icon={{this.ManualIcon}}
           @iconAlignment="left"
           class="au-u-h-functional"
           {{on "click" @onCitationDetails}}>
@@ -96,4 +97,4 @@
       {{/if}}
     </div>
   {{/if}}
-</div>
+</div>

package/addon/components/citation-plugin/citations/legal-document-preview.ts

@@ -3,12 +3,21 @@ import {
   isBesluitLegalDocument,
   LegalDocument,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
+import { CalendarIcon } from '@appuniversum/ember-appuniversum/components/icons/calendar';
+import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
+import { LinkExternalIcon } from '@appuniversum/ember-appuniversum/components/icons/link-external';
+import { ManualIcon } from '@appuniversum/ember-appuniversum/components/icons/manual';
 
 interface Args {
   legalDocument: LegalDocument;
 }
 
 export default class LegalDocumentPreviewComponent extends Component<Args> {
+  ManualIcon = ManualIcon;
+  LinkExternalIcon = LinkExternalIcon;
+  PlusTextIcon = PlusTextIcon;
+  CalendarIcon = CalendarIcon;
+
   get isBesluit() {
     return isBesluitLegalDocument(this.args.legalDocument);
   }