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

package/addon/components/citation-plugin/citations/search-modal.hbs

@@ -1,4 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
+  class="citaten-modal"
   @modalOpen={{@open}}
   @closeModal={{fn this.closeModal this.legislationTypeUri this.text}}
   @title={{t 'citaten-plugin.card.title'}}
@@ -55,7 +57,7 @@
                 @warning={{false}}
               >{{t 'citaten-plugin.search.term'}}</AuLabel>
               <AuNativeInput
-                @icon='search'
+                @icon={{this.SearchIcon}}
                 @type='text'
                 @width='block'
                 @iconAlignment='right'
@@ -78,7 +80,7 @@
                   {{t 'citaten-plugin.search.government-search'}}
                 </AuLabel>
                 <AuNativeInput
-                  @icon='search'
+                  @icon={{this.SearchIcon}}
                   @type='text'
                   @width='block'
                   @iconAlignment='right'
@@ -197,14 +199,11 @@
         <mc.content>
           {{#if this.legalDocumentResource.isRunning}}
             <div class='au-u-margin'>
-              <AuLoader @padding='large' />
-              <span class='au-u-hidden-visually'>{{t
-                  'citaten-plugin.alert.loading'
-                }}</span>
+              <Common::Search::Loading />
             </div>
           {{else}}
             {{#if this.error}}
-              <CitationPlugin::Helpers::AlertLoadError
+              <Common::Search::AlertLoadError
                 @fullSize={{true}}
                 @error={{this.error}}
                 class='au-u-margin'
@@ -222,7 +221,7 @@
                   />
                 </div>
               {{else}}
-                <CitationPlugin::Helpers::AlertNoItems
+                <Common::Search::AlertNoItems
                   @fullSize={{true}}
                   class='au-u-margin'
                 />

package/addon/components/citation-plugin/citations/search-modal.ts

@@ -23,6 +23,7 @@ import {
   fetchLegalDocuments,
   LegalDocument,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
+import { SearchIcon } from '@appuniversum/ember-appuniversum/components/icons/search';
 
 function getISODate(date: Option<Date>): string | null {
   if (date) {
@@ -51,6 +52,8 @@ interface Args {
 }
 
 export default class EditorPluginsCitationsSearchModalComponent extends Component<Args> {
+  SearchIcon = SearchIcon;
+
   @service declare intl: IntlService;
   // Vlaamse Codex currently doesn't contain captions and content of legal document
   // @tracked isEnabledSearchCaption = false

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

@@ -0,0 +1,34 @@
+import t from 'ember-intl/helpers/t';
+import AuAlert 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>
+  <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 }}
+    <code class='au-u-error error-code'>{{@error}}</code>
+    <p>
+      {{t 'common.search.error-outro'}}
+      <AuLinkExternal
+        href='mailto:gelinktnotuleren@vlaanderen.be'
+        @icon={{MailIcon}}
+        @iconAlignment='left'
+      >
+        {{! template-lint-disable no-bare-strings  }}
+        gelinktnotuleren@vlaanderen.be
+      </AuLinkExternal>.
+    </p>
+  </AuAlert>
+</template>

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

@@ -0,0 +1,18 @@
+import t from 'ember-intl/helpers/t';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
+
+<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>

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

@@ -0,0 +1,4 @@
+<AuLoader @padding='large' />
+<span class='au-u-hidden-visually'>
+  {{t 'common.search.loading'}}
+</span>

package/addon/components/confidentiality-plugin/redact.gts

@@ -0,0 +1,13 @@
+import Mark from '@lblod/ember-rdfa-editor/components/toolbar/mark';
+import t from 'ember-intl/helpers/t';
+import { NotVisibleIcon } from '@appuniversum/ember-appuniversum/components/icons/not-visible';
+
+<template>
+  <Mark
+    @icon={{NotVisibleIcon}}
+    @title={{t 'confidentiality-plugin.redact'}}
+    @mark='redacted'
+    {{! @glint-expect-error: not typesafe yet }}
+    @controller={{@controller}}
+  />
+</template>

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

@@ -1,5 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.canInsertTitle}}
-  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon="alert-triangle" @title={{t "besluit-plugin.missing-title-warning"}}>
+  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon={{this.AlertTriangleIcon}} @title={{t "besluit-plugin.missing-title-warning"}}>
     <AuButton @iconAlignment="left" @skin="link-secondary" @disabled={{not this.canInsertTitle}} {{on 'click'
       this.insertTitle}}>
       {{t "besluit-plugin.insert.decision-title"}}
@@ -7,7 +8,7 @@
   </AuAlert>
 {{/if}}
 {{#if this.canInsertMotivation}}
-  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon="alert-triangle" @title={{t "besluit-plugin.missing-motivation-warning"}}>
+  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon={{this.AlertTriangleIcon}} @title={{t "besluit-plugin.missing-motivation-warning"}}>
     <AuButton @iconAlignment="left" @skin="link-secondary" @disabled={{not this.canInsertMotivation}} {{on 'click'
       this.insertMotivation}}>
       {{t "besluit-plugin.insert.motivation"}}
@@ -15,7 +16,7 @@
   </AuAlert>
 {{/if}}
 {{#if this.missingArticleBlock}}
-  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon="alert-triangle" @title={{t "besluit-plugin.missing-article-block-warning"}}>
+  <AuAlert class="say-validation-alert" @skin="warning" @closable={{false}} @icon={{this.AlertTriangleIcon}} @title={{t "besluit-plugin.missing-article-block-warning"}}>
     <AuButton @iconAlignment="left" @skin="link-secondary" @disabled={{not this.missingArticleBlock}} {{on 'click'
       this.insertArticleBlock}}>
       {{t "besluit-plugin.insert.article-block"}}

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

@@ -8,6 +8,7 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { VALIDATION_KEY } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
 
 type Args = {
   controller: SayController;
@@ -17,6 +18,8 @@ type Args = {
  * @deprecated
  */
 export default class DecisionPluginCard extends Component<Args> {
+  AlertTriangleIcon = AlertTriangleIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

package/addon/components/document-title-plugin/insert-title-card.hbs

@@ -1,5 +1,12 @@
+{{! @glint-nocheck: not typesafe yet }}
 <li class="au-c-list__item">
-  <AuButton @icon="add" @iconAlignment="left" @skin="link" {{on 'click' this.insertTitle}} @disabled={{not this.canInsertTitle}}>
+  <AuButton
+    @icon={{this.AddIcon}}
+    @iconAlignment="left"
+    @skin="link"
+    {{on 'click' this.insertTitle}}
+    @disabled={{not this.canInsertTitle}}
+  >
     {{t "document-title-plugin.insert-title"}}
   </AuButton>
 </li>

package/addon/components/document-title-plugin/insert-title-card.ts

@@ -4,11 +4,14 @@ import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import insertDocumentTitle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/document-title-plugin/commands/insert-document-title';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
 };
 export default class InsertTitleCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @service declare intl: IntlService;
 
   @action

package/addon/components/generic-rdfa-variable/insert-menu.hbs

@@ -1,6 +1,7 @@
+{{! @glint-nocheck: not typesafe yet }}
 <Toolbar::Button
   @title={{t 'generic-rdfa-variable.menu.insert'}}
-  @icon='html-plus'
+  @icon={{this.HtmlPlusIcon}}
   {{on 'click' this.showModal}}
   @disabled={{not this.canInsert}}
 />

package/addon/components/generic-rdfa-variable/insert-menu.ts

@@ -2,11 +2,11 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { tracked } from 'tracked-built-ins';
-
 import { basicSetup, EditorView } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { html } from '@codemirror/lang-html';
 import { tooltips } from '@codemirror/view';
+import { HtmlPlusIcon } from '@appuniversum/ember-appuniversum/components/icons/html-plus';
 
 import { insertGenericRdfa } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/generic-rdfa-variable/commands/insert-generic-rdfa';
 
@@ -15,6 +15,8 @@ type Args = {
 };
 
 export default class GenericRdfaVariableInsertMenu extends Component<Args> {
+  HtmlPlusIcon = HtmlPlusIcon;
+
   @tracked modalOpen = false;
   private htmlEditor?: EditorView;
 

package/addon/components/hover-tooltip.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <this.Velcro @placement={{this.placement}} as |velcro|>
   {{#let velcro.loop as |loop|}}
     {{yield (hash velcroHook=velcro.hook handleHover=(modifier this.hover)) to='hover' }}

package/addon/components/import-snippet-plugin/card.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#each this.snippets as |snippet|}}
   <AuCard @flex={{true}} @divided={{true}} @expandable={{true}} @shadow={{true}} @isOpenInitially={{true}} @size="small" as |c|>
     <c.header>

package/addon/components/loading-alert.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.isVisible}}
   <div
     class="au-c-alert {{this.skin}} {{this.size}}"
@@ -19,7 +20,7 @@
         data-test-alert-close
         {{on "click" this.closeAlert}}
       >
-        <AuIcon @icon="cross" @size="large" />
+        <AuIcon @icon={{this.CrossIcon}} @size="large" />
         {{!-- template-lint-disable no-bare-strings --}}
         <span class="au-u-hidden-visually">Sluit alert</span>
       </button>

package/addon/components/loading-alert.ts

@@ -1,3 +1,6 @@
-//@ts-expect-error ember-appuniversum uses vanilla javascript
 import AuAlertComponent from '@appuniversum/ember-appuniversum/components/au-alert';
-export default class LoadingAlertComponent extends AuAlertComponent {}
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
+
+export default class LoadingAlertComponent extends AuAlertComponent {
+  CrossIcon = CrossIcon;
+}

package/addon/components/pagination/pagination-view.gts

@@ -0,0 +1,55 @@
+import { on } from '@ember/modifier';
+import t from 'ember-intl/helpers/t';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { NavLeftIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-left';
+import { NavRightIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-right';
+
+<template>
+  <div class='au-u-background-gray-100'>
+    <AuToolbar @border='top' @size='large' @nowrap={{true}}>
+      <div class='au-c-pagination'>
+        <p>
+          <span class='au-u-hidden-visually'>
+            {{t 'pagination.results'}}</span>
+          <strong>
+            {{! @glint-expect-error: not typesafe yet }}
+            {{@rangeStart}}
+            -
+            {{! @glint-expect-error: not typesafe yet }}
+            {{@rangeEnd}}
+          </strong>
+          {{t 'pagination.of'}}
+          {{! @glint-expect-error: not typesafe yet }}
+          {{@totalCount}}
+        </p>
+        <div class='au-u-flex'>
+          {{! @glint-expect-error: not typesafe yet }}
+          {{#unless @isFirstPage}}
+            <AuButton
+              @skin='link'
+              @icon={{NavLeftIcon}}
+              @iconAlignment='left'
+              {{! @glint-expect-error: not typesafe yet }}
+              {{on 'click' @onPreviousPage}}
+            >
+              {{t 'pagination.previous'}}
+            </AuButton>
+          {{/unless}}
+          {{! @glint-expect-error: not typesafe yet }}
+          {{#unless @isLastPage}}
+            <AuButton
+              @skin='link'
+              @icon={{NavRightIcon}}
+              @iconAlignment='right'
+              {{! @glint-expect-error: not typesafe yet }}
+              {{on 'click' @onNextPage}}
+            >
+              {{t 'pagination.next'}}
+            </AuButton>
+          {{/unless}}
+        </div>
+      </div>
+    </AuToolbar>
+  </div>
+</template>

package/addon/components/roadsign-regulation-plugin/expanded-measure.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <tr class="au-c-data-table__detail">
   <td colspan="5" class="au-o-flow au-o-flow--small">
     <AuHeading @level="6" @skin="6">
@@ -17,24 +18,19 @@
         {{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.label"}}
       </AuHeading>
       <div class="au-c-form">
-        <ul>
-          <li>
-            <AuControlRadio 
-              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.zonal"}} 
-              @name="zonal" 
-              @value={{this.ZONAL_URI}} 
-              @identifier="zonal" 
-              {{on 'change' this.changeZonality}}/>
-          </li>
-          <li>
-            <AuControlRadio 
-              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.non-zonal"}} 
-              @name="zonal" 
-              @value={{this.NON_ZONAL_URI}} 
-              @identifier="non-zonal" 
-              {{on 'change' this.changeZonality}} />
-          </li>
-        </ul>
+        <AuRadioGroup
+          @name="zonal"
+          @selected={{this.zonalityValue}}
+          @onChange={{this.changeZonality}}
+          as |Group|
+        >
+          <Group.Radio @value={{this.ZONAL_URI}}>
+            {{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.zonal"}}
+          </Group.Radio>
+          <Group.Radio @value={{this.NON_ZONAL_URI}}>
+            {{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.non-zonal"}}
+          </Group.Radio>
+        </AuRadioGroup>
       </div>
     {{/if}}
     {{#if @measure.temporal}}
@@ -42,24 +38,19 @@
         {{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.label"}}
       </AuHeading>
       <div class="au-c-form">
-        <ul>
-          <li>
-            <AuControlRadio 
-              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.varying"}} 
-              @name="temporal" 
-              @value={{true}} 
-              @identifier="true" 
-              {{on 'change' this.changeTemporality}} />
-          </li>
-          <li>
-            <AuControlRadio 
-              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.non-varying"}} 
-              @name="temporal" 
-              @value={{false}} 
-              @identifier="false" 
-              {{on 'change' this.changeTemporality}} />
-          </li>
-        </ul>
+        <AuRadioGroup
+          @name="temporal"
+          @selected={{this.temporalValue}}
+          @onChange={{this.changeTemporality}}
+          as |Group|
+        >
+          <Group.Radio @value="true">
+            {{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.varying"}}
+          </Group.Radio>
+          <Group.Radio @value="false">
+            {{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.non-varying"}}
+          </Group.Radio>
+        </AuRadioGroup>
       </div>
     {{/if}}
     <AuButtonGroup>
@@ -71,4 +62,4 @@
       </AuButton>
     </AuButtonGroup>
   </td>
-</tr>
+</tr>

package/addon/components/roadsign-regulation-plugin/expanded-measure.ts

@@ -7,7 +7,6 @@ import {
   ZONAL_URI,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
 import Measure from '@lblod/ember-rdfa-editor-lblod-plugins/models/measure';
-import { assert } from '@ember/debug';
 
 type Args = {
   measure: Measure;
@@ -33,20 +32,12 @@ export default class ExpandedMeasureComponent extends Component<Args> {
   }
 
   @action
-  changeZonality(event: InputEvent) {
-    assert(
-      'changeZonalityValue must be bound to an input element',
-      event.target instanceof HTMLInputElement,
-    );
-    this.zonalityValue = event.target.value;
+  changeZonality(zonality: string) {
+    this.zonalityValue = zonality;
   }
   @action
-  changeTemporality(event: InputEvent) {
-    assert(
-      'changeTemporality must be bound to an input element',
-      event.target instanceof HTMLInputElement,
-    );
-    this.temporalValue = event.target.value;
+  changeTemporality(temporality: string) {
+    this.temporalValue = temporality;
   }
   @action
   insert() {

package/addon/components/roadsign-regulation-plugin/measure-template.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if @limitText}}
   {{limit-text this.template}}
 {{else}}

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.hbs

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

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.ts

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { SayController } from '@lblod/ember-rdfa-editor';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 /**
  * Card displaying a hint of the Date plugin
@@ -26,6 +27,8 @@ type Args = {
 };
 
 export default class RoadsignRegulationCard extends Component<Args> {
+  AddIcon = AddIcon;
+
   @tracked modalOpen = false;
 
   @action

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
   class="au-c-modal--flush"
   @size="large"

package/addon/components/roadsign-regulation-plugin/roadsigns-pagination.hbs

@@ -1,11 +1,14 @@
-<AuToolbar @border="top" @size="large" @nowrap={{true}} 
+{{! @glint-nocheck: not typesafe yet }}
+<AuToolbar @border="top" @size="large" @nowrap={{true}}
   {{did-update this.onUpdateCount @count @pageStart}}
   {{did-insert this.onUpdateCount @count @pageStart}}
 >
   <div class="au-c-pagination">
     {{#if this.hasPreviousPage}}
       <div class="au-c-pagination__list-item">
-        <AuButton @skin="link" {{on 'click' this.goToPreviousPage}} @iconAlignment="left" @icon="nav-left">{{t "pagination.previous"}}</AuButton>
+        <AuButton @skin="link" {{on 'click' this.goToPreviousPage}} @iconAlignment="left" @icon={{this.NavLeftIcon}}>
+          {{t "pagination.previous"}}
+        </AuButton>
       </div>
     {{/if}}
     <p>
@@ -18,8 +21,10 @@
     </p>
     {{#if this.hasNextPage}}
       <div class="au-c-pagination__list-item">
-        <AuButton @skin="link" {{on 'click' this.goToNextPage}}  @icon="nav-right" @iconAlignment="right">{{t "pagination.next"}}</AuButton>
+        <AuButton @skin="link" {{on 'click' this.goToNextPage}}  @icon={{this.NavRightIcon}} @iconAlignment="right">
+          {{t "pagination.next"}}
+        </AuButton>
       </div>
     {{/if}}
   </div>
-</AuToolbar>
+</AuToolbar>

package/addon/components/roadsign-regulation-plugin/roadsigns-pagination.ts

@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { NavLeftIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-left';
+import { NavRightIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-right';
 
 type Args = {
   count: number;
@@ -8,6 +10,9 @@ type Args = {
   goToPage: (n: number) => void;
 };
 export default class RoadsignsPagination extends Component<Args> {
+  NavRightIcon = NavRightIcon;
+  NavLeftIcon = NavLeftIcon;
+
   @tracked actualPageStart = 0;
   @tracked actualPageEnd = 10;
 

package/addon/components/roadsign-regulation-plugin/roadsigns-table.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuDataTable @isLoading={{@isLoading}} @noDataMessage="No data" as |table|>
   <table.content as |c|>
     <c.header>
@@ -27,9 +28,9 @@
                 <div class="au-o-grid au-o-grid--tiny">
                 {{#each row.signs as |sign|}}
                   <div class="au-o-grid__item au-u-1-3">
-                    <img 
-                      src={{sign.image}} 
-                      alt={{t "editor-plugins.roadsign-regulation.table.content.image.alt" code=sign.code}} 
+                    <img
+                      src={{sign.image}}
+                      alt={{t "editor-plugins.roadsign-regulation.table.content.image.alt" code=sign.code}}
                       class="au-c-data-table__image" />
                   </div>
                 {{/each}}
@@ -53,9 +54,9 @@
               </td>
               <td>
                 {{#if (eq this.selected row.uri)}}
-                <AuIcon @icon="nav-up" @ariaHidden={{true}} class="au-c-data-table__clickable-row-icon" />
+                <AuIcon @icon={{this.NavUpIcon}} @ariaHidden={{true}} class="au-c-data-table__clickable-row-icon" />
                 {{else}}
-                <AuIcon @icon="nav-down" @ariaHidden={{true}} class="au-c-data-table__clickable-row-icon" />
+                <AuIcon @icon={{this.NavDownIcon}} @ariaHidden={{true}} class="au-c-data-table__clickable-row-icon" />
                 {{/if}}
               </td>
             </tr>
@@ -86,4 +87,4 @@
   @pageStart={{@pageStart}}
   @count={{@count}}
 />
-{{/if}}
+{{/if}}

package/addon/components/roadsign-regulation-plugin/roadsigns-table.ts

@@ -3,6 +3,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { RoadsignRegulationPluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin';
+import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
+import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
 
 type Args = {
   controller: SayController;
@@ -10,6 +12,9 @@ type Args = {
 };
 
 export default class RoadsignsTable extends Component<Args> {
+  NavDownIcon = NavDownIcon;
+  NavUpIcon = NavUpIcon;
+
   @tracked selected?: string;
   imageBaseUrl: string;
 

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

@@ -1,4 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
+  class="snippet-modal"
   @modalOpen={{@open}}
   @closeModal={{this.closeModal}}
   @title={{t 'snippet-plugin.modal.title'}}
@@ -39,14 +41,11 @@
         <div class='au-u-padding-top snippet-modal--list-container'>
           {{#if this.snippetsResource.isRunning}}
             <div class='au-u-margin'>
-              <AuLoader @padding='large' />
-              <span class='au-u-hidden-visually'>
-                {{t 'snippet-plugin.alert.loading'}}
-              </span>
+              <Common::Search::Loading />
             </div>
           {{else}}
             {{#if this.error}}
-              <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
+              <Common::Search::AlertLoadError @error={{this.error}} />
             {{else}}
               {{#if this.snippetsResource.value.length}}
                 <SnippetPlugin::Snippets::SnippetList
@@ -54,7 +53,7 @@
                   @onInsert={{@onInsert}}
                 />
               {{else}}
-                <SnippetPlugin::Helpers::AlertNoItems />
+                <Common::Search::AlertNoItems />
               {{/if}}
             {{/if}}
           {{/if}}