@aquera/nile-elements 0.1.36-beta-1.1 → 0.1.36-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.36-beta-1.1",
+  "version": "0.1.36-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -9,7 +9,7 @@ describe('<nile-filter-chip>', () => {
 
   it('registers and unregisters itself in activeChips', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip label="L" value="T"></nile-filter-chip>
     `);
     expect((NileFilterChip as any).activeChips).to.include(el);
     el.remove();
@@ -17,9 +17,9 @@ describe('<nile-filter-chip>', () => {
     expect((NileFilterChip as any).activeChips).to.not.include(el);
   });
 
-  it('renders fallback label and text', async () => {
+  it('renders fallback label and value', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="MyLabel" text="MyText"></nile-filter-chip>
+      <nile-filter-chip label="MyLabel" value="MyText"></nile-filter-chip>
     `);
     const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;
     const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;
@@ -42,7 +42,7 @@ describe('<nile-filter-chip>', () => {
 
   it('renders an icon when the `icon` property is set', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip icon="★" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip icon="★" label="L" value="T"></nile-filter-chip>
     `);
     const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;
     expect(iconSpan).to.exist;
@@ -51,14 +51,14 @@ describe('<nile-filter-chip>', () => {
 
   it('does not render a badge when viewMoreCount is zero', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="0" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="0" label="L" value="T"></nile-filter-chip>
     `);
     expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
   });
 
   it('renders a +badge when viewMoreCount > 0', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip viewMoreCount="5" label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip viewMoreCount="5" label="L" value="T"></nile-filter-chip>
     `);
     const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
     expect(badge).to.exist;
@@ -69,22 +69,22 @@ describe('<nile-filter-chip>', () => {
 
   it('dispatches `nile-click` on chip click', async () => {
     const el = await fixture<NileFilterChip>(html`
-      <nile-filter-chip label="L" text="T"></nile-filter-chip>
+      <nile-filter-chip label="L" value="T"></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({ value: '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 viewMoreCount="2" text="TT"></nile-filter-chip>
+      <nile-filter-chip closable viewMoreCount="2" value="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({ value: 'TT', viewMoreCount: 2 });
     expect(document.body.contains(el)).to.be.false;
   });
 

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

@@ -11,14 +11,13 @@ import { styles } from './nile-filter-chip.css';
 @customElement('nile-filter-chip')
 export class NileFilterChip extends NileElement {
   @property({ type: String }) label = '';
-  @property({ type: String }) text = '';
+  @property({ type: String }) value = '';
   @property({ type: Number }) viewMoreCount: number = 0;
   @property({ type: Boolean }) editable = false;
   @property({ type: Boolean }) closable = false;
   @property({ type: String }) icon = '';
   @property({ type: String }) removeIcon = '';
   @property({ type: Boolean, reflect: true }) active = false;
-  @property({ type: Number }) maxWidth: number = 140;
 
 
   private static activeChips: NileFilterChip[] = [];
@@ -50,14 +49,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: { value: this.value, viewMoreCount: this.viewMoreCount } })
     );
     this.remove();
   }
 
   private handleClick() {
     this.dispatchEvent(
-      new CustomEvent('nile-click', { detail: { text: this.text, viewMoreCount: this.viewMoreCount } })
+      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
     );
   }
 
@@ -65,7 +64,7 @@ export class NileFilterChip extends NileElement {
     return html`
     <span class="label-wrapper">
       <slot name="label">
-        <span class="label">${this.label}:</span>
+        <span class="label" part="label">${this.label}:</span>
       </slot>
     </span>
 
@@ -76,7 +75,7 @@ export class NileFilterChip extends NileElement {
     return html`
     <span class="value-wrapper">
       <slot name="value">
-        <span class="value" style="max-width: ${this.maxWidth}px">${this.text}</span>
+        <span class="value" part="value">${this.value}</span>
       </slot>
     </span>
 

package/vscode-html-custom-data.json

@@ -1407,15 +1407,15 @@
     },
     {
       "name": "nile-filter-chip",
-      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `maxWidth` {`number`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `maxWidth` {`number`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
           "description": "`label` {`string`} - \n\nProperty: label\n\nDefault: "
         },
         {
-          "name": "text",
-          "description": "`text` {`string`} - \n\nProperty: text\n\nDefault: "
+          "name": "value",
+          "description": "`value` {`string`} - \n\nProperty: value\n\nDefault: "
         },
         {
           "name": "viewMoreCount",
@@ -1444,17 +1444,13 @@
           "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
           "valueSet": "v"
         },
-        {
-          "name": "maxWidth",
-          "description": "`maxWidth` {`number`} - \n\nProperty: maxWidth\n\nDefault: 140"
-        },
         {
           "name": "onnile-close",
-          "description": "`nile-close` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
+          "description": "`nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - "
         },
         {
           "name": "onnile-click",
-          "description": "`nile-click` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
+          "description": "`nile-click` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - "
         }
       ]
     },