@flexilla/dismissible 2.0.1 → 2.0.3

package/README.md

@@ -27,7 +27,13 @@ import Dismissible from '@flexilla/dismissible';
         action: "remove-from-dom",
         onDismiss: () => {
             console.log("Element dismissed!");
-        }
-        );
+        });
+
+        // or 
+        fDismissible('.dismissable-element',
+        action: "remove-from-dom",
+        onDismiss: () => {
+            console.log("Element dismissed!");
+        })
 </script>
 ```

package/dist/dismissible.js

@@ -1,74 +1,91 @@
-var a = Object.defineProperty;
-var c = (i, s, e) => s in i ? a(i, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[s] = e;
-var t = (i, s, e) => (c(i, typeof s != "symbol" ? s + "" : s, e), e);
-const h = (i, s = document.body) => s.querySelector(i), d = (i, s = document.body) => Array.from(s.querySelectorAll(i)), l = ({
-  element: i,
-  callback: s
+var b = Object.defineProperty;
+var u = (t, e, s) => e in t ? b(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var i = (t, e, s) => u(t, typeof e != "symbol" ? e + "" : e, s);
+const E = (t, e = document.body) => e.querySelector(t), r = (t, e = document.body) => Array.from(e.querySelectorAll(t)), f = ({
+  element: t,
+  callback: e,
+  type: s,
+  keysCheck: n
 }) => {
-  const e = getComputedStyle(i).transition;
-  e !== "none" && e !== "" && e !== "all 0s ease 0s" ? i.addEventListener(
-    "transitionend",
-    function n() {
-      i.removeEventListener("transitionend", n), s();
-    },
-    { once: !0 }
-  ) : s();
-}, o = class o {
+  const l = getComputedStyle(t), o = s === "transition" ? l.transition : l.animation;
+  if (o !== "none" && o !== "" && !n.includes(o)) {
+    const d = s === "transition" ? "transitionend" : "animationend", a = () => {
+      t.removeEventListener(d, a), e();
+    };
+    t.addEventListener(d, a, { once: !0 });
+  } else
+    e();
+}, c = ({
+  element: t,
+  callback: e
+}) => {
+  f({
+    element: t,
+    callback: e,
+    type: "transition",
+    keysCheck: ["all 0s ease 0s", "all"]
+  });
+}, m = class m {
   /**
    * Dismissible Component
    * @param dismissible 
    * @param action 
    * @param onDissmiss 
    */
-  constructor(s, e, n) {
-    t(this, "dismissibleElement");
-    t(this, "dismissButtons");
-    t(this, "action");
-    t(this, "onDismiss");
-    t(this, "hideFromScreen", () => {
-      var s;
-      this.dismissibleElement.style.display = "none", (s = this.onDismiss) == null || s.call(this);
+  constructor(e, s, n) {
+    i(this, "dismissibleElement");
+    i(this, "dismissButtons");
+    i(this, "action");
+    i(this, "onDismiss");
+    i(this, "hideFromScreen", () => {
+      var e;
+      this.dismissibleElement.style.display = "none", (e = this.onDismiss) == null || e.call(this);
     });
-    t(this, "removeFromDom", () => {
-      var s, e;
-      (s = this.onDismiss) == null || s.call(this), (e = this.dismissibleElement.parentNode) == null || e.removeChild(this.dismissibleElement);
+    i(this, "removeFromDom", () => {
+      var e, s;
+      (e = this.onDismiss) == null || e.call(this), (s = this.dismissibleElement.parentElement) == null || s.removeChild(this.dismissibleElement);
     });
-    t(this, "dismiss", () => {
+    i(this, "dismiss", () => {
       switch (this.action) {
         case "hide-from-screen":
-          this.dismissibleElement.setAttribute("aria-hidden", "true"), l({
+          this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "hidden"), c({
             element: this.dismissibleElement,
             callback: this.hideFromScreen
           });
           break;
         default:
-          this.dismissibleElement.setAttribute("data-hidden", ""), this.dismissibleElement.setAttribute("aria-hidden", "true"), l({
+          this.dismissibleElement.setAttribute("data-hidden", ""), this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "removed"), c({
             element: this.dismissibleElement,
             callback: this.removeFromDom
           });
           break;
       }
     });
-    const m = typeof s == "string" ? h(s, document.body) : s;
-    if (!(m instanceof HTMLElement))
-      throw new Error("Provided Element not a valid HTMLElement");
-    this.dismissibleElement = m, this.action = e || this.dismissibleElement.dataset.action || "hide-from-screen", this.dismissButtons = d("[data-dismiss-btn]", this.dismissibleElement), this.onDismiss = n, this.dismissibleElement.setAttribute("aria-hidden", "false"), this.init();
+    const l = typeof e == "string" ? E(e, document.body) : e;
+    if (!(l instanceof HTMLElement)) throw new Error("Provided Element not a valid HTMLElement");
+    this.dismissibleElement = l, this.action = s || this.dismissibleElement.dataset.action || "hide-from-screen", this.dismissButtons = r("[data-dismiss-btn]", this.dismissibleElement), this.onDismiss = n, this.dismissibleElement.setAttribute("aria-hidden", "false"), this.setupDismissible();
   }
-  init() {
-    for (const s of this.dismissButtons)
-      s.addEventListener("click", this.dismiss);
+  setupDismissible() {
+    for (const e of this.dismissButtons)
+      e.addEventListener("click", this.dismiss);
   }
 };
 /**
  * auto init Dismissible Element based on the selector provided
  * @param selector {string} default is [data-fx-dismissible]
  */
-t(o, "autoInit", (s = "[data-fx-dismissible]") => {
-  const e = d(s);
-  for (const n of e)
-    new o(n);
-});
-let r = o;
+i(m, "autoInit", (e = "[data-fx-dismissible]") => {
+  const s = r(e);
+  for (const n of s) new m(n);
+}), /**
+ * 
+ * @param dismissible 
+ * @param action 
+ * @param onDissmiss 
+ * @returns 
+ */
+i(m, "init", (e, s, n) => new m(e, s, n));
+let h = m;
 export {
-  r as Dismissible
+  h as Dismissible
 };

package/dist/dismissible.umd.cjs

@@ -1 +1 @@
-(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s["@flexilla/dismissible"]={}))})(this,function(s){"use strict";var h=Object.defineProperty;var b=(s,i,o)=>i in s?h(s,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):s[i]=o;var n=(s,i,o)=>(b(s,typeof i!="symbol"?i+"":i,o),o);const i=(d,e=document.body)=>e.querySelector(d),o=(d,e=document.body)=>Array.from(e.querySelectorAll(d)),a=({element:d,callback:e})=>{const t=getComputedStyle(d).transition;t!=="none"&&t!==""&&t!=="all 0s ease 0s"?d.addEventListener("transitionend",function l(){d.removeEventListener("transitionend",l),e()},{once:!0}):e()},m=class m{constructor(e,t,l){n(this,"dismissibleElement");n(this,"dismissButtons");n(this,"action");n(this,"onDismiss");n(this,"hideFromScreen",()=>{var e;this.dismissibleElement.style.display="none",(e=this.onDismiss)==null||e.call(this)});n(this,"removeFromDom",()=>{var e,t;(e=this.onDismiss)==null||e.call(this),(t=this.dismissibleElement.parentNode)==null||t.removeChild(this.dismissibleElement)});n(this,"dismiss",()=>{switch(this.action){case"hide-from-screen":this.dismissibleElement.setAttribute("aria-hidden","true"),a({element:this.dismissibleElement,callback:this.hideFromScreen});break;default:this.dismissibleElement.setAttribute("data-hidden",""),this.dismissibleElement.setAttribute("aria-hidden","true"),a({element:this.dismissibleElement,callback:this.removeFromDom});break}});const c=typeof e=="string"?i(e,document.body):e;if(!(c instanceof HTMLElement))throw new Error("Provided Element not a valid HTMLElement");this.dismissibleElement=c,this.action=t||this.dismissibleElement.dataset.action||"hide-from-screen",this.dismissButtons=o("[data-dismiss-btn]",this.dismissibleElement),this.onDismiss=l,this.dismissibleElement.setAttribute("aria-hidden","false"),this.init()}init(){for(const e of this.dismissButtons)e.addEventListener("click",this.dismiss)}};n(m,"autoInit",(e="[data-fx-dismissible]")=>{const t=o(e);for(const l of t)new m(l)});let r=m;s.Dismissible=r,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(i,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i["@flexilla/dismissible"]={}))})(this,function(i){"use strict";var E=Object.defineProperty;var y=(i,s,o)=>s in i?E(i,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[s]=o;var n=(i,s,o)=>y(i,typeof s!="symbol"?s+"":s,o);const s=(l,e=document.body)=>e.querySelector(l),o=(l,e=document.body)=>Array.from(e.querySelectorAll(l)),f=({element:l,callback:e,type:t,keysCheck:d})=>{const a=getComputedStyle(l),c=t==="transition"?a.transition:a.animation;if(c!=="none"&&c!==""&&!d.includes(c)){const b=t==="transition"?"transitionend":"animationend",u=()=>{l.removeEventListener(b,u),e()};l.addEventListener(b,u,{once:!0})}else e()},h=({element:l,callback:e})=>{f({element:l,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},m=class m{constructor(e,t,d){n(this,"dismissibleElement");n(this,"dismissButtons");n(this,"action");n(this,"onDismiss");n(this,"hideFromScreen",()=>{var e;this.dismissibleElement.style.display="none",(e=this.onDismiss)==null||e.call(this)});n(this,"removeFromDom",()=>{var e,t;(e=this.onDismiss)==null||e.call(this),(t=this.dismissibleElement.parentElement)==null||t.removeChild(this.dismissibleElement)});n(this,"dismiss",()=>{switch(this.action){case"hide-from-screen":this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","hidden"),h({element:this.dismissibleElement,callback:this.hideFromScreen});break;default:this.dismissibleElement.setAttribute("data-hidden",""),this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","removed"),h({element:this.dismissibleElement,callback:this.removeFromDom});break}});const a=typeof e=="string"?s(e,document.body):e;if(!(a instanceof HTMLElement))throw new Error("Provided Element not a valid HTMLElement");this.dismissibleElement=a,this.action=t||this.dismissibleElement.dataset.action||"hide-from-screen",this.dismissButtons=o("[data-dismiss-btn]",this.dismissibleElement),this.onDismiss=d,this.dismissibleElement.setAttribute("aria-hidden","false"),this.setupDismissible()}setupDismissible(){for(const e of this.dismissButtons)e.addEventListener("click",this.dismiss)}};n(m,"autoInit",(e="[data-fx-dismissible]")=>{const t=o(e);for(const d of t)new m(d)}),n(m,"init",(e,t,d)=>new m(e,t,d));let r=m;i.Dismissible=r,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -13,12 +13,20 @@ export declare class Dismissible {
     private hideFromScreen;
     private removeFromDom;
     dismiss: () => void;
-    private init;
+    private setupDismissible;
     /**
      * auto init Dismissible Element based on the selector provided
      * @param selector {string} default is [data-fx-dismissible]
      */
     static autoInit: (selector?: string) => void;
+    /**
+     *
+     * @param dismissible
+     * @param action
+     * @param onDissmiss
+     * @returns
+     */
+    static init: (dismissible: string | HTMLElement, action?: "remove-from-dom" | "hide-from-screen", onDissmiss?: () => void) => Dismissible;
 }
 
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flexilla/dismissible",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "description": "A lightweight JavaScript component that automatically makes a component dismissible for easy user interaction.",
   "publishConfig": {
@@ -64,5 +64,5 @@
   },
   "license": "MIT",
   "author": "johnkat-mj",
-  "gitHead": "8435693ee1ff8e2f9d279b5d4026949530d7d05d"
+  "gitHead": "2eb26c556c72eb0c607dfc2de61b3ca6ef3128c9"
 }