@aquera/nile-elements 0.1.35-beta-1.3 → 0.1.35-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.35-beta-1.3",
+  "version": "0.1.35-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,6 +37,7 @@
     "./nile-textarea": "./dist/src/nile-textarea/index.js",
     "./nile-date-picker": "./dist/src/nile-date-picker/index.js",
     "./nile-error-message": "./dist/src/nile-error-message/index.js",
+    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js",
     "./nile-form-error-message": "./dist/src/nile-form-error-message/index.js",
     "./nile-form-help-text": "./dist/src/nile-form-help-text/index.js",
     "./nile-calendar": "./dist/src/nile-calendar/index.js",
@@ -84,9 +85,7 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
-    "./nile-tour": "./dist/src/nile-tour/index.js",
-    "./nile-table": "./dist/src/nile-table/index.js",
-    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js"
+    "./nile-table": "./dist/src/nile-table/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -190,4 +189,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/plop-templates/lit/index.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2023
+* Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.css.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2023
+* Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.

package/plop-templates/lit/lit.template.ts.hbs

@@ -0,0 +1,3 @@
+/**
+ * Template File for nile-{{name}} component
+ */

package/plop-templates/lit/lit.test.ts.hbs

@@ -0,0 +1,38 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ 
+import { fixture, assert, expect, html } from '@open-wc/testing';
+import './nile-{{name}}'; // Just import to register the element
+
+describe('<nile-{{name}}>', () => {
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<nile-{{name}}></nile-{{name}}>`);
+  });
+
+  it('passes accessibility test', async () => {
+    await expect(element).to.be.accessible();
+  });
+
+  it('renders with the correct tag name', () => {
+    expect(element.tagName.toLowerCase()).to.equal('nile-{{name}}');
+  });
+
+  it('renders with slot content when provided', async () => {
+    const testContent = 'Test Content';
+    element = await fixture(html`<nile-{{name}}>${testContent}</nile-{{name}}>`);
+    
+    const slot = (element.shadowRoot!.querySelector('slot') as HTMLSlotElement);
+    assert.exists(slot, 'Slot should exist');
+
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    expect(assignedNodes.length).to.be.greaterThan(0);
+    expect(assignedNodes[0].textContent?.trim()).to.equal(testContent);
+  });
+});

package/plop-templates/lit/lit.ts.hbs

@@ -1,5 +1,5 @@
 /**
- * Copyright Aquera Inc 2023
+ * Copyright Aquera Inc 2025
  *
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
@@ -37,8 +37,12 @@ export class Nile{{pascalCase name}} extends NileElement {
 	 * @slot This is a slot test
 	 */
 	public render(): TemplateResult {
-		return html`
-			<slot> </slot>
+	const time = new Date().toLocaleTimeString();
+  	return html`
+
+    <slot>
+	<div>Hello Nile - ${time}</div>
+    </slot>
 			`;
 	}
 

package/plop-templates/lit/sub-components/index.ts.hbs

@@ -0,0 +1,4 @@
+/**
+ * Sub component  for nile-{{name}} component. 
+ * Follows the same parent folder structure.
+ */

package/plop-templates/lit/types/type.ts.hbs

@@ -0,0 +1,3 @@
+/**
+ * Types for nile-{{name}} component
+ */

package/plop-templates/lit/utils/lit.utils.ts.hbs

@@ -0,0 +1,4 @@
+/**
+ * Utility functions for nile-{{name}} component
+ *  
+ */

package/plopfile.js

@@ -1,7 +1,7 @@
 export default function (plop) {
   // lit generator
   plop.setGenerator('lit', {
-    description: 'create lit-element',
+    description: 'create nile-element',
     prompts: [
       {
         type: 'input',
@@ -30,6 +30,37 @@ export default function (plop) {
         path: 'src/nile-{{name}}/nile-{{name}}.css.ts',
         templateFile: 'plop-templates/lit/lit.css.ts.hbs',
       },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/nile-{{name}}.template.ts',
+        templateFile: 'plop-templates/lit/lit.template.ts.hbs',
+      },
+     
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/nile-{{name}}.test.ts',
+        templateFile: 'plop-templates/lit/lit.test.ts.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/sub-components/nile-{{name}}.ts',
+        template: '',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/utils/nile-{{name}}.utils.ts',
+        template: '',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/types/index.ts',
+        templateFile: 'plop-templates/lit/types/index.ts.hbs',
+      },
+      {
+        type: 'add',
+        path: 'src/nile-{{name}}/types/{{name}}.type.ts',
+        templateFile: 'plop-templates/lit/types/type.ts.hbs',
+      },
       {
         type: 'modify',
         path: 'package.json',

package/src/index.ts

@@ -76,4 +76,4 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-export { NileFilterChip } from './nile-filter-chip';
+export { NileFilterChip } from './nile-filter-chip';

package/src/nile-error-message/nile-error-message.css.ts

@@ -16,11 +16,11 @@ export const styles = css`
 
   .nile-error-message {
     width: 100%;
-    word-break: break-all;
     font-size: var(--nile-font-size-small);
     letter-spacing: 0.2px;
     font-weight: var(--nile-font-weight-regular);
     line-height: var(--nile-font-size-small);
+    max-width: var(--nile-error-max-width, 535px);
   }
 
   .nile-error-message__error {
@@ -32,6 +32,8 @@ export const styles = css`
     color: var(--nile-colors-dark-500);
     margin-top:6px;
     line-height: 16px;
+    max-height: var(--nile-error-max-height, 48px);
+    overflow-x: auto;
   }
 
   .nile-error-message__icon {
@@ -54,7 +56,7 @@ export const styles = css`
     border: 1px solid var(--nile-colors-red-500);
     border-left: 6px solid var(--nile-colors-red-500);
     border-radius: 4px;
-    margin-top: 12px;
+    margin-top: 8px;
     padding: 12px;
     background: var(--nile-colors-neutral-100);
   }
@@ -81,10 +83,10 @@ export const styles = css`
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: 100px;
+    max-height: var(--nile-error-max-dialog-height, 48px);
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 12px;
+    padding: 8px;
   }
 `;
 

package/src/nile-error-message/nile-error-message.ts

@@ -32,6 +32,12 @@ export class NileErrorMessage extends LitElement {
   @property({ type: Boolean })
   isExpanded: boolean = false;
 
+  @property({ type: String }) maxWidth: string;
+
+  @property({ type: String }) maxHeight: string;
+
+  @property({ type: String }) maxDialogHeight: string;
+
   // The maximum length before truncation.
   private readonly MAX_LENGTH: number = 100;
 
@@ -46,6 +52,18 @@ export class NileErrorMessage extends LitElement {
     return this.errorResponse;
   }
 
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('maxWidth')) {
+      this.style.setProperty('--nile-error-max-width', this.maxWidth);
+    }
+    if (changedProperties.has('maxHeight')) {
+      this.style.setProperty('--nile-error-max-height', this.maxHeight);
+    }
+    if (changedProperties.has('maxDialogHeight')) {
+      this.style.setProperty('--nile-error-max-dialog-height', this.maxDialogHeight);
+    }
+  }
+
   /**
    * Toggle the expanded state of the error response.
    */

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --indication-color: var(--nile-colors-red-500);
+    --indication-color: var(--nile-colors-red-700);
   }
 
   .nile-error-notification {

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -32,7 +32,7 @@ export const styles = css`
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
     gap: 6px;
-    /* margin-right: 6px; */
+    margin-right: 6px;
   }
 
   .chip:hover {

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -49,16 +49,16 @@ describe('<nile-filter-chip>', () => {
     expect(iconSpan.textContent).to.equal('★');
   });
 
-  it('does not render a badge when viewMoreCount is zero', async () => {
+  it('does not render a badge when extraCount is zero', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
     `);
     expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
   });
 
-  it('renders a +badge when viewMoreCount > 0', async () => {
+  it('renders a +badge when extraCount > 0', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="5" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
     `);
     const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
     expect(badge).to.exist;
@@ -74,17 +74,17 @@ describe('<nile-filter-chip>', () => {
     const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
     setTimeout(() => chip.click());
     const ev = await oneEvent(el, 'nile-click');
-    expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });
+    expect(ev.detail).to.deep.equal({ text: 'T', extraCount: 0 });
   });
 
   it('dispatches `nile-close` on close icon click and removes itself', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip closable viewMoreCount="2" text="TT"></nile-filter-chip>
+      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
     `);
     const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
     setTimeout(() => closeIcon.click());
     const ev = await oneEvent(el, 'nile-close');
-    expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 2 });
+    expect(ev.detail).to.deep.equal({ text: 'TT', extraCount: 2 });
     expect(document.body.contains(el)).to.be.false;
   });
 

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -12,7 +12,7 @@ import { styles } from './nile-filter-chip.css';
 export class NileFilterChip extends NileElement {
   @property({ type: String }) label = '';
   @property({ type: String }) text = '';
-  @property({ type: Number }) viewMoreCount: number = 0;
+  @property({ type: Number }) extraCount: number = 0;
   @property({ type: Boolean }) editable = false;
   @property({ type: Boolean }) closable = false;
   @property({ type: String }) icon = '';
@@ -47,14 +47,14 @@ export class NileFilterChip extends NileElement {
   private handleClose(event: Event) {
     event.stopPropagation();
     this.dispatchEvent(
-      new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
+      new CustomEvent('nile-close', { detail: { text: this.text, extraCount: this.extraCount } })
     );
     this.remove();
   }
 
   private handleClick() {
     this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
+      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })
     );
   }
 
@@ -74,13 +74,13 @@ export class NileFilterChip extends NileElement {
     `;
   }
 
-  private getviewMoreCountSlot(): TemplateResult {
+  private getExtraCountSlot(): TemplateResult {
     return html`
       <slot name="suffix">
-        ${this.viewMoreCount
+        ${this.extraCount
           ? html`
               <nile-badge variant="primary" pilltype="pill-color">
-                +${this.viewMoreCount}
+                +${this.extraCount}
               </nile-badge>
             `
           : html``}
@@ -109,7 +109,7 @@ export class NileFilterChip extends NileElement {
         ${this.getLabelSlot()}
         <slot name="content"></slot>
         ${this.getValueSlot()}
-        ${this.getviewMoreCountSlot()}
+        ${this.getExtraCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
     `;

package/src/nile-icon/aliasmap.ts

@@ -0,0 +1,112 @@
+
+export const aliasMap: Record<string, string> = {
+  'userremove1': 'userremove',
+  'userremove2': 'userremove',
+  'deleteuser': 'userremove',
+  'userinactive': 'userremove',
+  'headeractions': 'action',
+  'actionworkflow': 'action',
+  'block02': 'block',
+  'componentblock': 'block',
+  'flowmapblock': 'block',
+  'calendar01': 'calendar',
+  'playcircle': 'play',
+  'setting': 'settings',
+  'settings1': 'settings',
+  'trash': 'delete',
+  'trash01': 'delete',
+  'trashnofill': 'delete',
+  'trash03': 'delete',
+  'download01': 'download',
+  'download02': 'download',
+  'datatypepersistentvariable': 'persistentvariable',
+  'leftarrow': 'arrowleft',
+  'rightarrow': 'arrowright',
+  'searchlg': 'search',
+  'info2': 'info',
+  'infoicon1': 'info',
+  'infocircle': 'info',
+  'dropdown': 'options',
+  'flowmapellipsis': 'options',
+  'dotsvertical': 'options',
+  'stopcircle': 'stop',
+  'agents': 'agent',
+  'event': 'trigger',
+  'editpencil': 'pencil',
+  'pen': 'pencil',
+  'editwrite': 'pencil',
+  'shape': 'pencil',
+  'edit01': 'pencil',
+  'updateuser': 'pencil',
+  'edit1': 'pencil',
+  'notscheduled': 'error',
+  'not': 'error',
+  'flowmapcancel': 'error',
+  'cancel': 'error',
+  'xcircle': 'error',
+  'undo1': 'undo',
+  'privilage': 'privilege',
+  'privilegeobject': 'privilege',
+  'bell': 'mute',
+  'barchartsquare03': 'barchartsquare02',
+  'helpcircle': 'helpandsupport',
+  'help1': 'helpandsupport',
+  'caution': 'helpandsupport',
+  'smalltick': 'tick',
+  'check': 'tick',
+  'userselection': 'useractive',
+  'selectuser': 'useractive',
+  'usergroup': 'group',
+  'multipleuser': 'group',
+  'usersquare': 'user',
+  'useranalysisicon': 'user',
+  'usercircle': 'user',
+  'user03': 'user',
+  'personaldetails': 'user',
+  'user01': 'user',
+  'workfloworchestration': 'flowmaporchestration',
+  'workflow01': 'flowmap',
+  'workflowsolid': 'flowmap',
+  'section02': 'section',
+  'flowmapsection': 'section',
+  'workflowsection': 'section',
+  'variablenew1': 'variablenew',
+  'rolemanager': 'role',
+  'manageduser': 'manage',
+  'folder01': 'folder',
+  'headerfunctions': 'script',
+  'users01': 'users',
+  'users02': 'users',
+  'ouanalysisicon': 'users',
+  'draglist': 'drag',
+  'flowmapdrag': 'drag',
+  'itemplaceholder': 'drag',
+  'placeholderwf': 'drag',
+  'anomaly': 'thumbsdown',
+  'noanomaly': 'thumbsup',
+  'approve': 'thumbsup',
+  'enabled': 'enable',
+  'themes': 'color',
+  'palette': 'color',
+  'expand1': 'sort',
+  'chevronselectorvertical': 'sort',
+  'default1': 'default',
+  'custom': 'default',
+  'basic': 'default',
+  'droparrow': 'arrowdown',
+  'nextdown': 'arrowdown',
+  'chevrondown': 'arrowdown',
+  'downarrow': 'arrowdown',
+  'plusicon': 'pluscircle',
+  'flow01': 'condition',
+  'table1': 'logs',
+  'flowmaptext': 'text',
+  'workflowtext': 'text',
+  'layersthree01': 'layersthree02',
+  'uparrow': 'chevronup',
+  'prevup': 'chevronup',
+  'headervariable': 'variable',
+  'datatypevariable': 'variable',
+  'variablelocal1': 'variablelocal',
+  'refreshcw03': 'refresh',
+};