@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

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}}

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

@@ -0,0 +1,7 @@
+{{! @glint-nocheck: not typesafe yet }}
+<SnippetPlugin::SnippetInsert
+  @config={{this.config}}
+  @controller={{this.controller}}
+  @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+  @disabled={{not this.showInsert}}
+/>

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

@@ -0,0 +1,78 @@
+import { isResourceNode } from '@lblod/ember-rdfa-editor/utils/node-utils';
+import Component from '@glimmer/component';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
+import {
+  getAssignedSnippetListsIdsFromProperties,
+  getSnippetListIdsProperties,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+
+interface Args {
+  controller: SayController;
+  config: SnippetPluginConfig;
+  node: ResolvedPNode;
+}
+
+export default class SnippetInsertRdfaComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get config() {
+    return this.args.config;
+  }
+
+  get node() {
+    return this.args.node;
+  }
+
+  get showInsert() {
+    return this.assignedSnippetListsIds.length > 0;
+  }
+
+  get snippetListIdsProperty(): OutgoingTriple[] | undefined {
+    const activeNode = this.node.value;
+    const activeNodeSnippetListIds = getSnippetListIdsProperties(activeNode);
+
+    if (activeNodeSnippetListIds.length > 0) {
+      return activeNodeSnippetListIds;
+    }
+
+    const doc = this.controller.mainEditorState.doc;
+
+    if (this.node.pos < 0) {
+      return undefined;
+    }
+
+    const pos = doc.resolve(this.node.pos);
+
+    let parentNode = findParentNodeClosestToPos(pos, (node) =>
+      isResourceNode(node),
+    );
+
+    while (parentNode) {
+      const properties = getSnippetListIdsProperties(parentNode.node);
+
+      if (properties.length > 0) {
+        return properties;
+      }
+
+      parentNode = findParentNodeClosestToPos(
+        doc.resolve(parentNode.pos),
+        (node) => isResourceNode(node),
+      );
+    }
+
+    return undefined;
+  }
+
+  get assignedSnippetListsIds(): string[] {
+    return getAssignedSnippetListsIdsFromProperties(
+      this.snippetListIdsProperty,
+    );
+  }
+}

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

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

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

@@ -1,18 +1,28 @@
 import { action } from '@ember/object';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { ProseParser, SayController, Slice } from '@lblod/ember-rdfa-editor';
+import { htmlToDoc } from '@lblod/ember-rdfa-editor/utils/_private/html-utils';
+import {
+  ProseParser,
+  SayController,
+  Slice,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
 interface Args {
   controller: SayController;
   config: SnippetPluginConfig;
   assignedSnippetListsIds: string[];
+  disabled?: boolean;
 }
 
 export default class SnippetInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
   @tracked showModal = false;
 
   get controller() {
@@ -51,15 +61,26 @@ export default class SnippetInsertComponent extends Component<Args> {
     const documentDiv = parsed.querySelector('div[data-say-document="true"]');
 
     this.closeModal();
+    const parser = ProseParser.fromSchema(this.controller.schema);
 
     if (documentDiv) {
-      return this.controller.withTransaction((tr) =>
-        tr.replaceSelection(this.createSliceFromElement(documentDiv)),
-      );
+      return this.controller.withTransaction((tr: Transaction) => {
+        return tr.replaceSelectionWith(
+          htmlToDoc(content, {
+            schema: this.controller.schema,
+            parser,
+            editorView: this.controller.mainEditorView,
+          }),
+        );
+      });
     }
 
     this.controller.withTransaction((tr) =>
       tr.replaceSelection(this.createSliceFromElement(parsed)),
     );
   }
+
+  get disabled() {
+    return this.args.disabled ?? false;
+  }
 }

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-modal.ts

@@ -12,6 +12,7 @@ import {
   SnippetPluginConfig,
   SnippetList,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { trackedReset } from 'tracked-toolbox';
 
 interface Args {
   config: SnippetPluginConfig;
@@ -27,9 +28,8 @@ export default class SnippetListModalComponent extends Component<Args> {
   // Display
   @tracked error: unknown;
 
-  @tracked assignedSnippetListsIds: string[] = [
-    ...this.args.assignedSnippetListsIds,
-  ];
+  @trackedReset('args.assignedSnippetListsIds')
+  assignedSnippetListsIds: string[] = [...this.args.assignedSnippetListsIds];
 
   get config() {
     return this.args.config;

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-rdfa.hbs

@@ -0,0 +1,8 @@
+{{! @glint-nocheck: not typesafe yet }}
+{{#if this.isResourceNode}}
+<SnippetPlugin::SnippetListSelect
+  @config={{this.config}}
+  @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+  @onSaveSnippetListIds={{this.saveChanges}}
+/>
+{{/if}}