@aquera/nile-elements 0.1.67-beta-2.6 → 0.1.67-beta-2.7

package/package.json

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

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

@@ -116,6 +116,8 @@ export class NileCodeEditor extends NileElement {
   private placeholderComp = new Compartment();
   private defaultSyntaxHighlightingComp = new Compartment();
   private themeComp = new Compartment();
+  private autoCompletionComp = new Compartment();
+
 
   private isSpacePressed:boolean = false;
   /**
@@ -157,6 +159,7 @@ export class NileCodeEditor extends NileElement {
       : [];
   }
 
+  
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
     super.updated(changedProperties);
     if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
@@ -179,6 +182,15 @@ export class NileCodeEditor extends NileElement {
         ]
       })
     }
+    if (changedProperties.has('aboveCursor')) {
+      this.view.dispatch({
+        effects: [
+          this.autoCompletionComp.reconfigure(
+            autocompletion({ aboveCursor: this.aboveCursor })
+          )
+        ]
+      });
+    }    
     if (changedProperties.has('placeholder')) {
       this.view.dispatch({ 
         effects: [
@@ -310,7 +322,9 @@ export class NileCodeEditor extends NileElement {
         customAutoCompletions,
         placeholderExtension,
         defaultSyntaxHighlightingExtension,
-        autocompletion({aboveCursor: this.aboveCursor}),
+        this.autoCompletionComp.of(
+          autocompletion({ aboveCursor: this.aboveCursor })
+        ),        
         language,
         customThemeExtension,
         this.getTabCompletionKeymap(),

package/src/nile-table-body/nile-table-body.ts

@@ -42,7 +42,6 @@ export class NileTableBody extends NileElement {
   @query('slot') defaultSlot: HTMLSlotElement;
   @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;
   @property() type: 'primary' | 'secondary' = 'primary';
-  @property({ type: Boolean, reflect: true, attribute: true }) expandableRows = false;
 
   @state() private rows_data: any[] = [];
   @state() private header_rows_data: any[] = [];
@@ -78,9 +77,6 @@ export class NileTableBody extends NileElement {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
       if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
-        if (this.expandableRows) {
-          (child as any).expandable = true;
-        }
         let nilerows = this.getChildren(child, 'nile-table-cell-item');
         if (nilerows.length > 0) {
           nilerows.forEach((element: { innerHTML: any }) => {

package/src/nile-table-row/nile-table-row.css.ts

@@ -27,58 +27,6 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
-
-.row-container {
-  /* display: flex; */
-  /* flex-direction: column; */
-  overflow: hidden;
-  contain: layout style;
-}
-
-.row {
-  cursor: default;
-  position: relative;       
-  display: flex;
-  align-items: center;
-}
-
-.row.expandable {
-  border-bottom: 1px solid var(--nile-table-row-border-color);
-  overflow: hidden;
-  contain: layout style;
-}
- 
-
-.expanded-content {
-  /* overflow: hidden; */
-  transition: max-height 0.3s ease;
-}
-
-.row.expandable .expand-icon {
-  margin-right: 4px;
-}
- 
-.row ::slotted(nile-table-cell-item),
-.row ::slotted(nile-table-header-item) {
-  width: 100%;
-  box-sizing: border-box; 
-}
-
-
- 
-
-.expand-icon {
-  position: absolute;
-  left: 0.40em;            
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 1;
-  user-select: none;
-  z-index: 1;
-}
- 
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -10,7 +10,6 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
-  PropertyValues,
 } from 'lit';
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-table-row.css';
@@ -32,29 +31,6 @@ export class NileTableRow extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  @property({ type: Boolean, reflect: true , attribute: true}) expandable = false;
-
-  @property({ type: Boolean, reflect: true, attribute: true }) expanded = false;
-
-  @query('slot[name="expanded"]')
-	private _expandedSlot!: HTMLSlotElement;
-	
-	@query('slot[name="expandableIcon"]')
-	private _iconSlot!: HTMLSlotElement;
-
-	private tableBodyHasExpandable: any = this.closest('nile-table-body');
-
-	private _fallbackIcon?: HTMLElement | null;
-
-  private toggleExpand(e: MouseEvent): void {
-    this.expanded = !this.expanded;
-    this.dispatchEvent(new CustomEvent('nile-change', {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
 
   /* #endregion */
 
@@ -65,10 +41,6 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
-	protected firstUpdated(): void {
-		this._fallbackIcon = this.renderRoot?.querySelector('nile-icon') ?? null;
-	}
-
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -82,66 +54,15 @@ export class NileTableRow extends NileElement {
     }
   }
 
-	protected updated(changedProperties: PropertyValues): void {
-		if (!changedProperties.has('expandable') || !this._iconSlot) return;
-
-		const assigned = this._iconSlot.assignedElements();
-		const hasAssigned = assigned.length > 0;
-		const displayValue = this.expandable ? '' : 'none';
-
-		if (hasAssigned) {
-			for (const el of assigned) {
-				(el as HTMLElement).style.display = displayValue;
-			}
-		} else if (this._fallbackIcon) {
-			this._fallbackIcon.style.display = displayValue;
-		}
-	}
-
   public render(): TemplateResult {
- 
-		if (!this.expandable && !this.tableBodyHasExpandable.expandableRows) {
-      return html`
-        <slot
-          part="nile-row"
-          @nile-click-sort="${this.handleSortingAlter}"
-        ></slot>
-      `;
-    }
-  
- 
     return html`
-      <div part="row-container" class="row-container">
-        <div
-          part="nile-row"
-          class="row expandable ${this.expanded ? 'expanded' : ''}"
-          @nile-click-sort="${this.handleSortingAlter}"
-        >
-          <slot
-						name="expandableIcon"
-						@click=${this.toggleExpand} 
-						class="expand-icon" 
-						part="expandable-icon"
-					>
-            <nile-icon
-              name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
-              role="button"
-              size="10"
-              aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
-            </nile-icon>
-          </slot>
-          <slot></slot>
-        </div>
-  
-        ${this.expanded && this.expandable
-          ? html`
-              <div class="expanded-content" part="expanded-content">
-                <slot name="expanded"></slot>
-              </div>`
-          : null}
-      </div>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
   /* #endregion */
 }
 

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\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`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  * `tabCompletion` {`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  * `isSpacePressed` {`boolean`} - \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\n  * `tabCompletion` {`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  * `tabCompletion` {`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  * `autoCompletionComp` - \n\n  * `isSpacePressed` {`boolean`} - \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",
@@ -3652,7 +3652,7 @@
     },
     {
       "name": "nile-table-body",
-      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `expandableRows` {`boolean`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `expandableRows` {`boolean`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "nile-table-body component.\n\nAttributes:\n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - The styles for TableBody\n\n  * `_childNodes` {`HTMLElement[]`} - \n\n  * `type` {`\"primary\" | \"secondary\"`} - \n\n  * `rows_data` {`any[]`} - \n\n  * `header_rows_data` {`any[]`} - \n\n  * `sort__index` {`number`} - \n\n  * `search__index` {`number`} - \n\n  * `hasResizableColumns` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3665,11 +3665,6 @@
               "name": "secondary"
             }
           ]
-        },
-        {
-          "name": "expandableRows",
-          "description": "`expandableRows` {`boolean`} - \n\nProperty: expandableRows\n\nDefault: false",
-          "valueSet": "v"
         }
       ]
     },
@@ -3711,23 +3706,8 @@
     },
     {
       "name": "nile-table-row",
-      "description": "nile-table-row component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ expanded: boolean; }>`} - \n\nAttributes:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\nProperties:\n\n  * `expandable` {`boolean`} - \n\n  * `expanded` {`boolean`} - \n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `_iconSlot` {`HTMLSlotElement`} - \n\n  * `tableBodyHasExpandable` - \n\n  * `_fallbackIcon` {`HTMLElement | null | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": [
-        {
-          "name": "expandable",
-          "description": "`expandable` {`boolean`} - \n\nProperty: expandable\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "expanded",
-          "description": "`expanded` {`boolean`} - \n\nProperty: expanded\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "onnile-change",
-          "description": "`nile-change` {`CustomEvent<{ expanded: boolean; }>`} - "
-        }
-      ]
+      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
     },
     {
       "name": "nile-table",