@nuraly/lumenui 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nuralyui.bundle.js +2581 -1483
- package/dist/nuralyui.bundle.js.gz +0 -0
- package/dist/src/components/button/bundle.js +130 -39
- package/dist/src/components/button/bundle.js.gz +0 -0
- package/dist/src/components/button/button.component.js +7 -4
- package/dist/src/components/button/button.style.js +92 -2
- package/dist/src/components/canvas/base-canvas.component.d.ts +8 -0
- package/dist/src/components/canvas/base-canvas.component.js +75 -3
- package/dist/src/components/canvas/bundle.js +2546 -1200
- package/dist/src/components/canvas/bundle.js.gz +0 -0
- package/dist/src/components/canvas/controllers/collaboration.controller.d.ts +24 -11
- package/dist/src/components/canvas/controllers/collaboration.controller.js +176 -120
- package/dist/src/components/canvas/controllers/selection.controller.js +20 -0
- package/dist/src/components/canvas/interfaces/collaboration.interface.d.ts +8 -0
- package/dist/src/components/canvas/templates/index.d.ts +1 -0
- package/dist/src/components/canvas/templates/index.js +2 -0
- package/dist/src/components/canvas/templates/lock-overlay.template.d.ts +20 -0
- package/dist/src/components/canvas/templates/lock-overlay.template.js +33 -0
- package/dist/src/components/canvas/workflow-canvas.component.js +52 -24
- package/dist/src/components/canvas/workflow-canvas.style.js +62 -1
- package/dist/src/components/canvas/workflow-canvas.types.js +50 -4
- package/dist/src/components/chat-panel/bundle.js +10 -10
- package/dist/src/components/chat-panel/bundle.js.gz +0 -0
- package/dist/src/components/chat-panel/chat-panel.component.js +8 -8
- package/dist/src/components/chatbot/bundle.js +454 -289
- package/dist/src/components/chatbot/bundle.js.gz +0 -0
- package/dist/src/components/chatbot/chatbot.style.js +162 -21
- package/dist/src/components/chatbot/chatbot.types.d.ts +1 -0
- package/dist/src/components/chatbot/core/chatbot-core.controller.js +13 -7
- package/dist/src/components/chatbot/providers/workflow-socket-provider.js +1 -2
- package/dist/src/components/chatbot/templates/input-box.template.js +58 -30
- package/dist/src/components/chatbot/templates/message.template.js +41 -31
- package/dist/src/components/chatbot/templates/thread-sidebar.template.js +38 -39
- package/dist/src/components/colorpicker/bundle.js +15 -10
- package/dist/src/components/colorpicker/bundle.js.gz +0 -0
- package/dist/src/components/colorpicker/color-picker.component.js +15 -10
- package/dist/src/components/datepicker/bundle.js +10 -10
- package/dist/src/components/datepicker/bundle.js.gz +0 -0
- package/dist/src/components/datepicker/datepicker.component.js +14 -22
- package/dist/src/components/dropdown/bundle.js +13 -12
- package/dist/src/components/dropdown/bundle.js.gz +0 -0
- package/dist/src/components/dropdown/dropdown.component.js +10 -9
- package/dist/src/components/file-upload/bundle.js +15 -14
- package/dist/src/components/file-upload/bundle.js.gz +0 -0
- package/dist/src/components/file-upload/file-upload.component.js +15 -14
- package/dist/src/components/icon/bundle.js +7 -7
- package/dist/src/components/icon/bundle.js.gz +0 -0
- package/dist/src/components/icon/icon-paths.js +15 -0
- package/dist/src/components/iconpicker/bundle.js +214 -122
- package/dist/src/components/iconpicker/bundle.js.gz +0 -0
- package/dist/src/components/iconpicker/icon-picker.component.js +4 -4
- package/dist/src/components/menu/bundle.js +5 -2
- package/dist/src/components/menu/bundle.js.gz +0 -0
- package/dist/src/components/menu/menu.component.js +5 -2
- package/dist/src/components/modal/bundle.js +16 -13
- package/dist/src/components/modal/bundle.js.gz +0 -0
- package/dist/src/components/modal/modal.component.js +16 -13
- package/dist/src/components/panel/bundle.js +28 -28
- package/dist/src/components/panel/bundle.js.gz +0 -0
- package/dist/src/components/popconfirm/bundle.js +135 -41
- package/dist/src/components/popconfirm/bundle.js.gz +0 -0
- package/dist/src/components/popconfirm/popconfirm.component.d.ts +15 -119
- package/dist/src/components/popconfirm/popconfirm.component.js +158 -162
- package/dist/src/components/popconfirm/popconfirm.style.js +94 -0
- package/dist/src/components/presence/bundle.js +2 -1
- package/dist/src/components/presence/bundle.js.gz +0 -0
- package/dist/src/components/presence/presence.component.js +2 -1
- package/dist/src/components/table/bundle.js +3 -2
- package/dist/src/components/table/bundle.js.gz +0 -0
- package/dist/src/components/table/table.component.js +3 -2
- package/dist/src/components/tabs/bundle.js +3 -3
- package/dist/src/components/tabs/bundle.js.gz +0 -0
- package/dist/src/components/timepicker/bundle.js +3 -3
- package/dist/src/components/timepicker/bundle.js.gz +0 -0
- package/package.json +1 -1
- package/packages/common/dist/VERSIONS.md +1 -1
- package/packages/common/dist/shared/controllers/dropdown.controller.d.ts +4 -0
- package/packages/common/dist/shared/controllers/dropdown.controller.d.ts.map +1 -1
- package/packages/common/dist/shared/controllers/dropdown.controller.js +29 -3
- package/packages/common/dist/shared/controllers/dropdown.controller.js.map +1 -1
|
@@ -1,8 +1,102 @@
|
|
|
1
|
-
import{css as t,
|
|
1
|
+
import{css as o,render as t,nothing as i,html as n,LitElement as e}from"lit";import{property as r,state as s,customElement as c}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as p}from"lit/directives/style-map.js";const l=o`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
.popconfirm-trigger {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.popconfirm-panel {
|
|
12
|
+
position: fixed;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
z-index: 2147483000;
|
|
16
|
+
background: #ffffff;
|
|
17
|
+
border: 1px solid #e0e0e0;
|
|
18
|
+
border-radius: 6px;
|
|
19
|
+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
min-width: 200px;
|
|
22
|
+
max-width: 400px;
|
|
23
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.popconfirm-arrow {
|
|
27
|
+
position: absolute;
|
|
28
|
+
width: 8px;
|
|
29
|
+
height: 8px;
|
|
30
|
+
background: #ffffff;
|
|
31
|
+
border: 1px solid #e0e0e0;
|
|
32
|
+
transform: rotate(45deg);
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.popconfirm-panel--top .popconfirm-arrow,
|
|
37
|
+
.popconfirm-panel--top-start .popconfirm-arrow,
|
|
38
|
+
.popconfirm-panel--top-end .popconfirm-arrow {
|
|
39
|
+
bottom: -5px;
|
|
40
|
+
border-top: none;
|
|
41
|
+
border-left: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.popconfirm-panel--bottom .popconfirm-arrow,
|
|
45
|
+
.popconfirm-panel--bottom-start .popconfirm-arrow,
|
|
46
|
+
.popconfirm-panel--bottom-end .popconfirm-arrow {
|
|
47
|
+
top: -5px;
|
|
48
|
+
border-bottom: none;
|
|
49
|
+
border-right: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.popconfirm-panel--left .popconfirm-arrow,
|
|
53
|
+
.popconfirm-panel--left-start .popconfirm-arrow,
|
|
54
|
+
.popconfirm-panel--left-end .popconfirm-arrow {
|
|
55
|
+
right: -5px;
|
|
56
|
+
border-bottom: none;
|
|
57
|
+
border-left: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.popconfirm-panel--right .popconfirm-arrow,
|
|
61
|
+
.popconfirm-panel--right-start .popconfirm-arrow,
|
|
62
|
+
.popconfirm-panel--right-end .popconfirm-arrow {
|
|
63
|
+
left: -5px;
|
|
64
|
+
border-top: none;
|
|
65
|
+
border-right: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.popconfirm-panel--top .popconfirm-arrow,
|
|
69
|
+
.popconfirm-panel--bottom .popconfirm-arrow {
|
|
70
|
+
left: 50%;
|
|
71
|
+
margin-left: -4px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.popconfirm-panel--top-start .popconfirm-arrow,
|
|
75
|
+
.popconfirm-panel--bottom-start .popconfirm-arrow {
|
|
76
|
+
left: 12px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.popconfirm-panel--top-end .popconfirm-arrow,
|
|
80
|
+
.popconfirm-panel--bottom-end .popconfirm-arrow {
|
|
81
|
+
right: 12px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.popconfirm-panel--left .popconfirm-arrow,
|
|
85
|
+
.popconfirm-panel--right .popconfirm-arrow {
|
|
86
|
+
top: 50%;
|
|
87
|
+
margin-top: -4px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.popconfirm-panel--left-start .popconfirm-arrow,
|
|
91
|
+
.popconfirm-panel--right-start .popconfirm-arrow {
|
|
92
|
+
top: 12px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.popconfirm-panel--left-end .popconfirm-arrow,
|
|
96
|
+
.popconfirm-panel--right-end .popconfirm-arrow {
|
|
97
|
+
bottom: 12px;
|
|
98
|
+
}
|
|
99
|
+
|
|
6
100
|
.popconfirm-content {
|
|
7
101
|
display: flex;
|
|
8
102
|
flex-direction: column;
|
|
@@ -207,33 +301,43 @@ import{css as t,html as o,LitElement as e,nothing as i}from"lit";import{property
|
|
|
207
301
|
* @license
|
|
208
302
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
209
303
|
* SPDX-License-Identifier: MIT
|
|
210
|
-
*/,
|
|
304
|
+
*/,d=o=>class extends o{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var o,t,i;super.disconnectedCallback(),null===(o=this.themeObserver)||void 0===o||o.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var o,t;const i=(null===(o=this.closest("[data-theme]"))||void 0===o?void 0:o.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var o;const t=(null===(o=this.closest("[design-system]"))||void 0===o?void 0:o.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},f=()=>{var o;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(o=process.env)||void 0===o?void 0:o.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},m=o=>class extends o{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(f())for(const o of this.requiredComponents)if(!this.isComponentAvailable(o))throw new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${o}';`)}validateDependenciesWithHandler(o){if(!f())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const n=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);o?o(i,n):console.error(n.message)}return t}isComponentAvailable(o){return!!customElements.get(o)}getMissingDependencies(){return this.requiredComponents.filter(o=>!this.isComponentAvailable(o))}areDependenciesAvailable(){return this.requiredComponents.every(o=>this.isComponentAvailable(o))}addRequiredComponent(o){this.requiredComponents.includes(o)||this.requiredComponents.push(o)}removeRequiredComponent(o){const t=this.requiredComponents.indexOf(o);t>-1&&this.requiredComponents.splice(t,1)}},h=o=>class extends o{dispatchCustomEvent(o,t){this.dispatchEvent(new CustomEvent(o,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(o,t){var i;const n=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(o,n)}dispatchInputEvent(o,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(o,i)}dispatchFocusEvent(o,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(o,i)}dispatchValidationEvent(o,t){var i;const n=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(o,n)}dispatchActionEvent(o,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(o,i)}isReadonlyKeyAllowed(o){if(o.ctrlKey||o.metaKey){return["KeyA","KeyC"].includes(o.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(o.key)}isActivationKey(o){return"Enter"===o.key||" "===o.key}},u=new Set,g=new Map;
|
|
211
305
|
/**
|
|
212
306
|
* @license
|
|
213
307
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
214
308
|
* SPDX-License-Identifier: MIT
|
|
215
309
|
*/
|
|
216
|
-
const
|
|
310
|
+
const b=o=>{class t extends o{constructor(){super(...arguments),this.o=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const o=this.constructor.useShadowDom;if(!o&&null===this.o)for(this.o=[];this.firstChild;)this.o.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!o){const o=this.constructor,t=this.tagName.toLowerCase(),i=o.styles;if(i){const o=w(i);o&&function(o,t,i){var n;if(!g.has(o)){const i=new CSSStyleSheet;i.replaceSync(t),g.set(o,i)}const e=g.get(o),r=`doc:${o}`;if(u.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,e],u.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(n=i.host)||void 0===n?void 0:n.tagName)||"").toLowerCase()}:${o}`;u.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,e],u.add(r)),t=i.host}}}}(t,o,this)}}}get lightChildren(){return this.o?this.o.filter(o=>!(o instanceof Element&&o.hasAttribute("slot"))):[]}lightChildrenNamed(o){return this.o?this.o.filter(t=>t instanceof Element&&t.getAttribute("slot")===o):[]}}return t.useShadowDom=!1,t},v=o=>m(d(h(b(o))));function w(o){return Array.isArray(o)?o.map(o=>w(o)).filter(Boolean).join("\n"):o&&"string"==typeof o.cssText?o.cssText:"string"==typeof o?o:""}
|
|
217
311
|
/**
|
|
218
312
|
* @license
|
|
219
313
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
220
314
|
* SPDX-License-Identifier: MIT
|
|
221
|
-
*/var
|
|
315
|
+
*/var x=function(o,t,i,n){for(var e,r=arguments.length,s=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n,c=o.length-1;c>=0;c--)(e=o[c])&&(s=(r<3?e(s):r>3?e(t,i,s):e(t,i))||s);return r>3&&s&&Object.defineProperty(t,i,s),s},y=function(o,t,i,n){return new(i||(i=Promise))(function(e,r){function s(o){try{a(n.next(o))}catch(o){r(o)}}function c(o){try{a(n.throw(o))}catch(o){r(o)}}function a(o){var t;o.done?e(o.value):(t=o.value,t instanceof i?t:new i(function(o){o(t)})).then(s,c)}a((n=n.apply(o,t||[])).next())})};let k=class extends(v(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button","nr-label"],this.title="",this.description="",this.okText="OK",this.cancelText="Cancel",this.okType="primary",this.showCancel=!0,this.icon="exclamation-circle",this.iconColor="",this.placement="top",this.trigger="click",this.disabled=!1,this.arrow=!0,this.open=!1,this.okLoading=!1,this._portalHost=null,this._portalRoot=null,this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this._boundReposition=null,this.handleTriggerClick=o=>{this.disabled||(o.stopPropagation(),this.open?this.closePopconfirm():this.openPopconfirm())},this.handleConfirm=o=>y(this,void 0,void 0,function*(){o.stopPropagation();const t=new CustomEvent("nr-confirm",{bubbles:!0,composed:!0,cancelable:!0,detail:{originalEvent:o}});if(this.dispatchEvent(t)&&!t.defaultPrevented){const t=this.onConfirm;if(t&&"function"==typeof t){const i=t(o);if(i&&"function"==typeof i.then){this.okLoading=!0;try{yield i,this.closePopconfirm()}catch(o){console.error("Confirmation failed:",o)}finally{this.okLoading=!1}return}}this.closePopconfirm()}}),this.handleCancel=o=>{o.stopPropagation(),this.dispatchEvent(new CustomEvent("nr-cancel",{bubbles:!0,composed:!0,detail:{originalEvent:o}})),this.closePopconfirm()}}connectedCallback(){super.connectedCallback(),this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),this._boundReposition=()=>this.reposition(),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown),this._detachViewportListeners(),this._teardownPortal()}updated(o){super.updated(o),o.has("open")&&(this.open?this._attachViewportListeners():this._detachViewportListeners()),this._renderPortal()}_ensurePortal(){if(this._portalRoot)return this._portalRoot;const o=document.createElement("div");return o.setAttribute("data-nr-popconfirm-portal",""),o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.width="0",o.style.height="0",o.style.zIndex="2147483000",document.body.appendChild(o),this._portalHost=o,this._portalRoot=o.attachShadow({mode:"open"}),this._portalRoot}_teardownPortal(){this._portalRoot&&t(i,this._portalRoot),this._portalHost&&this._portalHost.parentNode&&this._portalHost.parentNode.removeChild(this._portalHost),this._portalHost=null,this._portalRoot=null}_attachViewportListeners(){this._boundReposition&&(window.addEventListener("scroll",this._boundReposition,!0),window.addEventListener("resize",this._boundReposition))}_detachViewportListeners(){this._boundReposition&&(window.removeEventListener("scroll",this._boundReposition,!0),window.removeEventListener("resize",this._boundReposition))}_renderPortal(){if(!this.open)return void(this._portalRoot&&t(i,this._portalRoot));const o=this._ensurePortal();t(this._renderPortalTemplate(),o),requestAnimationFrame(()=>this.reposition())}_renderPortalTemplate(){const o=`popconfirm-panel--${this.placement}`;return n`
|
|
316
|
+
<style>${l.cssText}</style>
|
|
317
|
+
<div
|
|
318
|
+
class="popconfirm-panel ${a({[o]:!0,"popconfirm-panel--with-arrow":this.arrow})}"
|
|
319
|
+
part="panel"
|
|
320
|
+
role="dialog"
|
|
321
|
+
@click=${o=>o.stopPropagation()}>
|
|
322
|
+
${this.arrow?n`<div class="popconfirm-arrow" part="arrow"></div>`:i}
|
|
323
|
+
${this.renderContent()}
|
|
324
|
+
</div>
|
|
325
|
+
`}reposition(){if(!this.open||!this._portalRoot)return;const o=this._portalRoot.querySelector(".popconfirm-panel");if(!o)return;const t=this.getBoundingClientRect(),i=o.getBoundingClientRect(),n=this.placement||"top";let e=0,r=0;n.startsWith("top")?e=t.top-i.height-8:n.startsWith("bottom")?e=t.bottom+8:n.startsWith("left")?r=t.left-i.width-8:n.startsWith("right")&&(r=t.right+8),"top"===n||"bottom"===n?r=t.left+(t.width-i.width)/2:"left"===n||"right"===n?e=t.top+(t.height-i.height)/2:n.endsWith("-start")?n.startsWith("top")||n.startsWith("bottom")?r=t.left:e=t.top:n.endsWith("-end")&&(n.startsWith("top")||n.startsWith("bottom")?r=t.right-i.width:e=t.bottom-i.height);const s=window.innerWidth,c=window.innerHeight;r=Math.max(8,Math.min(r,s-i.width-8)),e=Math.max(8,Math.min(e,c-i.height-8)),o.style.top=`${e}px`,o.style.left=`${r}px`}openPopconfirm(){this.open=!0,this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!0}}))}closePopconfirm(){this.open=!1,this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!1}}))}handleOutsideClick(o){if(!this.open)return;const t=o.composedPath();t.includes(this)||this._portalHost&&t.includes(this._portalHost)||this.closePopconfirm()}handleKeydown(o){"Escape"===o.key&&this.open&&this.closePopconfirm()}getIconColor(){return this.iconColor||""}getIconClass(){const o={"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"};return this.iconColor?"custom":o[this.icon]||"warning"}renderContent(){const o=this.getIconClass(),t=this.getIconColor();return n`
|
|
222
326
|
<div class="popconfirm-content" part="content">
|
|
223
327
|
<div class="popconfirm-message" part="message">
|
|
224
328
|
<div
|
|
225
|
-
class="popconfirm-icon popconfirm-icon--${
|
|
329
|
+
class="popconfirm-icon popconfirm-icon--${o}"
|
|
226
330
|
part="icon"
|
|
227
|
-
style=${
|
|
331
|
+
style=${t?`color: ${t}`:""}>
|
|
228
332
|
<nr-icon name=${this.icon}></nr-icon>
|
|
229
333
|
</div>
|
|
230
334
|
<div class="popconfirm-text" part="text">
|
|
231
|
-
${this.title?
|
|
232
|
-
${this.description?
|
|
335
|
+
${this.title?n`<nr-label class="popconfirm-title" size="medium">${this.title}</nr-label>`:""}
|
|
336
|
+
${this.description?n`<nr-label class="popconfirm-description" size="small" variant="secondary">${this.description}</nr-label>`:""}
|
|
233
337
|
</div>
|
|
234
338
|
</div>
|
|
235
339
|
<div class="popconfirm-buttons" part="buttons">
|
|
236
|
-
${this.showCancel?
|
|
340
|
+
${this.showCancel?n`
|
|
237
341
|
<nr-button
|
|
238
342
|
size="small"
|
|
239
343
|
part="cancel-button"
|
|
@@ -252,21 +356,11 @@ const u=t=>{class o extends t{constructor(){super(...arguments),this.t=null}crea
|
|
|
252
356
|
</nr-button>
|
|
253
357
|
</div>
|
|
254
358
|
</div>
|
|
255
|
-
`}render(){return
|
|
256
|
-
<
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
?disabled=${this.disabled}
|
|
261
|
-
?arrow=${this.arrow}
|
|
262
|
-
.closeOnOutsideClick=${!1}
|
|
263
|
-
.closeOnEscape=${!1}>
|
|
264
|
-
<div slot="trigger" part="trigger" @click=${this.handleTriggerClick}>
|
|
265
|
-
<slot name="trigger"></slot>
|
|
266
|
-
</div>
|
|
267
|
-
<div slot="content">${this.renderContent()}</div>
|
|
268
|
-
</nr-dropdown>
|
|
269
|
-
`}};y.useShadowDom=!0,y.styles=a,v([n({type:String})],y.prototype,"title",void 0),v([n({type:String})],y.prototype,"description",void 0),v([n({type:String,attribute:"ok-text"})],y.prototype,"okText",void 0),v([n({type:String,attribute:"cancel-text"})],y.prototype,"cancelText",void 0),v([n({type:String,attribute:"ok-type"})],y.prototype,"okType",void 0),v([n({type:Boolean,attribute:"show-cancel"})],y.prototype,"showCancel",void 0),v([n({type:String})],y.prototype,"icon",void 0),v([n({type:String,attribute:"icon-color"})],y.prototype,"iconColor",void 0),v([n({type:String})],y.prototype,"placement",void 0),v([n({type:String})],y.prototype,"trigger",void 0),v([n({type:Boolean})],y.prototype,"disabled",void 0),v([n({type:Boolean})],y.prototype,"arrow",void 0),v([n({type:Boolean,reflect:!0})],y.prototype,"open",void 0),v([r()],y.prototype,"okLoading",void 0),y=v([s("nr-popconfirm")],y);const w=t`
|
|
359
|
+
`}render(){return n`
|
|
360
|
+
<div class="popconfirm-trigger" part="trigger" @click=${this.handleTriggerClick}>
|
|
361
|
+
<slot name="trigger"></slot>
|
|
362
|
+
</div>
|
|
363
|
+
`}};k.useShadowDom=!0,k.styles=l,x([r({type:String})],k.prototype,"title",void 0),x([r({type:String})],k.prototype,"description",void 0),x([r({type:String,attribute:"ok-text"})],k.prototype,"okText",void 0),x([r({type:String,attribute:"cancel-text"})],k.prototype,"cancelText",void 0),x([r({type:String,attribute:"ok-type"})],k.prototype,"okType",void 0),x([r({type:Boolean,attribute:"show-cancel"})],k.prototype,"showCancel",void 0),x([r({type:String})],k.prototype,"icon",void 0),x([r({type:String,attribute:"icon-color"})],k.prototype,"iconColor",void 0),x([r({type:String})],k.prototype,"placement",void 0),x([r({type:String})],k.prototype,"trigger",void 0),x([r({type:Boolean})],k.prototype,"disabled",void 0),x([r({type:Boolean})],k.prototype,"arrow",void 0),x([r({type:Boolean,reflect:!0})],k.prototype,"open",void 0),x([s()],k.prototype,"okLoading",void 0),k=x([c("nr-popconfirm")],k);const _=o`
|
|
270
364
|
:host {
|
|
271
365
|
display: block;
|
|
272
366
|
}
|
|
@@ -405,48 +499,48 @@ const u=t=>{class o extends t{constructor(){super(...arguments),this.t=null}crea
|
|
|
405
499
|
* @license
|
|
406
500
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
407
501
|
* SPDX-License-Identifier: MIT
|
|
408
|
-
*/;var
|
|
502
|
+
*/;var $,C=function(o,t,i,n){for(var e,r=arguments.length,s=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n,c=o.length-1;c>=0;c--)(e=o[c])&&(s=(r<3?e(s):r>3?e(t,i,s):e(t,i))||s);return r>3&&s&&Object.defineProperty(t,i,s),s},E=function(o,t,i,n){return new(i||(i=Promise))(function(e,r){function s(o){try{a(n.next(o))}catch(o){r(o)}}function c(o){try{a(n.throw(o))}catch(o){r(o)}}function a(o){var t;o.done?e(o.value):(t=o.value,t instanceof i?t:new i(function(o){o(t)})).then(s,c)}a((n=n.apply(o,t||[])).next())})};let S=$=class extends(v(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button","nr-label"],this.items=[],this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this._showTimestamp=0}connectedCallback(){super.connectedCallback(),$._instance=this,this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),$._instance=null,this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown)}static getInstance(){return $._instance}static confirm(o,t){return E(this,void 0,void 0,function*(){const i=$.getInstance();return i?new Promise(n=>{i.show(Object.assign(Object.assign({},o),{onConfirm:()=>E(this,void 0,void 0,function*(){var t;yield null===(t=o.onConfirm)||void 0===t?void 0:t.call(o),n(!0)}),onCancel:()=>{var t;null===(t=o.onCancel)||void 0===t||t.call(o),n(!1)}}),t)}):(console.warn("NrPopconfirmManager: No instance found. Add <nr-popconfirm-manager> to your app."),!1)})}show(o,t){const i=this.generateId(),n={id:i,config:o,position:this.adjustPosition(t),loading:!1};return this._showTimestamp=Date.now(),this.items=[n],console.log("[nr-popconfirm-manager] show() called, items:",this.items),this.requestUpdate(),i}close(o){this.items=this.items.filter(t=>t.id!==o)}closeAll(){this.items=[]}handleConfirm(o,t){return E(this,void 0,void 0,function*(){t.stopPropagation();const i=new CustomEvent("nr-popconfirm-confirm",{bubbles:!0,composed:!0,detail:{id:o.id,config:o.config}});if(this.dispatchEvent(i),o.config.onConfirm){const t=o.config.onConfirm();if(t&&"function"==typeof t.then){o.loading=!0,this.requestUpdate();try{yield t}catch(o){console.error("Popconfirm confirmation failed:",o)}finally{o.loading=!1}}}this.close(o.id)})}handleCancel(o,t){var i,n;t.stopPropagation();const e=new CustomEvent("nr-popconfirm-cancel",{bubbles:!0,composed:!0,detail:{id:o.id,config:o.config}});this.dispatchEvent(e),null===(n=(i=o.config).onCancel)||void 0===n||n.call(i),this.close(o.id)}handleOutsideClick(o){var t;if(0===this.items.length)return;if(Date.now()-this._showTimestamp<100)return;const i=o.composedPath(),n=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".popconfirm-manager__item");n&&!i.includes(n)&&(this.items.forEach(o=>{var t,i;null===(i=(t=o.config).onCancel)||void 0===i||i.call(t)}),this.closeAll())}handleKeydown(o){"Escape"===o.key&&this.items.length>0&&(this.items.forEach(o=>{var t,i;null===(i=(t=o.config).onCancel)||void 0===i||i.call(t)}),this.closeAll())}adjustPosition(o){const t=16,i=window.innerWidth,n=window.innerHeight;let e=o.x,r=o.y;return e+280>i-t&&(e=i-280-t),e<t&&(e=t),r+120>n-t&&(r=o.y-120-8),r<t&&(r=t),{x:e,y:r}}generateId(){return`popconfirm-${crypto.randomUUID()}`}getIconClass(o){return{"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"}[o||""]||"warning"}renderItem(o){const{config:t,position:e}=o,r=t.icon||"exclamation-circle",s=t.iconColor?"custom":this.getIconClass(r),c=!1!==t.showCancel,a={left:`${e.x}px`,top:`${e.y}px`},l=t.iconColor?{color:t.iconColor}:{};return n`
|
|
409
503
|
<div
|
|
410
504
|
class="popconfirm-manager__item"
|
|
411
|
-
style=${
|
|
412
|
-
@click=${
|
|
505
|
+
style=${p(a)}
|
|
506
|
+
@click=${o=>o.stopPropagation()}
|
|
413
507
|
>
|
|
414
508
|
<div class="popconfirm-manager__content">
|
|
415
509
|
<div class="popconfirm-manager__message">
|
|
416
510
|
<div
|
|
417
511
|
class="popconfirm-manager__icon popconfirm-manager__icon--${s}"
|
|
418
|
-
style=${
|
|
512
|
+
style=${p(l)}
|
|
419
513
|
>
|
|
420
514
|
<nr-icon name=${r}></nr-icon>
|
|
421
515
|
</div>
|
|
422
516
|
<div class="popconfirm-manager__text">
|
|
423
|
-
${
|
|
424
|
-
${
|
|
517
|
+
${t.title?n`<nr-label class="popconfirm-manager__title" size="medium">${t.title}</nr-label>`:i}
|
|
518
|
+
${t.description?n`<nr-label class="popconfirm-manager__description" size="small" variant="secondary">${t.description}</nr-label>`:i}
|
|
425
519
|
</div>
|
|
426
520
|
</div>
|
|
427
521
|
<div class="popconfirm-manager__buttons">
|
|
428
|
-
${
|
|
522
|
+
${c?n`
|
|
429
523
|
<nr-button
|
|
430
524
|
size="small"
|
|
431
|
-
@click=${
|
|
525
|
+
@click=${t=>this.handleCancel(o,t)}
|
|
432
526
|
>
|
|
433
|
-
${
|
|
527
|
+
${t.cancelText||"Cancel"}
|
|
434
528
|
</nr-button>
|
|
435
529
|
`:i}
|
|
436
530
|
<nr-button
|
|
437
531
|
size="small"
|
|
438
|
-
type=${"danger"===
|
|
439
|
-
?loading=${
|
|
440
|
-
?disabled=${
|
|
441
|
-
@click=${
|
|
532
|
+
type=${"danger"===t.okType?"danger":"primary"===t.okType?"primary":"default"}
|
|
533
|
+
?loading=${o.loading}
|
|
534
|
+
?disabled=${o.loading}
|
|
535
|
+
@click=${t=>this.handleConfirm(o,t)}
|
|
442
536
|
>
|
|
443
|
-
${
|
|
537
|
+
${t.okText||"OK"}
|
|
444
538
|
</nr-button>
|
|
445
539
|
</div>
|
|
446
540
|
</div>
|
|
447
541
|
</div>
|
|
448
|
-
`}render(){return 0===this.items.length?i:
|
|
542
|
+
`}render(){return 0===this.items.length?i:n`
|
|
449
543
|
<div class="popconfirm-manager">
|
|
450
|
-
${this.items.map(
|
|
544
|
+
${this.items.map(o=>this.renderItem(o))}
|
|
451
545
|
</div>
|
|
452
|
-
`}};
|
|
546
|
+
`}};S.useShadowDom=!0,S.styles=_,S._instance=null,C([s()],S.prototype,"items",void 0),S=$=C([c("nr-popconfirm-manager")],S);export{k as NrPopconfirmElement,S as NrPopconfirmManagerElement};
|
|
Binary file
|
|
@@ -9,45 +9,9 @@ declare const NrPopconfirmElement_base: (new (...args: any[]) => import("@nuraly
|
|
|
9
9
|
/**
|
|
10
10
|
* # Popconfirm Component
|
|
11
11
|
*
|
|
12
|
-
* A pop-up confirmation dialog triggered by user interaction.
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* ## Features
|
|
16
|
-
* - Customizable title and description
|
|
17
|
-
* - Configurable OK and Cancel buttons
|
|
18
|
-
* - Multiple placement options (12 positions)
|
|
19
|
-
* - Custom icons with predefined options
|
|
20
|
-
* - Async confirmation support
|
|
21
|
-
* - Multiple trigger modes (click, hover, focus)
|
|
22
|
-
* - Theme-aware styling
|
|
23
|
-
* - Keyboard accessibility
|
|
24
|
-
*
|
|
25
|
-
* ## Usage
|
|
26
|
-
* ```html
|
|
27
|
-
* <!-- Basic popconfirm -->
|
|
28
|
-
* <nr-popconfirm
|
|
29
|
-
* title="Are you sure delete this task?"
|
|
30
|
-
* ok-text="Yes"
|
|
31
|
-
* cancel-text="No">
|
|
32
|
-
* <button slot="trigger">Delete</button>
|
|
33
|
-
* </nr-popconfirm>
|
|
34
|
-
*
|
|
35
|
-
* <!-- With description -->
|
|
36
|
-
* <nr-popconfirm
|
|
37
|
-
* title="Delete the task"
|
|
38
|
-
* description="Are you sure you want to delete this task? This action cannot be undone."
|
|
39
|
-
* ok-type="danger">
|
|
40
|
-
* <button slot="trigger">Delete</button>
|
|
41
|
-
* </nr-popconfirm>
|
|
42
|
-
*
|
|
43
|
-
* <!-- Custom icon -->
|
|
44
|
-
* <nr-popconfirm
|
|
45
|
-
* title="Change status?"
|
|
46
|
-
* icon="question-circle"
|
|
47
|
-
* icon-color="#1890ff">
|
|
48
|
-
* <button slot="trigger">Change Status</button>
|
|
49
|
-
* </nr-popconfirm>
|
|
50
|
-
* ```
|
|
12
|
+
* A pop-up confirmation dialog triggered by user interaction. The panel is rendered
|
|
13
|
+
* into a body-level portal so it escapes ancestor stacking contexts and is not
|
|
14
|
+
* hidden when the trigger's ancestors are toggled with `display: none`.
|
|
51
15
|
*
|
|
52
16
|
* @element nr-popconfirm
|
|
53
17
|
* @fires nr-confirm - Fired when user confirms the action
|
|
@@ -62,112 +26,44 @@ export declare class NrPopconfirmElement extends NrPopconfirmElement_base {
|
|
|
62
26
|
static useShadowDom: boolean;
|
|
63
27
|
static styles: import("lit").CSSResult;
|
|
64
28
|
requiredComponents: string[];
|
|
65
|
-
/**
|
|
66
|
-
* Title of the confirmation box
|
|
67
|
-
*/
|
|
68
29
|
title: string;
|
|
69
|
-
/**
|
|
70
|
-
* Description of the confirmation box (optional)
|
|
71
|
-
*/
|
|
72
30
|
description: string;
|
|
73
|
-
/**
|
|
74
|
-
* Text of the OK button
|
|
75
|
-
*/
|
|
76
31
|
okText: string;
|
|
77
|
-
/**
|
|
78
|
-
* Text of the Cancel button
|
|
79
|
-
*/
|
|
80
32
|
cancelText: string;
|
|
81
|
-
/**
|
|
82
|
-
* Button type of the OK button
|
|
83
|
-
*/
|
|
84
33
|
okType: PopconfirmButtonType;
|
|
85
|
-
/**
|
|
86
|
-
* Show cancel button
|
|
87
|
-
*/
|
|
88
34
|
showCancel: boolean;
|
|
89
|
-
/**
|
|
90
|
-
* Icon name for the confirmation box
|
|
91
|
-
*/
|
|
92
35
|
icon: PopconfirmIcon;
|
|
93
|
-
/**
|
|
94
|
-
* Custom icon color
|
|
95
|
-
*/
|
|
96
36
|
iconColor: string;
|
|
97
|
-
/**
|
|
98
|
-
* Placement of the popconfirm
|
|
99
|
-
*/
|
|
100
37
|
placement: PopconfirmPlacement;
|
|
101
|
-
/**
|
|
102
|
-
* Trigger mode
|
|
103
|
-
*/
|
|
104
38
|
trigger: PopconfirmTrigger;
|
|
105
|
-
/**
|
|
106
|
-
* Whether the popconfirm is disabled
|
|
107
|
-
*/
|
|
108
39
|
disabled: boolean;
|
|
109
|
-
/**
|
|
110
|
-
* Whether to show arrow
|
|
111
|
-
*/
|
|
112
40
|
arrow: boolean;
|
|
113
|
-
/**
|
|
114
|
-
* Whether the popconfirm is open
|
|
115
|
-
*/
|
|
116
41
|
open: boolean;
|
|
117
|
-
/**
|
|
118
|
-
* Loading state for OK button (for async operations)
|
|
119
|
-
*/
|
|
120
42
|
private okLoading;
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
*/
|
|
43
|
+
private _portalHost;
|
|
44
|
+
private _portalRoot;
|
|
124
45
|
private _boundHandleOutsideClick;
|
|
125
46
|
private _boundHandleKeydown;
|
|
126
|
-
|
|
127
|
-
* Reference to the dropdown element
|
|
128
|
-
*/
|
|
129
|
-
private get dropdownElement();
|
|
47
|
+
private _boundReposition;
|
|
130
48
|
connectedCallback(): void;
|
|
131
49
|
disconnectedCallback(): void;
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
50
|
+
updated(changed: Map<string, any>): void;
|
|
51
|
+
private _ensurePortal;
|
|
52
|
+
private _teardownPortal;
|
|
53
|
+
private _attachViewportListeners;
|
|
54
|
+
private _detachViewportListeners;
|
|
55
|
+
private _renderPortal;
|
|
56
|
+
private _renderPortalTemplate;
|
|
57
|
+
private reposition;
|
|
135
58
|
private handleTriggerClick;
|
|
136
|
-
/**
|
|
137
|
-
* Open the popconfirm
|
|
138
|
-
*/
|
|
139
59
|
private openPopconfirm;
|
|
140
|
-
|
|
141
|
-
* Handle clicks outside the popconfirm to close it
|
|
142
|
-
*/
|
|
60
|
+
private closePopconfirm;
|
|
143
61
|
private handleOutsideClick;
|
|
144
|
-
/**
|
|
145
|
-
* Handle escape key to close popconfirm
|
|
146
|
-
*/
|
|
147
62
|
private handleKeydown;
|
|
148
|
-
/**
|
|
149
|
-
* Handle confirm button click
|
|
150
|
-
*/
|
|
151
63
|
private handleConfirm;
|
|
152
|
-
/**
|
|
153
|
-
* Handle cancel button click
|
|
154
|
-
*/
|
|
155
64
|
private handleCancel;
|
|
156
|
-
/**
|
|
157
|
-
* Close the popconfirm
|
|
158
|
-
*/
|
|
159
|
-
private closePopconfirm;
|
|
160
|
-
/**
|
|
161
|
-
* Get icon color based on icon type
|
|
162
|
-
*/
|
|
163
65
|
private getIconColor;
|
|
164
|
-
/**
|
|
165
|
-
* Get icon class based on icon type
|
|
166
|
-
*/
|
|
167
66
|
private getIconClass;
|
|
168
|
-
/**
|
|
169
|
-
* Render the popconfirm content
|
|
170
|
-
*/
|
|
171
67
|
private renderContent;
|
|
172
68
|
render(): import("lit-html").TemplateResult<1>;
|
|
173
69
|
}
|