@lblod/ember-rdfa-editor-lblod-plugins 11.0.0 → 11.1.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.1.0] - 2023-08-29
+
+### Fixed
+- GN-4370: Do not allow header nodes to be split by table
+- Grey out Generic RDFA button in embedded view
+- GN-4425: Smarter content wrapping for structure nodes
+
+### Changed
+- GN-4442: template comments can move up and down over the *whole* document
+- GN-4322: Add ORDER to snippet list query 
+- Bumps `@lblod/ember-rdfa-editor` from 5.1.0 to 5.2.0
+
 ## [11.0.0] - 2023-08-22
 
 ### Added
@@ -15,8 +27,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Introduce internationalization in the table of contents node based on the document language.
 - The whole table of contents node (include its entries) is now exported in its `serialize` method without the need of an `entries` attribute.
 - GN-4461: update readme to specify needed imports for template comment
+- Check validity on number minimum/maximum inputs
 
 ### Changed
+- GN-4263: update address variable edit UI/UX according to updated design
+- Allow the address municipality-edit field to be prefilled
 - Use one-way-binding in variable label input
 - Use one-way-binding in number variable inputs
 - Manage snippet list connection with template
@@ -29,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removal of the `entries` attribute from the table-of-contents prosemirror node. The node can now generate it's own outline in its `serialize` method.
 ### Dependencies
 - Bumps `@codemirror/view` from 6.12.0 to 6.16.0
+- Bumps `@lblod/ember-rdfa-editor` from 4.2.0 to 5.1.0
 
 ## [10.0.0] - 2023-08-08
 ### Changed
@@ -675,7 +691,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.0.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.1.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -691,6 +707,7 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[11.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.0.0...v11.1.0
 [11.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...v11.0.0
 [10.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.1...v10.0.0
 [9.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.0...v9.1.1

package/README.md

@@ -665,9 +665,13 @@ get codelistEditOptions() {
 This addon provides a seperate edit component which allows users to search for an address and update the select address variable. Additionally, they can also choose whether to include the housenumber of an address.
 You can add this edit-component to a template as follows:
 ```hbs
-<VariablePlugin::Address::Edit @controller={{this.controller}}/>
+<VariablePlugin::Address::Edit @controller={{this.controller}} @defaultMuncipality='Antwerpen'/>
 ```
 
+The edit card can be configured with two arguments:
+- An instance of a `SayController` (required)
+- A `defaultMuncipality` which should be used as the default value of the `muncipality` field in the edit-card (optional)
+
 ## validation-plugin
 
 see [the plugin docs](addon/plugins/validation/README.md)

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

@@ -2,6 +2,7 @@
   @title={{t 'generic-rdfa-variable.menu.insert'}}
   @icon='html-plus'
   {{on 'click' this.showModal}}
+  @disabled={{not this.canInsert}}
 />
 <AuModal
   @modalOpen={{this.modalOpen}}

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

@@ -3,13 +3,13 @@ import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { tracked } from 'tracked-built-ins';
 
-import { DOMParser as ProseParser } from 'prosemirror-model';
-
 import { basicSetup, EditorView } from 'codemirror';
 import { EditorState } from '@codemirror/state';
 import { html } from '@codemirror/lang-html';
 import { tooltips } from '@codemirror/view';
 
+import { insertGenericRdfa } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/generic-rdfa-variable/commands/insert-generic-rdfa';
+
 type Args = {
   controller: SayController;
 };
@@ -26,6 +26,14 @@ export default class GenericRdfaVariableInsertMenu extends Component<Args> {
     return this.args.controller.schema;
   }
 
+  get canInsert() {
+    if (this.controller.inEmbeddedView) {
+      return false;
+    }
+
+    return this.controller.checkCommand(insertGenericRdfa(''));
+  }
+
   @action
   showModal() {
     this.modalOpen = true;
@@ -82,14 +90,8 @@ export default class GenericRdfaVariableInsertMenu extends Component<Args> {
       return;
     }
 
-    const domParser = new DOMParser();
-
-    this.controller.withTransaction((tr) => {
-      return tr.replaceSelectionWith(
-        ProseParser.fromSchema(this.schema).parse(
-          domParser.parseFromString(editorContent, 'text/html'),
-        ),
-      );
+    this.args.controller.doCommand(insertGenericRdfa(editorContent), {
+      view: this.controller.mainEditorView,
     });
 
     this.closeModal();

package/addon/components/loading-alert.hbs

@@ -0,0 +1,28 @@
+{{#if this.isVisible}}
+  <div
+    class="au-c-alert {{this.skin}} {{this.size}}"
+    role="alert"
+    data-test-alert
+    ...attributes
+  >
+    <AuLoader/>
+    <div class="au-c-alert__content">
+      {{#if @title}}
+        <p class="au-c-alert__title" data-test-alert-title>{{@title}}</p>
+      {{/if}}
+      <div class="au-c-alert__message" data-test-alert-message>{{yield}}</div>
+    </div>
+    {{#if @closable}}
+      <button
+        class="au-c-alert__close"
+        type="button"
+        data-test-alert-close
+        {{on "click" this.closeAlert}}
+      >
+        <AuIcon @icon="cross" @size="large" />
+        {{!-- template-lint-disable no-bare-strings --}}
+        <span class="au-u-hidden-visually">Sluit alert</span>
+      </button>
+    {{/if}}
+  </div>
+{{/if}}

package/addon/components/loading-alert.ts

@@ -0,0 +1,3 @@
+//@ts-expect-error ember-appuniversum uses vanilla javascript
+import AuAlertComponent from '@appuniversum/ember-appuniversum/components/au-alert';
+export default class LoadingAlertComponent extends AuAlertComponent {}

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

@@ -2,7 +2,14 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor/addon';
 import { TextSelection } from '@lblod/ember-rdfa-editor';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import {
+  findParentNodeOfType,
+  hasParentNodeOfType,
+} from '@curvenote/prosemirror-utils';
+import {
+  findContentMatchPosLeft,
+  findContentMatchPosRight,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-contentmatch';
 
 type Args = {
   controller: SayController;
@@ -43,17 +50,22 @@ export default class TemplateCommentsPluginEditCardComponent extends Component<A
     const comment = this.templateComment;
     if (!comment) return;
     const { node: node, pos: pos } = comment;
-    const resolvedPos = this.controller.mainEditorState.doc.resolve(pos);
-    const nodeBefore = resolvedPos.nodeBefore;
-    if (!nodeBefore) return;
-    const amountToMove = -nodeBefore.nodeSize;
+    const insertPos = findContentMatchPosLeft(
+      this.controller.mainEditorState.doc,
+      pos,
+      this.commentType,
+      ($pos) =>
+        !hasParentNodeOfType(this.commentType)(new TextSelection($pos, $pos)),
+    );
+    if (insertPos === undefined) return;
+
+    const amountToMove = -(pos - insertPos);
     const initialCursorPos =
       this.controller.mainEditorState.selection.$head.pos;
-    const newPos = pos + amountToMove;
     const newCursorPos = initialCursorPos + amountToMove;
     this.controller.withTransaction((tr) => {
       tr.delete(pos, pos + node.nodeSize);
-      tr.insert(newPos, node);
+      tr.insert(insertPos, node);
       const mappedSelection = TextSelection.create(
         tr.doc,
         newCursorPos,
@@ -72,21 +84,32 @@ export default class TemplateCommentsPluginEditCardComponent extends Component<A
     if (!comment) return;
 
     const { node: commentNode, pos: startPos } = comment;
-    const posAfterComment = startPos + commentNode.nodeSize;
-    const resolvedPos =
-      this.controller.mainEditorState.doc.resolve(posAfterComment);
-    const nodeAfterComment = resolvedPos.nodeAfter;
-    if (!nodeAfterComment) return;
+    const searchStart = startPos + commentNode.nodeSize;
+    const $afterPos = this.controller.mainEditorState.doc.resolve(searchStart);
+
+    // lists in template comments can have any content, including template comments...
+    // This means we have to avoid moving inside a template comment, as the contentMatch would be valid
+    const posToInsert = findContentMatchPosRight(
+      this.controller.mainEditorState.doc,
+      $afterPos,
+      commentNode.type,
+      (pos) => {
+        const $pos = this.controller.mainEditorState.doc.resolve(pos);
+        return !hasParentNodeOfType(this.commentType)(
+          new TextSelection($pos, $pos),
+        );
+      },
+    );
 
-    const amountToMove = commentNode.nodeSize + nodeAfterComment.nodeSize;
+    if (posToInsert === undefined) return;
+    const amountToMove = posToInsert - startPos;
 
-    const newPos = startPos + amountToMove;
     const initialCursorPos =
       this.controller.mainEditorState.selection.$head.pos;
     const newCursorPos = initialCursorPos + amountToMove;
 
     this.controller.withTransaction((tr) => {
-      tr.insert(newPos, commentNode);
+      tr.insert(posToInsert, commentNode);
       // do delete after setting the selection,
       //so the selection position can be easily constructed
       const mappedSelection = TextSelection.create(

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

@@ -1,35 +1,85 @@
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @shadow={{true}} @size="small" as |c|>
     <c.content>
-      <AuLabel for='address-select'>
-        {{t "editor-plugins.address.edit.title"}}
-      </AuLabel>
-      <PowerSelect
-        id="adress-select"
-        @loadingMessage={{t "editor-plugins.utils.loading"}}
-        @searchMessage={{t "editor-plugins.address.edit.search-message"}}
-        @noMatchesMessage={{t "editor-plugins.address.edit.no-results"}}
-        @placeholder={{if this.includeHouseNumber 
-                          (t "editor-plugins.address.edit.placeholder-with-number") 
-                          (t "editor-plugins.address.edit.placeholder-without-number")}}
-        @renderInPlace={{true}}
-        @searchEnabled={{true}}
-        @search={{perform this.searchAddress}}
-        @selected={{this.selectedAddress}}
-        @onChange={{this.selectAddress}} as |address|>
-        {{address.formatted}}
-      </PowerSelect>
-      <AuToggleSwitch
-        @checked={{this.includeHouseNumber}}
-        @onChange={{this.toggleIncludeHouseNumber}}
-        @label={{t "editor-plugins.address.edit.include-housenumber"}}
-      />
-      <AuButton 
-        {{on 'click' (perform this.updateAddressVariable)}} 
-        @disabled={{not this.canUpdate}}
-        @loading={{this.updateAddressVariable.isRunning}}>
-        {{t "editor-plugins.utils.insert"}}
-      </AuButton>
+      <form class="au-c-form">
+        <AuLabel for='municipality-select'>
+          {{t "editor-plugins.address.edit.municipality.label"}}*
+        </AuLabel>
+        <PowerSelect
+          id="municipality-select"
+          @loadingMessage={{t "editor-plugins.utils.loading"}}
+          @searchMessage={{t "editor-plugins.address.edit.municipality.search-message"}}
+          @noMatchesMessage={{t "editor-plugins.address.edit.municipality.no-results"}}
+          @placeholder={{t "editor-plugins.address.edit.municipality.placeholder"}}
+          @renderInPlace={{true}}
+          @searchEnabled={{true}}
+          @search={{perform this.searchMunicipality}}
+          @selected={{this.newMunicipality}}
+          @onChange={{this.selectMunicipality}} as |municipality|>
+          {{municipality}}
+        </PowerSelect>
+        <AuLabel for='streetname-select'>
+          {{t "editor-plugins.address.edit.street.label"}}*
+        </AuLabel>
+        <PowerSelect
+          id="streetname-select"
+          @loadingMessage={{t "editor-plugins.utils.loading"}}
+          @searchMessage={{t "editor-plugins.address.edit.street.search-message"}}
+          @noMatchesMessage={{t "editor-plugins.address.edit.street.no-results"}}
+          @placeholder={{t "editor-plugins.address.edit.street.placeholder"}}
+          @renderInPlace={{true}}
+          @searchEnabled={{true}}
+          @search={{perform this.searchStreet}}
+          @selected={{this.newStreetName}}
+          @disabled={{not this.canUpdateStreet}}
+          @onChange={{this.selectStreet}} as |street|>
+          {{street}}
+        </PowerSelect>
+        <div class="au-o-grid au-o-grid--tiny">
+          <div class="au-o-grid__item au-u-1-2@medium">
+            <AuLabel for="housenumber-select">
+              {{t "editor-plugins.address.edit.housenumber.label"}}
+            </AuLabel>
+            <AuNativeInput 
+              id="housenumber-select"
+              placeholder={{t "editor-plugins.address.edit.housenumber.placeholder"}}
+              @width="block"  
+              value={{this.newHousenumber}} 
+              @disabled={{not this.canUpdateHousenumber}}
+              {{on 'input' this.updateHousenumber}}
+            />
+          </div>
+          <div class="au-o-grid__item au-u-1-2@medium">
+            <AuLabel for="busnumber-select">
+              {{t "editor-plugins.address.edit.busnumber.label"}}
+            </AuLabel>
+            <AuNativeInput 
+              id="busnumber-select"
+              placeholder={{t "editor-plugins.address.edit.busnumber.placeholder"}}
+              @width="block"  
+              value={{this.newBusnumber}} 
+              @disabled={{not this.canUpdateBusnumber}}
+              {{on 'input' this.updateBusnumber}}
+            />
+          </div>
+        </div>
+        
+        {{#if this.newAddress.isRunning}}
+          <LoadingAlert @title={{t "editor-plugins.address.edit.loading"}} @size="small" @skin="info"/>
+        {{/if}}
+        {{#if this.message}}
+          <AuAlert @skin={{this.message.skin}} @icon={{this.message.icon}} @title={{this.message.title}}>
+            {{this.message.body}}
+          </AuAlert>
+        {{/if}}
+        <AuButton 
+          {{on 'click' this.updateAddressVariable}} 
+          @disabled={{not this.canUpdateAddressVariable}}>
+          {{t "editor-plugins.utils.insert"}}
+        </AuButton>
+        
+      </form>
+      
     </c.content>
   </AuCard>
 {{/if}}

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

@@ -3,43 +3,101 @@ import Component from '@glimmer/component';
 import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
 import {
-  fetchAddresses,
+  AddressError,
+  fetchMunicipalities,
+  fetchStreets,
   resolveAddress,
+  resolveStreet,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
-import { dropTask, restartableTask, timeout } from 'ember-concurrency';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { localCopy, trackedReset } from 'tracked-toolbox';
+import { trackedTask } from 'ember-resources/util/ember-concurrency';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
 
 type Args = {
   controller: SayController;
+  defaultMunicipality?: string;
 };
 
 export default class AddressEditComponent extends Component<Args> {
-  @localCopy('currentAddress')
-  selectedAddress?: Address;
+  @service declare intl: IntlService;
 
-  @trackedReset<AddressEditComponent, boolean>({
+  @trackedReset<AddressEditComponent, string | undefined>({
     memo: 'currentAddress',
-    update(component, _key, last) {
-      if (component.currentAddress) {
-        return component.currentAddress.hasHouseNumber;
-      } else {
-        return last;
-      }
+    update(component) {
+      const { currentMunicipality } = component;
+      return currentMunicipality
+        ? currentMunicipality
+        : component.args.defaultMunicipality;
     },
   })
-  includeHouseNumber = true;
+  newMunicipality?: string;
 
-  @action
-  toggleIncludeHouseNumber() {
-    this.includeHouseNumber = !this.includeHouseNumber;
-    this.selectedAddress = undefined;
+  @localCopy('currentStreetName') newStreetName?: string;
+
+  @localCopy('currentHousenumber') newHousenumber?: string;
+
+  @localCopy('currentBusnumber') newBusnumber?: string;
+
+  get message() {
+    const value = this.newAddress.value as Address | undefined;
+    if (
+      this.newAddress.isSuccessful &&
+      value &&
+      !value.sameAs(this.currentAddress)
+    ) {
+      return {
+        skin: 'success',
+        icon: 'check',
+        title: this.intl.t('editor-plugins.address.edit.success.address-found'),
+        body: value.formatted,
+      };
+    } else if (
+      this.newAddress.isError &&
+      this.newAddress.error instanceof AddressError
+    ) {
+      const { error } = this.newAddress;
+      return {
+        skin: 'warning',
+        icon: 'alert-triangle',
+        title: this.intl.t(error.translation, { status: error.status }),
+        body: this.intl.t('editor-plugins.address.edit.errors.contact', {
+          htmlSafe: true,
+          email: 'gelinktnotuleren@vlaanderen.be',
+        }),
+      };
+    } else {
+      return;
+    }
   }
 
   get currentAddress() {
-    return this.selectedAddressVariable?.node.attrs.address as
-      | Address
-      | undefined
-      | null;
+    return this.selectedAddressVariable?.node.attrs.value as Address | null;
+  }
+
+  get currentMunicipality() {
+    return this.currentAddress?.municipality;
+  }
+
+  get currentStreetName() {
+    return this.currentAddress?.street;
+  }
+
+  get currentHousenumber() {
+    if (this.currentAddress instanceof Address) {
+      return this.currentAddress.housenumber;
+    } else {
+      return;
+    }
+  }
+
+  get currentBusnumber() {
+    if (this.currentAddress instanceof Address) {
+      return this.currentAddress.busnumber;
+    } else {
+      return;
+    }
   }
 
   get selectedAddressVariable() {
@@ -53,44 +111,123 @@ export default class AddressEditComponent extends Component<Args> {
     return;
   }
 
+  get canUpdateStreet() {
+    return !!this.newMunicipality;
+  }
+
+  get canUpdateHousenumber() {
+    return this.newMunicipality && this.newStreetName;
+  }
+
+  get canUpdateBusnumber() {
+    return this.newMunicipality && this.newStreetName && this.newHousenumber;
+  }
+
   get showCard() {
     return !!this.selectedAddressVariable;
   }
 
-  get canUpdate() {
+  get canUpdateAddressVariable() {
     return (
-      !!this.selectedAddress &&
-      !this.selectedAddress.sameAs(
-        this.selectedAddressVariable?.node.attrs.address as Address | undefined,
-      )
+      this.newAddress.isSuccessful &&
+      this.newAddress.value &&
+      !this.currentAddress?.sameAs(this.newAddress.value as Address)
     );
   }
 
-  updateAddressVariable = dropTask(async () => {
-    if (this.selectedAddressVariable && this.selectedAddress) {
-      const { pos } = this.selectedAddressVariable;
+  resolveAddressTask = restartableTask(async () => {
+    const { newStreetName, newMunicipality, newHousenumber, newBusnumber } =
+      this;
+    if (newMunicipality && newStreetName) {
+      if (
+        this.currentAddress?.sameAs({
+          street: newStreetName,
+          municipality: newMunicipality,
+          busnumber: newBusnumber,
+          housenumber: newHousenumber,
+        })
+      ) {
+        return this.currentAddress;
+      } else {
+        await timeout(200);
+        if (newHousenumber) {
+          return resolveAddress({
+            street: newStreetName,
+            municipality: newMunicipality,
+            housenumber: newHousenumber,
+            busnumber: newBusnumber,
+          });
+        } else {
+          return resolveStreet({
+            street: newStreetName,
+            municipality: newMunicipality,
+          });
+        }
+      }
+    } else {
+      return;
+    }
+  });
+
+  newAddress = trackedTask(this, this.resolveAddressTask, () => [
+    this.newMunicipality,
+    this.newStreetName,
+    this.newHousenumber,
+    this.newBusnumber,
+  ]);
 
-      const address =
-        this.includeHouseNumber && this.selectedAddress.hasHouseNumber
-          ? await resolveAddress(this.selectedAddress)
-          : this.selectedAddress;
+  @action
+  updateAddressVariable() {
+    if (this.selectedAddressVariable && this.newAddress.isSuccessful) {
+      const { pos } = this.selectedAddressVariable;
       this.controller.withTransaction((tr) => {
-        return tr.setNodeAttribute(pos, 'address', address);
+        return tr.setNodeAttribute(pos, 'value', this.newAddress.value);
       });
     }
-  });
+  }
 
   @action
-  selectAddress(address: Address) {
-    this.selectedAddress = address;
+  selectMunicipality(municipality: string) {
+    this.newMunicipality = municipality;
+    this.newStreetName = '';
+    this.newHousenumber = '';
+    this.newBusnumber = '';
+  }
+
+  @action
+  selectStreet(street: string) {
+    this.newStreetName = street;
+    this.newHousenumber = '';
+    this.newBusnumber = '';
+  }
+
+  @action
+  updateHousenumber(event: InputEvent) {
+    this.newHousenumber = (event.target as HTMLInputElement).value;
+    this.newBusnumber = '';
+  }
+
+  @action
+  updateBusnumber(event: InputEvent) {
+    this.newBusnumber = (event.target as HTMLInputElement).value;
   }
 
   get controller() {
     return this.args.controller;
   }
 
-  searchAddress = restartableTask(async (term: string) => {
-    await timeout(400);
-    return fetchAddresses(term, this.includeHouseNumber);
+  searchMunicipality = restartableTask(async (term: string) => {
+    await timeout(200);
+    return fetchMunicipalities(term);
+  });
+
+  searchStreet = restartableTask(async (term: string) => {
+    if (this.newMunicipality) {
+      await timeout(200);
+      const streets = await fetchStreets(term, this.newMunicipality);
+      return streets;
+    } else {
+      return [];
+    }
   });
 }

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

@@ -14,7 +14,7 @@ export default class AddressNodeviewComponent extends Component<Args> {
   }
 
   get address() {
-    return this.node.attrs.address as Address | null;
+    return this.node.attrs.value as Address | null;
   }
 
   @action

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

@@ -12,6 +12,7 @@
         id={{id}}
         value={{this.minimumValue}}
         {{on 'input' this.updateMinimumValue}}
+        {{this.minimumInput}}
         placeholder={{t 'variable-plugin.number.minimum-placeholder'}}
         @width='block'
         @type="number"
@@ -28,6 +29,7 @@
         id={{id}}
         value={{this.maximumValue}}
         {{on 'input' this.updateMaximumValue}}
+        {{this.maximumInput}}
         placeholder={{t 'variable-plugin.number.maximum-placeholder'}}
         @width='block'
         @type="number"