@aquera/nile-elements 1.3.9-beta-1.0 → 1.3.9-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.3.9-beta-1.0",
+  "version": "1.3.9-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -115,8 +115,7 @@
     "./nile-inline-sidebar-group": "./dist/src/nile-inline-sidebar-group/index.js",
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
-    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
-    "./nile-side-bar-panel": "./dist/src/nile-side-bar-panel/index.js"
+    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -221,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -14,6 +14,7 @@ export { NileSlideToggle } from './nile-slide-toggle';
 export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
+export { NileSkeletonLoader } from './nile-skeleton-loader';
 export { NileSelect } from './nile-select';
 export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
@@ -109,5 +110,3 @@ export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
 export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
 export { NileliteTooltip } from './nile-lite-tooltip';
-
-export { NileSideBarPanel } from './nile-side-bar-panel';

package/src/nile-calendar/nile-calendar.ts

@@ -751,6 +751,15 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         }
         this.isSelectingStart = false;
       } else {
+        if (
+          this.startDate &&
+          selectedDate.getFullYear() === this.startDate.getFullYear() &&
+          selectedDate.getMonth() === this.startDate.getMonth() &&
+          selectedDate.getDate() === this.startDate.getDate()
+        ) {
+          return; 
+        }
+    
         this.isSelectingStart = true;
 
         if (this.startDate && selectedDate < this.startDate) {

package/src/nile-icon/icons/svg/index.ts

@@ -293,7 +293,6 @@ export { default as newcalendar } from './new-calendar';
 export { default as ngaction } from './ng-action';
 export { default as ngactivity } from './ng-activity';
 export { default as ngalertcircle } from './ng-alert-circle';
-export { default as ngalerttriangle } from './ng-alert-triangle';
 export { default as ngaligncenter } from './ng-align-center';
 export { default as ngannotationx } from './ng-annotation-x';
 export { default as ngarrowdown } from './ng-arrow-down';

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-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    padding-top: var(--nile-spacing-2xl);
+    padding-bottom: var(--nile-spacing-2xl);
   }
 
   nile-side-bar-action-menu {
@@ -72,12 +72,6 @@ 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) {

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

@@ -146,13 +146,8 @@ 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')}
@@ -162,22 +157,16 @@ export class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-      return shouldShowTooltip || isTruncated
+
+      return this.showTooltip
         ? html`
-            <nile-inline-tooltip
-              content=${item.textContent?.trim() || ''}
-              hoist
-              placement="right"
-            >
+            <nile-tooltip content=${item.textContent} hoist placement="right">
               ${content}
-            </nile-inline-tooltip>
+            </nile-tooltip>
           `
         : content;
     });
   }
-  
-  
-  
 
   public render(): TemplateResult {
     return html`

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

@@ -37,10 +37,6 @@ 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);  
@@ -66,6 +62,4 @@ a {
     text-decoration: none;
   }
 
- 
-
 `;

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

@@ -29,7 +29,6 @@ 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

@@ -18,9 +18,8 @@ export const styles = css`
   width: var(--sidebar-width);
   display: flex;
   flex-direction: column;
-  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
-  height: 100%;
-  overflow: hidden;  
+  background-color: var(--nile-colors-neutral-100);
+  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,13 +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);
-  bottom: 0;
+  z-index: 10;
   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,11 +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;
@@ -76,6 +70,7 @@ export const styles = css`
   height: 38px;
   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];

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

@@ -19,8 +19,10 @@ export const styles = css`
   padding-bottom: var(--nile-spacing-lg);
   padding-left: var(--nile-spacing-xl);
   padding-right: var(--nile-spacing-xl);
-  top: 0;
-  background: var(--nile-colors-neutral-100);
+  position: sticky;
+    top: 0;
+    z-index: 10;
+    background: var(--nile-colors-neutral-100);
 }
 
 .header-content {

package/src/nile-skeleton-loader/index.ts

@@ -0,0 +1,2 @@
+export { NileSkeletonLoader } from './nile-skeleton-loader';
+

package/src/nile-skeleton-loader/nile-skeleton-loader.css.ts

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    display: inline-block;
+  }
+
+  .skeleton-loader {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .skeleton {
+    display: block;
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));
+    animation: blink 1.2s ease-in-out infinite;
+    box-sizing: border-box;
+  }
+
+  .skeleton--rectangular {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+  }
+
+  .skeleton--circular {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+  }
+
+  .skeleton--text {
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));
+    height: 1em;
+  }
+
+  .skeleton--rounded {
+    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));
+  }
+
+  @keyframes blink {
+    0%, 100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+`;
+
+export default [styles];
+