@duyluonganduin/acl-web-components 0.0.10 → 0.0.11

package/dist/acl-web-components.cjs

@@ -942,7 +942,7 @@
     .menu-item__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     anduin-icon { color: var(--color-gray-7); }
     .menu-item--danger anduin-icon { color: var(--color-danger-4); }
-  `;let q=W2;Y([r()],q.prototype,"icon");Y([r()],q.prototype,"variant");Y([r({type:Boolean})],q.prototype,"disabled");customElements.get("anduin-menu")||customElements.define("anduin-menu",z);customElements.get("anduin-menu-item")||customElements.define("anduin-menu-item",q);var Y4=Object.defineProperty,W=(l,e,t,o)=>{for(var C=void 0,i=l.length-1,n;i>=0;i--)(n=l[i])&&(C=n(e,t,C)||C);return C&&Y4(e,t,C),C};const Y1=300,f5=200,W4=250;var F;const O=(F=class extends u{constructor(){super(...arguments),this.open=!1,this.heading="",this.hideHeader=!1,this.hideFooter=!1,this.maxWidth="480",this.fullscreen=!1,this._leaving=!1}updated(e){var t;if(e.has("maxWidth")){const o=this.maxWidth,C=F._PRESETS.has(o)?`${o}px`:o;this.style.setProperty("--_modal-width",C)}if(e.has("open")){if(this.open)this._leaving=!1,this.classList.add("is-shown");else if(this.classList.contains("is-shown")){this._leaving=!0;const o=(t=this.shadowRoot)==null?void 0:t.querySelector(".overlay");o==null||o.addEventListener("animationend",()=>{this._leaving=!1,this.classList.remove("is-shown")},{once:!0})}}}dispatch(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0}))}onOverlayClick(){this.dispatch("close")}onClose(){this.dispatch("close")}render(){const e=this._leaving,t=this.fullscreen;return d`
+  `;let q=W2;Y([r()],q.prototype,"icon");Y([r()],q.prototype,"variant");Y([r({type:Boolean})],q.prototype,"disabled");customElements.get("anduin-menu")||customElements.define("anduin-menu",z);customElements.get("anduin-menu-item")||customElements.define("anduin-menu-item",q);var Y4=Object.defineProperty,W=(l,e,t,o)=>{for(var C=void 0,i=l.length-1,n;i>=0;i--)(n=l[i])&&(C=n(e,t,C)||C);return C&&Y4(e,t,C),C};const Y1=300,f5=200,W4=250;var F;const O=(F=class extends u{constructor(){super(...arguments),this.open=!1,this.heading="",this.hideHeader=!1,this.hideFooter=!1,this.maxWidth="480",this.fullscreen=!1,this._leaving=!1}updated(e){var t;if(e.has("maxWidth")){const o=this.maxWidth,C=F._PRESETS.has(o)?`${o}px`:o;this.style.setProperty("--_modal-width",C)}if(e.has("open")){if(this.open)this._leaving=!1,this.classList.add("is-shown");else if(this.classList.contains("is-shown")){this._leaving=!0;const o=(t=this.shadowRoot)==null?void 0:t.querySelector(".overlay");o==null||o.addEventListener("animationend",()=>{this._leaving=!1,this.classList.remove("is-shown")},{once:!0})}}}dispatch(e){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0}))}onOverlayClick(){this.dispatch("anduin-close")}onClose(){this.dispatch("anduin-close")}render(){const e=this._leaving,t=this.fullscreen;return d`
       <div class=${`overlay${e?" is-leaving":""}`} @click=${this.onOverlayClick}></div>
       <div class=${`modal-wrapper${t?" modal-wrapper--fullscreen":""}`}>
         <div class=${`modal${t?" modal--fullscreen":""}${e?" is-leaving":""}`} role="dialog" aria-modal="true" aria-labelledby="modal-title">
@@ -1108,7 +1108,7 @@
       padding: 16px 24px;
       border-top: 1px solid var(--color-gray-3, #e4e7ec);
     }
-  `,F._PRESETS=new Set(["480","600","720","960","1160"]),F);W([r({type:Boolean,reflect:!0})],O.prototype,"open");W([r()],O.prototype,"heading");W([r({type:Boolean,attribute:"hide-header"})],O.prototype,"hideHeader");W([r({type:Boolean,attribute:"hide-footer"})],O.prototype,"hideFooter");W([r({attribute:"max-width"})],O.prototype,"maxWidth");W([r({type:Boolean})],O.prototype,"fullscreen");W([k()],O.prototype,"_leaving");let O5=O;customElements.get("anduin-modal")||customElements.define("anduin-modal",O5);class D5 extends HTMLElement{constructor(){super(...arguments),this._onClick=()=>{this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}connectedCallback(){this.style.display="contents",this.addEventListener("click",this._onClick)}disconnectedCallback(){this.removeEventListener("click",this._onClick)}}customElements.get("anduin-modal-close")||customElements.define("anduin-modal-close",D5);var K4=Object.defineProperty,K=(l,e,t,o)=>{for(var C=void 0,i=l.length-1,n;i>=0;i--)(n=l[i])&&(C=n(e,t,C)||C);return C&&K4(e,t,C),C};const V5=[{bg:"#6172F3",text:"#ffffff"},{bg:"#B692F6",text:"#ffffff"},{bg:"#F670C7",text:"#ffffff"},{bg:"#F79009",text:"#ffffff"},{bg:"#32D583",text:"#ffffff"},{bg:"#36BFFA",text:"#ffffff"},{bg:"#F97066",text:"#ffffff"},{bg:"#7A5AF8",text:"#ffffff"}];function X4(l){let e=0;for(let t=0;t<l.length;t++)e=e*31+l.charCodeAt(t)>>>0;return V5[e%V5.length]}function J4(l){var t;const e=l.trim().split(/\s+/);return e.length===1?((t=e[0][0])==null?void 0:t.toUpperCase())??"":((e[0][0]??"")+(e[e.length-1][0]??"")).toUpperCase()}const K2=class K2 extends u{constructor(){super(...arguments),this.src="",this.name="",this.alt="",this.icon="",this.size=32,this.shape="circle",this._imgError=!1}_onImgError(){this._imgError=!0}_iconSize(){return this.size<=16?10:this.size<=20?12:this.size<=24?14:18}render(){const e=!!this.src&&!this._imgError,t=this.name||this.icon?X4(this.name||this.icon):{bg:"#F2F4F7",text:"#667085"},o=this.name?J4(this.name):"";return d`
+  `,F._PRESETS=new Set(["480","600","720","960","1160"]),F);W([r({type:Boolean,reflect:!0})],O.prototype,"open");W([r()],O.prototype,"heading");W([r({type:Boolean,attribute:"hide-header"})],O.prototype,"hideHeader");W([r({type:Boolean,attribute:"hide-footer"})],O.prototype,"hideFooter");W([r({attribute:"max-width"})],O.prototype,"maxWidth");W([r({type:Boolean})],O.prototype,"fullscreen");W([k()],O.prototype,"_leaving");let O5=O;customElements.get("anduin-modal")||customElements.define("anduin-modal",O5);class D5 extends HTMLElement{constructor(){super(...arguments),this._onClick=()=>{this.dispatchEvent(new CustomEvent("anduin-close",{bubbles:!0,composed:!0}))}}connectedCallback(){this.style.display="contents",this.addEventListener("click",this._onClick)}disconnectedCallback(){this.removeEventListener("click",this._onClick)}}customElements.get("anduin-modal-close")||customElements.define("anduin-modal-close",D5);var K4=Object.defineProperty,K=(l,e,t,o)=>{for(var C=void 0,i=l.length-1,n;i>=0;i--)(n=l[i])&&(C=n(e,t,C)||C);return C&&K4(e,t,C),C};const V5=[{bg:"#6172F3",text:"#ffffff"},{bg:"#B692F6",text:"#ffffff"},{bg:"#F670C7",text:"#ffffff"},{bg:"#F79009",text:"#ffffff"},{bg:"#32D583",text:"#ffffff"},{bg:"#36BFFA",text:"#ffffff"},{bg:"#F97066",text:"#ffffff"},{bg:"#7A5AF8",text:"#ffffff"}];function X4(l){let e=0;for(let t=0;t<l.length;t++)e=e*31+l.charCodeAt(t)>>>0;return V5[e%V5.length]}function J4(l){var t;const e=l.trim().split(/\s+/);return e.length===1?((t=e[0][0])==null?void 0:t.toUpperCase())??"":((e[0][0]??"")+(e[e.length-1][0]??"")).toUpperCase()}const K2=class K2 extends u{constructor(){super(...arguments),this.src="",this.name="",this.alt="",this.icon="",this.size=32,this.shape="circle",this._imgError=!1}_onImgError(){this._imgError=!0}_iconSize(){return this.size<=16?10:this.size<=20?12:this.size<=24?14:18}render(){const e=!!this.src&&!this._imgError,t=this.name||this.icon?X4(this.name||this.icon):{bg:"#F2F4F7",text:"#667085"},o=this.name?J4(this.name):"";return d`
       <div
         class="avatar avatar--${this.shape} avatar--${this.size}"
         style=${e?"":`background:${t.bg}`}

package/dist/acl-web-components.js

@@ -3281,10 +3281,10 @@ const S = (A = class extends u {
     this.dispatchEvent(new CustomEvent(e, { bubbles: !0, composed: !0 }));
   }
   onOverlayClick() {
-    this.dispatch("close");
+    this.dispatch("anduin-close");
   }
   onClose() {
-    this.dispatch("close");
+    this.dispatch("anduin-close");
   }
   render() {
     const e = this._leaving, t = this.fullscreen;
@@ -3483,7 +3483,7 @@ customElements.get("anduin-modal") || customElements.define("anduin-modal", q4);
 class G4 extends HTMLElement {
   constructor() {
     super(...arguments), this._onClick = () => {
-      this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+      this.dispatchEvent(new CustomEvent("anduin-close", { bubbles: !0, composed: !0 }));
     };
   }
   connectedCallback() {

package/dist/react.d.ts

@@ -293,8 +293,9 @@ declare module 'react' {
         'hide-footer'?: boolean | string
         /** Cover the full viewport; hides overlay and removes border-radius */
         fullscreen?: boolean | string
-        /** Fired when the modal should close (X, overlay, or anduin-modal-close) */
-        onClose?: (e: CustomEvent) => void
+        /** Fired when the modal should close (X, overlay, or anduin-modal-close).
+         *  Event name: 'anduin-close'. Use a ref or onAnduin-close won't work in React JSX —
+         *  prefer: el.addEventListener('anduin-close', handler) */
       }
 
       // ── anduin-modal-close ────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duyluonganduin/acl-web-components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "main": "./dist/acl-web-components.cjs",
   "module": "./dist/acl-web-components.js",