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

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",
+  "version": "1.3.1-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -220,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-dropdown/portal-manager.ts

@@ -481,8 +481,6 @@ export class DropdownPortalManager {
   updatePortalPanel(): void {
     if (this.portalContainer && this.clonedPanel) {
       PortalContentUtils.updatePortalPanel(this.clonedPanel, this.component);
-      // Re-setup event listeners after updating the panel content
-      this.setupPortalEventListeners();
       this.forceReposition();
     }
   }

package/src/nile-dropdown/portal-utils.ts

@@ -203,7 +203,6 @@ export class PortalContentUtils {
     // Clone all assigned elements
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
-      this.processInlineEventHandlers(clonedElement);
       panelContainer.appendChild(clonedElement);
     });
 
@@ -230,34 +229,9 @@ export class PortalContentUtils {
 
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
-      this.processInlineEventHandlers(clonedElement);
       clonedPanel.appendChild(clonedElement);
     });
   }
-
-  static processInlineEventHandlers(element: HTMLElement): void {
-    const eventHandlerAttrs = ['onclick', 'onchange', 'oninput', 'onsubmit', 'onfocus', 'onblur', 'onkeydown', 'onkeyup'];
-    
-    eventHandlerAttrs.forEach(attr => {
-      const eventType = attr.replace('on', '');
-      const handler = element.getAttribute(attr);
-      if (handler) {
-        element.removeAttribute(attr);
-        element.addEventListener(eventType, (event: Event) => {
-          new Function('event', handler).call(element, event);
-        });
-      }
-      element.querySelectorAll(`[${attr}]`).forEach(child => {
-        const childHandler = child.getAttribute(attr);
-        if (childHandler) {
-          child.removeAttribute(attr);
-          child.addEventListener(eventType, (event: Event) => {
-            new Function('event', childHandler).call(child, event);
-          });
-        }
-      });
-    });
-  }
 }
 
 export class PortalEventUtils {

package/src/nile-inline-sidebar/nile-inline-sidebar.css.ts

@@ -50,8 +50,8 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-2xl);
-    padding-bottom: var(--nile-spacing-2xl);
+    padding-top: var(--nile-spacing-3xl);
+    padding-bottom: var(--nile-spacing-3xl);
   }
 
   nile-side-bar-action-menu {
@@ -72,6 +72,13 @@ export const styles = css`
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
+    color: black;
+  }
+
+
+  nile-side-bar-action-menu-item[active]::part(base):hover {
+    background: var(--nile-colors-primary-100);
+    color: black;
   }
 
   nile-side-bar-action-menu-item::part(label) {
@@ -80,6 +87,7 @@ export const styles = css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
   }
 
   /* Transition for sidebar button when it is closed and opened */

package/src/nile-inline-sidebar/nile-inline-sidebar.ts

@@ -146,8 +146,13 @@ export class NileInlineSidebar extends NileElement {
 
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
-
+  
     return this.sidebarItems.map((item, index) => {
+      const shouldShowTooltip = (item as any).tooltip;
+      const isTruncated =
+        item.scrollWidth > item.clientWidth ||
+        item.scrollHeight > item.clientHeight;
+  
       const content = html`
         <nile-side-bar-action-menu-item
           ?disabled=${item.hasAttribute('disabled')}
@@ -157,16 +162,22 @@ export class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-
-      return this.showTooltip
+      return shouldShowTooltip || isTruncated
         ? html`
-            <nile-tooltip content=${item.textContent} hoist placement="right">
+            <nile-inline-tooltip
+              content=${item.textContent?.trim() || ''}
+              hoist
+              placement="right"
+            >
               ${content}
-            </nile-tooltip>
+            </nile-inline-tooltip>
           `
         : content;
     });
   }
+  
+  
+  
 
   public render(): TemplateResult {
     return html`

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.ts

@@ -37,6 +37,10 @@ export const styles = css`
   font-weight: 500;
 }
 
+:host([active]) .item:hover {
+  background: var(--nile-colors-primary-100);
+}
+
  
 :host([disabled]) {
   color:   var(--nile-colors-neutral-500);  
@@ -62,4 +66,6 @@ a {
     text-decoration: none;
   }
 
+ 
+
 `;

package/src/nile-inline-sidebar-item/nile-inline-sidebar-item.ts

@@ -29,6 +29,7 @@ export class NileInlineSidebarItem extends NileElement {
   @property({ type: Boolean, reflect: true }) active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) href?: string;
+  @property({ type: Boolean, reflect: true }) tooltip = false;
 
   public static get styles(): CSSResultArray {
     return [styles];

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

@@ -19,7 +19,8 @@ export const styles = css`
   display: flex;
   flex-direction: column;
   background-color: var(--nile-colors-neutral-100);
-  overflow: auto;
+  height: 100%;
+  overflow: hidden;  
   transition: width 0.25s ease, transform 0.25s ease;
   z-index: 1000;
 }
@@ -45,15 +46,6 @@ 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;
@@ -69,29 +61,32 @@ export const styles = css`
   background-color: #64748b;
   border-radius: 10px;
 }
-:host([fullheight]) {
-  position: fixed;
-  top: 0;
-  height: 100dvh;
+
+ 
+.scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-:host(:not([fullheight])) {
-  position: relative;
-  height: 100%;
+ 
+::slotted(nile-side-bar-header) {
+  flex-shrink: 0;
 }
+
 ::slotted(nile-side-bar-footer) {
-  margin-top: auto;  
-  flex-shrink: 0;   
-}
-:host([collapsed]) ::slotted(nile-side-bar-footer-item) .footer-item {
-  justify-content: center;
-  padding: 0;
+  flex-shrink: 0;
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
 }
 
-: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,8 +54,15 @@ export class NileSideBar extends NileElement {
   }
 
   public render(): TemplateResult {
-    return html`<slot></slot>`;
+    return html`
+      <slot name="header"></slot>
+      <div class="scroll-container">
+        <slot></slot>
+      </div>
+      <slot name="footer"></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: 32px;
-  height: 32px;
+  width: 38px;
+  height: 38px;
   border: none;
   background: transparent;
   color: inherit;
@@ -29,9 +29,7 @@ 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,6 +13,8 @@ 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];
@@ -46,14 +48,14 @@ export class NileSideBarExpand extends NileElement {
       <button class="expand-btn" @click=${this.toggleSidebar}>
         ${this.collapsed
           ? html`
-              <nile-tooltip placement="right" hoist content="Expand Sidebar">
+              <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
                 <span part="icon"><nile-icon name="moveright"></nile-icon></span>
-              </nile-tooltip>
+              </nile-lite-tooltip>
             `
           : html`
-              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
+              <nile-lite-tooltip placement="right" hoist content=${this.collapseTooltipText}>
                 <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
-              </nile-tooltip>
+              </nile-lite-tooltip>
             `}
       </button>
     `;

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

@@ -6,13 +6,15 @@ 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,8 +10,11 @@ export const styles = css`
     display: flex;
     align-items: center;
 	justify-content: flex-start;
-    padding: 12px;
-    font-size: 0.875rem;
+    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);
     color: var(--nile-side-bar-footer-color, #374151);
     cursor: pointer;
     border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
@@ -53,8 +56,13 @@ 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;
@@ -71,6 +79,10 @@ export const styles = css`
   width: 38px;
 }
 
+
+
+
+
 `;
 
 export default [styles];

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

@@ -25,9 +25,17 @@ 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">
+      <div part="base" class="footer-item" @click=${this.handleClick}>
         <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,9 +8,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     padding-bottom: var(--nile-spacing-xs);
-    padding-left: var(--nile-spacing-md);
-    padding-right: var(--nile-spacing-md);
-    gap: var(--nile-spacing-lg);
+    padding-left: var(--nile-spacing-xl);
+    padding-right: var(--nile-spacing-xl);
   }
 
 
@@ -30,10 +29,8 @@ 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,60 +11,62 @@ import {css} from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css`
-	 :host {
-  display: block;
-}
+  :host {
+    display: block;
+  }
 
-.group-item {
-  display: flex;
-  flex-direction: column;
-}
+  .group-item {
+    display: flex;
+    flex-direction: column;
+    height: 38px;
+    width: 208px;
+    overflow: hidden;
+  }
 
-.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 {
+    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: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;
+  }
 
-::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([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;
+  }
 `;
 
-export default [styles];
+export default [styles];

package/vscode-html-custom-data.json

@@ -2264,8 +2264,13 @@
     },
     {
       "name": "nile-inline-sidebar-item",
-      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
+        {
+          "name": "tooltip",
+          "description": "`tooltip` {`boolean`} - \n\nProperty: tooltip\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "active",
           "description": "`active` {`boolean`} - Marks the item as active (selected).\n\nProperty: active\n\nDefault: false",
@@ -4259,23 +4264,35 @@
     },
     {
       "name": "nile-side-bar-expand",
-      "description": "Nile side-bar-expand component.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-expand component.\n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `expandTooltipText` {`string`} - \n\n  * `collapseTooltipText` {`string`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `expandTooltipText` {`string`} - \n\n  * `collapseTooltipText` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "collapsed",
           "description": "`collapsed` {`boolean`} - \n\nProperty: collapsed\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "expandTooltipText",
+          "description": "`expandTooltipText` {`string`} - \n\nProperty: expandTooltipText\n\nDefault: Expand Sidebar"
+        },
+        {
+          "name": "collapseTooltipText",
+          "description": "`collapseTooltipText` {`string`} - \n\nProperty: collapseTooltipText\n\nDefault: Collapse Sidebar"
         }
       ]
     },
     {
       "name": "nile-side-bar-footer-item",
-      "description": "Nile side-bar-footer-item component.\n\nSlots:\n\n  * `icon` {} - Slot for footer item icon\n\n  * `text` {} - Slot for footer item text\n\n  * `action` {} - Slot for footer item action\n\nAttributes:\n\n  * `type` {`string | null`} - \n\nProperties:\n\n  * `type` {`string | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile side-bar-footer-item component.\n\nEvents:\n\n  * `nile-click` {`CustomEvent<{ type: string | null; }>`} - \n\nSlots:\n\n  * `icon` {} - Slot for footer item icon\n\n  * `text` {} - Slot for footer item text\n\n  * `action` {} - Slot for footer item action\n\nAttributes:\n\n  * `type` {`string | null`} - \n\nProperties:\n\n  * `type` {`string | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
           "description": "`type` {`string | null`} - \n\nProperty: type\n\nDefault: null",
           "values": []
+        },
+        {
+          "name": "onnile-click",
+          "description": "`nile-click` {`CustomEvent<{ type: string | null; }>`} - "
         }
       ]
     },