pragmate-ui/ripple/ripple.cjs.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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.hmr = exports.__beyond_pkg = exports.RippleEffect = void 0;
var dependency_0 = require("@beyond-js/kernel/bundle");
var dependency_1 = require("@beyond-js/kernel/styles");
const {
  Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
  "module": {
    "vspecifier": "pragmate-ui@1.0.1/ripple"
  },
  "type": "code"
}).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.cjs.js.map