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

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @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

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
@@ -368,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.
 // (...)
@@ -563,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:
@@ -571,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;
  };
 ```
 
@@ -592,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,
     },
   ];
 }
@@ -817,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';

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"

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

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { NodeSelection, PNode } 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 {
   isNone,
@@ -22,6 +22,7 @@ import {
   formatContainsTime,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
+import { Velcro } from 'ember-velcro';
 
 type Args = {
   controller: SayController;
@@ -29,6 +30,8 @@ type Args = {
 };
 const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class DateEditComponent extends Component<Args> {
+  Velcro = Velcro;
+
   @service
   declare intl: IntlService;
 

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

@@ -1,4 +1,4 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton
     @icon="add"
     @iconAlignment="left"
@@ -6,4 +6,4 @@
     {{on 'click' this.insert}}>
     {{t "date-plugin.insert.date"}}
   </AuButton>
-</AuList::Item>
+</li>

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

@@ -25,11 +25,10 @@
         {{variable.label}}
       </PowerSelect>
       {{#if this.selectedVariable}}
-        {{component 
-          this.selectedVariable.component.path 
-          controller=this.controller 
-          options=this.selectedVariable.component.options
-        }}
+        <this.selectedVariable.component
+          @controller={{this.controller}}
+          @options={{this.selectedVariable.options}}
+        />
       {{/if}}
     </c.content>
   </AuCard>

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

@@ -3,15 +3,13 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { hasGroups } from '@lblod/ember-rdfa-editor/utils/node-utils';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 
 export type VariableConfig = {
   label: string;
-  component: {
-    path: string;
-    options?: unknown;
-  };
+  component: typeof Component;
+  options?: unknown;
 };
 
 type Args = {

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

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 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 { v4 as uuidv4 } from 'uuid';
 

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

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { v4 as uuidv4 } from 'uuid';
 import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { modifier } from 'ember-modifier';
 

package/addon/components/variable-plugin/number/nodeview.hbs

@@ -1,4 +1,4 @@
-<Velcro
+<this.Velcro
   @placement='bottom-start'
   @offsetOptions={{hash mainAxis=3}} as |velcro|
 >
@@ -57,4 +57,4 @@
       </AuCard>
     </div>
   {{/if}}
-</Velcro>
+</this.Velcro>

package/addon/components/variable-plugin/number/nodeview.ts

@@ -6,12 +6,13 @@ import {
   SayView,
 } from '@lblod/ember-rdfa-editor';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import intlService from 'ember-intl/services/intl';
 import { localCopy } from 'tracked-toolbox';
 import { isBlank } from '@ember/utils';
 import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
+import { Velcro } from 'ember-velcro';
 
 type Args = {
   getPos: () => number | undefined;
@@ -24,6 +25,8 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
+  Velcro = Velcro;
+
   @localCopy('args.node.attrs.value', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
   declare writtenNumber: boolean;

package/addon/helpers/capitalize.ts

@@ -4,3 +4,4 @@ import { capitalize as utilCapitalize } from '../utils/strings';
 export default helper(function capitalize([string]: string[]) {
   return utilCapitalize(string);
 });
+export const capitalize = utilCapitalize;

package/addon/helpers/in-array.ts

@@ -2,7 +2,7 @@ import { helper } from '@ember/component/helper';
 
 type PositionalParams = [array: unknown[], needle: unknown];
 
-function inArray([theArray, needle]: PositionalParams) {
+export function inArray([theArray, needle]: PositionalParams) {
   if (!Array.isArray(theArray)) {
     return false;
   }

package/addon/helpers/limit-text.ts

@@ -1,9 +1,10 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function limitText([string]: string[]) {
+export function limitText([string]: string[]) {
   if (string && string.length > 140) {
     return string.slice(0, 140) + '...';
   } else {
     return string;
   }
-});
+}
+export default helper(limitText);

package/components/hover-tooltip.d.ts

@@ -1,8 +1,10 @@
 import Component from '@glimmer/component';
+import { Velcro } from 'ember-velcro';
 interface Args {
     placement?: string;
 }
 export default class HoverTooltip extends Component<Args> {
+    Velcro: typeof Velcro;
     hover: import("ember-modifier").FunctionBasedModifier<{
         Args: {
             Named: Record<string, unknown>;

package/components/variable-plugin/date/edit.d.ts

@@ -5,11 +5,13 @@ import IntlService from 'ember-intl/services/intl';
 import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { DateFormat, DateOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/date';
 import { ValidationError } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
+import { Velcro } from 'ember-velcro';
 type Args = {
     controller: SayController;
     options: DateOptions;
 };
 export default class DateEditComponent extends Component<Args> {
+    Velcro: typeof Velcro;
     intl: IntlService;
     helpModalOpen: boolean;
     tooltipOpen: boolean;

package/components/variable-plugin/insert-variable-card.d.ts

@@ -3,10 +3,8 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 export type VariableConfig = {
     label: string;
-    component: {
-        path: string;
-        options?: unknown;
-    };
+    component: typeof Component;
+    options?: unknown;
 };
 type Args = {
     controller: SayController;

package/components/variable-plugin/number/nodeview.d.ts

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { DecorationSource, PNode, SayController, SayView } from '@lblod/ember-rdfa-editor';
 import intlService from 'ember-intl/services/intl';
+import { Velcro } from 'ember-velcro';
 type Args = {
     getPos: () => number | undefined;
     node: PNode;
@@ -11,6 +12,7 @@ type Args = {
     contentDecorations?: DecorationSource;
 };
 export default class NumberNodeviewComponent extends Component<Args> {
+    Velcro: typeof Velcro;
     inputNumber: string;
     writtenNumber: boolean;
     intl: intlService;

package/helpers/capitalize.d.ts

@@ -1,3 +1,4 @@
+import { capitalize as utilCapitalize } from '../utils/strings';
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: string[];
@@ -6,3 +7,4 @@ declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Return: string;
 }>;
 export default _default;
+export declare const capitalize: typeof utilCapitalize;

package/helpers/in-array.d.ts

@@ -1,4 +1,5 @@
 type PositionalParams = [array: unknown[], needle: unknown];
+export declare function inArray([theArray, needle]: PositionalParams): boolean;
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: PositionalParams;

package/helpers/limit-text.d.ts

@@ -1,3 +1,4 @@
+export declare function limitText([string]: string[]): string;
 declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
     Args: {
         Positional: string[];

package/index.js

@@ -12,5 +12,8 @@ module.exports = {
     babel: {
       sourceMaps: 'inline',
     },
+    autoImport: {
+      webpack: require('./webpack-config'),
+    },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "14.2.0",
+  "version": "15.0.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -42,13 +42,13 @@
     "@types/rdfjs__parser-n3": "^2.0.1",
     "buffer": "^6.0.3",
     "codemirror": "^6.0.1",
+    "crypto-browserify": "^3.12.0",
     "date-fns": "^2.30.0",
     "ember-auto-import": "~2.6.3",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.1",
-    "ember-concurrency": "^2.3.7",
+    "ember-concurrency": "^2.x || ^3.1.0",
     "ember-mu-transform-helpers": "^2.0.0",
-    "ember-power-select": "^6.0.1",
     "ember-resources": "^6.1.1",
     "ember-velcro": "^2.1.0",
     "fetch-sparql-endpoint": "^3.0.0",
@@ -66,7 +66,7 @@
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.8.1",
+    "@ember/test-helpers": "^2.9.3",
     "@embroider/test-setup": "^3.0.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
@@ -93,7 +93,6 @@
     "@types/ember__template": "^4.0.1",
     "@types/ember__test": "^4.0.1",
     "@types/ember__utils": "^4.0.2",
-    "@types/ember-resolver": "^5.0.13",
     "@types/prosemirror-dev-tools": "^3.0.3",
     "@types/qunit": "^2.19.3",
     "@types/rdf-ext": "^1.3.11",
@@ -114,12 +113,12 @@
     "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript": "^5.2.1",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-functions-as-helper-polyfill": "^2.1.1",
     "ember-intl": "^5.7.2",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.0.0",
+    "ember-power-select": "^7.1.2",
     "ember-qunit": "^6.0.0",
-    "ember-resolver": "^8.0.3",
+    "ember-resolver": "^11.0.1",
     "ember-simple-auth": "4.2.2",
     "ember-source": "~4.12.0",
     "ember-source-channel-url": "^3.0.0",
@@ -144,11 +143,13 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
+    "@ember/string": "3.x",
     "@glint/template": "^1.1.0",
     "@lblod/ember-rdfa-editor": "^6.0.0",
-    "ember-concurrency": "^2.3.7",
+    "ember-concurrency": "2.x || ^3.1.0",
     "ember-modifier": "^3.2.7",
-    "ember-source": "^3.28.0 || ^4.0.0"
+    "ember-power-select": "6.x || 7.x",
+    "ember-source": "^4.8.0"
   },
   "overrides": {
     "ember-intl": {

package/types/global.d.ts

@@ -11,20 +11,3 @@ declare module 'n2words' {
     options: { lang: string },
   ): string;
 }
-
-declare module 'tracked-toolbox' {
-  export function localCopy<C extends Component = Component, T = unknown>(
-    memo: UsefulPropsOf<C>,
-    initializer?: T | (() => T),
-  ): PropertyDecorator;
-  export function trackedReset<C extends Component = Component>(
-    memo: UsefulPropsOf<C>,
-  ): PropertyDecorator;
-  export function trackedReset<
-    C extends Component = Component,
-    T = unknown,
-  >(args: {
-    memo: UsefulPropsOf<C>;
-    update: (component: C, key: string, last: T) => T;
-  }): PropertyDecorator;
-}

package/types/n2words/index.d.ts

@@ -0,0 +1,6 @@
+declare module 'n2words' {
+  export default function n2words(
+    number: number,
+    options: { lang: string },
+  ): string;
+}

package/types/tracked-toolbox/index.d.ts

@@ -0,0 +1,11 @@
+declare module 'tracked-toolbox' {
+  export function localCopy<T>(
+    memo: string,
+    initializer?: T | (() => T),
+  ): PropertyDecorator;
+  export function trackedReset(memo: string): PropertyDecorator;
+  export function trackedReset<C, T>(args: {
+    memo: string;
+    update: (component: C, key: string, last: T) => T;
+  }): PropertyDecorator;
+}

package/webpack-config.js

@@ -0,0 +1,22 @@
+// eslint-disable-next-line node/no-unpublished-require
+const webpack = require('webpack');
+
+module.exports = {
+  node: {
+    global: true,
+    __filename: true,
+    __dirname: true,
+  },
+  resolve: {
+    fallback: {
+      stream: require.resolve('stream-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+    },
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+};

package/.woodpecker/.scenarios.yml

@@ -1,13 +0,0 @@
-matrix:
-  scenario:
-    - ember-lts-3.28
-
-steps:
-  - name: ${scenario}
-    image: danlynn/ember-cli:4.8.0
-    commands:
-      - npm ci
-      - ember try:one ${scenario} --skip-cleanup=true
-
-when:
-  branch: [ master ]

package/app/components/citation-plugin/citations/modal.js

@@ -1 +0,0 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/citation-plugin/citations/modal';

package/app/components/template-comments-plugin/comment-editor.js

@@ -1 +0,0 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/comment-editor';

package/app/components/template-comments-plugin/insert-template-comment.js

@@ -1 +0,0 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/insert-template-comment';

package/app/services/rdfa-editor-roadsign-regulation-plugin.js

@@ -1 +0,0 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/services/rdfa-editor-roadsign-regulation-plugin';

package/types/ember-mu-transform-helpers/transforms/string-set.d.ts

@@ -1,14 +0,0 @@
-declare module 'ember-mu-transform-helpers/transforms/string-set' {
-  import Transform from '@ember-data/serializer/transform';
-
-  module 'ember-data/types/registries/transform' {
-    export default interface TransformRegistry {
-      'string-set': StringSetTransform;
-    }
-  }
-  export default class StringSetTransform extends Transform {
-    deserialize(serialized: unknown[]): unknown[];
-
-    serialize(deserialized: unknown[]): unknown[];
-  }
-}