npm - @aquera/nile-elements - Versions diffs - 1.4.8-beta-1.3 → 1.4.8 - Mend

@aquera/nile-elements 1.4.8-beta-1.3 → 1.4.8

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.

Files changed (82) hide show

package/README.md CHANGED Viewed

@@ -79,6 +79,10 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+#### Version 1.4.8
+- Nile Lite Tooltip: Fixed the Empty Issue and Added Height and Width Property for Tooltip (UIF-1077)
+- Nile Sidebar: Introduced Portal-Based Rendering for Nile Sidebar Action Menu (UIF-1082)
 #### Version 1.4.7
 - Nile Tab: Font Weight Mismatch in Nile Tab Item (UIF-1072)
 - Nile Sidebar: Collapsed state is not reflected correctly for the header, and the logo is not working properly in Safari and Firefox.  (UIF-1075)

package/demo/index.html CHANGED Viewed

@@ -1,150 +1,45 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-<head>
-  <meta charset="utf-8" />
-  <!-- <link rel="stylesheet" href="./theme/nxt/nxtgen.css" id="stylesheet" /> -->
-  <link rel="stylesheet" href="variables.css" id="stylesheet" />
-  <link rel="stylesheet" href="index.css" />
-  <script type="module" src="index.js"></script>
-  <style>
-    * {
-      padding: 0;
-      margin: 0;
-    }
-    html,
-    body {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 10px;
-      width: 648px;
-    }
-    #previews {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      gap: 10px;
-      width: 248px;
-      height: 500px;
-      overflow-y: auto;
-    }
-  </style>
-</head>
-<body>
-  <!-- <div style="background-color: var(--ng-color-base-black);">Demo Page</div> -->
-  <body>
-    <div class="container">
-      <nile-file-upload state="default" variant="horizontal"
-        fileUploadUrl="https://api.escuelajs.co/api/v1/files/upload"></nile-file-upload>
-      <div id="previews"></div>
-    </div>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="" id="stylesheet" />
     <script>
-      const upload = document.querySelector('nile-file-upload');
-      const previewContainer = document.querySelector('#previews');
-      const uploadBtn = document.getElementById('uploadBtn');
-      let allFiles = [];
-      let deletedFiles = [];
-      let validTypes = ['image/svg+xml', 'image/png', 'image/webp', 'application/pdf', 'application/zip', 'image/jpeg'];
-      let imageUrls = [
-        'https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg',
-        'https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png',
-        'https://miro.medium.com/v2/resize:fit:4800/format:webp/1*xMuIOwjliGUPjkzukeWKfw.jpeg',
-        'https://upload.wikimedia.org/wikipedia/commons/9/96/Nature_celebrating_India.png',
-        'https://upload.wikimedia.org/wikipedia/commons/2/22/1_Nature_1.png',
-        'https://www.un.org/sites/un2.un.org/files/field/image/making-peace-with-nature.png',
-      ];
-      upload.addEventListener('nile-change', (event) => {
-        let updatedFiles = event.detail.files
-          .filter(file => !deletedFiles.includes(file) && !allFiles.some(f => f.file === file))
-          .map(file => ({ file, progress: 0 }));
+  const params = new URLSearchParams(window.location.search);
+  const style = params.get('style') || 'variables.css';
+  document.getElementById('stylesheet').href = style;
+</script>
-        allFiles = [...allFiles, ...updatedFiles];
-        callFilePreview(allFiles);
-      });
+    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
+    <link rel="stylesheet" href="index.css" />
+    <style>
+    </style>
+    <script type="module" src="index.js"></script>
+  </head>
+  <body>
-      previewContainer.addEventListener('nile-remove', (event) => {
-        let { value, url } = event.detail;
-        // for image url's
-        // imageUrls = removeFile(url, imageUrls);
-        // callFilePreview(imageUrls);
-        // for files
-        allFiles = removeFile(value, allFiles);
-        callFilePreview(allFiles);
-      });
-      upload.addEventListener('nile-upload-progress', (e) => {
-        const { file, progress } = e.detail;
-        allFiles = allFiles.map(item =>
-          item.file === file ? { ...item, progress } : item
-        );
-        callFilePreview(allFiles);
-      });
+<!-- <nile-input
+  type="password"
+  canSavePassword>
+</nile-input>
+  -->
+  <nile-chip
+   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
+   acceptUserInput
+></nile-chip>
-      previewContainer.addEventListener('nile-uploading', () => {
-        console.log('nile-uploading');
-      });
-      upload.addEventListener('nile-upload-cancelled', (e) => {
-        const cancelledFile = e.detail.file;
+<nile-button id="small-btn1">Small tooltip</nile-button>
+<nile-lite-tooltip for="small-btn1" id="small-tooltip1" content="This is a small tooltip." size="small"></nile-lite-tooltip>
-        allFiles = allFiles.map(item =>
-          item.file === cancelledFile
-            ? { file: cancelledFile, status: 'cancelled', errorMessage: 'File upload cancelled' }
-            : item
-        );
-        callFilePreview(allFiles);
-      });
-      const callFilePreview = (fileObjs) => {
-        previewContainer.innerHTML = "";
-        fileObjs.forEach(({ file, progress, status, errorMessage }) => {
-          const filePreview = document.createElement('nile-file-preview');
-          filePreview.inputFile = file;
-          filePreview.variant = "horizontal";
-          filePreview.allowedTypes = validTypes;
-          if (progress != null) filePreview.uploadStatus = progress;
-          if (status) filePreview.errorMessage = errorMessage;
-          previewContainer.appendChild(filePreview);
-        });
-      };
-      // callFilePreview(imageUrls);
-      const removeFile = (removeFile, files) => {
-        return files.filter(file => {
-          if (file !== removeFile) return true;
-          deletedFiles.push(file);
-          return false;
-        });
-      };
-    </script>
   </body>
-</body>
 </html>

package/dist/index.js CHANGED Viewed

@@ -5532,17 +5532,7 @@ class CM{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
       outline-offset: -1px;
     }
   }
-  .option__label-container {
-    display: flex;
-    flex-direction: column;
-  }
-  .option__description {
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
-  }
-`;let tn=class extends Re{constructor(){super(...arguments),this.current=!1,this.hasHover=!1,this.hidden=!1,this.isMultipleSelect=!1,this.value="",this.showCheckbox=!1,this.disabled=!1,this.selected=!1,this.groupName="",this.description=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("aria-selected","false"),this.checkIfMultipleSelect()}checkIfMultipleSelect(){const e=this.closest("nile-select");e&&e.hasAttribute("multiple")?e.hasAttribute("multiple")&&""===e.getAttribute("multiple")||"true"===e.getAttribute("multiple")?this.isMultipleSelect=!0:this.isMultipleSelect=!1:this.isMultipleSelect=this.showCheckbox}updated(e){this.checkIfMultipleSelect()}handleDefaultSlotChange(){const e=this.getTextLabel();void 0!==this.cachedTextLabel?e!==this.cachedTextLabel&&(this.cachedTextLabel=e,this.emit("slotchange")):this.cachedTextLabel=e}handleMouseEnter(){this.hasHover=!0}handleMouseLeave(){this.hasHover=!1}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleValueChange(){"string"!=typeof this.value&&(this.value=String(this.value))}getTextLabel(){const e=this.querySelector("label");return e?e.textContent?.trim()??"":(this.textContent??"").trim()}render(){return R`
+`;let tn=class extends Re{constructor(){super(...arguments),this.current=!1,this.hasHover=!1,this.hidden=!1,this.isMultipleSelect=!1,this.value="",this.showCheckbox=!1,this.disabled=!1,this.selected=!1,this.groupName=""}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("aria-selected","false"),this.checkIfMultipleSelect()}checkIfMultipleSelect(){const e=this.closest("nile-select");e&&e.hasAttribute("multiple")?e.hasAttribute("multiple")&&""===e.getAttribute("multiple")||"true"===e.getAttribute("multiple")?this.isMultipleSelect=!0:this.isMultipleSelect=!1:this.isMultipleSelect=this.showCheckbox}updated(e){this.checkIfMultipleSelect()}handleDefaultSlotChange(){const e=this.getTextLabel();void 0!==this.cachedTextLabel?e!==this.cachedTextLabel&&(this.cachedTextLabel=e,this.emit("slotchange")):this.cachedTextLabel=e}handleMouseEnter(){this.hasHover=!0}handleMouseLeave(){this.hasHover=!1}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleValueChange(){"string"!=typeof this.value&&(this.value=String(this.value))}getTextLabel(){const e=this.querySelector("label");return e?e.textContent?.trim()??"":(this.textContent??"").trim()}render(){return R`
       ${this.hidden?"":R` <div
             part="base"
             class=${pe({option:!0,"option--single-select":!this.isMultipleSelect,"option--current":this.selected&&!this.isMultipleSelect,"option--disabled":this.disabled,"option--selected":this.selected&&!this.isMultipleSelect,"option--hover":this.hasHover})}
@@ -5553,17 +5543,14 @@ class CM{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
           ${this.isMultipleSelect?R`<nile-checkbox part="checkbox" class="option--checkbox" .checked=${this.selected}></nile-checkbox>`:""}
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
-            <div class="option__label-container" part="option_label_container">
-              <slot
-                part="label"
-                class="option__label"
-                @slotchange=${this.handleDefaultSlotChange}
-              ></slot>
-              ${this.description?R`<span part="option_description" class="option__description">${this.description}</span>`:""}
-            </div>
+             <slot
+              part="label"
+              class="option__label"
+              @slotchange=${this.handleDefaultSlotChange}
+            ></slot>
             <slot part="suffix" name="suffix" class="option__suffix"></slot>
           </div>`}
-    `}};tn.styles=en,e([Ie(".option__label")],tn.prototype,"defaultSlot",void 0),e([De()],tn.prototype,"current",void 0),e([De()],tn.prototype,"hasHover",void 0),e([ce({type:Boolean,reflect:!0,attribute:!0})],tn.prototype,"hidden",void 0),e([De()],tn.prototype,"isMultipleSelect",void 0),e([ce({reflect:!0})],tn.prototype,"value",void 0),e([ce({type:Boolean,reflect:!0,attribute:!0})],tn.prototype,"showCheckbox",void 0),e([ce({type:Boolean,reflect:!0})],tn.prototype,"disabled",void 0),e([ce({type:Boolean,reflect:!0})],tn.prototype,"selected",void 0),e([ce({type:String,reflect:!0,attribute:!0})],tn.prototype,"groupName",void 0),e([ce({type:String,reflect:!0,attribute:!0})],tn.prototype,"description",void 0),e([We("disabled")],tn.prototype,"handleDisabledChange",null),e([We("selected")],tn.prototype,"handleSelectedChange",null),e([We("value")],tn.prototype,"handleValueChange",null),tn=e([Ne("nile-option")],tn);const Mn=r`
+    `}};tn.styles=en,e([Ie(".option__label")],tn.prototype,"defaultSlot",void 0),e([De()],tn.prototype,"current",void 0),e([De()],tn.prototype,"hasHover",void 0),e([ce({type:Boolean,reflect:!0,attribute:!0})],tn.prototype,"hidden",void 0),e([De()],tn.prototype,"isMultipleSelect",void 0),e([ce({reflect:!0})],tn.prototype,"value",void 0),e([ce({type:Boolean,reflect:!0,attribute:!0})],tn.prototype,"showCheckbox",void 0),e([ce({type:Boolean,reflect:!0})],tn.prototype,"disabled",void 0),e([ce({type:Boolean,reflect:!0})],tn.prototype,"selected",void 0),e([ce({type:String,reflect:!0,attribute:!0})],tn.prototype,"groupName",void 0),e([We("disabled")],tn.prototype,"handleDisabledChange",null),e([We("selected")],tn.prototype,"handleSelectedChange",null),e([We("value")],tn.prototype,"handleValueChange",null),tn=e([Ne("nile-option")],tn);const Mn=r`
   :host {
     box-sizing: border-box;
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -13737,7 +13724,6 @@ nile-badge::part(content) {
 `;case IL.ERROR:return((e,t,i,M,n,o,r)=>QL(e,t,i,!1,M,n,o,r))(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this);default:return kL(this.browseFiles,this.title,this.subtitle,this.dragHandler,this.errorMessage,this.allowedTypes,this)}var e,t,i,M,n,o}disconnectedCallback(){this.emit(hL.NILE_DESTROY)}};e([ce({type:String})],CL.prototype,"size",void 0),e([ce({type:Boolean})],CL.prototype,"error",void 0),e([ce({type:String})],CL.prototype,"errorMessage",void 0),e([ce({type:Boolean})],CL.prototype,"allowMultiple",void 0),e([ce({type:Boolean})],CL.prototype,"allowDuplicates",void 0),e([ce({type:Array})],CL.prototype,"allowedTypes",void 0),e([ce({type:Array})],CL.prototype,"uploadedFiles",void 0),e([ce({type:String})],CL.prototype,"title",void 0),e([ce({type:String})],CL.prototype,"subtitle",void 0),e([ce({type:String})],CL.prototype,"state",void 0),e([ce({type:String})],CL.prototype,"variant",void 0),e([ce({type:String})],CL.prototype,"fileUploadUrl",void 0),e([ce({type:Boolean})],CL.prototype,"autoUpload",void 0),e([Ie("input")],CL.prototype,"input",void 0),CL=e([Ne("nile-file-upload")],CL);const bL=r`
   :host {
     display: inline-block;
-    width: 100%;
   }
   * {
@@ -13761,7 +13747,7 @@ nile-badge::part(content) {
   .horizontal-div {
     max-height: 62px;
-    width: 100%;
+    width: 648px;
     min-width: 230px;
     padding: 12px;
     display: flex;
@@ -13988,7 +13974,7 @@ nile-badge::part(content) {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100%;
+    width: 500px;
   }
   .preview-file-info p:last-of-type{
@@ -13999,7 +13985,7 @@ nile-badge::part(content) {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 100%;
+    width: 500px;
   }
   .no-preview > nile-icon:hover {
@@ -14309,22 +14295,19 @@ nile-badge::part(content) {
   li {
     list-style-type: none;
   }
-  .preview-file-info p {
-    width: 100%;
-    }
 `;var fL,vL,UL,YL;!function(e){e.DEFAULT="default",e.UPLOADING="uploading",e.PREVIEW="preview",e.NO_PREVIEW="no-preview",e.ERROR="error"}(fL||(fL={})),function(e){e.HORIZONTAL="horizontal",e.VERTICAL="vertical"}(vL||(vL={})),function(e){e.INVALID_FORMAT="Invalid File Format. Please try again.",e.SIZE_LIMIT="File exceeds size limit.",e.FAILED_TO_LOAD="Failed to load file from URL",e.UNKNOWN_FILE_NAME="unknown-file",e.UPLOAD_CANCEL="File upload cancelled.",e.NO_FILE_SELECTED="No file selected.",e.UNABLE_TO_GENEARTE_URL="Unable to generate the url.",e.NETWORK_ERROR="Network error! Please try again later.",e.CUSTOM_ERROR="Error Occured!"}(UL||(UL={})),function(e){e.NILE_INIT="nile-init",e.NILE_RECEIVE="nile-receive",e.NILE_REMOVE="nile-remove",e.NILE_CANCEL_UPLOAD="nile-cancel-upload",e.NILE_DESTROY="nile-destroy"}(YL||(YL={}));const ZL=(e,t,i)=>{t.target&&t.target.dispatchEvent(new CustomEvent(YL.NILE_REMOVE,{detail:{value:e,url:i},bubbles:!0,composed:!0}))},VL=(e,t)=>{t.target&&t.target.dispatchEvent(new CustomEvent(YL.NILE_CANCEL_UPLOAD,{detail:{file:e},bubbles:!0,composed:!0}))},WL=e=>{const t=e/1024,i=t/1024,M=i/1024;return M>=1?M.toFixed(2)+" GB":i>=1?i.toFixed(2)+" MB":t>=1?t.toFixed(2)+" KB":e+" B"},PL=e=>e.split("/")[1].toUpperCase(),RL=e=>{("vertical"===e.variant&&e.errorMessage.length>34||"horizontal"===e.variant&&e.errorMessage.length>96)&&(e.isStringTruncated=!0,e.requestUpdate())};function BL(e,t){return R`
       <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
-        <div class="progress-bar-container" part="horizontal-progress-bar-container">
-          <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
-            <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
-            <p part="horizontal-progress-bar-percent-value">${t}%</p>
+        <div class="progress-bar-container">
+          <div class="progress-bar-percent">
+            <p>Uploading File...</p>
+            <p>${t}%</p>
           </div>
           <nile-progress-bar
             part="horizontal-progress-bar"
             value="${t}"
           ></nile-progress-bar>
-          <p class="horizontal-file-name" part="horizontal-file-name">${e.name}</p>
+          <p class="horizontal-file-name">${e.name}</p>
         </div>
         <slot @click=${t=>VL(e,t)} name="cancelIcon">
           <nile-icon
@@ -14336,40 +14319,38 @@ nile-badge::part(content) {
       </div>
     `}function GL(e,t,i){return R`
     <div class="preview horizontal-div" part="horizontal-preview-state">
-      <div class="preview-inner" part="horizontal-preview-inner">
-        <div class="preview-image-container" part="horizontal-preview-image-container">
+      <div class="preview-inner">
+        <div class="preview-image-container">
             <img
               class="image-preview"
               src=${e}
               alt=${t.name}
-              part="horizontal-preview-image"
             />
         </div>
-        <div class="preview-file-info" part="horizontal-preview-file-info">
-          <p part="horizontal-preview-file-info-name">${t.name}</p>
-          <p part="horizontal-preview-file-info-type">${PL(t.type)} &#8226; ${WL(Number(t.size))}</p>
+        <div class="preview-file-info">
+          <p>${t.name}</p>
+          <p>${PL(t.type)} &#8226; ${WL(Number(t.size))}</p>
         </div>
       </div>
-      <div class="preview-actions" part="horizontal-preview-actions">
+      <div class="preview-actions">
         <slot @click=${e=>ZL(t,e,i)} name="cancel-icon">
           <nile-icon
             name="trash"
             size="14"
             class="icon"
-            part="horizontal-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
     </div>
   `}function _L(e,t){return R`
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
-      <div class="no-preview-container" part="horizontal-no-preview-container">
-        <div class="document-icon" part="horizontal-no-preview-document-icon">
+      <div class="no-preview-container">
+        <div class="document-icon">
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
-        <div class="preview-file-info" part="horizontal-no-preview-file-info">
-          <p part="horizontal-no-preview-file-info-name">${e.name}</p>
-          <p part="horizontal-no-preview-file-info-type">${PL(e.type)} &#8226; ${WL(Number(e.size))}</p>
+        <div class="preview-file-info">
+          <p>${e.name}</p>
+          <p>${PL(e.type)} &#8226; ${WL(Number(e.size))}</p>
         </div>
       </div>
       <div>
@@ -14378,19 +14359,18 @@ nile-badge::part(content) {
             name="trash"
             size="14"
             class="icon"
-            part="horizontal-no-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
     </div>
   `}function FL(e,t,i,M){return RL(M),R`
     <div class="error horizontal-div" part="horizontal-error-state">
-      <div class="error-container" part="horizontal-error-container">
-        <div class="error-icon" part="horizontal-error-icon">
+      <div class="error-container">
+        <div class="error-icon">
           <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
-        <div class="file-info" part="horizontal-error-file-info">
-          <p class="horizontal-file-name" part="horizontal-error-file-info-name">${e.name}</p>
+        <div class="file-info">
+          <p class="horizontal-file-name">${e.name}</p>
           ${M.isStringTruncated?R`<nile-tooltip content=${t}>
                   <span>${t}</span>
                 </nile-tooltip>`:R`<span>${t}</span>`}
@@ -14401,23 +14381,22 @@ nile-badge::part(content) {
             name="close"
             size="14"
             class="icon"
-            part="horizontal-error-actions-icon"
           ></nile-icon>
         </slot>
     </div>
   `}function HL(e,t){return R`
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
-      <div class="loading" part="vertical-loading">
+      <div class="loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
-      <div class="progress-bar-container" part="vertical-progress-bar-container">
-        <div class="progress-bar-percent" part="vertical-progress-bar-percent">
-          <p part="vertical-progress-bar-percent-text">Uploading...</p>
-          <p part="vertical-progress-bar-percent-value">${t}%</p>
+      <div class="progress-bar-container">
+        <div class="progress-bar-percent">
+          <p>Uploading...</p>
+          <p>${t}%</p>
         </div>
         <nile-progress-bar value=${t}></nile-progress-bar>
-        <p class="vertical-file-name" part="vertical-file-name">${e.name}</p>
+        <p class="vertical-file-name">${e.name}</p>
       </div>
       <slot @click=${t=>VL(e,t)} name="cancelIcon">
@@ -14425,24 +14404,22 @@ nile-badge::part(content) {
           name="close"
           size="14"
           class="icon corner-icon"
-          part="vertical-uploading-actions-icon"
         ></nile-icon>
       </slot>
     </div>
   `}function JL(e,t,i){return R`
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
-      <div part="vertical-preview-image-container">
+      <div>
         <img
           class="image-preview"
-          part="vertical-preview-image"
           src=${e}
           alt=${t.name}
         />
       </div>
-      <div class="content-container" part="vertical-preview-file-info">
-        <p part="vertical-preview-file-info-name">${t.name}</p>
-         <p part="vertical-preview-file-info-type">${PL(t.type)} &#8226; ${WL(Number(t.size))}</p>
+      <div class="content-container">
+        <p>${t.name}</p>
+         <p>${PL(t.type)} &#8226; ${WL(Number(t.size))}</p>
       </div>
       <slot @click=${e=>ZL(t,e,i)} name="cancelIcon">
@@ -14450,19 +14427,18 @@ nile-badge::part(content) {
           name="trash"
           size="14"
           class="icon corner-icon"
-          part="vertical-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
   `}function $L(e,t){return R`
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
-      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
+      <div class="vertical-document-icon">
         <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
-      <div class="content-container" part="vertical-no-preview-file-info">
-        <p part="vertical-no-preview-file-info-name">${e.name}</p>
-        <p part="vertical-no-preview-file-info-type">${PL(e.type)} &#8226; ${WL(Number(e.size))}</p>
+      <div class="content-container">
+        <p>${e.name}</p>
+        <p>${PL(e.type)} &#8226; ${WL(Number(e.size))}</p>
       </div>
       <slot @click=${i=>ZL(e,i,t)} name="cancelIcon">
@@ -14470,18 +14446,17 @@ nile-badge::part(content) {
           name="trash"
           size="14"
           class="icon corner-icon"
-          part="vertical-no-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
   `}function XL(e,t,i,M){return RL(M),R`
     <div class="vertical-div vertical-error" part="vertical-error-state">
-      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
+      <div class="vertical-document-icon error-bg">
         <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
-      <div class="file-info-vertical-state" part="vertical-error-file-info">
-        <p class="vertical-file-name" part="vertical-error-file-info-name">${e.name}</p>
+      <div class="file-info-vertical-state">
+        <p class="vertical-file-name">${e.name}</p>
         ${M.isStringTruncated?R`<nile-tooltip content=${t}>
                 <span>${t}</span>
               </nile-tooltip>`:R`<span>${t}</span>`}
@@ -14492,7 +14467,6 @@ nile-badge::part(content) {
           name="close"
           size="14"
           class="icon corner-icon"
-          part="vertical-error-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -15163,7 +15137,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
-`,qS={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"},KS=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];let em=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.whitelist=[],this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),RS(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(XS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=qS[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-lite-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?FS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){FS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=WS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&GS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;PS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":RS(this.editorEl,"strong");break;case"italic":RS(this.editorEl,"em");break;case"underline":RS(this.editorEl,"u");break;case"left":PS(this.editorEl,"left");break;case"center":PS(this.editorEl,"center");break;case"right":PS(this.editorEl,"right");break;case"justify":PS(this.editorEl,"justify");break;case"ul":$S(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":$S(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=WS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=BS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=BS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}getComputedImportantProps(){return Array.from(new Set([...KS,...this.whitelist??[]]))}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=this.getComputedImportantProps();for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],em.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],em.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],em.prototype,"singleLineEditor",void 0),e([ce({type:String})],em.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],em.prototype,"mentions",void 0),e([ce({attribute:"whitelist",reflect:!1,converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.filter((e=>"string"==typeof e)):[]}catch{return[]}}}})],em.prototype,"whitelist",void 0),e([De()],em.prototype,"content",void 0),em=e([Ne("nile-rich-text-editor")],em);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.8-beta-1.3"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const tm=r`
+`,qS={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"},KS=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];let em=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.whitelist=[],this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),RS(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(XS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=qS[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-lite-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?FS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){FS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=WS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&GS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;PS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":RS(this.editorEl,"strong");break;case"italic":RS(this.editorEl,"em");break;case"underline":RS(this.editorEl,"u");break;case"left":PS(this.editorEl,"left");break;case"center":PS(this.editorEl,"center");break;case"right":PS(this.editorEl,"right");break;case"justify":PS(this.editorEl,"justify");break;case"ul":$S(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":$S(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=WS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=BS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=BS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}getComputedImportantProps(){return Array.from(new Set([...KS,...this.whitelist??[]]))}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=this.getComputedImportantProps();for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],em.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],em.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],em.prototype,"singleLineEditor",void 0),e([ce({type:String})],em.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],em.prototype,"mentions",void 0),e([ce({attribute:"whitelist",reflect:!1,converter:{fromAttribute:e=>{try{const t=JSON.parse(e);return Array.isArray(t)?t.filter((e=>"string"==typeof e)):[]}catch{return[]}}}})],em.prototype,"whitelist",void 0),e([De()],em.prototype,"content",void 0),em=e([Ne("nile-rich-text-editor")],em);"undefined"!=typeof window&&(window.nileElementsVersion='"1.4.8"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const tm=r`
  :host {
   top: 0;