pragmate-ui/ripple/ripple.amd.js

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles"], function (_exports, _amd_module, dependency_0, dependency_1) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.__beyond_pkg = _exports.RippleEffect = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/ripple"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/ripple');
  const ims = new Map();

  /***********************
  INTERNAL MODULE: ./index
  ***********************/

  ims.set('./index', {
    hash: 702158720,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.RippleEffect = void 0;
      /*bundle*/
      class RippleEffect {
        elements;
        constructor(elements = undefined) {
          if (elements) this.add(elements);
        }
        add(elements) {
          this.elements = Array.isArray(elements) ? elements : [elements];
          this.elements.forEach(element => {
            element.classList.add('ripple');
            element.addEventListener('mousedown', this.onClick);
          });
        }
        addRippleEffect(ref) {
          this.add(ref);
        }
        onClick = event => {
          const rect = event.target.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;
          const ripple = document.createElement('span');
          ripple.style.left = `${x}px`;
          ripple.style.top = `${y}px`;
          event.target.appendChild(ripple);
          setTimeout(() => {
            ripple.remove();
          }, 1000);
        };
        cleanup() {
          this.elements.forEach(element => {
            element.removeEventListener('mousedown', this.onClick);
          });
          this.elements = [];
        }
      }
      exports.RippleEffect = RippleEffect;
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./index",
    "from": "RippleEffect",
    "name": "RippleEffect"
  }];
  let RippleEffect = _exports.RippleEffect = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'RippleEffect') && (_exports.RippleEffect = RippleEffect = require ? require('./index').RippleEffect : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=ripple.amd.js.map