@aquera/nile-elements 0.1.9 → 0.1.11

package/package.json

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

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

@@ -11,25 +11,28 @@ import { css } from 'lit';
  * CodeEditor CSS
  */
 export const styles = css`
+  *{
+    box-sizing:border-box;
+  }
+
   :host {
     display: block;
   }
 
-  .code-mirror {
+  .code__editor__container {
     display: flex;
-    justify-content: flex-end;
-    flex-direction: row-reverse;
     padding: 5px;
     border-radius: 5px;
     border: 1px solid rgb(204, 204, 204);
+    position: relative;
   }
 
   .no-scroller .cm-scroller{
-    scrollbar-width:none;
+    scrollbar-width: none;
   }
 
   .error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .noborder {
@@ -45,14 +48,19 @@ export const styles = css`
     outline: none;
   }
 
-  .code-editor__icon__container {
+  .expand__icon__container{
     display: none;
+    position: absolute;
+    border-radius: 5px;
     cursor: pointer;
-    align-self: start;
-    padding: 5px 5px 0px 0px;
+    right: 0px;
+    top: 5px;
+    z-index: 1;
+    padding: 5px;
+    background-color: var(--nile-colors-white-base);
   }
   
-  .code-mirror:hover > .code-editor__icon__container {
+  .code__editor__container:hover > .expand__icon__container{
     display: flex;
   }
 `;

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

@@ -47,7 +47,7 @@ import { Theme } from './theme';
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
   
-  @query('.code-mirror') codeEditor: HTMLInputElement;
+  @query('.code__editor__container') codeEditor: HTMLInputElement;
 
   @property({ type: String, reflect: true , attribute: true }) value = '';
 
@@ -179,22 +179,22 @@ export class NileCodeEditor extends NileElement {
     return html`<div
         part="code-editor-base"
         class=${classMap({
-          'code-mirror': true,
+          'code__editor__container': true,
           'noborder': noborder,
           'error': hasError || hasErrorMessage,
-          'code-mirror__singleline': !this.multiline,
+          'code__editor__singleline': !this.multiline,
           'no-scroller': noScrollbar
         })}
       >
       ${this.expandable
       ? html` 
-        <nile-icon
-          name="${this.expandIcon}"
-          class="code-editor__icon__container"
-          size="16"
-          color="black"
-          @click="${(e: CustomEvent) => this.emit('nile-expand')}"
-        ></nile-icon>`
+        <div @click="${(e: CustomEvent) => this.emit('nile-expand')}" class="expand__icon__container">
+          <nile-icon
+            name="${this.expandIcon}"
+            size="16"
+            color="black"
+          ></nile-icon>
+        </div>`
       : ''}
       </div>
       ${hasErrorMessage

package/src/nile-drawer/nile-drawer.ts

@@ -95,6 +95,8 @@ export class NileDrawer extends NileElement {
    */
   @property({ type: Boolean, reflect: true }) open = false;
 
+  @property({ type: Boolean, reflect: true }) closeOnEscape = true;
+
   /**
    * The drawer's label as displayed in the header. You should always include a relevant label even when using
    * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
@@ -162,11 +164,11 @@ export class NileDrawer extends NileElement {
   }
 
   private addOpenListeners() {
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    if(this.closeOnEscape) document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   private removeOpenListeners() {
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    if(this.closeOnEscape) document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {

package/vscode-html-custom-data.json

@@ -1067,13 +1067,18 @@
     },
     {
       "name": "nile-drawer",
-      "description": "Nile drawer component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the drawer opens.\n\n  * `nile-after-show` {} - Emitted after the drawer opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the drawer closes.\n\n  * `nile-after-hide` {} - Emitted after the drawer closes and all animations are complete.\n\n  * `nile-initial-focus` {} - Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n\n  * `nile-request-close` {`\"{ source: 'close-button' \" | \"keyboard\" | \" 'overlay' }\"`} - Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.\n\nSlots:\n\n  * ` ` {} - The drawer's main content.\n\n  * `label` {} - The drawer's label. Alternatively, you can use the `label` attribute.\n\n  * `header-actions` {} - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n\n  * `footer` {} - The drawer's footer, usually one or more buttons representing various options.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"end\" | \"bottom\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `no-header` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `modal` - \n\n  * `originalTrigger` {`HTMLElement | null`} - \n\n  * `drawer` {`HTMLElement`} - \n\n  * `panel` {`HTMLElement`} - \n\n  * `overlay` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"end\" | \"bottom\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `noHeader` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile drawer component.\n\nEvents:\n\n  * `nile-show` {} - Emitted when the drawer opens.\n\n  * `nile-after-show` {} - Emitted after the drawer opens and all animations are complete.\n\n  * `nile-hide` {} - Emitted when the drawer closes.\n\n  * `nile-after-hide` {} - Emitted after the drawer closes and all animations are complete.\n\n  * `nile-initial-focus` {} - Emitted when the drawer opens and is ready to receive focus. Calling\n`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n\n  * `nile-request-close` {`\"{ source: 'close-button' \" | \"keyboard\" | \" 'overlay' }\"`} - Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.\n\nSlots:\n\n  * ` ` {} - The drawer's main content.\n\n  * `label` {} - The drawer's label. Alternatively, you can use the `label` attribute.\n\n  * `header-actions` {} - Optional actions to add to the header. Works best with `<nile-icon-button>`.\n\n  * `footer` {} - The drawer's footer, usually one or more buttons representing various options.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"end\" | \"bottom\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `no-header` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `modal` - \n\n  * `originalTrigger` {`HTMLElement | null`} - \n\n  * `drawer` {`HTMLElement`} - \n\n  * `panel` {`HTMLElement`} - \n\n  * `overlay` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\n  * `closeOnEscape` {`boolean`} - \n\n  * `label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `placement` {`\"top\" | \"end\" | \"bottom\" | \"start\"`} - The direction from which the drawer will open.\n\n  * `contained` {`boolean`} - By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.\n\n  * `preventOverlayClose` {`boolean`} - Drawer doesnt close when clicled on overlay, the only way to close is to do by handling open property\n\n  * `noHeader` {`boolean`} - Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "open",
           "description": "`open` {`boolean`} - Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n\nProperty: open\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "closeOnEscape",
+          "description": "`closeOnEscape` {`boolean`} - \n\nProperty: closeOnEscape\n\nDefault: true",
+          "valueSet": "v"
+        },
         {
           "name": "label",
           "description": "`label` {`string`} - The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\nProperty: label\n\nDefault: "