@lblod/ember-rdfa-editor-lblod-plugins 26.5.0 → 27.0.0

package/CHANGELOG.md

@@ -1,5 +1,146 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 27.0.0
+
+### Major Changes
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: adjustments to `roadsign-regulation-plugin/roadsigns-table` component
+
+  - converted to `gts` format
+  - component signature changed to:
+    ```ts
+    type Signature = {
+      Args: {
+        options: RoadsignRegulationPluginOptions;
+        content?: MobilityMeasureConcept[];
+        isLoading?: boolean;
+        insert: InsertMobilityMeasureTask;
+      };
+    };
+    ```
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: adjustments to `roadsign-regulation-plugin/roadsigns-modal` component
+
+  - converted to `gts` format
+  - usage of more modern data-fetching practices (using `ember-concurrency` and `reactiveweb`)
+  - rewired to use new query functions and `zod` schemas
+  - inclusion of search on the content of mobility measure concepts
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`e07b07b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e07b07baa5d1f2da1186059c119a5fd050d8b5b2) Thanks [@elpoelma](https://github.com/elpoelma)! - Rework pagination of `roadsign-regulation` plugin:
+
+  - Removal of `roadsign-regulation-plugin/roadsigns-pagination` components.
+    This component has been replaced by the more generic `pagination/pagination-view` component.
+  - Slightly rework the pagination of the `fetchMeasures` task:
+    - It accepts an (optional) `pageNumber` instead of a `pageStart` argument
+    - It accepts an (optional) `pageSize` argument (default: 10)
+
+- [#542](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/542) [`ac240e5`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/ac240e5246e7c1e611718e1ff8804d8a9023a5f4) Thanks [@piemonkey](https://github.com/piemonkey)! - Update to Ember v2 addon version of @lblod/ember-rdfa-editor
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `variables` plugin: follow new data model defined at https://data.test-vlaanderen.be/doc/applicatieprofiel/besluit-mobiliteit/#Variabele
+  Variable types/node-specs included are:
+
+  - `text_variable`
+  - `number`
+  - `date`
+  - `autofilled`
+  - `codelist`
+  - `location`
+
+  Additionally, some internal improvements are added to make maintainability of variables easier.
+  Older variable formats are automatically converted to the new format.
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`8259870`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8259870261f988183db032f75f347fe0c8856112) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove `insertArticle` prosemirror command in favour of `insertArticle` transaction-monad
+
+- [#529](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/529) [`728b90e`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/728b90ee4c49548207935cbbb6d9977cbdd9f5cf) Thanks [@elpoelma](https://github.com/elpoelma)! - Adapt `confidentiality-plugin` SASS stylesheet:
+
+  - Remove dependency on legacy 'rdfa-annotation' system
+  - Introduction of 'say-redacted' class
+
+- [#529](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/529) [`1ecae64`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/1ecae645888566e79c805fc67d6a8eb5d0e945d4) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove obsolete/unused `article-structure-plugin` SASS stylesheet
+  This obsolete stylesheet was used with the (older) `article-structure-plugin` and relied on the legacy 'rdfa-annotation' system.
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: adjustments to `roadsign-regulation-plugin/measure-template` component
+
+  - converted to `gts` format
+  - renamed to `roadsign-regulation-plugin/measure-preview`
+  - component signature has changed to:
+    ```ts
+    type Args = {
+      concept: MobilityMeasureConcept;
+      limitText?: boolean;
+    };
+    ```
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: reworked data-fetching logic
+
+  - removal of obsolete `roadsign-registry` ember service
+  - introduction of seperate SPARQL queries to fetch necessary resources/data
+  - introduction of [zod](https://zod.dev/) schemas to replace previously used `model` definitions
+  - follows new datamodel defined at https://data.test-vlaanderen.be/doc/applicatieprofiel/besluit-mobiliteit/
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: reworked mobility measure node
+
+  - `roadsign_regulation` node is no longer used (but still supported for legacy reasons)
+  - mobility measure is now represented by generic `block_rdfa` and `inline_rdfa` nodes
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: adjustments to `roadsign-regulation-plugin/expanded-measure` component
+
+  - converted to the `gts` format
+  - component signature has changed to:
+    ```ts
+    type Signature = {
+      Args: {
+        concept: MobilityMeasureConcept;
+        selectRow: (uri: string) => void;
+        insert: InsertMobilityMeasureTask;
+        endpoint: string;
+      };
+    };
+    ```
+
+- [#535](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/535) [`8a014cc`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8a014ccdde85c4797f376f638ff422658f4a1210) Thanks [@piemonkey](https://github.com/piemonkey)! - Update `@lblod/ember-rdfa-editor` peerdependency requirement to `^11.0.0`
+
+- [#529](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/529) [`695d57b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/695d57ba0344e6bc5c4cad2f5f133998003322c0) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove obsolete `document-title-plugin` SASS stylesheet
+  This stylesheet relied on the legacy rdfa-annotations system
+
+- [#529](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/529) [`aadb6a5`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/aadb6a512aba9ff98cf974fe5160d2374d144915) Thanks [@elpoelma](https://github.com/elpoelma)! - Adapt `snippet-plugin` SASS stylesheet:
+
+  - Remove dependency on legacy 'rdfa-annotation' system
+
+- [#529](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/529) [`75ccd64`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/75ccd64fb0042014d947147dc38f2f2302d001c8) Thanks [@elpoelma](https://github.com/elpoelma)! - Adapt `citation-plugin` SASS stylesheet:
+
+  - Remove dependency on legacy 'rdfa-annotation' system
+  - Introduction of `say-citation-hint` class
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`d9b41c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d9b41c088a3c8cbc1ba78bd75adb08105b8611bc) Thanks [@elpoelma](https://github.com/elpoelma)! - `roadsign-regulation` plugin: reworked to follow new `mobiliteit` data model defined at https://data.test-vlaanderen.be/doc/applicatieprofiel/besluit-mobiliteit/
+  The rework includes:
+  - adjustments to data fetching
+  - adjustments to mobility measure editor node
+  - adjustments to inner workings of the related ember components
+
+### Minor Changes
+
+- [#535](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/535) [`fec93c3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/fec93c3f34c09dae564d22a4b9b843c839190458) Thanks [@piemonkey](https://github.com/piemonkey)! - Move article structure plugin to use the structure plugin
+
+- [#538](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/538) [`53bec98`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/53bec988d44c6324b2770b748d2f3d35e2f21d1d) Thanks [@piemonkey](https://github.com/piemonkey)! - Migrate use of article-structure-plugin to structure-plugin if that plugin is present (and has higher priority in the list of node specs in the schema).
+
+- [#539](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/539) [`b1e8d74`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b1e8d74f12088bcbb5072f786114fb498fe2e505) Thanks [@piemonkey](https://github.com/piemonkey)! - Remove unused code from article-structure-plugin
+  :warning: breaks the functionality of the table-of-contents-plugin
+
+- [#539](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/539) [`826b697`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/826b69736e87cab82c9d08860eace57681cb0ab9) Thanks [@piemonkey](https://github.com/piemonkey)! - Move use of article-structure control-card to use the structure-plugin equivalent
+
+### Patch Changes
+
+- [#537](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/537) [`1f6b492`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/1f6b492123687269e731af84fa498aa6246b7dc4) Thanks [@piemonkey](https://github.com/piemonkey)! - Include ability to modify start numbers in structure plugin
+
+- [#540](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/540) [`5d29b74`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/5d29b7435fb064d2eb9c3bbd69ce93617bbcc2d1) Thanks [@abeforgit](https://github.com/abeforgit)! - Fix history and rendering issues when inserting structures
+
+- [#536](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/536) [`63a569a`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/63a569a57b83e8b74ebfb9d31ebfaaf4026adac3) Thanks [@abeforgit](https://github.com/abeforgit)! - Rework the css of the structures to make their behavior more intuitive
+
+- [#537](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/537) [`671a822`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/671a8229a88702f3098f5efc005f170ac5557333) Thanks [@piemonkey](https://github.com/piemonkey)! - Add support for moving article structures to generic structure plugin
+
+- [#534](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/534) [`be3ea0c`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/be3ea0cd4638918df2dff8912b78cfd28366137d) Thanks [@elpoelma](https://github.com/elpoelma)! - internal: modernize roadsigns-modal component using `trackedFunction`
+
 ## 26.5.0
 
 ### Minor Changes

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

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { not } from 'ember-truth-helpers';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/commands/insert-structure';
+import {
+  structureTypes,
+  type StructurePluginOptions,
+  type StructureType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/structure-types';
+import { capitalize } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
+
+type Args = {
+  controller: SayController;
+  options: StructurePluginOptions;
+};
+
+export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+  get uriGenerator() {
+    return this.args.options.uriGenerator ?? 'uuid4';
+  }
+
+  getTranslation = (type: StructureType) =>
+    capitalize(
+      this.intl.t('structure-plugin.insert', {
+        structureName: this.intl
+          .t(`structure-plugin.types.${type}`)
+          .toLocaleLowerCase(),
+      }),
+    );
+
+  @action
+  insertStructure(type: StructureType) {
+    this.args.controller.doCommand(insertStructure(type, this.uriGenerator), {
+      view: this.controller.mainEditorView,
+    });
+    this.args.controller.focus();
+  }
+
+  canInsertStructure = (type: StructureType) =>
+    this.args.controller.checkCommand(
+      insertStructure(type, this.uriGenerator),
+      {
+        view: this.controller.mainEditorView,
+      },
+    );
+
+  <template>
+    <div>
+      {{#each structureTypes as |structureType|}}
+        <li class='au-c-list__item'>
+          <AuButton
+            @icon={{AddIcon}}
+            @iconAlignment='left'
+            @skin='link'
+            @disabled={{not (this.canInsertStructure structureType)}}
+            {{on 'click' (fn this.insertStructure structureType)}}
+          >
+            {{this.getTranslation structureType}}
+          </AuButton>
+        </li>
+      {{/each}}
+    </div>
+  </template>
+}

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

@@ -0,0 +1,15 @@
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import StructureControlCardComponent from '../structure-plugin/control-card';
+
+interface Sig {
+  Args: { controller: SayController };
+}
+
+/** @deprecated This has been deprecated in favour of structure-plugin/control-card */
+const EditorPluginsStructureCardComponent: TemplateOnlyComponent<Sig> =
+  <template>
+    <StructureControlCardComponent @controller={{@controller}} />
+  </template>;
+
+export default EditorPluginsStructureCardComponent;

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

@@ -55,6 +55,10 @@ export default class DecisionPluginCard extends Component<Sig> {
       : null;
   }
 
+  get decisionUri(): string | undefined {
+    return this.decisionNodeLocation?.node.attrs.subject;
+  }
+
   @action
   focus() {
     this.controller.focus();
@@ -141,11 +145,11 @@ export default class DecisionPluginCard extends Component<Sig> {
   }
   @action
   insertArticleBlock() {
-    if (this.decisionNodeLocation) {
+    if (this.decisionUri) {
       this.controller.doCommand(
         insertArticleContainer({
           intl: this.intl,
-          decisionLocation: this.decisionNodeLocation,
+          decisionUri: this.decisionUri,
           articleUriGenerator: this.args.options?.articleUriGenerator,
         }),
         {

package/addon/components/decision-plugin/insert-article.gts

@@ -5,18 +5,18 @@ import Component from '@glimmer/component';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
-import insertArticle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands/insert-article-command';
 import { buildArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/utils/build-article-structure';
 import { not } from 'ember-truth-helpers';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { insertArticle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/actions/insert-article';
+import { StructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/structure-plugin/structure-types';
 
-export interface InsertArticleOptions {
-  uriGenerator?: () => string;
+export type InsertArticleOptions = StructurePluginOptions & {
   insertFreely?: boolean;
   /** Pass a decision URI instead of finding one in the document. Implies `insertFreely`. */
   decisionUri?: string;
-}
+};
 interface Sig {
   Args: {
     controller: SayController;
@@ -24,6 +24,7 @@ interface Sig {
     options?: InsertArticleOptions;
   };
 }
+
 export default class InsertArticleComponent extends Component<Sig> {
   @service declare intl: IntlService;
 
@@ -47,10 +48,8 @@ export default class InsertArticleComponent extends Component<Sig> {
     return getCurrentBesluitRange(this.controller);
   }
 
-  get decisionLocation() {
-    return this.decisionRange
-      ? { pos: this.decisionRange.from, node: this.decisionRange.node }
-      : null;
+  get decisionUri(): string | undefined {
+    return this.decisionRange?.node.attrs.subject;
   }
 
   get canInsertFreely() {
@@ -66,16 +65,17 @@ export default class InsertArticleComponent extends Component<Sig> {
   }
 
   get canInsertInDecision() {
-    if (!this.decisionLocation) {
+    if (!this.decisionUri) {
       return false;
     }
     const article = buildArticleStructure(
       this.schema,
       this.args.options?.uriGenerator,
     );
-    return this.controller.checkCommand(
-      insertArticle({ node: article, decisionLocation: this.decisionLocation }),
-    );
+    return insertArticle({
+      node: article,
+      decisionUri: this.decisionUri,
+    })(this.controller.mainEditorState).result;
   }
 
   @action
@@ -94,25 +94,32 @@ export default class InsertArticleComponent extends Component<Sig> {
 
   @action
   insertFreely(node: PNode) {
-    this.controller.doCommand(
-      insertArticle({
-        node,
-        insertFreely: true,
-      }),
+    this.controller.withTransaction(
+      () => {
+        return insertArticle({
+          node,
+          insertFreely: true,
+        })(this.controller.mainEditorState).transaction;
+      },
+      { view: this.controller.mainEditorView },
     );
     this.controller.focus();
   }
 
   @action
   insertInDecision(node: PNode) {
-    if (!this.decisionLocation) {
+    const { decisionUri } = this;
+    if (!decisionUri) {
       return;
     }
-    this.controller.doCommand(
-      insertArticle({
-        node,
-        decisionLocation: this.decisionLocation,
-      }),
+    this.controller.withTransaction(
+      () => {
+        return insertArticle({
+          node,
+          decisionUri,
+        })(this.controller.mainEditorState).transaction;
+      },
+      { view: this.controller.mainEditorView },
     );
     this.controller.focus();
   }

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

@@ -2,10 +2,10 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { tracked } from 'tracked-built-ins';
-import { basicSetup, EditorView } from 'codemirror';
+import { basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { html } from '@codemirror/lang-html';
-import { tooltips } from '@codemirror/view';
+import { EditorView, tooltips } from '@codemirror/view';
 import { HtmlPlusIcon } from '@appuniversum/ember-appuniversum/components/icons/html-plus';
 
 import { insertGenericRdfa } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/generic-rdfa-variable/commands/insert-generic-rdfa';

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

@@ -4,8 +4,20 @@ 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';
+import { TOC } from '@ember/component/template-only';
 
-<template>
+type Signature = {
+  Args: {
+    rangeStart: number;
+    rangeEnd: number;
+    totalCount: number;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+    onPreviousPage: () => void;
+    onNextPage: () => void;
+  };
+};
+const PaginationView: TOC<Signature> = <template>
   <div class='au-u-background-gray-100'>
     <AuToolbar @border='top' @size='large' @nowrap={{true}}>
       <div class='au-c-pagination'>
@@ -13,36 +25,29 @@ import { NavRightIcon } from '@appuniversum/ember-appuniversum/components/icons/
           <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'}}
@@ -52,4 +57,6 @@ import { NavRightIcon } from '@appuniversum/ember-appuniversum/components/icons/
       </div>
     </AuToolbar>
   </div>
-</template>
+</template>;
+
+export default PaginationView;

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

@@ -0,0 +1,156 @@
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import t from 'ember-intl/helpers/t';
+import MeasurePreview from './measure-preview';
+import AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
+import AuButtonGroup from '@appuniversum/ember-appuniversum/components/au-button-group';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { MobilityMeasureConcept } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/schemas/mobility-measure-concept';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { ZONALITY_OPTIONS } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/constants';
+import { Task } from 'ember-concurrency';
+
+export type InsertMobilityMeasureTask = Task<
+  void,
+  [
+    MobilityMeasureConcept,
+    typeof ZONALITY_OPTIONS.ZONAL | typeof ZONALITY_OPTIONS.NON_ZONAL,
+    boolean,
+  ]
+>;
+type Signature = {
+  Args: {
+    concept: MobilityMeasureConcept;
+    selectRow: (uri: string) => void;
+    insert: InsertMobilityMeasureTask;
+    endpoint: string;
+  };
+};
+
+export default class ExpandedMeasure extends Component<Signature> {
+  @tracked zonalityValue?:
+    | typeof ZONALITY_OPTIONS.ZONAL
+    | typeof ZONALITY_OPTIONS.NON_ZONAL;
+  @tracked temporalValue?: boolean;
+
+  get isPotentiallyZonal() {
+    return this.args.concept.zonality === ZONALITY_OPTIONS.POTENTIALLY_ZONAL;
+  }
+
+  get insertButtonDisabled() {
+    return this.isPotentiallyZonal && !this.zonalityValue;
+  }
+
+  @action
+  changeZonality(
+    zonality: typeof ZONALITY_OPTIONS.ZONAL | typeof ZONALITY_OPTIONS.NON_ZONAL,
+  ) {
+    this.zonalityValue = zonality;
+  }
+
+  @action
+  changeTemporality(temporality: 'true' | 'false') {
+    this.temporalValue = temporality === 'true';
+  }
+
+  @action
+  insert() {
+    this.args.insert.perform(
+      this.args.concept,
+      (this.zonalityValue ?? this.args.concept.zonality) as
+        | typeof ZONALITY_OPTIONS.ZONAL
+        | typeof ZONALITY_OPTIONS.NON_ZONAL,
+      this.temporalValue ?? false,
+    );
+  }
+
+  @action
+  unselectRow() {
+    this.args.selectRow(this.args.concept.uri);
+  }
+
+  <template>
+    <tr class='au-c-data-table__detail'>
+      <td colspan='5' class='au-o-flow au-o-flow--small'>
+        <AuHeading @level='6' @skin='6'>
+          {{t
+            'editor-plugins.roadsign-regulation.expanded-measure.insert-measure'
+          }}
+        </AuHeading>
+        <p>
+          <AuPill>
+            <MeasurePreview @concept={{@concept}} />
+          </AuPill>
+        </p>
+        {{#if this.isPotentiallyZonal}}
+          <AuHeading @level='6' @skin='6'>
+            {{t
+              'editor-plugins.roadsign-regulation.expanded-measure.select-zonality.label'
+            }}
+          </AuHeading>
+          <div class='au-c-form'>
+            <AuRadioGroup
+              @name='zonal'
+              @selected={{this.zonalityValue}}
+              @onChange={{this.changeZonality}}
+              as |Group|
+            >
+              <Group.Radio @value={{ZONALITY_OPTIONS.ZONAL}}>
+                {{t
+                  'editor-plugins.roadsign-regulation.expanded-measure.select-zonality.zonal'
+                }}
+              </Group.Radio>
+              <Group.Radio @value={{ZONALITY_OPTIONS.NON_ZONAL}}>
+                {{t
+                  'editor-plugins.roadsign-regulation.expanded-measure.select-zonality.non-zonal'
+                }}
+              </Group.Radio>
+            </AuRadioGroup>
+          </div>
+        {{/if}}
+        {{#if @concept.variableSignage}}
+          <AuHeading @level='6' @skin='6'>
+            {{t
+              'editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.label'
+            }}
+          </AuHeading>
+          <div class='au-c-form'>
+            <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>
+          <AuButton
+            {{on 'click' this.insert}}
+            @loading={{@insert.isRunning}}
+            @loadingMessage={{t 'common.loading'}}
+            @disabled={{this.insertButtonDisabled}}
+          >
+            {{t 'editor-plugins.utils.insert'}}
+          </AuButton>
+          <AuButton @skin='secondary' {{on 'click' this.unselectRow}}>
+            {{t 'editor-plugins.utils.cancel'}}
+          </AuButton>
+        </AuButtonGroup>
+      </td>
+    </tr>
+  </template>
+}

package/addon/components/roadsign-regulation-plugin/measure-preview.gts

@@ -0,0 +1,18 @@
+import limitText from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/limit-text';
+import { TOC } from '@ember/component/template-only';
+import { MobilityMeasureConcept } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/schemas/mobility-measure-concept';
+
+type Args = {
+  concept: MobilityMeasureConcept;
+  limitText?: boolean;
+};
+
+const MeasurePreview: TOC<Args> = <template>
+  {{#if @limitText}}
+    {{limitText @concept.preview}}
+  {{else}}
+    {{@concept.preview}}
+  {{/if}}
+</template>;
+
+export default MeasurePreview;