@aquera/nile-elements 1.6.4 → 1.6.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "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,acceptCompletion, closeCompletion,CompletionContext,Comp
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily, readOnlyTheme } from './theme';
 import { keymap } from '@codemirror/view';
 
 // Choose the appropriate mode for your use case
@@ -109,6 +109,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Object, attribute: false }) autoCompleteStyle: { width?: string; multiline?: boolean } | undefined = undefined;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) hideReadOnlyCursor: boolean = false; 
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -586,7 +588,22 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
+    if (this.disabled) {
+      return [
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false),
+      ];
+    }
+
+    if (this.readonly) {
+      const extensions = [EditorState.readOnly.of(true)];
+      if (this.hideReadOnlyCursor) {
+        extensions.push(EditorView.theme(readOnlyTheme));
+      }
+      return extensions;
+    }
+
+    return [];
   }
 
   getSingleLineExtension() {

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

@@ -164,3 +164,9 @@ export const customisedThemeCss = {
     marginLeft: '18px',
   }
 };
+
+export const readOnlyTheme = {
+  '.cm-cursor': { 
+    display: 'none !important' 
+  },
+};

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

@@ -64,6 +64,7 @@ export const styles = css`
   background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
   color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   cursor: not-allowed;
+  user-select: none;
 }
 
 `;

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -94,7 +94,7 @@ export default css`
 
   .nile-slide-toggle__slider:hover {
     &:not(.nile-slide--disabled) {
-      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
+      background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-quaternary-alt));
     }
   }
 
@@ -115,6 +115,10 @@ export default css`
     background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
   }
 
+  .nile-slide-toggle__switch:hover input:checked + .nile-slide-toggle__slider {
+    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
+  }
+
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
     --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
     --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
@@ -134,7 +138,7 @@ export default css`
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {

package/src/nile-tag/nile-tag.css.ts

@@ -61,13 +61,13 @@ export const styles = css`
   }
 
   .tag--success {
-    background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-green-400,var(--ng-componentcolors-utility-success-50));
+    border: 2px solid var(--nile-colors-green-400, var(--ng-componentcolors-utility-success-200));
+    color: var(--nile-colors-dark-900,var(--ng--componentcolors-utility-success-700));
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-300));
   }
 
   .tag--success:active > nile-icon-button {
@@ -79,7 +79,7 @@ export const styles = css`
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-  
+
   .tag--normal:hover {
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
@@ -89,13 +89,13 @@ export const styles = css`
   }
 
   .tag--warning {
-    background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-50));
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-200));
+    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-warning-700));
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-300));
   }
 
   .tag--warning:active > nile-icon-button {
@@ -104,13 +104,13 @@ export const styles = css`
 
 
   .tag--error {
-    background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-50));
+    border: 2px solid var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-200));
+    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-error-700));
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-300));
   }
 
   .tag--error:active > nile-icon-button {

package/vscode-html-custom-data.json

@@ -1081,7 +1081,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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `autoCompleteStyle` {`{ width?: string | undefined; multiline?: boolean | undefined; } | undefined`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `resizeObserver` - \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  * `autoCompleteStyleComp` - \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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `hideReadOnlyCursor` {`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  * `disabled` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `autoCompleteStyle` {`{ width?: string | undefined; multiline?: boolean | undefined; } | undefined`} - \n\n  * `hideReadOnlyCursor` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `resizeObserver` - \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  * `autoCompleteStyleComp` - \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",
@@ -1209,6 +1209,11 @@
           "description": "`defaultFont` {`boolean`} - \n\nProperty: defaultFont\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "hideReadOnlyCursor",
+          "description": "`hideReadOnlyCursor` {`boolean`} - \n\nProperty: hideReadOnlyCursor\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-focus",
           "description": "`nile-focus` {`Event`} - "