@aquera/nile-elements 0.1.10 → 0.1.12

package/package.json

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

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/src/nile-tour/nile-tour.css.ts

@@ -15,20 +15,20 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #fff);
+    background-color: var(--nile-tour-background-color, #1978B8);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
     border-radius: 4px;
-    border: 1px solid var(--Neutral-30, #c7ced4);
-    background: var(--White-Normal, #fff);
+    border: 1px solid var(--Neutral-30, #1978B8);
+    background: var(--White-Normal, #1978B8);
 
     /* Elevation/Lifted */
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .introjs-tooltip-title {
-    color: #000;
+    color: #ffffff;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -43,7 +43,7 @@ export const styles = css`
   }
 
   .introjs-tooltiptext {
-    color: #7f7f7f;
+    color: #ffffff;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -55,7 +55,7 @@ export const styles = css`
   .introjs-arrow {
     width: 15px;
     height: 20px;
-    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20" fill="none"%3E%3Cpath d="M1.43333 11.2C0.633333 10.6 0.633333 9.4 1.43333 8.8L12.1 0.800001C13.0889 0.0583585 14.5 0.763931 14.5 2L14.5 18C14.5 19.2361 13.0889 19.9416 12.1 19.2L1.43333 11.2Z" fill="white" stroke="%23C7CED4"/%3E%3C/svg%3E');
+    background-image: url('data:image/svg+xml,%3Csvg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z" fill="%231978B8"/%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -118,13 +118,14 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
     align-items: center;
     gap: 12px;
     border-radius: 4px;
+    font-weight: 500;
   }
 
   .introjs-button:hover {
@@ -135,7 +136,7 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -152,7 +153,7 @@ export const styles = css`
     cursor: pointer;
     text-shadow: none;
     box-shadow: none;
-    background: var(--Primary-Normal, #005ea6);
+    background: var(--Primary-Normal, #1978B8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -199,9 +200,9 @@ export const styles = css`
     padding: 0 10px;
     display: flex;
     align-items: center;
-    color: var(--Color-Text-Info, #1978B8);
+    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
     font-style: normal;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 14px;
     letter-spacing: 0.2px;
   }

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: "