@aquera/nile-elements 1.4.8-beta-1.0 → 1.4.8-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.4.8-beta-1.0",
+  "version": "1.4.8-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -13,6 +13,7 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
+    width: 100%;
   }
 
   * {
@@ -36,7 +37,7 @@ export const styles = css`
 
   .horizontal-div {
     max-height: 62px;
-    width: 648px;
+    width: 100%;
     min-width: 230px;
     padding: 12px;
     display: flex;
@@ -263,7 +264,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .preview-file-info p:last-of-type{
@@ -274,7 +275,7 @@ export const styles = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 500px;
+    width: 100%;
   }
 
   .no-preview > nile-icon:hover {
@@ -584,6 +585,9 @@ export const styles = css`
   li {
     list-style-type: none;
   }
+  .preview-file-info p {
+    width: 100%;
+    }
 `;
 
 export default [styles];

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -16,16 +16,16 @@ import { NileFilePreview } from './nile-file-preview';
     return html`
       <div class="uploading" part="horizontal-uploading-state">
         <nile-loader width="24" height="24"></nile-loader>
-        <div class="progress-bar-container">
-          <div class="progress-bar-percent">
-            <p>Uploading File...</p>
-            <p>${uploadStatus}%</p>
+        <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">${uploadStatus}%</p>
           </div>
           <nile-progress-bar
             part="horizontal-progress-bar"
             value="${uploadStatus}"
           ></nile-progress-bar>
-          <p class="horizontal-file-name">${file.name}</p>
+          <p class="horizontal-file-name" part="horizontal-file-name">${file.name}</p>
         </div>
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
@@ -45,25 +45,27 @@ export function getHorizontalPreviewState(
 ): TemplateResult {
   return html`
     <div class="preview horizontal-div" part="horizontal-preview-state">
-      <div class="preview-inner">
-        <div class="preview-image-container">
+      <div class="preview-inner" part="horizontal-preview-inner">
+        <div class="preview-image-container" part="horizontal-preview-image-container">
             <img
               class="image-preview"
               src=${url}
               alt=${file.name}
+              part="horizontal-preview-image"
             />
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-preview-file-info">
+          <p part="horizontal-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
-      <div class="preview-actions">
+      <div class="preview-actions" part="horizontal-preview-actions">
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancel-icon">
           <nile-icon
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -77,13 +79,13 @@ export function getHorizontalNoPreviewState(
 ): TemplateResult {
   return html`
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
-      <div class="no-preview-container">
-        <div class="document-icon">
+      <div class="no-preview-container" part="horizontal-no-preview-container">
+        <div class="document-icon" part="horizontal-no-preview-document-icon">
           <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
-        <div class="preview-file-info">
-          <p>${file.name}</p>
-          <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+        <div class="preview-file-info" part="horizontal-no-preview-file-info">
+          <p part="horizontal-no-preview-file-info-name">${file.name}</p>
+          <p part="horizontal-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
         </div>
       </div>
       <div>
@@ -92,6 +94,7 @@ export function getHorizontalNoPreviewState(
             name="trash"
             size="14"
             class="icon"
+            part="horizontal-no-preview-actions-icon"
           ></nile-icon>
         </slot>
       </div>
@@ -108,12 +111,12 @@ export function getHorizontalErrorState(
   truncateString(nileFilePreview);
   return html`
     <div class="error horizontal-div" part="horizontal-error-state">
-      <div class="error-container">
-        <div class="error-icon">
+      <div class="error-container" part="horizontal-error-container">
+        <div class="error-icon" part="horizontal-error-icon">
           <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
-        <div class="file-info">
-          <p class="horizontal-file-name">${file.name}</p>
+        <div class="file-info" part="horizontal-error-file-info">
+          <p class="horizontal-file-name" part="horizontal-error-file-info-name">${file.name}</p>
           ${
             nileFilePreview.isStringTruncated
               ? html`<nile-tooltip content=${errorMessage}>
@@ -128,6 +131,7 @@ export function getHorizontalErrorState(
             name="close"
             size="14"
             class="icon"
+            part="horizontal-error-actions-icon"
           ></nile-icon>
         </slot>
     </div>
@@ -141,17 +145,17 @@ export function getVerticalUploadingState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
-      <div class="loading">
+      <div class="loading" part="vertical-loading">
         <nile-loader width="24" height="24"></nile-loader>
       </div>
 
-      <div class="progress-bar-container">
-        <div class="progress-bar-percent">
-          <p>Uploading...</p>
-          <p>${uploadStatus}%</p>
+      <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">${uploadStatus}%</p>
         </div>
         <nile-progress-bar value=${uploadStatus}></nile-progress-bar>
-        <p class="vertical-file-name">${file.name}</p>
+        <p class="vertical-file-name" part="vertical-file-name">${file.name}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
@@ -159,6 +163,7 @@ export function getVerticalUploadingState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-uploading-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -173,17 +178,18 @@ export function getVerticalPreviewState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-preview" part="vertical-preview-state">
-      <div>
+      <div part="vertical-preview-image-container">
         <img
           class="image-preview"
+          part="vertical-preview-image"
           src=${url}
           alt=${file.name}
         />
       </div>
 
-      <div class="content-container">
-        <p>${file.name}</p>
-         <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-preview-file-info">
+        <p part="vertical-preview-file-info-name">${file.name}</p>
+         <p part="vertical-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -191,6 +197,7 @@ export function getVerticalPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -203,13 +210,13 @@ export function getVerticalNoPreviewState(
 ): TemplateResult {
   return html`
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
-      <div class="vertical-document-icon">
+      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
         <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
 
-      <div class="content-container">
-        <p>${file.name}</p>
-        <p>${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
+      <div class="content-container" part="vertical-no-preview-file-info">
+        <p part="vertical-no-preview-file-info-name">${file.name}</p>
+        <p part="vertical-no-preview-file-info-type">${getFileType(file.type)} &#8226; ${formatFileSize(Number(file.size))}</p>
       </div>
 
       <slot @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)} name="cancelIcon">
@@ -217,6 +224,7 @@ export function getVerticalNoPreviewState(
           name="trash"
           size="14"
           class="icon corner-icon"
+          part="vertical-no-preview-actions-icon"
         ></nile-icon>
       </slot>
     </div>
@@ -232,12 +240,12 @@ export function getVerticalErrorState(
   truncateString(nileFilePreview);
   return html`
     <div class="vertical-div vertical-error" part="vertical-error-state">
-      <div class="vertical-document-icon error-bg">
+      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
         <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
 
-      <div class="file-info-vertical-state">
-        <p class="vertical-file-name">${file.name}</p>
+      <div class="file-info-vertical-state" part="vertical-error-file-info">
+        <p class="vertical-file-name" part="vertical-error-file-info-name">${file.name}</p>
         ${
           nileFilePreview.isStringTruncated
             ? html`<nile-tooltip content=${errorMessage}>
@@ -252,6 +260,7 @@ export function getVerticalErrorState(
           name="close"
           size="14"
           class="icon corner-icon"
+          part="vertical-error-actions-icon"
         ></nile-icon>
       </slot>
     </div>

package/src/nile-lite-tooltip/nile-lite-tooltip.ts

@@ -122,6 +122,10 @@ export class NileliteTooltip extends NileElement {
   
   @property({ type: Boolean, reflect: true }) enableTabClose = false;
 
+  @property({ type: String, reflect: true }) width?: string;
+  @property({ type: String, reflect: true }) height?: string;
+
+
   private tooltipInstances?: Instance[];
   private singleInstance?: Instance;
   private singletonInstance?: Instance;
@@ -208,6 +212,17 @@ export class NileliteTooltip extends NileElement {
       plugins: parseFollowCursor(this.followCursor) ? [followCursor] : [],
       onShow: instance => {
         this.open = true;
+        const content = instance.popper.querySelector(
+          '.tippy-content'
+        ) as HTMLElement | null;
+        if (content) {
+          if (this.width) content.style.width = this.width;
+          if (this.height) {
+            content.style.height = this.height;
+            content.style.overflow = 'auto';
+          }
+        }
+
         this.dispatchEvent(
           new CustomEvent('nile-show', {
             detail: { instance, target: instance.reference },

package/src/nile-option/nile-option.css.ts

@@ -117,6 +117,16 @@ export const styles = css`
       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));
+  }
 `;
 
 export default [styles];

package/src/nile-option/nile-option.ts

@@ -71,6 +71,9 @@ export class NileOption extends NileElement {
   /* used to pass group name to the option, so that grouped options can be shown */
   @property({ type: String, reflect: true, attribute: true }) groupName: string = '';
 
+  /* used to pass description to the option, so that description can be shown */
+  @property({ type: String, reflect: true, attribute: true }) description: string = '';
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
@@ -186,11 +189,14 @@ export class NileOption extends NileElement {
           ${this.isMultipleSelect ? html`<nile-checkbox part="checkbox" class="option--checkbox" .checked=${this.selected}></nile-checkbox>` : ''}
 
             <slot part="prefix" name="prefix" class="option__prefix"></slot>
-            <slot
-              part="label"
-              class="option__label"
-              @slotchange=${this.handleDefaultSlotChange}
-            ></slot>
+            <div class="option__label-container" part="option_label_container">
+              <slot
+                part="label"
+                class="option__label"
+                @slotchange=${this.handleDefaultSlotChange}
+              ></slot>
+              ${this.description ? html`<span part="option_description" class="option__description">${this.description}</span>` : ''}
+            </div>
             <slot part="suffix" name="suffix" class="option__suffix"></slot>
           </div>`
         : ''}

package/src/nile-side-bar-action/nile-side-bar-action.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-side-bar-action.css';
@@ -22,6 +22,8 @@ import type NileIconButton from '../nile-icon-button/nile-icon-button';
 import type { NileMenu } from '../nile-menu';
 import type { NilePopup } from '../nile-popup';
 import '../nile-popup';
+import { DropdownPortalManager } from './portal-manager';
+
 
 /**
  * Nile side-bar-action component.
@@ -82,6 +84,14 @@ export class NileSideBarAction extends NileElement {
   /** Hoist above scroll containers */
   @property({ type: Boolean }) hoist = false;
 
+  /**
+   * Enable portal mode to render the dropdown panel in a portal outside the component's DOM tree.
+   * This provides better positioning control and prevents clipping issues in complex layouts.
+   */
+  @property({ type: Boolean, reflect: true }) portal = false;
+
+  private portalManager: DropdownPortalManager | null = null;
+
   @property({ reflect: true }) triggerDropdown: 'click' | 'hover' = 'click';
   private hoverTimeout: number | undefined;
 
@@ -98,6 +108,12 @@ export class NileSideBarAction extends NileElement {
       this.containingElement = this;
     }
     this.emit('nile-init');
+
+    requestAnimationFrame(() => {
+      if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+      }
+    });
   }
   
  
@@ -139,6 +155,10 @@ export class NileSideBarAction extends NileElement {
     this.removeOpenListeners();
     this.hide();
     this.emit('nile-destroy');
+    if (this.portalManager) {
+      this.portalManager.cleanupPortalAppend();
+      this.portalManager = null;
+    }
   }
 
   focusOnTrigger() {
@@ -176,11 +196,12 @@ export class NileSideBarAction extends NileElement {
             ? document.activeElement?.shadowRoot?.activeElement
             : document.activeElement;
 
-        if (
-          !this.containingElement ||
-          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !==
-            this.containingElement
-        ) {
+            const hitSelf = this.containingElement && activeElement?.closest(this.containingElement.tagName.toLowerCase()) === this.containingElement;
+            const hitPortalAppend = this.portal && this.portalManager?.portalContainerElement && 
+                                    (activeElement === this.portalManager.portalContainerElement || 
+                                     activeElement?.closest('.nile-dropdown-portal-append') === this.portalManager.portalContainerElement);
+    
+            if (!hitSelf && !hitPortalAppend) {
           this.hide();
         }
       });
@@ -189,7 +210,10 @@ export class NileSideBarAction extends NileElement {
 
   handleDocumentMouseDown(event: MouseEvent) {
     const path = event.composedPath();
-    if (this.containingElement && !path.includes(this.containingElement)) {
+    const hitSelf = this.containingElement && path.includes(this.containingElement);
+    const hitPortalAppend = this.portal && this.portalManager?.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
+
+    if (!hitSelf && !hitPortalAppend) {
       this.hide();
     }
   }
@@ -300,6 +324,23 @@ export class NileSideBarAction extends NileElement {
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('portal')) {
+      if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+        if (this.open) {
+          this.portalManager.setupPortalAppend();
+        }
+      } else if (!this.portal && this.portalManager) {
+        this.portalManager.cleanupPortalAppend();
+        this.portalManager = null;
+      }
+    }
+  }
+
+
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.disabled) {
@@ -312,21 +353,38 @@ export class NileSideBarAction extends NileElement {
       this.emit('nile-show');
       this.addOpenListeners();
 
+      if (this.portal && this.portalManager) {
+        this.portalManager.setupPortalAppend();
+      } else if (this.portal && !this.portalManager) {
+        this.portalManager = new DropdownPortalManager(this);
+        this.portalManager.setupPortalAppend();
+      }
+
       await stopAnimations(this);
-      this.panel.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
-      await animateTo(this.popup.popup, keyframes, options);
+       // Only show panel and animate if not using portal
+      if (!this.portal) {
+        this.panel.hidden = false;
+        this.popup.active = true;
+        const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+        await animateTo(this.popup.popup, keyframes, options);
+      }
       this.emit('nile-after-show');
     } else {
       this.emit('nile-hide');
       this.removeOpenListeners();
 
+      if (this.portal && this.portalManager) {
+        this.portalManager.cleanupPortalAppend();
+      }
+
       await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.panel.hidden = true;
-      this.popup.active = false;
+      if (!this.portal) {
+        const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+        await animateTo(this.popup.popup, keyframes, options);
+        this.panel.hidden = true;
+        this.popup.active = false;
+      }
+
       this.emit('nile-after-hide');
     }
   }
@@ -366,6 +424,7 @@ export class NileSideBarAction extends NileElement {
           class="dropdown__panel"
           aria-hidden=${this.open ? 'false' : 'true'}
           aria-labelledby="sidebar-action-dropdown"
+          style=${this.portal && this.portalManager ? 'display: none;' : ''}
         ></slot>
       </nile-popup>
     `;