@aquera/nile-elements 1.3.1-beta-1.2 → 1.3.1-beta-1.4

package/package.json

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

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,7 @@ 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 { VisibilityManager } from '../utilities/visibility-manager.js';
 
 /**
  * Nile side-bar-action component.
@@ -85,6 +86,12 @@ export class NileSideBarAction extends NileElement {
   @property({ reflect: true }) triggerDropdown: 'click' | 'hover' = 'click';
   private hoverTimeout: number | undefined;
 
+  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
+
+  @property({ type: Boolean, reflect: true }) enableTabClose = false;
+
+  private visibilityManager?: VisibilityManager;
+
   connectedCallback() {
     super.connectedCallback();
     this.handlePanelSelect = this.handlePanelSelect.bind(this);
@@ -102,7 +109,7 @@ export class NileSideBarAction extends NileElement {
   
  
   
-  firstUpdated() {
+  protected async firstUpdated(_changed: PropertyValues) {
     this.panel.hidden = !this.open;
   
     if (this.triggerDropdown === 'hover') {
@@ -122,6 +129,31 @@ export class NileSideBarAction extends NileElement {
       this.addOpenListeners();
       this.popup.active = true;
     }
+    await this.updateComplete;
+    const triggerNode = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+  
+    this.visibilityManager = new VisibilityManager({
+      host: this,
+      target: triggerNode || null,
+      enableVisibilityEffect: this.enableVisibilityEffect,
+      enableTabClose: this.enableTabClose,
+      isOpen: () => this.open,
+      onAnchorOutOfView: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'anchor-out-of-view',
+        });
+      },
+      onDocumentHidden: () => {
+        this.hide();
+        this.emit('nile-visibility-change', {
+          visible: false,
+          reason: 'document-hidden',
+        });
+      },
+      emit: (event, detail) => this.emit(`nile-${event}`, detail),
+    });
   }
   
   handleTriggerMouseEnter() {
@@ -137,6 +169,7 @@ export class NileSideBarAction extends NileElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeOpenListeners();
+    this.visibilityManager?.cleanup();
     this.hide();
     this.emit('nile-destroy');
   }
@@ -302,6 +335,7 @@ export class NileSideBarAction extends NileElement {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
+    this.visibilityManager?.setup();
     if (this.disabled) {
       this.open = false;
       return;
@@ -321,7 +355,7 @@ export class NileSideBarAction extends NileElement {
     } else {
       this.emit('nile-hide');
       this.removeOpenListeners();
-
+      this.visibilityManager?.cleanup();
       await stopAnimations(this);
       const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
       await animateTo(this.popup.popup, keyframes, options);

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

@@ -58,6 +58,10 @@ export const styles = css`
     background: var(--nile-colors-neutral-400);
     height: 38px;
   }
+  :host([type='support']) .footer-item:hover{
+    background: var(--nile-colors-neutral-500); 
+  }
+
   :host([type='support'][active]) .footer-item {
   background: var(--nile-colors-neutral-500);
 }

package/vscode-html-custom-data.json

@@ -4145,7 +4145,7 @@
     },
     {
       "name": "nile-side-bar-action",
-      "description": "Nile side-bar-action component.\n\nEvents:\n\n  * `nile-show` {} - Fired when dropdown opens.\n\n  * `nile-after-show` {} - Fired after dropdown + animations.\n\n  * `nile-hide` {} - Fired when dropdown closes.\n\n  * `nile-after-hide` {} - Fired after dropdown closes + animations.\n\nSlots:\n\n  * `trigger` {} - The clickable trigger (icon/button).\n\n  * ` ` {} - The dropdown panel content (menu, custom content).\n\nAttributes:\n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stay-open-on-select` {`boolean`} - Keep open on select\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stayOpenOnSelect` {`boolean`} - Keep open on select\n\n  * `containingElement` {`HTMLElement | undefined`} - External containing element (default: self)\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\n  * `hoverTimeout` {`number | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-action component.\n\nEvents:\n\n  * `nile-show` {} - Fired when dropdown opens.\n\n  * `nile-after-show` {} - Fired after dropdown + animations.\n\n  * `nile-hide` {} - Fired when dropdown closes.\n\n  * `nile-after-hide` {} - Fired after dropdown closes + animations.\n\nSlots:\n\n  * `trigger` {} - The clickable trigger (icon/button).\n\n  * ` ` {} - The dropdown panel content (menu, custom content).\n\nAttributes:\n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stay-open-on-select` {`boolean`} - Keep open on select\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultArray`} - \n\n  * `popup` - \n\n  * `trigger` {`HTMLSlotElement`} - \n\n  * `panel` {`HTMLSlotElement`} - \n\n  * `open` {`boolean`} - Whether the dropdown is open\n\n  * `placement` {`TooltipPosition`} - Preferred placement relative to trigger\n\n  * `disabled` {`boolean`} - Disable interaction\n\n  * `stayOpenOnSelect` {`boolean`} - Keep open on select\n\n  * `containingElement` {`HTMLElement | undefined`} - External containing element (default: self)\n\n  * `distance` {`number`} - Offsets\n\n  * `skidding` {`number`} - \n\n  * `sync` {`\"width\" | \"height\" | \"both\"`} - Sync size with trigger\n\n  * `hoist` {`boolean`} - Hoist above scroll containers\n\n  * `triggerDropdown` {`\"click\" | \"hover\"`} - \n\n  * `hoverTimeout` {`number | undefined`} - \n\n  * `enableVisibilityEffect` {`boolean`} - \n\n  * `enableTabClose` {`boolean`} - \n\n  * `visibilityManager` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
@@ -4244,6 +4244,16 @@
             }
           ]
         },
+        {
+          "name": "enableVisibilityEffect",
+          "description": "`enableVisibilityEffect` {`boolean`} - \n\nProperty: enableVisibilityEffect\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "enableTabClose",
+          "description": "`enableTabClose` {`boolean`} - \n\nProperty: enableTabClose\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-show",
           "description": "`nile-show` {} - Fired when dropdown opens."