@aquera/nile-elements 1.6.3 → 1.6.4

package/package.json

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

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

@@ -516,6 +516,11 @@ export const styles = css`
   .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
+
+  .button--standard.button--ghost.button--disabled ::slotted(nile-icon:not([color])) {
+    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
+  }
+  
   .button--standard.button--ghost:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)

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

@@ -586,13 +586,7 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    if(this.readonly || this.disabled) {
-      return [
-        EditorState.readOnly.of(true),
-        EditorView.editable.of(false),
-      ]
-    }
-    return [];
+    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
   }
 
   getSingleLineExtension() {

package/src/nile-icon/icons/svg/arrow-left-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow-right-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/arrow_left_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow_right_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -25,8 +25,12 @@ export { default as arrayofinteger } from './array-of-integer';
 export { default as arrayofstring } from './array-of-string';
 export { default as array } from './array';
 export { default as arrayofobject } from './arrayofobject';
+export { default as arrowleftsmall } from './arrow-left-small';
 export { default as arrownarrowleft } from './arrow-narrow-left';
+export { default as arrowrightsmall } from './arrow-right-small';
 export { default as arrow } from './arrow';
+export { default as arrow_left_small } from './arrow_left_small';
+export { default as arrow_right_small } from './arrow_right_small';
 export { default as arrowdown } from './arrowdown';
 export { default as arrowdropdown } from './arrowdropdown';
 export { default as arrowdropup } from './arrowdropup';

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -39,7 +39,6 @@ export const styles = css`
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
     align-items: stretch;
     font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
@@ -54,6 +53,11 @@ export const styles = css`
     padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
+  .menu-item.menu-item--active {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   .menu-item.menu-item--disabled {
     outline: none;
     opacity: 0.5;
@@ -89,11 +93,16 @@ export const styles = css`
     outline: none;
   }
 
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
     background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
+  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   :host(:focus-visible) .menu-item {
     outline: none;
     background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));

package/src/nile-menu-item/nile-menu-item.ts

@@ -65,6 +65,9 @@ export class NileMenuItem extends NileElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Draws the menu item in an active/selected state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) hasSubMenu = false;
 
@@ -152,7 +155,8 @@ export class NileMenuItem extends NileElement {
           'menu-item': true,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
+          'menu-item--active': this.active,
+          'menu-item--has-submenu': this.hasSubMenu,
         })}
       >
         ${this.checked

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

@@ -382,6 +382,12 @@ export const styles = css`
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
   }
 
+  .prev-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
+  .next-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
 `;
 
 export default [styles];

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

@@ -8,6 +8,7 @@ import NileElement from '../internal/nile-element';
 import styles from './nile-radio-group.css';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import type NileRadio from '../nile-radio/nile-radio';
+import { Nile_Events } from '../internal/enum';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -111,9 +112,13 @@ export class NileRadioGroup extends NileElement {
     if (!this.allowUncheckGroup && this.value !== oldValue) {
       this.emit('change', { value: this.value});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     } else if (this.allowUncheckGroup) { 
       this.emit('change', { value: this.value , checked: target.checked});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value , checked: target.checked});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value , checked: target.checked});
     }
   }
 
@@ -183,6 +188,8 @@ export class NileRadioGroup extends NileElement {
     if (this.value !== oldValue) {
       this.emit('change');
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     }
 
     event.preventDefault();

package/src/nile-rich-text-editor/utils/list-utils.ts

@@ -3,8 +3,7 @@ export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
   function styleList(list: HTMLElement) {
-    list.style.paddingInlineStart = '0';
-    list.style.margin = '0';
+        list.style.margin = '0';
   }
 
   function isEmptyBlock(el: HTMLElement) {

package/vscode-html-custom-data.json

@@ -3514,7 +3514,7 @@
     },
     {
       "name": "nile-menu-item",
-      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
@@ -3542,6 +3542,11 @@
           "description": "`disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - Draws the menu item in an active/selected state.\n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "hasSubMenu",
           "description": "`hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperty: hasSubMenu\n\nDefault: false",