Merge pull request #405 from yapplabs/glimmer-overlay

Move Overlay component to Glimmer

Author: lukemelia

addon/components/overlay.js

@@ -0,0 +1,9 @@
+<div
+  class={{this.cssClasses}}
+  tabindex='-1'
+  data-emd-overlay
+  {{on 'click' this.handleClick}}
+  ...attributes
+>
+  {{yield}}
+</div>

addon/components/overlay/index.hbs

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { isIOS } from '../../utils/config-utils';
+import { htmlSafe } from '@ember/template';
+
+export default class OverlayComponent extends Component {
+  get cssClasses() {
+    return htmlSafe(`emd-debug ${isIOS ? 'pointer-cursor' : ''}`);
+  }
+  handleClick = (event) => {
+    this.args.onClickOverlay?.(event);
+  };
+}

addon/components/overlay/index.js

@@ -40,6 +40,7 @@
   "devDependencies": {
     "@ember/jquery": "^2.0.0",
     "@ember/optional-features": "^2.0.0",
+    "@ember/string": "^3.0.0",
     "@ember/test-helpers": "^2.6.0",
     "@embroider/test-setup": "^1.0.0",
     "@glimmer/component": "^1.1.2",
@@ -85,7 +86,6 @@
     "webpack": "^5.67.0"
   },
   "peerDependencies": {
-    "@ember/render-modifiers": "^2.1.0",
     "@ember/string": "^3.0.0 || ^4.0.0",
     "ember-tether": "^3.0.0",
     "liquid-tether": "^2.0.7",

addon/templates/components/overlay.hbs

@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 
 let originalText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +