pragmate-ui/ripple/ripple.mjs

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.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/ripple"},"type":"code"}, import.meta.url).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"}];

export let RippleEffect;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'RippleEffect') && (RippleEffect = require ? require('./index').RippleEffect : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=ripple.mjs.map