@aquera/nile-elements 0.1.35-beta-1.8 → 0.1.35-beta-1.11

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.8",
+  "version": "0.1.35-beta-1.11",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-badge/nile-badge.ts

@@ -101,7 +101,7 @@ export class NileBadge extends NileElement {
             this.pilltype == 'pill-color',
         })}
       >
-        <slot part="content" class="badge__content"></slot>
+        <slot name="badge" part="badge" class="badge__content"></slot>
       </span>
     `;
   }

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

@@ -23,7 +23,8 @@ export const styles = css`
   .chip {
     display: inline-flex;
     align-items: center;
-    padding: 4px 8px;
+    height: 30px;
+    padding: 8px;
     border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
     border-radius: 4px;
     font-size: 14px;
@@ -31,18 +32,21 @@ export const styles = css`
     color: var(--nile-filter-chip-text-default);
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     cursor: pointer;
-    gap: 6px;
-    margin-right: 6px;
+    box-sizing: border-box;
   }
 
   .chip:hover {
     background-color: var(--nile-filter-chip-hover-background);
   }
+ .chip:active {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+:host([active]) .chip {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
 
-  .chip:active {
-    background-color: var(--nile-filter-chip-active-background);
-    border-color: var(--nile-filter-chip-active-border-color-stroke);
-  }
 
   .icon {
     color: var(--nile-filter-chip-icon-color-default);
@@ -86,20 +90,22 @@ export const styles = css`
   }
 
 
-  .value {
-    color: var(--nile-filter-chip-values-color-default);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 140px;
-  }
+ .value {
+  color: var(--nile-filter-chip-values-color-default);
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 140px;
+  vertical-align: bottom;
+}
+
 
   .close-icon {
     color: var(--nile-filter-chip-close-icon-color-default);
     cursor: pointer;
     display: flex;
     align-items: center;
-    padding: 2px;
     border-radius: 50%;
     transition: background-color 0.2s;
   }
@@ -108,6 +114,20 @@ export const styles = css`
     background-color: var(--nile-filter-chip-close-icon-hover-background);
     color: var(--nile-filter-chip-close-icon-hover-color);
   }
+
+.label-wrapper {
+  margin-left:6px;
+  margin-right: 4px;
+}
+
+.value-wrapper {
+  margin-right: 4px; 
+}
+
+.badge-wrapper {
+  margin-right: 12px;  
+}
+
 `;
 
 export default [styles];

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,11 +12,13 @@ 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 = '';
   @property({ type: String }) removeIcon = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
 
   private static activeChips: NileFilterChip[] = [];
 
@@ -47,41 +49,50 @@ 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 } })
     );
   }
 
   private getLabelSlot(): TemplateResult {
     return html`
+    <span class="label-wrapper">
       <slot name="label">
         <span class="label">${this.label}:</span>
       </slot>
+    </span>
+
     `;
   }
 
   private getValueSlot(): TemplateResult {
     return html`
+    <span class="value-wrapper">
       <slot name="value">
         <span class="value">${this.text}</span>
       </slot>
+    </span>
+
     `;
   }
 
-  private getExtraCountSlot(): TemplateResult {
+  private getviewMoreCountSlot(): TemplateResult {
     return html`
       <slot name="suffix">
-        ${this.extraCount
+        ${this.viewMoreCount
           ? html`
+          <span class="badge-wrapper">
               <nile-badge variant="primary" pilltype="pill-color">
-                +${this.extraCount}
+                +${this.viewMoreCount}
               </nile-badge>
+          </span>
+
             `
           : html``}
       </slot>
@@ -109,7 +120,7 @@ export class NileFilterChip extends NileElement {
         ${this.getLabelSlot()}
         <slot name="content"></slot>
         ${this.getValueSlot()}
-        ${this.getExtraCountSlot()}
+        ${this.getviewMoreCountSlot()}
         ${this.getCloseIconSlot()}
       </div>
     `;

package/vscode-html-custom-data.json

@@ -1407,7 +1407,7 @@
     },
     {
       "name": "nile-filter-chip",
-      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \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<{ 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\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  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -1418,8 +1418,8 @@
           "description": "`text` {`string`} - \n\nProperty: text\n\nDefault: "
         },
         {
-          "name": "extraCount",
-          "description": "`extraCount` {`number`} - \n\nProperty: extraCount\n\nDefault: 0"
+          "name": "viewMoreCount",
+          "description": "`viewMoreCount` {`number`} - \n\nProperty: viewMoreCount\n\nDefault: 0"
         },
         {
           "name": "editable",
@@ -1439,13 +1439,18 @@
           "name": "removeIcon",
           "description": "`removeIcon` {`string`} - \n\nProperty: removeIcon\n\nDefault: "
         },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-close",
-          "description": "`nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+          "description": "`nile-close` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
         },
         {
           "name": "onnile-click",
-          "description": "`nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+          "description": "`nile-click` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
         }
       ]
     },