@aquera/nile-elements 0.1.34-beta-1.2 → 0.1.35-beta-1.0

package/package.json

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

package/src/nile-code-editor/nile-code-editor.ts

@@ -98,6 +98,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Number, reflect: true , attribute: true}) debounceTimeout: number = 200;
 
+  @property({ type: Boolean, reflect: true , attribute: true}) aboveCursor: boolean = false;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -272,7 +274,7 @@ export class NileCodeEditor extends NileElement {
         customAutoCompletions,
         placeholderExtension,
         defaultSyntaxHighlightingExtension,
-        autocompletion(),
+        autocompletion({aboveCursor: this.aboveCursor}),
         language,
         customThemeExtension,
         EditorView.updateListener.of((v: ViewUpdate) => {
@@ -568,4 +570,4 @@ function convertToSingleLine(code: string) {
   if (!code) return '';
   // Remove line breaks and unnecessary whitespace
   return code.replace(/\s+/g, ' ').trim();
-}
+}

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

@@ -30,70 +30,91 @@ export function getValidTooltipPosition(
         top = triggerRect.top - tooltipRect.height - distance;
         left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
         break;
-      case 'top-start': { 
+      case 'top-start': {
         top = triggerRect.top - tooltipRect.height - distance;
-          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-          left = Math.max(triggerRect.left + skidding, centeredLeft); 
-        break;}
-        case 'top-end': {
-          
-          top = triggerRect.top - tooltipRect.height - distance;
-          
-          
-          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-          
-          
-          const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-          
-          
-          left = Math.min(centeredLeft, maxLeft);
-          break;
-        }
-        
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        left = Math.max(triggerRect.left + skidding, centeredLeft);
+        break;
+      }
+      case 'top-end': {
+        top = triggerRect.top - tooltipRect.height - distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+        left = Math.min(centeredLeft, maxLeft);
+        break;
+      }
+
       case 'bottom':
         top = triggerRect.bottom + distance;
         left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
         break;
-        case 'bottom-start': {
-          top = triggerRect.bottom + distance;
-          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-          left = Math.max(triggerRect.left + skidding, centeredLeft);
-        
-          break;
-        }
-        
-        case 'bottom-end': {
-          top = triggerRect.bottom + distance;
-          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
-          const maxLeft = triggerRect.right - tooltipRect.width + skidding;
-          left = Math.min(centeredLeft, maxLeft);
-          break;
-        }
-        
+      case 'bottom-start': {
+        top = triggerRect.bottom + distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        left = Math.max(triggerRect.left + skidding, centeredLeft);
+
+        break;
+      }
+
+      case 'bottom-end': {
+        top = triggerRect.bottom + distance;
+        const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+        const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+        left = Math.min(centeredLeft, maxLeft);
+        break;
+      }
+
       case 'left':
         top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
         left = triggerRect.left - tooltipRect.width - distance;
         break;
-      case 'left-start':
-        top = triggerRect.top + skidding;
+      case 'left-start': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
         left = triggerRect.left - tooltipRect.width - distance;
+        if (top < triggerRect.top) {
+          top = triggerRect.top;
+        }
         break;
-      case 'left-end':
-        top = triggerRect.bottom - tooltipRect.height + skidding;
+      }
+
+      case 'left-end': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
         left = triggerRect.left - tooltipRect.width - distance;
+        if (top + tooltipRect.height > triggerRect.bottom) {
+          top = triggerRect.bottom - tooltipRect.height;
+        }
+
         break;
+      }
+
       case 'right':
         top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
         left = triggerRect.right + distance;
         break;
-      case 'right-start':
-        top = triggerRect.top + skidding;
+      case 'right-start': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
         left = triggerRect.right + distance;
+        if (top < triggerRect.top) {
+          top = triggerRect.top;
+        }
+
         break;
-      case 'right-end':
-        top = triggerRect.bottom - tooltipRect.height + skidding;
+      }
+
+      case 'right-end': {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        top = triggerCenterY - tooltipRect.height / 2;
         left = triggerRect.right + distance;
+        if (top + tooltipRect.height > triggerRect.bottom) {
+          top = triggerRect.bottom - tooltipRect.height;
+        }
+
         break;
+      }
+
       default:
         top = triggerRect.top - tooltipRect.height - distance;
         left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
@@ -189,18 +210,18 @@ export function getCaretPosition({
   let caretTop = 0;
 
   switch (primaryPlacement) {
-      case 'top':
-          caretTop = tooltipRect.height - caretSize;
-          caretLeft = triggerCenterX - left -  caretSize;
-          if (placement === 'top-end') {
-            caretLeft = triggerCenterX - left - caretSize;
-          } else if (secondaryPlacement === 'start') {
-            caretLeft = triggerCenterX - left -  caretSize;
-          } else if (secondaryPlacement === 'end') {
-            caretLeft = tooltipRect.width - 2 *  caretSize + 8;
-          }
-          caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
-          break;
+    case 'top':
+      caretTop = tooltipRect.height - caretSize;
+      caretLeft = triggerCenterX - left - caretSize;
+      if (placement === 'top-end') {
+        caretLeft = triggerCenterX - left - caretSize;
+      } else if (secondaryPlacement === 'start') {
+        caretLeft = triggerCenterX - left - caretSize;
+      } else if (secondaryPlacement === 'end') {
+        caretLeft = tooltipRect.width - 2 * caretSize + 8;
+      }
+      caretLeft = Math.max(caretSize, Math.min(caretLeft, tooltipRect.width - 2 * caretSize));
+      break;
 
     case 'bottom':
       caretTop = -caretSize;
@@ -210,31 +231,41 @@ export function getCaretPosition({
     case 'left':
       caretLeft = tooltipRect.width - caretSize;
       if (secondaryPlacement === 'start') {
-        caretTop = triggerRect.height / 2 - caretSize;
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const minCaretTop = triggerRect.top - top;
+        caretTop = Math.max(computedCaretTop, minCaretTop);
       } else if (secondaryPlacement === 'end') {
-        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
+        caretTop = Math.min(computedCaretTop, maxCaretTop);
       } else {
         caretTop = triggerCenterY - top - caretSize;
       }
       caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
       break;
 
+
     case 'right':
       caretLeft = -caretSize;
       if (secondaryPlacement === 'start') {
-        caretTop = triggerRect.height / 2 - caretSize;
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const minCaretTop = triggerRect.top - top;
+        caretTop = Math.max(computedCaretTop, minCaretTop);
       } else if (secondaryPlacement === 'end') {
-        caretTop = tooltipRect.height - triggerRect.height / 2 - caretSize;
+        const computedCaretTop = triggerCenterY - top - caretSize;
+        const maxCaretTop = triggerRect.bottom - top - 2 * caretSize;
+        caretTop = Math.min(computedCaretTop, maxCaretTop);
       } else {
         caretTop = triggerCenterY - top - caretSize;
       }
       caretTop = Math.max(caretSize, Math.min(caretTop, tooltipRect.height - 2 * caretSize));
       break;
 
+
     default:
       caretLeft = tooltipRect.width / 2 - caretSize;
       caretTop = tooltipRect.height / 2 - caretSize;
   }
 
   return { caretLeft, caretTop };
-}
+}

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

@@ -7,7 +7,7 @@ describe('NileTooltip', () => {
   it('renders with default properties', async () => {
     const el = await fixture<NileTooltip>(html`<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);
     assert.equal(el.content, 'Hello');
-    assert.equal(el.placement, 'bottom');
+    assert.equal(el.placement, 'top');
     assert.equal(el.disabled, false);
     assert.equal(el.open, false);
   });
@@ -133,7 +133,7 @@ describe('NileTooltip', () => {
       </nile-tooltip>
     `);
     await el.updateComplete;
-    assert.equal(el.placement, 'bottom');
+    assert.equal(el.placement, 'top');
   });
 
 

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

@@ -1,3 +1,4 @@
+
 /**
  * Copyright Aquera Inc 2023
  *
@@ -33,7 +34,7 @@ export class NileTooltip extends NileElement {
     | 'bottom-end'
     | 'left'
     | 'left-start'
-    | 'left-end' = 'bottom';
+    | 'left-end' = 'top';
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: Boolean, reflect: true }) open = false;
   /**
@@ -81,11 +82,11 @@ export class NileTooltip extends NileElement {
 
     if (!validPlacements.includes(this.placement)) {
       console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
-      this.placement = 'bottom';
+      this.placement = 'top';
     }
 
     if (!validPlacements.includes(this.originalPlacement)) {
-      this.originalPlacement = 'bottom';
+      this.originalPlacement = 'top';
     }
  
     if (changedProps.has('open') && this.open) {
@@ -132,7 +133,9 @@ export class NileTooltip extends NileElement {
       viewportHeight
     );
 
- 
+ // FallBack Positions
+
+    // Bottom
     if (this.originalPlacement.startsWith('bottom')) {
       const availableSpaceBelow = viewportHeight - triggerRect.bottom;
       if (availableSpaceBelow < tooltipRect.height + this.distance) {
@@ -158,6 +161,89 @@ export class NileTooltip extends NileElement {
         placement = newPosition.placement;
       }
     }
+  // Top
+  if (this.originalPlacement.startsWith('top')) {
+    const availableSpaceAbove = triggerRect.top;
+    const availableSpaceBelow = viewportHeight - triggerRect.bottom;
+    if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {
+      let newPlacement: typeof this.originalPlacement = 'bottom';
+      if (this.originalPlacement === 'top-start') {
+        newPlacement = 'bottom-start';
+      } else if (this.originalPlacement === 'top-end') {
+        newPlacement = 'bottom-end';
+      }
+  
+      const newPosition = getValidTooltipPosition(
+        triggerRect,
+        tooltipRect,
+        newPlacement,
+        this.distance,
+        this.skidding,
+        this.caretSize,
+        viewportWidth,
+        viewportHeight
+      );
+      top = newPosition.top;
+      left = newPosition.left;
+      placement = newPosition.placement;
+    }
+  }
+
+  // Left
+  if (this.originalPlacement.startsWith('left')) {
+    const availableSpaceLeft = triggerRect.left;
+    const availableSpaceRight = viewportWidth - triggerRect.right;
+    if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {
+      let newPlacement: typeof this.originalPlacement = 'right';
+      if (this.originalPlacement === 'left-start') {
+        newPlacement = 'right-start';
+      } else if (this.originalPlacement === 'left-end') {
+        newPlacement = 'right-end';
+      }
+  
+      const newPosition = getValidTooltipPosition(
+        triggerRect,
+        tooltipRect,
+        newPlacement,
+        this.distance,
+        this.skidding,
+        this.caretSize,
+        viewportWidth,
+        viewportHeight
+      );
+      top = newPosition.top;
+      left = newPosition.left;
+      placement = newPosition.placement;
+    }
+  }
+
+  // Right
+  if (this.originalPlacement.startsWith('right')) {
+    const availableSpaceRight = viewportWidth - triggerRect.right;
+    const availableSpaceLeft = triggerRect.left;
+    if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {
+      let newPlacement: typeof this.originalPlacement = 'left';
+      if (this.originalPlacement === 'right-start') {
+        newPlacement = 'left-start';
+      } else if (this.originalPlacement === 'right-end') {
+        newPlacement = 'left-end';
+      }
+  
+      const newPosition = getValidTooltipPosition(
+        triggerRect,
+        tooltipRect,
+        newPlacement,
+        this.distance,
+        this.skidding,
+        this.caretSize,
+        viewportWidth,
+        viewportHeight
+      );
+      top = newPosition.top;
+      left = newPosition.left;
+      placement = newPosition.placement;
+    }
+  }
 
     this.setAttribute('placement', placement);
     this.tooltip.style.top = `${top}px`;
@@ -263,7 +349,7 @@ export class NileTooltip extends NileElement {
         @focusout=${this.handleBlur}
         aria-describedby="tooltip"
       >
-      <slot></slot>
+        <slot></slot>
       </div>
     `;
   }
@@ -274,4 +360,3 @@ declare global {
     'nile-tooltip': NileTooltip;
   }
 }
-

package/vscode-html-custom-data.json

@@ -818,7 +818,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -926,6 +926,11 @@
           "name": "debounceTimeout",
           "description": "`debounceTimeout` {`number`} - \n\nProperty: debounceTimeout\n\nDefault: 200"
         },
+        {
+          "name": "aboveCursor",
+          "description": "`aboveCursor` {`boolean`} - \n\nProperty: aboveCursor\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "
@@ -3778,7 +3783,7 @@
         },
         {
           "name": "placement",
-          "description": "`placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\nProperty: placement\n\nDefault: bottom",
+          "description": "`placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\nProperty: placement\n\nDefault: top",
           "values": [
             {
               "name": "top"