add workaround for embroider issue with ember-velcro

lblod · Oct 20, 2023 · b6e2d7b · b6e2d7b
1 parent d2e669b
commit b6e2d7b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/addon/components/hover-tooltip.hbs b/addon/components/hover-tooltip.hbs
@@ -1,8 +1,8 @@
-<Velcro @placement={{this.placement}} as |velcro|>
+<this.Velcro @placement={{this.placement}} as |velcro|>
   {{#let velcro.loop as |loop|}}
     {{yield (hash velcroHook=velcro.hook handleHover=(modifier this.hover)) to='hover' }}
     {{#if this.tooltipOpen}}
       {{yield loop to='tooltip'}}
     {{/if}}
   {{/let}}
-</Velcro>
+</this.Velcro>
diff --git a/addon/components/hover-tooltip.ts b/addon/components/hover-tooltip.ts
@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { tracked } from '@glimmer/tracking';
+import { Velcro } from 'ember-velcro';
 
 interface Args {
   placement?: string;
 }
 
 export default class HoverTooltip extends Component<Args> {
+  Velcro = Velcro;
   hover = modifier(
     (element) => {
       element.addEventListener('mouseenter', this.showTooltip);

diff --git a/addon/components/variable-plugin/date/edit.hbs b/addon/components/variable-plugin/date/edit.hbs
@@ -21,7 +21,7 @@
                 @onChange={{this.changeIncludeTime}}
               />
               {{#if this.isCustom}}
-                <Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
+                <this.Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
                   <AuBadge
                     @size="small"
                     @icon="info-circle"
@@ -40,7 +40,7 @@
                       {{t 'date-plugin.card.info-custom-time'}}
                     </AuPill>
                   {{/if}}
-                </Velcro>
+                </this.Velcro>
               {{/if}}
             </AuFormRow>
           </VariablePlugin::Date::DateTimePicker>
@@ -67,7 +67,7 @@
                 @onChange={{this.setDateFormatFromKey}}
               />
             </AuFormRow>
-          {{/if}}  
+          {{/if}}
           {{#if (eq this.dateFormatType "custom")}}
             <AuFormRow @alignment="post">
               <AuButton @skin="secondary" @icon="info-circle"

diff --git a/addon/components/variable-plugin/date/edit.ts b/addon/components/variable-plugin/date/edit.ts
@@ -22,13 +22,16 @@ import {
   formatContainsTime,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
+import { Velcro } from 'ember-velcro';
 
 type Args = {
   controller: SayController;
   options: DateOptions;
 };
 const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class DateEditComponent extends Component<Args> {
+  Velcro = Velcro;
+
   @service
   declare intl: IntlService;
 

diff --git a/addon/components/variable-plugin/number/nodeview.hbs b/addon/components/variable-plugin/number/nodeview.hbs
@@ -1,4 +1,4 @@
-<Velcro
+<this.Velcro
   @placement='bottom-start'
   @offsetOptions={{hash mainAxis=3}} as |velcro|
 >
@@ -57,4 +57,4 @@
       </AuCard>
     </div>
   {{/if}}
-</Velcro>
+</this.Velcro>
diff --git a/addon/components/variable-plugin/number/nodeview.ts b/addon/components/variable-plugin/number/nodeview.ts
@@ -12,6 +12,7 @@ import { localCopy } from 'tracked-toolbox';
 import { isBlank } from '@ember/utils';
 import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
+import { Velcro } from 'ember-velcro';
 
 type Args = {
   getPos: () => number | undefined;
@@ -24,6 +25,8 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
+  Velcro = Velcro;
+
   @localCopy('args.node.attrs.value', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
   declare writtenNumber: boolean;