@aquera/nile-elements 1.3.1-beta-1.0 → 1.3.1-beta-1

package/src/nile-popover/nile-popover.ts

@@ -18,6 +18,8 @@ import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
 import { CSSResultGroup } from 'lit';
 import { PopoverPortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+
 
 /**
  * Nile icon component.
@@ -74,6 +76,12 @@ export class NilePopover extends NileElement {
     | 'anchor' = 'anchor';
 
   private portalManager: PopoverPortalManager | null = null;
+  private visibilityManager?: VisibilityManager;
+
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
 
   /**
    * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
@@ -113,6 +121,7 @@ export class NilePopover extends NileElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.emit('nile-destroy');
+    this.visibilityManager?.cleanup();
     document.removeEventListener('click', this.handleDocumentClick);
     
     if (this.portalManager) {
@@ -121,6 +130,38 @@ export class NilePopover extends NileElement {
     }
   }
 
+  protected async firstUpdated(_changed: PropertyValues) {
+    await this.updateComplete;
+  
+    const anchorSlot = this.renderRoot.querySelector('slot[name="anchor"]') as HTMLSlotElement | null;
+    const anchorEl = anchorSlot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: anchorEl || null,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.isShow,
+      onAnchorOutOfView: () => {
+        this.isShow = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.isShow = false;
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
+  }
+
+  
   protected updated(_changedProperties: PropertyValues): void {
     if (_changedProperties.has('open')) {
       this.isShow = this.open;
@@ -140,6 +181,7 @@ export class NilePopover extends NileElement {
   handleShowHide() {
     if (this.isShow) {
       this.emit('nile-show');
+      this.visibilityManager?.setup();
       if (this.portal && this.portalManager) {
         this.portalManager.setupPortalAppend();
       } else if (this.portal && !this.portalManager) {
@@ -148,6 +190,7 @@ export class NilePopover extends NileElement {
       }
     } else {
       this.emit('nile-hide');
+      this.visibilityManager?.cleanup();
       if (this.portal && this.portalManager) {
         this.portalManager.cleanupPortalAppend();
       }

package/src/nile-select/nile-select.ts

@@ -42,6 +42,7 @@ import NileOptionGroup from '../nile-option-group/nile-option-group';
 import { GroupAttributes } from './nile-select.interface';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import { PortalManager } from './portal-manager';
+import { VisibilityManager } from '../utilities/visibility-manager';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -123,6 +124,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   private scrolling = false;
   private options: NileOption[] = [];
   private resizeController?: ResizeController;
+  private visibilityManager?: VisibilityManager;
+
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -333,6 +336,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    this.visibilityManager?.cleanup();
     // Clean up body append elements
     this.portalManager.cleanupPortalAppend();
     this.emit('nile-destroy');
@@ -373,6 +377,31 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+  this.visibilityManager = new VisibilityManager({
+    host: this,
+    target: this.combobox,
+    enableVisibilityEffect: this.enableVisibilityEffect,
+    enableTabClose: this.enableTabClose,
+    isOpen: () => this.open,
+    onAnchorOutOfView: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'anchor-out-of-view',
+        name: this.name,
+      });
+    },
+    onDocumentHidden: () => {
+      this.hide();
+      this.emit('nile-visibility-change', {
+        visible: false,
+        reason: 'document-hidden',
+        name: this.name,
+      });
+    },
+    emit: (event, detail) => this.emit(`nile-${event}`, detail),
+  });
+  
   }
 
   setCheckBoxInOption(checked: boolean): void {
@@ -428,89 +457,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
 
  
-   private anchorVisibilityObservers: IntersectionObserver[] = [];
- 
-   private getScrollableAncestors(element: HTMLElement): HTMLElement[] {
-     const scrollables: HTMLElement[] = [];
-     let parent = element.parentElement;
-     while (parent) {
-       const style = getComputedStyle(parent);
-       const canScroll =
-         /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX);
-       if (canScroll) {
-         scrollables.push(parent);
-       }
-       parent = parent.parentElement;
-     }
-     return scrollables;
-   }
- 
- 
-   private handleDocumentVisibilityChange = (): void => {
-     if (!this.enableTabClose) return;
-     if (document.visibilityState === 'hidden' && this.open) {
-       this.hide();
-       this.emit('nile-visibility-change', {
-         visible: false,
-         reason: 'document-hidden',
-         name: this.name,
-       });
-     }
-   };
- 
- 
-   private setupAnchorVisibilityObserver(): void {
-     if (!this.enableVisibilityEffect) return;
- 
-     this.cleanupAnchorVisibilityObserver();
- 
-     const combobox = this.combobox;
-     if (!combobox) return;
-     const scrollContainers = [...this.getScrollableAncestors(this), null];
- 
-     scrollContainers.forEach((rootContainer) => {
-       const observer = new IntersectionObserver(
-         (entries) => {
-           for (const entry of entries) {
-             if (!entry.isIntersecting && this.open) {
-               this.hide();
-               this.emit('nile-visibility-change', {
-                 visible: false,
-                 reason: 'anchor-out-of-view',
-                 name: this.name,
-                 root: rootContainer,
-               });
-               return; 
-             }
-           }
-         },
-         {
-           root: rootContainer,
-           threshold: 0.1, 
-         }
-       );
- 
-       observer.observe(combobox);
-       this.anchorVisibilityObservers.push(observer);
-     });
- 
-     if (this.enableTabClose) {
-       document.addEventListener(
-         'visibilitychange',
-         this.handleDocumentVisibilityChange
-       );
-     }
-   }
-   
-   private cleanupAnchorVisibilityObserver(): void {
-     this.anchorVisibilityObservers.forEach((o) => o.disconnect());
-     this.anchorVisibilityObservers = [];
- 
-     document.removeEventListener(
-       'visibilitychange',
-       this.handleDocumentVisibilityChange
-     );
-   }
  
  
 
@@ -1162,6 +1108,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
 
       this.addOpenListeners();
+      this.visibilityManager?.setup();
 
       this.showNoResults = !this.getAllOptions()?.length;
 
@@ -1174,10 +1121,6 @@ export class NileSelect extends NileElement implements NileFormControl{
         this.setCurrentOption(this.currentOption);
       });
 
-      if (this.enableVisibilityEffect) {
-        this.setupAnchorVisibilityObserver();
-      }
-
       const { keyframes, options } = getAnimation(this, 'select.show', {
         dir: 'ltr',
       });
@@ -1203,6 +1146,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.emit('nile-hide', { value: this.value, name: this.name });
       this.showSelected = false;
       this.removeOpenListeners();
+      this.visibilityManager?.cleanup();
 
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, 'select.hide', {

package/src/nile-select/virtual-scroll-helper.ts

@@ -27,7 +27,6 @@ export class VirtualScrollHelper {
           .disableLocalSearch=${component.disableLocalSearch}
           .optionsLoading=${component.optionsLoading}
           .multiple=${component.multiple}
-          .enableTabClose=${component.enableTabClose}
           .helpText=${component.helpText}
           .errorMessage=${component.errorMessage}
           .warning=${component.warning}
@@ -50,7 +49,6 @@ export class VirtualScrollHelper {
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}
           .enableTabClose=${component.enableTabClose}
-          .enableVisibilityEffect=${component.enableVisibilityEffect}
           .data=${component.data}
           .open=${component.open}
           .loading=${component.loading}

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

@@ -19,8 +19,7 @@ export const styles = css`
   display: flex;
   flex-direction: column;
   background-color: var(--nile-colors-neutral-100);
-  height: 100%;
-  overflow: hidden;  
+  overflow: auto;
   transition: width 0.25s ease, transform 0.25s ease;
   z-index: 1000;
 }
@@ -46,6 +45,15 @@ export const styles = css`
   transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
 }
 
+ 
+ 
+::slotted(*) {
+  display: block;
+  min-width: 0;
+  /* padding: var(--nile-spacing-xl) */
+}
+
+ 
 :host {
   scrollbar-width: thin;
   scrollbar-color: #64748b transparent;
@@ -61,32 +69,29 @@ export const styles = css`
   background-color: #64748b;
   border-radius: 10px;
 }
-
- 
-.scroll-container {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
+:host([fullheight]) {
+  position: fixed;
+  top: 0;
+  height: 100dvh;
 }
 
- 
-::slotted(nile-side-bar-header) {
-  flex-shrink: 0;
+:host(:not([fullheight])) {
+  position: relative;
+  height: 100%;
 }
-
 ::slotted(nile-side-bar-footer) {
-  flex-shrink: 0;
-  position: sticky;
-  bottom: 0;
-  margin-top: auto;
+  margin-top: auto;  
+  flex-shrink: 0;   
+}
+:host([collapsed]) ::slotted(nile-side-bar-footer-item) .footer-item {
+  justify-content: center;
+  padding: 0;
 }
 
- 
- 
-
-
+:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='text']),
+:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='action']) {
+  display: none;
+}
 
 
 

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

@@ -54,15 +54,8 @@ export class NileSideBar extends NileElement {
   }
 
   public render(): TemplateResult {
-    return html`
-      <slot name="header"></slot>
-      <div class="scroll-container">
-        <slot></slot>
-      </div>
-      <slot name="footer"></slot>
-    `;
+    return html`<slot></slot>`;
   }
-  
 }
 
 export default NileSideBar;

package/src/nile-side-bar-expand/nile-side-bar-expand.css.ts

@@ -19,8 +19,8 @@ export const styles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   border: none;
   background: transparent;
   color: inherit;
@@ -29,7 +29,9 @@ export const styles = css`
   transition: background-color 0.2s ease;
 }
 
- 
+.expand-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 nile-tooltip::part(body) {
     width: max-content;

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

@@ -13,8 +13,6 @@ import NileElement from '../internal/nile-element';
 export class NileSideBarExpand extends NileElement {
   @property({ type: Boolean, reflect: true })
   collapsed: boolean = false;
-  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';
-  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -48,14 +46,14 @@ export class NileSideBarExpand extends NileElement {
       <button class="expand-btn" @click=${this.toggleSidebar}>
         ${this.collapsed
           ? html`
-              <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
+              <nile-tooltip placement="right" hoist content="Expand Sidebar">
                 <span part="icon"><nile-icon name="moveright"></nile-icon></span>
-              </nile-lite-tooltip>
+              </nile-tooltip>
             `
           : html`
-              <nile-lite-tooltip placement="right" hoist content=${this.collapseTooltipText}>
+              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
                 <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
-              </nile-lite-tooltip>
+              </nile-tooltip>
             `}
       </button>
     `;

package/src/nile-side-bar-footer/nile-side-bar-footer.css.ts

@@ -6,15 +6,13 @@ import { css } from 'lit';
 export const styles = css`
  :host {
   display: block;
+  position: sticky;
   bottom: var(--nile-spacing-md);
  padding-bottom: var(--nile-spacing-xl);
 	padding-left: var(--nile-spacing-xl);
 	padding-right: var(--nile-spacing-xl);
-  padding-top: var(--nile-spacing-xs);
  gap: var(--nile-spacing-md);
   z-index: 10;
-  bottom: 0;
-  position: sticky;
   background: var(--nile-colors-neutral-100);
 }
 

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -10,11 +10,8 @@ export const styles = css`
     display: flex;
     align-items: center;
 	justify-content: flex-start;
-    padding-top: var(--nile-spacing-md);
-    padding-bottom: var(--nile-spacing-md);
-    padding-left: var(--nile-spacing-lg);
-    padding-right: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-3);
+    padding: 12px;
+    font-size: 0.875rem;
     color: var(--nile-side-bar-footer-color, #374151);
     cursor: pointer;
     border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
@@ -56,13 +53,8 @@ export const styles = css`
  
   :host([type='support']) .footer-item {
     background: var(--nile-colors-neutral-400);
-    height: 38px;
-  }
-  :host([type='support'][active]) .footer-item {
-  background: var(--nile-colors-neutral-500);
-}
-   
  
+  }
  
   :host([collapsed][type='avatar']) .footer-item {
   padding: 3px;
@@ -79,10 +71,6 @@ export const styles = css`
   width: 38px;
 }
 
-
-
-
-
 `;
 
 export default [styles];

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.ts

@@ -25,17 +25,9 @@ export class NileSideBarFooterItem extends NileElement {
     return [styles];
   }
 
-  private handleClick(): void {
-    this.dispatchEvent(new CustomEvent('nile-click', {
-      detail: { type: this.type },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
   public render(): TemplateResult {
     return html`
-      <div part="base" class="footer-item" @click=${this.handleClick}>
+      <div part="base" class="footer-item">
         <slot name="icon" part="icon"></slot>
         <slot name="text" part="text"></slot>
         <slot name="action" part="action"></slot>

package/src/nile-side-bar-group/nile-side-bar-group.css.ts

@@ -8,8 +8,9 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     padding-bottom: var(--nile-spacing-xs);
-    padding-left: var(--nile-spacing-xl);
-    padding-right: var(--nile-spacing-xl);
+    padding-left: var(--nile-spacing-md);
+    padding-right: var(--nile-spacing-md);
+    gap: var(--nile-spacing-lg);
   }
 
 
@@ -29,8 +30,10 @@ export const styles = css`
   display: block;
   height: 1px;
   background: var(--nile-colors-neutral-400);
+  margin-top: var(--nile-spacing-xs);
  margin-left: var(--nile-spacing-md);
  margin-right: var(--nile-spacing-md);
+ 
 }
  
 .side-bar-group {

package/src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts

@@ -11,62 +11,60 @@ import {css} from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css`
-  :host {
-    display: block;
-  }
+	 :host {
+  display: block;
+}
 
-  .group-item {
-    display: flex;
-    flex-direction: column;
-    height: 38px;
-    width: 208px;
-    overflow: hidden;
-  }
+.group-item {
+  display: flex;
+  flex-direction: column;
+}
 
-  .item-link {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    height: 100%;
-    width: 100%;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-md);
-    cursor: pointer;
-    color: var(--nile-colors-dark-900);
-    text-decoration: none;
-    font-size: var(--nile-type-scale-3);
-    line-height: 1.4;
-    box-sizing: border-box;
-  }
+.item-link {
+  display: flex;
+  align-items: center;
+padding-top: var(--nile-spacing-lg);
+padding-bottom: var(--nile-spacing-lg);
+padding-left: var(--nile-spacing-md);
+padding-right: var(--nile-spacing-md);
+  cursor: pointer;
+  color: var(--nile-colors-dark-900);
+  text-decoration: none;
+  font-size: var(--nile-type-scale-3);
+  line-height: 1.4;
+}
 
-  .item-link:hover {
-    background: var(--nile-colors-neutral-400);
-    border-radius: var(--nile-radius-sm);
-  }
+.item-link:hover {
+  background: var(--nile-colors-neutral-400);
+  border-radius: var(--nile-radius-sm);
+}
 
-  ::slotted(nile-side-bar-group-item-icon) {
-    flex-shrink: 0;
-  }
 
-  ::slotted(nile-side-bar-group-item-text) {
-    flex-grow: 1;
-  }
 
-  :host([active]) [part="link"] {
-    background: var(--nile-colors-primary-100);
-    border-radius: var(--nile-radius-sm);
-    font-weight: var(--nile-font-weight-semibold);
-  }
+::slotted(nile-side-bar-group-item-icon) {
+  flex-shrink: 0;
+}
+
+::slotted(nile-side-bar-group-item-text) {
+  flex-grow: 1;
+}
+:host([active]) [part="link"] {
+  background:    var(--nile-colors-primary-100);
+  border-radius: var(--nile-radius-sm);
+  font-weight: var(--nile-font-weight-semibold);
+}
+
+:host([collapsed]) .group-item {
+height: 38px;
+width: 38px;
+}
+:host([disabled]) .item-link {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
 
-  :host([collapsed]) .group-item {
-    height: 38px;
-    width: 38px;
-  }
 
-  :host([disabled]) .item-link {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
 `;
 
-export default [styles];
+export default [styles];