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

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.2",
+  "version": "0.1.35-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,7 +37,6 @@
     "./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",
@@ -85,7 +84,9 @@
     "./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-table": "./dist/src/nile-table/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"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -189,4 +190,4 @@
       "prettier --write"
     ]
   }
-}
+}

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,8 +32,6 @@ 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 {
@@ -56,7 +54,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: 8px;
+    margin-top: 12px;
     padding: 12px;
     background: var(--nile-colors-neutral-100);
   }
@@ -83,10 +81,10 @@ export const styles = css`
   }
 
   .nile-error-message__response-expanded.expanded {
-    max-height: var(--nile-error-max-dialog-height, 48px);
+    max-height: 100px;
     transition: max-height 0.3s ease-in-out;
     visibility: visible;
-    padding: 8px;
+    padding: 12px;
   }
 `;
 

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

@@ -32,12 +32,6 @@ 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;
 
@@ -52,18 +46,6 @@ 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-700);
+    --indication-color: var(--nile-colors-red-500);
   }
 
   .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 extraCount is zero', async () => {
+  it('does not render a badge when viewMoreCount is zero', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip extraCount="0" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
     `);
     expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
   });
 
-  it('renders a +badge when extraCount > 0', async () => {
+  it('renders a +badge when viewMoreCount > 0', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip extraCount="5" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="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', extraCount: 0 });
+    expect(ev.detail).to.deep.equal({ text: 'T', viewMoreCount: 0 });
   });
 
   it('dispatches `nile-close` on close icon click and removes itself', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip closable extraCount="2" text="TT"></nile-filter-chip>
+      <nile-filter-chip closable viewMoreCount="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', extraCount: 2 });
+    expect(ev.detail).to.deep.equal({ text: 'TT', viewMoreCount: 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 }) extraCount: number = 0;
+  @property({ type: Number }) viewMoreCount: 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, extraCount: this.extraCount } })
+      new CustomEvent('nile-close', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
     );
     this.remove();
   }
 
   private handleClick() {
     this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { text: this.text, extraCount: this.extraCount } })
+      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
     );
   }
 
@@ -74,13 +74,13 @@ export class NileFilterChip extends NileElement {
     `;
   }
 
-  private getExtraCountSlot(): TemplateResult {
+  private getviewMoreCountSlot(): TemplateResult {
     return html`
       <slot name="suffix">
-        ${this.extraCount
+        ${this.viewMoreCount
           ? html`
               <nile-badge variant="primary" pilltype="pill-color">
-                +${this.extraCount}
+                +${this.viewMoreCount}
               </nile-badge>
             `
           : html``}
@@ -109,7 +109,7 @@ export class NileFilterChip extends NileElement {
         ${this.getLabelSlot()}
         <slot name="content"></slot>
         ${this.getValueSlot()}
-        ${this.getExtraCountSlot()}
+        ${this.getviewMoreCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
     `;

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -15,7 +15,6 @@ export default css`
     display: flex;
     height: 6px;
     justify-content: space-between;
-    display: inline-block;
   }
 
   .nile-progress-bar__progress-bar li {

package/src/nile-select/nile-select.ts

@@ -161,7 +161,7 @@ export class NileSelect extends NileElement implements NileFormControl {
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
-  @property({ attribute: true, reflect: true }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 

package/src/nile-table/nile-table.ts

@@ -74,7 +74,7 @@ export class NileTable extends NileElement {
 	handleBodyCssUpdate(){
     if (this.rows.length<2) return;
     const tableBodies = this.rows;
-		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');
+		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
 		if(firstEl) {
 			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
 			firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
@@ -84,7 +84,7 @@ export class NileTable extends NileElement {
 		}
 		tableBodies.forEach((tb,i)=>{
 			if(i>0 && i<tableBodies.length-1){
-				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');
+				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')
 				if(el) {
 					el.style.borderTopRightRadius="0px";
 					el.style.borderTopLeftRadius = "0px";

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

@@ -11,93 +11,60 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
 
-
-:host {
-      position: relative;
-      display: inline-block;
-    }
-    .tooltip {
-      position: fixed;
-      z-index: 1000;
-      background-color: var(--nile-tooltip-color-background, #333);
-      color: var(--nile-colors-white-base, #fff);
-      padding: 6px 10px;
-      border-radius: 4px;
-      font-size: var(--nile-tooltip-font-size-sm, 14px);
-      line-height: var(--nile-tooltip-line-height-sm, 1.5);
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      pointer-events: none;
-      white-space: normal;
-      visibility: hidden;
-      overflow: visible;
- 
-    }
-    :host([open]) .tooltip {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .tooltip-content {
-      overflow: auto;
-      max-width: 250px;
-      max-height: 116px;
-    }
-    .tooltip-caret {
-      position: absolute;
-      width: calc(2 * var(--caret-size, 6px));
-      height: calc(2 * var(--caret-size, 6px));
-      background-color: inherit;
-      transform: rotate(45deg);
-      z-index: -1;
-    }
-    .trigger-container {
-      display: inline-block;
-    }
- 
- 
-:host([open]) .tooltip {
-  visibility: visible;
-  pointer-events: auto;
-  animation: fadeIn 150ms forwards;
-}
-
- 
-.tooltip.hide {
-  animation: fadeOut 100ms forwards;
-}
-
- 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
+    display: contents;
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
- 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  .tooltip {
+    --arrow-size: 6px;
+    --arrow-color: var(--nile-tooltip-color-background);
   }
-  to {
-    opacity: 0;
-    transform: translateY(5px);
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
   }
-}
 
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
 
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
 
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
 
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
 
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: 4px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
+    color: var(--nile-colors-white-base);
+    pointer-events: none;
+    word-break: break-word;
+  }
 
- 
+  .tooltip__body--large {
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
+  }
 `;
 
-export default [styles];
+export default [styles];