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

package/addon/components/snippet-plugin/snippet-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'
     {{on 'click' this.openModal}}

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

@@ -1,4 +1,5 @@
 import { action } from '@ember/object';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -13,6 +14,8 @@ interface Args {
 }
 
 export default class SnippetInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @tracked showModal = false;
 
   get controller() {

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
   @modalOpen={{@open}}
   @closeModal={{this.closeModal}}
@@ -39,14 +40,11 @@
         <div class='au-u-padding-top snippet-modal--list-container'>
           {{#if this.snippetListResource.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}} class="au-u-margin-top-none" />
             {{else}}
               {{#if this.snippetListResource.value.length}}
                 <SnippetPlugin::SnippetList::SnippetListView
@@ -55,7 +53,7 @@
                   @onChange={{this.onChange}}
                 />
               {{else}}
-                <SnippetPlugin::Helpers::AlertNoItems />
+                <Common::Search::AlertNoItems />
               {{/if}}
             {{/if}}
           {{/if}}

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuHeading @level='3' @skin='4'>
   {{t 'snippet-plugin.snippet-list.modal.subtitle'}}
 </AuHeading>
@@ -14,8 +15,8 @@
         {{#each @snippetLists as |snippetList|}}
           <tr>
             <td class="selectColumn">
-              <AuControlCheckbox
-                @identifier={{snippetList.label}}
+              <AuCheckbox
+                id={{snippetList.label}}
                 @onChange={{fn this.onChange snippetList.id}}
                 @checked={{in-array @assignedSnippetListsIds snippetList.id}}
               />

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

@@ -1,5 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuButton
-  @icon='unordered-list'
+  @icon={{this.UnorderedListIcon}}
   @skin='secondary'
   @iconAlignment='left'
   {{on 'click' this.openModal}}

package/addon/components/snippet-plugin/snippet-list-select.ts

@@ -1,8 +1,8 @@
 import { action } from '@ember/object';
 import { Task } from 'ember-concurrency';
-
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { UnorderedListIcon } from '@appuniversum/ember-appuniversum/components/icons/unordered-list';
 
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
@@ -13,6 +13,7 @@ interface Args {
 }
 
 export default class SnippetListSelectComponent extends Component<Args> {
+  UnorderedListIcon = UnorderedListIcon;
   @tracked showModal = false;
 
   @action

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div
   class='snippet-preview--container au-c-panel au-u-margin-right'
   ...attributes

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

@@ -1,10 +1,11 @@
+{{! @glint-nocheck: not typesafe yet }}
 <StandardTemplatePlugin::TemplateProvider @controller={{@controller}} @templates={{@templates}} as |provider|>
   {{#if provider.hasApplicableTemplates}}
     {{#each provider.applicableTemplates as |template|}}
       <li class="au-c-list__item">
         <AuButton
           @skin="link"
-          @icon="add"
+          @icon={{this.AddIcon}}
           @iconAlignment="left"
           {{on "click" (fn provider.insert template)}}
         >

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

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import StandardTemplate from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
   templates: StandardTemplate[];
 };
 export default class StandardTemplatePluginCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
   get controller() {
     return this.args.controller;
   }

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
 {{yield (hash
           applicableTemplates=this.applicableTemplates

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

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

package/addon/components/table-of-contents-plugin/toolbar-button.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <label class='au-c-toggle-switch' title={{t 'table-of-contents-plugin.toggle'}}>
   <input
     type='checkbox'

package/addon/components/template-comments-plugin/edit-card.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.isInsideComment}}
   <AuCard
     @flex={{true}}
@@ -13,7 +14,7 @@
       >
         <Item>
           <AuButton
-            @icon='chevron-up'
+            @icon={{this.ChevronUpIcon}}
             @iconAlignment='left'
             @skin='link'
             {{on 'click' this.moveUp}}
@@ -23,7 +24,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon='chevron-down'
+            @icon={{this.ChevronDownIcon}}
             @iconAlignment='left'
             @skin='link'
             {{on 'click' this.moveDown}}
@@ -33,7 +34,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon='bin'
+            @icon={{this.BinIcon}}
             @iconAlignment='left'
             @skin='link'
             @alert={{true}}

package/addon/components/template-comments-plugin/edit-card.ts

@@ -10,12 +10,19 @@ import {
   findContentMatchPosLeft,
   findContentMatchPosRight,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-contentmatch';
+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;
 };
 
 export default class TemplateCommentsPluginEditCardComponent extends Component<Args> {
+  BinIcon = BinIcon;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
+
   get controller() {
     return this.args.controller;
   }

package/addon/components/template-comments-plugin/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={{not this.canInsert}}

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

@@ -2,12 +2,15 @@ import { findParentNode } from '@curvenote/prosemirror-utils';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { Command, SayController } from '@lblod/ember-rdfa-editor';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
 };
 
 export default class TemplateCommentsPluginInsertCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   get controller() {
     return this.args.controller;
   }

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

@@ -1,8 +1,9 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuAlert
   @size='small'
   @title={{this.translation.title}}
   @skin='info'
-  @icon='circle-info'
+  @icon={{this.CircleInfoIcon}}
   class='say-template-comment {{
     if this.selectionInside 'ProseMirror-selectednode'
   }} say-default-cursor'

package/addon/components/template-comments-plugin/template-comment.ts

@@ -2,8 +2,11 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { CircleInfoIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-info';
 
 export default class TemplateCommentsPluginTemplateCommentComponent extends Component<EmberNodeArgs> {
+  CircleInfoIcon = CircleInfoIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.shouldShow}}
   <AuCard @shadow={{true}} @size="small" as |Card|>
     <Card.header>

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

@@ -1,2 +1,3 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuAlert @size='small' @icon={{this.icon}} @title={{this.message}} @skin={{this.skin}} @closable={{false}}>
 </AuAlert>

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

@@ -3,6 +3,9 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { ValidationResult } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { InfoCircleIcon } from '@appuniversum/ember-appuniversum/components/icons/info-circle';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 
 interface Args {
   icon?: string;
@@ -39,13 +42,13 @@ export default class ValidationItem extends Component<Args> {
   get icon() {
     switch (this.result.severity) {
       case 'info':
-        return 'info-circle';
+        return InfoCircleIcon;
       case 'warning':
-        return 'alert-triangle';
+        return AlertTriangleIcon;
       case 'violation':
-        return 'cross';
+        return CrossIcon;
       default:
-        return 'info-circle';
+        return InfoCircleIcon;
     }
   }
 

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @shadow={{true}} @size="small" as |c|>
     <c.content>

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

@@ -14,6 +14,8 @@ import { trackedReset } from 'tracked-toolbox';
 import { trackedTask } from 'ember-resources/util/ember-concurrency';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
 
 type Args = {
   controller: SayController;
@@ -68,7 +70,7 @@ export default class AddressEditComponent extends Component<Args> {
     ) {
       return {
         skin: 'success',
-        icon: 'check',
+        icon: CheckIcon,
         title: this.intl.t('editor-plugins.address.edit.success.address-found'),
         body: value.formatted,
       };
@@ -83,7 +85,7 @@ export default class AddressEditComponent extends Component<Args> {
       if (this.newAddress.error.alternativeAddress) {
         return {
           skin: 'warning',
-          icon: 'alert-triangle',
+          icon: AlertTriangleIcon,
           title: this.intl.t(
             'editor-plugins.address.edit.errors.address-not-found-short',
           ),
@@ -96,7 +98,7 @@ export default class AddressEditComponent extends Component<Args> {
 
       return {
         skin: 'warning',
-        icon: 'alert-triangle',
+        icon: AlertTriangleIcon,
         title: this.intl.t(error.translation, { status: error.status }),
         body: this.intl.t('editor-plugins.address.edit.errors.contact', {
           htmlSafe: true,

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput 
     @label={{this.label}} 

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

@@ -1,10 +1,11 @@
+{{! @glint-nocheck: not typesafe yet }}
 <li class="au-c-list__item">
   <AuButton
-    @icon="add"
+    @icon={{this.AddIcon}}
     @iconAlignment="left"
     @skin="link"
     {{on 'click' (fn this.insertAddress true)}}
     @disabled={{not this.canInsertAddress}}>
     {{t "editor-plugins.address.insert"}}
   </AuButton>
-</li>
+</li>

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

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 import { replaceSelectionWithAddress } from './utils';
 
@@ -11,6 +12,8 @@ type Args = {
 };
 
 export default class InsertAddressComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

@@ -1,5 +1,6 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuPill
-  @icon='pencil'
+  @icon={{this.PencilIcon}}
   @iconAlignment='right'
   class='variable atomic'
   {{on 'click' this.selectThisNode}}

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

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { NodeSelection, PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/address';
@@ -13,6 +14,8 @@ type Args = {
 };
 
 export default class AddressNodeviewComponent extends Component<Args> {
+  PencilIcon = PencilIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

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

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <PowerSelect
   @allowClear={{false}}
   @searchEnabled={{false}}

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <AuDatePicker
     @onChange={{this.onChangeDate}}

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
   {{#if this.showCard}}
     <AuCard @shadow={{true}} @size="flush" as |c|>
@@ -14,17 +15,19 @@
           >
 
             <AuFormRow @alignment="inline">
-              <AuControlCheckbox
-                @label={{t 'date-plugin.card.include-time'}}
+              <AuCheckbox
+                @name="include-time"
                 @disabled={{eq this.dateFormatType "custom"}}
                 @checked={{not this.onlyDate}}
                 @onChange={{this.changeIncludeTime}}
-              />
+              >
+                {{t 'date-plugin.card.include-time'}}
+              </AuCheckbox>
               {{#if this.isCustom}}
                 <this.Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
                   <AuBadge
                     @size="small"
-                    @icon="info-circle"
+                    @icon={{this.InfoCircleIcon}}
                     aria-describedby="date-plugin-time-info-tooltip"
                     {{velcro.hook}}
                     {{on "mouseenter" this.showTooltip }}
@@ -44,33 +47,26 @@
               {{/if}}
             </AuFormRow>
           </VariablePlugin::Date::DateTimePicker>
-          {{#each this.formats as |format|}}
-            <AuFormRow>
-              <AuControlRadio
-                @label={{if format.label format.label (if this.onlyDate format.dateFormat format.dateTimeFormat)}}
-                @identifier={{format.key}}
-                @name="dateFormat"
-                @value={{format.key}}
-                checked={{eq this.dateFormatType format.key}}
-                @onChange={{this.setDateFormatFromKey}}
-              />
-            </AuFormRow>
-          {{/each}}
-          {{#if this.isCustomAllowed}}
-            <AuFormRow>
-              <AuControlRadio
-                @label={{t "date-plugin.card.custom-date" }}
-                @identifier="custom"
-                @name="dateFormat"
-                @value="custom"
-                checked={{eq this.dateFormatType "custom"}}
-                @onChange={{this.setDateFormatFromKey}}
-              />
-            </AuFormRow>
-          {{/if}}
+          <AuRadioGroup
+            @name="dateFormat"
+            @selected={{this.dateFormatType}}
+            @onChange={{this.setDateFormatFromKey}}
+            as |Group|
+          >
+            {{#each this.formats as |format|}}
+              <Group.Radio @value={{format.key}}>
+                {{if format.label format.label (if this.onlyDate format.dateFormat format.dateTimeFormat)}}
+              </Group.Radio>
+            {{/each}}
+            {{#if this.isCustomAllowed}}
+              <Group.Radio @value="custom">
+                {{t "date-plugin.card.custom-date" }}
+              </Group.Radio>
+            {{/if}}
+          </AuRadioGroup>
           {{#if (eq this.dateFormatType "custom")}}
             <AuFormRow @alignment="post">
-              <AuButton @skin="secondary" @icon="info-circle"
+              <AuButton @skin="secondary" @icon={{this.InfoCircleIcon}}
                 {{on 'click' this.toggleHelpModal}}>
               </AuButton>
               <AuNativeInput
@@ -80,7 +76,7 @@
               />
             </AuFormRow>
             {{#if this.humanError}}
-              <AuPill @skin="error" @icon="cross">{{this.humanError}}</AuPill>
+              <AuPill @skin="error" @icon={{this.CrossIcon}}>{{this.humanError}}</AuPill>
             {{/if}}
           {{/if}}
         </div>
@@ -88,4 +84,4 @@
     </AuCard>
   {{/if}}
 </div>
-<VariablePlugin::Date::HelpModal @modalOpen={{this.helpModalOpen}} @closeModal={{this.toggleHelpModal}} />
+<VariablePlugin::Date::HelpModal @modalOpen={{this.helpModalOpen}} @closeModal={{this.toggleHelpModal}} />

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

@@ -23,6 +23,8 @@ import {
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 import { Velcro } from 'ember-velcro';
+import { InfoCircleIcon } from '@appuniversum/ember-appuniversum/components/icons/info-circle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 
 type Args = {
   controller: SayController;
@@ -30,6 +32,8 @@ type Args = {
 };
 const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class DateEditComponent extends Component<Args> {
+  CrossIcon = CrossIcon;
+  InfoCircleIcon = InfoCircleIcon;
   Velcro = Velcro;
 
   @service

package/addon/components/variable-plugin/date/help-modal.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuModal
   @title={{t 'date-plugin.help.title'}}
   @closeModal={{@closeModal}}

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput
     @label={{this.label}}

package/addon/components/variable-plugin/date/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"
     {{on 'click' this.insert}}>

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

@@ -4,12 +4,15 @@ import { service } from '@ember/service';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import { v4 as uuidv4 } from 'uuid';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
 };
 
 export default class DateInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

@@ -1,4 +1,5 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable atomic" {{on 'click' this.onClick}}>
+{{! @glint-nocheck: not typesafe yet }}
+<AuPill @icon={{this.PencilIcon}} @iconAlignment="right" class="variable atomic" {{on 'click' this.onClick}}>
 
   {{this.humanReadableDate}}
   {{#if @node.attrs.label}}

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

@@ -13,6 +13,7 @@ import {
   formatDate,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -25,6 +26,8 @@ type Args = {
 };
 
 export default class DateNodeviewComponent extends Component<Args> {
+  PencilIcon = PencilIcon;
+
   @service declare intl: IntlService;
 
   get controller() {

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard
     @flex={{true}}

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

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { type ComponentLike } from '@glint/template';
 import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { hasGroups } from '@lblod/ember-rdfa-editor/utils/node-utils';
 import { service } from '@ember/service';
@@ -8,7 +9,7 @@ import IntlService from 'ember-intl/services/intl';
 
 export type VariableConfig = {
   label: string;
-  component: typeof Component;
+  component: ComponentLike;
   options?: unknown;
 };
 

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

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

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput 
     @value={{this.label}}