@aquera/nile-elements 0.1.23 → 0.1.24

package/package.json

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

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

@@ -39,7 +39,7 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, CustomTheme } from './theme';
+import { Theme as DefaultTheme } from './theme';
 
 // Choose the appropriate mode for your use case
 
@@ -73,6 +73,8 @@ export class NileCodeEditor extends NileElement {
   @property({ type: Boolean, reflect: true , attribute: 'noborder' }) noborder: boolean = false;
 
   @property({ type: Boolean, reflect: true , attribute: true }) multiline: boolean = false;
+
+  @property({ type: Boolean, reflect: true , attribute: true }) enableFoldGutters: boolean = false;
   
   @property({ type: Boolean, reflect: true , attribute: true }) allowVariableInCustomSuggestion: boolean = false;
 
@@ -259,7 +261,7 @@ export class NileCodeEditor extends NileElement {
       extensions: [
         basicSetup({
           highlightActiveLine: false,
-          foldGutter: true,
+          foldGutter: this.enableFoldGutters,
         }),
         lineNumbersExtension,
         readOnlyExtension,

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -45,6 +45,15 @@ export const styles = css`
     transition: 0.3s translate ease, 0.3s width ease;
   }
 
+  .tab-group__indicator__path{
+    position: absolute;
+    height: var(--track-width);
+    width: 100%;
+    background: var(--nile-colors-neutral-400);
+    bottom:0px;
+    z-index:-1;
+  }
+
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
     padding: 0 10px;
@@ -113,13 +122,12 @@ export const styles = css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200);
   }
 
   .tab-group--top .tab-group__indicator {
-    bottom: -2px;
+    bottom: 0px;
     border-bottom: 2px solid var(--nile-colors-primary-600);
+    z-index:-1;
   }
 
   .tab-group--top .tab-group__body {

package/src/nile-tab-group/nile-tab-group.ts

@@ -206,12 +206,14 @@ export class NileTabGroup extends NileElement {
 
           <div class="tab-group__nav">
             <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator-path" class="tab-group__indicator__path"></div>
               <div
                 part="active-tab-indicator"
                 class=${classMap({
                   'tab-group__indicator': !this.noTrack,
                 })}
               ></div>
+
               <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>

package/vscode-html-custom-data.json

@@ -804,7 +804,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  * `noborder` {`boolean`} - \n\n  * `multiline` {`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  * `noborder` {`boolean`} - \n\n  * `multiline` {`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  * `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  * `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`} - ",
       "attributes": [
         {
           "name": "value",
@@ -863,6 +863,11 @@
           "description": "`multiline` {`boolean`} - \n\nProperty: multiline\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "enableFoldGutters",
+          "description": "`enableFoldGutters` {`boolean`} - \n\nProperty: enableFoldGutters\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "allowVariableInCustomSuggestion",
           "description": "`allowVariableInCustomSuggestion` {`boolean`} - \n\nProperty: allowVariableInCustomSuggestion\n\nDefault: false",