@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/file-upload/bundle.js

@@ -1,15 +1,15 @@
-import{css as e,LitElement as t,html as r}from"lit";import{property as o,state as i,customElement as a}from"lit/decorators.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";const l=e`
+import{css as e,html as t,LitElement as i}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";const a=e`
 :host {
   display: block;
-  font-family: var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 .upload {
   width: 100%;
 }
 .upload-dragger {
-  background-color: var(--nuraly-color-surface, #f8f9fa);
-  border: 1px dashed var(--nuraly-color-border, #d9d9d9);
-  border-radius: var(--nuraly-border-radius-md, 6px);
+  background-color: #f8f9fa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
   box-sizing: border-box;
   width: 100%;
   height: 180px;
@@ -17,48 +17,48 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: border-color var(--nuraly-transition-normal, 0.3s);
+  transition: border-color 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .upload-dragger:hover {
-  border-color: var(--nuraly-color-primary, #409eff);
+  border-color: #409eff;
 }
 .upload-dragger.is-dragover {
-  background-color: var(--nuraly-color-background-hover, rgba(64, 158, 255, 0.06));
-  border-color: var(--nuraly-color-primary, #409eff);
+  background-color: rgba(64, 158, 255, 0.06);
+  border-color: #409eff;
 }
 .upload-icon {
   font-size: 28px;
-  color: var(--nuraly-color-text-tertiary, #c0c4cc);
+  color: #c0c4cc;
   margin-bottom: 8px;
 }
 .upload-text {
-  color: var(--nuraly-color-text-secondary, #606266);
-  font-size: var(--nuraly-font-size-02, 14px);
+  color: #606266;
+  font-size: 14px;
   text-align: center;
   padding: 0 12px;
 }
 .upload-tip {
-  font-size: var(--nuraly-font-size-01, 12px);
-  color: var(--nuraly-color-text-tertiary, #909399);
+  font-size: 12px;
+  color: #909399;
   margin-top: 7px;
   padding: 0 12px;
 }
 .upload-button {
   padding: 8px 16px;
-  background-color: var(--nuraly-color-primary, #409eff);
-  color: var(--nuraly-color-text-on-color, white);
+  background-color: #409eff;
+  color: white;
   border: none;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   cursor: pointer;
-  font-size: var(--nuraly-font-size-02, 14px);
-  transition: background-color var(--nuraly-transition-normal, 0.3s);
+  font-size: 14px;
+  transition: background-color 0.3s;
 }
 .upload-button:hover {
-  background-color: var(--nuraly-color-primary-hover, #66b1ff);
+  background-color: #66b1ff;
 }
 .file-list {
   margin-top: 10px;
@@ -68,9 +68,9 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   display: flex;
   align-items: center;
   margin-bottom: 8px;
-  transition: all var(--nuraly-transition-normal, 0.3s);
+  transition: all 0.3s;
   padding: 8px;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   gap: 8px;
   width: 100%;
   box-sizing: border-box;
@@ -80,22 +80,22 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   max-width: 100%;
 }
 .file-item:hover {
-  background-color: var(--nuraly-color-surface-hover, #f8f9fa);
+  background-color: #f8f9fa;
 }
 .file-name {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--nuraly-color-text-secondary, #606266);
+  color: #606266;
   min-width: 0;
   max-width: 100%;
   word-break: break-all;
   width: 0;
 }
 .file-size {
-  color: var(--nuraly-color-text-tertiary, #909399);
-  font-size: var(--nuraly-font-size-01, 12px);
+  color: #909399;
+  font-size: 12px;
   flex-shrink: 0;
   margin-left: 8px;
   white-space: nowrap;
@@ -115,10 +115,10 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: var(--nuraly-color-text-tertiary, #909399);
+  color: #909399;
 }
 .file-actions button:hover {
-  color: var(--nuraly-color-primary, #409eff);
+  color: #409eff;
 }
 
 /* Dark theme support - using data-theme attribute */
@@ -127,80 +127,80 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
 /* Upload dragger - dark theme */
 :host-context([data-theme*="dark"]) .upload-dragger,
 :host([data-theme*="dark"]) .upload-dragger {
-  background-color: var(--nuraly-color-layer-01, #262626);
-  border-color: var(--nuraly-color-border-subtle, #525252);
+  background-color: #262626;
+  border-color: #525252;
 }
 :host-context([data-theme*="dark"]) .upload-dragger:hover,
 :host([data-theme*="dark"]) .upload-dragger:hover {
-  border-color: var(--nuraly-color-button-primary, #78a9ff);
+  border-color: #78a9ff;
 }
 :host-context([data-theme*="dark"]) .upload-dragger.is-dragover,
 :host([data-theme*="dark"]) .upload-dragger.is-dragover {
   background-color: rgba(120, 169, 255, 0.1);
-  border-color: var(--nuraly-color-button-primary, #78a9ff);
+  border-color: #78a9ff;
 }
 
 /* Upload icon - dark theme */
 :host-context([data-theme*="dark"]) .upload-icon,
 :host([data-theme*="dark"]) .upload-icon {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* Upload text - dark theme */
 :host-context([data-theme*="dark"]) .upload-text,
 :host([data-theme*="dark"]) .upload-text {
-  color: var(--nuraly-color-text-primary, #f4f4f4);
+  color: #f4f4f4;
 }
 
 /* Upload tip - dark theme */
 :host-context([data-theme*="dark"]) .upload-tip,
 :host([data-theme*="dark"]) .upload-tip {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* File item - dark theme */
 :host-context([data-theme*="dark"]) .file-item,
 :host([data-theme*="dark"]) .file-item {
-  background-color: var(--nuraly-color-layer-01, #262626);
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  background-color: #262626;
+  border-radius: 4px;
 }
 :host-context([data-theme*="dark"]) .file-item:hover,
 :host([data-theme*="dark"]) .file-item:hover {
-  background-color: var(--nuraly-color-layer-hover-01, #393939);
+  background-color: #393939;
 }
 
 /* File name - dark theme */
 :host-context([data-theme*="dark"]) .file-name,
 :host([data-theme*="dark"]) .file-name {
-  color: var(--nuraly-color-text-primary, #f4f4f4);
+  color: #f4f4f4;
 }
 
 /* File size - dark theme */
 :host-context([data-theme*="dark"]) .file-size,
 :host([data-theme*="dark"]) .file-size {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* File actions - dark theme */
 :host-context([data-theme*="dark"]) .file-actions button,
 :host([data-theme*="dark"]) .file-actions button {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 :host-context([data-theme*="dark"]) .file-actions button:hover,
 :host([data-theme*="dark"]) .file-actions button:hover {
-  color: var(--nuraly-color-button-primary, #78a9ff);
+  color: #78a9ff;
 }
 
 /* File item SVG icons - dark theme */
 :host-context([data-theme*="dark"]) .file-item > svg,
 :host([data-theme*="dark"]) .file-item > svg {
-  color: var(--nuraly-color-text-secondary, #8d8d8d);
+  color: #8d8d8d;
 }
 
 /* Progress bar - dark theme */
 :host-context([data-theme*="dark"]) .progress-bar,
 :host([data-theme*="dark"]) .progress-bar {
-  background-color: var(--nuraly-color-border-subtle, #525252);
+  background-color: #525252;
 }
 
 /* Preview modal - dark theme */
@@ -213,7 +213,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
 .progress-bar {
   height: 2px;
   width: 100%;
-  background-color: var(--nuraly-color-border, #e6e6e6);
+  background-color: #e6e6e6;
   margin-top: 4px;
   position: relative;
   border-radius: 2px;
@@ -221,7 +221,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
 }
 .progress-inner {
   height: 100%;
-  background-color: var(--nuraly-color-primary, #409eff);
+  background-color: #409eff;
   position: absolute;
   left: 0;
   top: 0;
@@ -233,21 +233,21 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   position: absolute;
   right: 0;
   top: -18px;
-  font-size: var(--nuraly-font-size-01, 12px);
-  color: var(--nuraly-color-primary, #409eff);
+  font-size: 12px;
+  color: #409eff;
 }
 
 .hidden {
   display: none;
 }
 .success {
-  color: var(--nuraly-color-success, #67c23a);
+  color: #67c23a;
 }
 .error {
-  color: var(--nuraly-color-danger, #f56c6c);
+  color: #f56c6c;
 }
 .icon-delete {
-  color: var(--nuraly-color-danger, #f56c6c);
+  color: #f56c6c;
 }
 .file-preview {
   width: 100%;
@@ -257,7 +257,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   display: block;
   max-width: 100%;
   max-height: 200px;
-  border-radius: var(--nuraly-border-radius-sm, 4px);
+  border-radius: 4px;
   object-fit: contain;
   cursor: zoom-in;
 }
@@ -267,11 +267,11 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nuraly-color-background-overlay, rgba(0, 0, 0, 0.7));
+  background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: var(--nuraly-z-modal, 1000);
+  z-index: 1000;
 }
 .preview-modal img {
   max-width: 90%;
@@ -282,7 +282,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   position: absolute;
   top: 20px;
   right: 20px;
-  color: var(--nuraly-color-text-inverse, white);
+  color: white;
   font-size: 30px;
   background: none;
   border: none;
@@ -290,7 +290,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
 }
 .preview-icon {
   padding: 4px;
-  color: var(--nuraly-color-primary, #409eff);
+  color: #409eff;
   cursor: zoom-in;
 }
 
@@ -305,14 +305,14 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
 @media (max-width: 600px) {
   .upload-dragger {
     height: 140px;
-    padding: var(--nuraly-spacing-04, 12px);
+    padding: 12px;
   }
   .upload-icon {
     font-size: 24px;
   }
   .upload-text,
   .upload-tip {
-    font-size: var(--nuraly-font-size-01, 13px);
+    font-size: 13px;
   }
   .file-item {
     display: grid;
@@ -324,7 +324,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
       "actions actions";
     gap: 4px 8px;
     align-items: center;
-    padding: var(--nuraly-spacing-03, 8px);
+    padding: 8px;
     width: 100%;
     box-sizing: border-box;
     overflow: hidden; /* Hide content that overflows */
@@ -365,10 +365,16 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
   }
   .upload-button {
     width: 100%;
-    font-size: var(--nuraly-font-size-03, 16px);
+    font-size: 16px;
   }
 }
-`,n={isImageFile:e=>e.type.startsWith("image/"),formatFileSize(e){if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024));return Number.parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["B","KB","MB","GB","TB"][t]},createFilePreview:e=>new Promise(t=>{const r=new FileReader;r.onload=e=>{var r;t(null===(r=e.target)||void 0===r?void 0:r.result)},r.readAsDataURL(e)})};var d=function(e,t,r,o){for(var i,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o,l=e.length-1;l>=0;l--)(i=e[l])&&(s=(a<3?i(s):a>3?i(t,r,s):i(t,r))||s);return a>3&&s&&Object.defineProperty(t,r,s),s},c=function(e,t,r,o){return new(r||(r=Promise))(function(i,a){function s(e){try{n(o.next(e))}catch(e){a(e)}}function l(e){try{n(o.throw(e))}catch(e){a(e)}}function n(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(s,l)}n((o=o.apply(e,t||[])).next())})};let h=class extends(s(t)){constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=e=>{e.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=e=>{e.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=e=>{e.target===this||this.contains(e.target)||(e.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=e=>{e.preventDefault();const t=e.composedPath().includes(this);this.isDragOver=!!t},this._onDrop=e=>{var t;e.preventDefault(),e.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(t=e.dataTransfer)||void 0===t?void 0:t.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:e.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(e.dataTransfer.files))},this._onClick=()=>{var e;null===(e=this.inputElement)||void 0===e||e.click()},this._onChange=e=>{const t=e.target;t.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:t.files,bubbles:!0,composed:!0})),this._handleFiles(t.files),t.value="")}}connectedCallback(){super.connectedCallback(),this._updateThemeAttribute(),this.drag&&(document.addEventListener("dragenter",this._onDocumentDragEnter),document.addEventListener("dragleave",this._onDocumentDragLeave),document.addEventListener("drop",this._onDocumentDrop),document.addEventListener("dragover",this._onDocumentDragOver))}updated(e){super.updated(e),this._updateThemeAttribute()}_updateThemeAttribute(){const e=this.explicitTheme;e?this.setAttribute("data-theme",e):this.removeAttribute("data-theme")}disconnectedCallback(){super.disconnectedCallback(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(e){var t;super.firstUpdated(e),this.inputElement=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('input[type="file"]'))||null}_handleFiles(e){return c(this,void 0,void 0,function*(){if(this.multiple&&this.limit>0&&this.fileList.length+e.length>this.limit)return void this._dispatchEvent("exceed",{files:e});if(!this.multiple&&e.length>0){const t=e[e.length-1];this.previewImage&&this.fileList.some(e=>e.url===this.previewImage)&&(this.previewImage=null);const r=[...this.fileList];for(const e of r)this._dispatchEvent("remove",{file:e});this.fileList=[];const o=n.isImageFile(t),i={name:t.name,size:n.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(i.url=yield n.createFilePreview(t)),this.fileList=[i],this.requestUpdate(),void this._dispatchEvent("select",{files:[i],fileList:this.fileList})}const t=[];for(const r of Array.from(e)){const e=n.isImageFile(r),o={name:r.name,size:n.formatFileSize(r.size),raw:r,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:e};this.preview&&this.generatePreviewOnUpload&&e&&(o.url=yield n.createFilePreview(r)),this.fileList=[...this.fileList,o],t.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:t,fileList:this.fileList})})}updateFileStatus(e,t,r){const o=this.fileList.find(t=>t.uid===e);o&&(o.status=t,void 0!==r&&(o.percentage=r),this._updateFile(o))}_updateFile(e){this.fileList=this.fileList.map(t=>t.uid===e.uid?e:t),this.requestUpdate()}_removeFile(e){const t=this.fileList.find(t=>t.uid===e);this.fileList=this.fileList.filter(t=>t.uid!==e),t&&this._dispatchEvent("remove",{file:t}),this.requestUpdate()}_dispatchEvent(e,t){this.dispatchEvent(new CustomEvent(`file-${e}`,{detail:t,bubbles:!0,composed:!0}))}_showPreview(e){this.previewImage=e}_closePreview(){this.previewImage=null}render(){return r`
+`,n={isImageFile:e=>e.type.startsWith("image/"),formatFileSize(e){if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024));return Number.parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["B","KB","MB","GB","TB"][t]},createFilePreview:e=>new Promise(t=>{const i=new FileReader;i.onload=e=>{var i;t(null===(i=e.target)||void 0===i?void 0:i.result)},i.readAsDataURL(e)})},d=e=>class extends e{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 e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.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 e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.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 e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.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))}},l=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!l())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,o):console.error(o.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const o=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,o)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const o=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,o)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},p=new Set,u=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=g(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const s=u.get(e),r=`doc:${e}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function g(e){return Array.isArray(e)?e.map(e=>g(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var m=function(e,t,i,o){for(var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,n=e.length-1;n>=0;n--)(s=e[n])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},v=function(e,t,i,o){return new(i||(i=Promise))(function(s,r){function a(e){try{d(o.next(e))}catch(e){r(e)}}function n(e){try{d(o.throw(e))}catch(e){r(e)}}function d(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(a,n)}d((o=o.apply(e,t||[])).next())})};let w=class extends((e=>h(d(c(f(e)))))(i)){constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=e=>{e.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=e=>{e.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=e=>{e.target===this||this.contains(e.target)||(e.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=e=>{e.preventDefault();const t=e.composedPath().includes(this);this.isDragOver=!!t},this._onDrop=e=>{var t;e.preventDefault(),e.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(t=e.dataTransfer)||void 0===t?void 0:t.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:e.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(e.dataTransfer.files))},this._onClick=()=>{var e;null===(e=this.inputElement)||void 0===e||e.click()},this._onChange=e=>{const t=e.target;t.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:t.files,bubbles:!0,composed:!0})),this._handleFiles(t.files),t.value="")}}connectedCallback(){super.connectedCallback(),this._updateThemeAttribute(),this.drag&&(document.addEventListener("dragenter",this._onDocumentDragEnter),document.addEventListener("dragleave",this._onDocumentDragLeave),document.addEventListener("drop",this._onDocumentDrop),document.addEventListener("dragover",this._onDocumentDragOver))}updated(e){super.updated(e),this._updateThemeAttribute()}_updateThemeAttribute(){const e=this.explicitTheme;e?this.setAttribute("data-theme",e):this.removeAttribute("data-theme")}disconnectedCallback(){super.disconnectedCallback(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(e){var t;super.firstUpdated(e),this.inputElement=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('input[type="file"]'))||null}_handleFiles(e){return v(this,void 0,void 0,function*(){if(this.multiple&&this.limit>0&&this.fileList.length+e.length>this.limit)return void this._dispatchEvent("exceed",{files:e});if(!this.multiple&&e.length>0){const t=e[e.length-1];this.previewImage&&this.fileList.some(e=>e.url===this.previewImage)&&(this.previewImage=null);const i=[...this.fileList];for(const e of i)this._dispatchEvent("remove",{file:e});this.fileList=[];const o=n.isImageFile(t),s={name:t.name,size:n.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield n.createFilePreview(t)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const t=[];for(const i of Array.from(e)){const e=n.isImageFile(i),o={name:i.name,size:n.formatFileSize(i.size),raw:i,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:e};this.preview&&this.generatePreviewOnUpload&&e&&(o.url=yield n.createFilePreview(i)),this.fileList=[...this.fileList,o],t.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:t,fileList:this.fileList})})}updateFileStatus(e,t,i){const o=this.fileList.find(t=>t.uid===e);o&&(o.status=t,void 0!==i&&(o.percentage=i),this._updateFile(o))}_updateFile(e){this.fileList=this.fileList.map(t=>t.uid===e.uid?e:t),this.requestUpdate()}_removeFile(e){const t=this.fileList.find(t=>t.uid===e);this.fileList=this.fileList.filter(t=>t.uid!==e),t&&this._dispatchEvent("remove",{file:t}),this.requestUpdate()}_dispatchEvent(e,t){this.dispatchEvent(new CustomEvent(`file-${e}`,{detail:t,bubbles:!0,composed:!0}))}_showPreview(e){this.previewImage=e}_closePreview(){this.previewImage=null}render(){return t`
       <div class="upload" @drop=${this._onDrop} @dragover=${e=>e.preventDefault()}>
         <input 
           type="file" 
@@ -378,7 +384,7 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
           @change=${this._onChange}
         />
 
-        ${this.showDragArea?r`
+        ${this.showDragArea?t`
           <div 
             class="upload-dragger ${this.isDragOver?"is-dragover":""}" 
             @click=${this._onClick}
@@ -391,23 +397,23 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
               </svg>
             </div>
             <div class="upload-text">Drop file here or click to upload</div>
-            ${this.tip?r`<div class="upload-tip">${this.tip}</div>`:""}
+            ${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}
           </div>
-        `:r`
+        `:t`
         <nr-button  @click=${this._onClick}>Upload File</nr-button>
-          ${this.tip?r`<div class="upload-tip">${this.tip}</div>`:""}
+          ${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}
         `}
 
         <div class="file-list">
-          ${this.fileList.map(e=>r`
+          ${this.fileList.map(e=>t`
             <div class="file-item">
-              ${e.isImage?r`
+              ${e.isImage?t`
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                   <circle cx="8.5" cy="8.5" r="1.5"></circle>
                   <polyline points="21 15 16 10 5 21"></polyline>
                 </svg>
-              `:r`
+              `:t`
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                   <polyline points="14 2 14 8 20 8"></polyline>
@@ -416,19 +422,19 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
               <div class="file-name">${e.name}</div>
               <div class="file-size">${e.size}</div>
               <div class="file-status">
-                ${"success"===e.status?r`
+                ${"success"===e.status?t`
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#67c23a" stroke-width="2">
                     <polyline points="20 6 9 17 4 12"></polyline>
                   </svg>
-                `:"error"===e.status?r`
+                `:"error"===e.status?t`
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f56c6c" stroke-width="2">
                     <line x1="18" y1="6" x2="6" y2="18"></line>
                     <line x1="6" y1="6" x2="18" y2="18"></line>
                   </svg>
-                `:"uploading"===e.status?r`${e.percentage}%`:""}
+                `:"uploading"===e.status?t`${e.percentage}%`:""}
               </div>
               <div class="file-actions">
-                ${e.isImage&&e.url?r`
+                ${e.isImage&&e.url?t`
                   <button class="preview-icon" @click=${()=>this._showPreview(e.url)}>
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
@@ -443,13 +449,13 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
                   </svg>
                 </button>
               </div>
-              ${"uploading"===e.status?r`
+              ${"uploading"===e.status?t`
                 <div class="progress-bar">
                   <div class="progress-inner" style="width: ${e.percentage}%"></div>
                 </div>
               `:""}
             </div>
-            ${this.preview&&e.isImage&&e.url?r`
+            ${this.preview&&e.isImage&&e.url?t`
               <div class="file-preview">
                 <img 
                   class="image-preview" 
@@ -462,11 +468,11 @@ import{css as e,LitElement as t,html as r}from"lit";import{property as o,state a
           `)}
         </div>
 
-        ${this.previewImage?r`
+        ${this.previewImage?t`
           <div class="preview-modal" @click=${this._closePreview}>
             <button class="preview-close">×</button>
             <img src="${this.previewImage}" alt="Preview" />
           </div>
         `:""}
       </div>
-    `}};h.styles=l,d([o({type:String})],h.prototype,"accept",void 0),d([o({type:Boolean})],h.prototype,"multiple",void 0),d([o({type:Boolean})],h.prototype,"drag",void 0),d([o({type:String})],h.prototype,"tip",void 0),d([o({type:Number})],h.prototype,"limit",void 0),d([o({type:Boolean})],h.prototype,"preview",void 0),d([o({type:Boolean})],h.prototype,"generatePreviewOnUpload",void 0),d([i()],h.prototype,"fileList",void 0),d([i()],h.prototype,"isDragOver",void 0),d([i()],h.prototype,"showDragArea",void 0),d([i()],h.prototype,"inputElement",void 0),d([i()],h.prototype,"dragCounter",void 0),d([i()],h.prototype,"previewImage",void 0),h=d([a("nr-file-upload")],h);export{h as FileUpload};
+    `}};w.useShadowDom=!0,w.styles=a,m([o({type:String})],w.prototype,"accept",void 0),m([o({type:Boolean})],w.prototype,"multiple",void 0),m([o({type:Boolean})],w.prototype,"drag",void 0),m([o({type:String})],w.prototype,"tip",void 0),m([o({type:Number})],w.prototype,"limit",void 0),m([o({type:Boolean})],w.prototype,"preview",void 0),m([o({type:Boolean})],w.prototype,"generatePreviewOnUpload",void 0),m([s()],w.prototype,"fileList",void 0),m([s()],w.prototype,"isDragOver",void 0),m([s()],w.prototype,"showDragArea",void 0),m([s()],w.prototype,"inputElement",void 0),m([s()],w.prototype,"dragCounter",void 0),m([s()],w.prototype,"previewImage",void 0),w=m([r("nr-file-upload")],w);export{w as FileUpload};

package/dist/src/components/file-upload/file-upload.component.d.ts

@@ -1,7 +1,8 @@
 import { LitElement, type PropertyValues } from 'lit';
 import { UploadFile } from './types.js';
-declare const FileUpload_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const FileUpload_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 export declare class FileUpload extends FileUpload_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     /** Explicit theme from data-theme attribute (provided by ThemeAwareMixin) */
     explicitTheme: string | null;

package/dist/src/components/file-upload/file-upload.component.js

@@ -351,6 +351,7 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+FileUpload.useShadowDom = true;
 FileUpload.styles = styles;
 __decorate([
     property({ type: String })