@lblod/ember-rdfa-editor-lblod-plugins 14.1.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 15.0.0
+
+### Major Changes
+
+- [#323](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/323) [`5bedaab`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/5bedaabb7efa05626012333e63095671309e9f97) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove usage of `component` helper in preparation of embroider-compatibility.
+
+  This removal also causes a change in the variable-plugin insert-component API, the insert-components now need to be passed directly (instead of their path).
+
+  Before:
+
+  ```typescript
+  get variableTypes(): VariableConfig[] {
+    return [
+      {
+        label: 'text',
+        component: {
+          path: 'variable-plugin/text/insert',
+        },
+      },
+      {
+        label: 'location',
+        component: {
+          path: 'variable-plugin/location/insert',
+          options: {
+            endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+          },
+        },
+      },
+    ];
+  }
+  ```
+
+  After:
+
+  ```typescript
+  import TextVariableInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/text/insert';
+  import LocationInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/insert';
+  ...
+  get variableTypes() {
+    return [
+      {
+        label: 'text',
+        component: TextVariableInsertComponent,
+      },
+      {
+        label: 'location',
+        component: LocationInsertComponent,
+        options: {
+          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+        },
+      },
+    ];
+  }
+  ```
+
+- [#333](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/333) [`04ea965`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/04ea96580189ee0a9440fe77618b8b2c1d9941a5) Thanks [@elpoelma](https://github.com/elpoelma)! - Drop support for ember 3.28
+  The minimum required version of `ember-source` is now 4.8.0.
+  The 5.x range remains untested.
+
+### Minor Changes
+
+- [#332](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/332) [`cf7082f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/cf7082fdd89c862936276cfb562a0a07e5a49c4b) Thanks [@elpoelma](https://github.com/elpoelma)! - Expose a Webpack config for Embroidered apps
+
+- [#332](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/332) [`cf7082f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/cf7082fdd89c862936276cfb562a0a07e5a49c4b) Thanks [@elpoelma](https://github.com/elpoelma)! - Specify `@ember/string` 3.x as a peerdep
+
+- [#334](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/334) [`fd271a1`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/fd271a1dd9b32e4081707ea416f35be70f57aa30) Thanks [@elpoelma](https://github.com/elpoelma)! - Add support for the ember-concurrency 3.x range
+
+- [#332](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/332) [`cf7082f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/cf7082fdd89c862936276cfb562a0a07e5a49c4b) Thanks [@elpoelma](https://github.com/elpoelma)! - Specify `ember-power-select` 6.x|7.x as a peerdep
+
+- [#325](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/325) [`4c402d2`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/4c402d21f6e45a03436fd5155bb508ce6c3fb091) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove redundant types for `string-set` ember-data transform
+
+- [#324](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/324) [`95634ed`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/95634eda12927736fa16945ff85b80876b7c0058) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove direct usages of aulist::item in order to ensure compatibility with `@appuniversum/ember-appuniversum` 2.16.0
+
+- [#325](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/325) [`4c402d2`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/4c402d21f6e45a03436fd5155bb508ce6c3fb091) Thanks [@elpoelma](https://github.com/elpoelma)! - Fix internal types for tracked-toolbox
+
+### Patch Changes
+
+- [#331](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/331) [`910ec85`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/910ec8596b602a0ff408da0fcec4222ad81fb75a) Thanks [@piemonkey](https://github.com/piemonkey)! - Small internal changes to allow for embroider builds
+
+## 14.2.0
+
+### Minor Changes
+
+- [#322](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/322) [`a168dc5`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/a168dc54b5ddc0a4a5b3bf8c521ccb914bb91b7a) Thanks [@x-m-el](https://github.com/x-m-el)! - For article-structure plugin
+
+  - The `StructureSpec`'s `constructor` now also contains the optional argument `state` (an EditorState)
+  - The existing structures' placeholders are translated using the document language
+    - This is only the case if emberApplication plugin is configured.
+      **Recommended change**: activate emberApplication plugin
+    - Will fallback to translating based on browser locale (=old logic) if emberApplication plugin is not configured
+
+- [#322](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/322) [`690738f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/690738f56692555880c5ad29c25c76f400a48bcb) Thanks [@x-m-el](https://github.com/x-m-el)! - For decision-plugin and standard-template-plugin
+
+  Make use of `state` argument to translate placeholders based on document language instead of browser locale
+  Depending on the place where placeholders are defined either of the following logic happens:
+
+  - will always use document language
+  - will use document language if emberApplication plugin is active. If not, defaults to browser locale (like before)
+
+### Patch Changes
+
+- [#322](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/322) [`5ceca68`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/5ceca68ec271477dfcf75c7d9fba35c21880642e) Thanks [@x-m-el](https://github.com/x-m-el)! - Using "show as words" for a number variable will convert the number to a string in the language in the document, instead of always showing Dutch.
+
 ## 14.1.0
 
 ### Minor Changes

package/README.md

@@ -5,8 +5,8 @@ related to the LBLOD Project.
 
 ## Compatibility
 
-- Ember.js and ember data v3.28 or 4.x
-  note: we smoke-test for 3.28 but develop on the latest 4.x minor. The 5.x range is currently untested and not officially supported, but we accept issues and PRs to do so.
+- Ember.js 4.8+
+  The 5.x range is currently untested and not officially supported, but we accept issues and PRs to do so.
 
 - Embroider or ember-auto-import v2
 - Node 18 or above
@@ -140,6 +140,7 @@ export type StructureSpec = {
     number?: number;
     intl?: IntlService;
     content?: PNode | Fragment;
+    state?: EditorState;
   }) => {
     node: PNode;
     selectionConfig: {
@@ -367,7 +368,7 @@ This plugin provides an Ember service, `import-rdfa-snippet` which allows you to
 manner:
 
 ```js
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 // An entry point to download the resouce (e.g a route) in your host app.
 // (...)
@@ -562,7 +563,7 @@ The `variable-plugin/insert-variable-card` can be easily configured: it expects
 - `controller`: An instance of the `SayController` class
 - `variableTypes`: A list of `VariableConfig` objects. With each `VariableConfig` containing:
   - the `label` which should be displayed in the variable-select dropdown
-  - the `path` to the insert-variable component
+  - the `component`: class of the component which should be displayed upon selecting the variable type.
   - _optionally_ an `options` argument object which should be passed to the insert-variable component.
 
 * The `VariableConfig` type is defined as follows:
@@ -570,10 +571,8 @@ The `variable-plugin/insert-variable-card` can be easily configured: it expects
 ```js
  type VariableConfig = {
    label: string;
-   component: {
-     path: string;
-     options?: unknown;
-   };
+   component: ComponentLike;
+   options?: unknown;
  };
 ```
 
@@ -591,49 +590,44 @@ To allows users to insert variables into a document, add the following to the ed
 `this.controller` is an instance of `SayController` and `this.variableTypes` is the list of `VariableConfig` objects which should be defined in your controller/component class:
 
 ```js
+import TextVariableInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/text/insert';
+import NumberInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/number/insert';
+import DateInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/insert-variable';
+import LocationInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/insert';
+import CodelistInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/codelist/insert';
+import VariablePluginAddressInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/address/insert-variable';
+...
 get variableTypes() {
   return [
     {
       label: 'text',
-      component: {
-        path: 'variable-plugin/text/insert',
-      },
+      component: TextVariableInsertComponent,
     },
     {
       label: 'number',
-      component: {
-        path: 'variable-plugin/number/insert',
-      },
+      component: NumberInsertComponent,
     },
     {
       label: 'date',
-      component: {
-        path: 'variable-plugin/date/insert',
-      },
+      component: DateInsertVariableComponent
     },
     {
       label: 'location',
-      component: {
-        path: 'variable-plugin/location/insert',
-        options: {
-          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
-        },
+      component: LocationInsertComponent,
+      options: {
+        endpoint: 'https://dev.roadsigns.lblod.info/sparql',
       },
     },
     {
       label: 'codelist',
-      component: {
-        path: 'variable-plugin/codelist/insert',
-        options: {
-          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
-        },
+      component: CodelistInsertComponent,
+      options: {
+        endpoint: 'https://dev.roadsigns.lblod.info/sparql',
       },
     },
     {
       label: 'address',
-      component: {
-        path: 'variable-plugin/address/insert-variable',
-      },
+      component: VariablePluginAddressInsertVariableComponent,
     },
   ];
 }
@@ -816,6 +810,25 @@ Template comments have a specific style that can be imported in the stylesheet w
 @import 'template-comments-plugin';
 ```
 
+## Embroider
+To use `@lblod/ember-rdfa-editor-lblod-plugins` with Embroider some extra Webpack configuration is needed, which you can import like this:
+
+```js
+// ember-cli-build.js
+  // ...
+  const { Webpack } = require('@embroider/webpack');
+  return require('@embroider/compat').compatBuild(app, Webpack, {
+    // other Embroider options
+    packagerOptions: {
+      webpackConfig: require('@lblod/ember-rdfa-editor-lblod-plugins/webpack-config'),
+    },
+    extraPublicTrees: [],
+  });
+};
+```
+
+If you already provide some Webpack configuration, you can deep merge that with the config object we provide.
+
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

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

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

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

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import {
   ArticleStructurePluginOptions,

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

@@ -9,7 +9,7 @@ import {
 import { ArticleStructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 type Args = {

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

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @icon='add'
     @iconAlignment='left'
@@ -8,7 +8,7 @@
   >
     {{t 'citaten-plugin.insert.title'}}
   </AuButton>
-</AuList::Item>
+</li>
 
 <CitationPlugin::Citations::SearchModal
   @open={{this.showModal}}

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

@@ -1,11 +1,11 @@
 {{#if @articles.length}}
-  <AuList @direction="vertical" @divider={{true}}>
+  <AuList @direction="vertical" @divider={{true}} as |Item|>
     {{#each @articles as |article|}}
-      <AuList::Item>
+      <Item>
         <CitationPlugin::Citations::ArticlePreview
           @insertArticleCitation={{fn @insertArticleCitation article}}
           @article={{article}} />
-      </AuList::Item>
+      </Item>
     {{/each}}
   </AuList>
 {{else}}

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

@@ -1,13 +1,13 @@
 {{#if @legalDocuments.length}}
-  <AuList @direction="vertical" @divider={{true}}>
+  <AuList @direction="vertical" @divider={{true}} as |Item|>
     {{#each @legalDocuments as |legalDocument|}}
-      <AuList::Item class="au-u-padding-left-small au-u-padding-right-small">
+      <Item class="au-u-padding-left-small au-u-padding-right-small">
         <CitationPlugin::Citations::LegalDocumentPreview
           @legalDocument={{legalDocument}}
           @onCitationInsert={{fn @onCitationInsert legalDocument}}
           @onCitationDetails={{fn @onCitationDetails legalDocument}}
           @fullSize={{@fullSize}} />
-      </AuList::Item>
+      </Item>
     {{/each}}
   </AuList>
 {{else}}

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

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { capitalize } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
 import {

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

@@ -5,7 +5,7 @@ import {
   insertArticleContainer,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { VALIDATION_KEY } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
 

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

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

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

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+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';
@@ -17,6 +17,7 @@ export default class InsertTitleCardComponent extends Component<Args> {
       insertDocumentTitle({
         placeholder: this.intl.t(
           'document-title-plugin.document-title-placeholder',
+          { locale: this.args.controller.documentLanguage },
         ),
       }),
       {
@@ -31,6 +32,7 @@ export default class InsertTitleCardComponent extends Component<Args> {
       insertDocumentTitle({
         placeholder: this.intl.t(
           'document-title-plugin.document-title-placeholder',
+          { locale: this.args.controller.documentLanguage },
         ),
       }),
       {

package/addon/components/hover-tooltip.hbs

@@ -1,8 +1,8 @@
-<Velcro @placement={{this.placement}} as |velcro|>
+<this.Velcro @placement={{this.placement}} as |velcro|>
   {{#let velcro.loop as |loop|}}
     {{yield (hash velcroHook=velcro.hook handleHover=(modifier this.hover)) to='hover' }}
     {{#if this.tooltipOpen}}
       {{yield loop to='tooltip'}}
     {{/if}}
   {{/let}}
-</Velcro>
+</this.Velcro>

package/addon/components/hover-tooltip.ts

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { tracked } from '@glimmer/tracking';
+import { Velcro } from 'ember-velcro';
 
 interface Args {
   placement?: string;
 }
 
 export default class HoverTooltip extends Component<Args> {
+  Velcro = Velcro;
   hover = modifier(
     (element) => {
       element.addEventListener('mouseenter', this.showTooltip);

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

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 import { ProseParser } from '@lblod/ember-rdfa-editor';
 import { SayController } from '@lblod/ember-rdfa-editor';

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

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
 import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
 import { trackedFunction } from 'ember-resources/util/function';

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

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @skin="link"
     @icon="add"
@@ -8,5 +8,5 @@
   >
     {{t "editor-plugins.roadsign-regulation.card.insert-measure"}}
   </AuButton>
-</AuList::Item>
+</li>
 <RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.closeModal}} @controller={{@controller}} @options={{@options}}/>

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

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 import { v4 as uuid } from 'uuid';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
 import {
   NON_ZONAL_URI,

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

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @icon='add'
     @iconAlignment='left'
@@ -7,7 +7,7 @@
   >
     {{t 'snippet-plugin.insert.title'}}
   </AuButton>
-</AuList::Item>
+</li>
 
 <SnippetPlugin::SearchModal
   @open={{this.showModal}}

package/addon/components/snippet-plugin/snippets/snippet-list.hbs

@@ -1,12 +1,12 @@
 {{#if @snippets.length}}
-  <AuList @direction='vertical'>
+  <AuList @direction='vertical' as |Item|>
     {{#each @snippets as |snippet|}}
-      <AuList::Item>
+      <Item>
         <SnippetPlugin::Snippets::SnippetPreview
           @snippet={{snippet}}
           @onInsert={{@onInsert}}
         />
-      </AuList::Item>
+      </Item>
     {{/each}}
   </AuList>
 {{/if}}

package/addon/components/standard-template-plugin/card.hbs

@@ -1,7 +1,7 @@
 <StandardTemplatePlugin::TemplateProvider @controller={{@controller}} @templates={{@templates}} as |provider|>
   {{#if provider.hasApplicableTemplates}}
     {{#each provider.applicableTemplates as |template|}}
-      <AuList::Item>
+      <li class="au-c-list__item">
         <AuButton
           @skin="link"
           @icon="add"
@@ -10,7 +10,7 @@
         >
           {{template.title}}
         </AuButton>
-      </AuList::Item>
+      </li>
     {{/each}}
   {{/if}}
 </StandardTemplatePlugin::TemplateProvider>

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

@@ -1,6 +1,6 @@
-<AuList @divider={{true}} class='table-of-contents'>
+<AuList @divider={{true}} class='table-of-contents' as |Item|>
   {{#each @entries as |outlineEntry|}}
-    <AuList::Item>
+    <Item>
       <AuButton
         @wrap={{true}}
         {{! template-lint-disable no-capital-arguments }}
@@ -16,6 +16,6 @@
           @onEntryClick={{@onEntryClick}}
         />
       {{/if}}
-    </AuList::Item>
+    </Item>
   {{/each}}
 </AuList>

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

@@ -4,7 +4,7 @@ import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { Selection } from '@lblod/ember-rdfa-editor';
 import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin';
 import { extractOutline } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
   @service declare intl: IntlService;

package/addon/components/template-comments-plugin/insert.hbs

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @icon='add'
     @iconAlignment='left'
@@ -8,4 +8,4 @@
   >
     {{t 'template-comments-plugin.insert.title'}}
   </AuButton>
-</AuList::Item>
+</li>

package/addon/components/validation-plugin/validation-item.ts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { ValidationResult } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 interface Args {

package/addon/components/variable-plugin/address/edit.ts

@@ -12,7 +12,7 @@ import {
 import { restartableTask, timeout } from 'ember-concurrency';
 import { trackedReset } from 'tracked-toolbox';
 import { trackedTask } from 'ember-resources/util/ember-concurrency';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 type Args = {

package/addon/components/variable-plugin/address/insert.hbs

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @icon="add"
     @iconAlignment="left"
@@ -7,4 +7,4 @@
     @disabled={{not this.canInsertAddress}}>
     {{t "editor-plugins.address.insert"}}
   </AuButton>
-</AuList::Item>
+</li>

package/addon/components/variable-plugin/codelist/insert.ts

@@ -6,7 +6,7 @@ import {
   CodeList,
   fetchCodeListsByPublisher,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { trackedFunction } from 'ember-resources/util/function';
 import { v4 as uuidv4 } from 'uuid';

package/addon/components/variable-plugin/date/date-time-picker.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { localCopy } from 'tracked-toolbox';
 import Intl from 'ember-intl/services/intl';
 

package/addon/components/variable-plugin/date/edit.hbs

@@ -21,7 +21,7 @@
                 @onChange={{this.changeIncludeTime}}
               />
               {{#if this.isCustom}}
-                <Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
+                <this.Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
                   <AuBadge
                     @size="small"
                     @icon="info-circle"
@@ -40,7 +40,7 @@
                       {{t 'date-plugin.card.info-custom-time'}}
                     </AuPill>
                   {{/if}}
-                </Velcro>
+                </this.Velcro>
               {{/if}}
             </AuFormRow>
           </VariablePlugin::Date::DateTimePicker>
@@ -67,7 +67,7 @@
                 @onChange={{this.setDateFormatFromKey}}
               />
             </AuFormRow>
-          {{/if}}  
+          {{/if}}
           {{#if (eq this.dateFormatType "custom")}}
             <AuFormRow @alignment="post">
               <AuButton @skin="secondary" @icon="info-circle"