@aquera/nile-elements 2.0.17 → 2.0.19

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -16,6 +16,7 @@
     "./nile-otp-input": "./dist/src/nile-otp-input/index.js",
     "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
     "./nile-menu": "./dist/src/nile-menu/index.js",
+    "./nile-minimap": "./dist/src/nile-minimap/index.js",
     "./nile-badge": "./dist/src/nile-badge/index.js",
     "./nile-status-light": "./dist/src/nile-status-light/index.js",
     "./nile-drawer": "./dist/src/nile-drawer/index.js",

package/src/index.ts

@@ -4,6 +4,7 @@ export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
 export { NileOtpInput } from './nile-otp-input';
 export { NileMenu } from './nile-menu';
+export { NileMinimap } from './nile-minimap';
 export { NileBadge } from './nile-badge';
 export { NileStatusLight } from './nile-status-light';
 export { NileDrawer } from './nile-drawer';

package/src/nile-breadcrumb/nile-breadcrumb.test.ts

@@ -104,4 +104,61 @@ describe('NileBreadcrumb', () => {
   it('98. slot is default (no name)', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); const slot = el.shadowRoot!.querySelector('slot'); expect(slot!.hasAttribute('name')).to.be.false; });
   it('99. no nile-divider', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.shadowRoot!.querySelector('nile-divider')).to.be.null; });
   it('100. full integration', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb class="b" id="b1" role="navigation" aria-label="Breadcrumb"><nile-breadcrumb-item>Home</nile-breadcrumb-item><nile-breadcrumb-item>Settings</nile-breadcrumb-item><nile-breadcrumb-item>Profile</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.id).to.equal('b1'); expect(el.getAttribute('role')).to.equal('navigation'); expect(el.querySelectorAll('nile-breadcrumb-item').length).to.equal(3); expect(el.textContent).to.contain('Home'); expect(el.textContent).to.contain('Profile'); });
+
+  describe('variant', () => {
+    const tpl = (variant?: string) => variant
+      ? html`<nile-breadcrumb variant=${variant}><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`
+      : html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`;
+    const items = (el: NileBreadcrumb) => [...el.querySelectorAll('nile-breadcrumb-item')];
+
+    it('defaults to "default" and reflects', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      expect(el.variant).to.equal('default');
+      expect(el.getAttribute('variant')).to.equal('default');
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('propagates "outlined" to every item', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      await Promise.all(items(el).map(i => i.updateComplete));
+      items(el).forEach(i => {
+        expect(i.getAttribute('variant')).to.equal('outlined');
+        expect(i.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item--outlined')).to.be.true;
+      });
+    });
+
+    it('keeps the existing text-colour classes when outlined', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const [a, b] = items(el);
+      await a.updateComplete; await b.updateComplete;
+      expect(a.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__slot-text')).to.be.true;
+      expect(b.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__last-slot-text')).to.be.true;
+    });
+
+    it('updates items when variant changes at runtime', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      el.variant = 'outlined';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('outlined'));
+      el.variant = 'default';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('applies the variant to items added later', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const added = document.createElement('nile-breadcrumb-item');
+      added.textContent = 'C';
+      el.appendChild(added);
+      await new Promise(r => setTimeout(r));
+      expect(added.variant).to.equal('outlined');
+    });
+
+    it('no chip class in the default variant', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      const [a] = items(el);
+      await a.updateComplete;
+      expect(a.shadowRoot!.querySelector('.nile-breadcrumb-item--outlined')).to.be.null;
+    });
+  });
 });

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -31,6 +31,12 @@ export class NileBreadcrumb extends NileElement {
     return [styles];
   }
 
+  /**
+   * Visual style of the items. `outlined` renders each item inside an outlined chip;
+   * text colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   /* #endregion */
 
   /* #region Methods */
@@ -46,7 +52,20 @@ export class NileBreadcrumb extends NileElement {
     });
   }
 
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('variant')) {
+      this.syncItemVariant();
+    }
+  }
+
+  private syncItemVariant() {
+    this.querySelectorAll('nile-breadcrumb-item').forEach(item => {
+      item.variant = this.variant;
+    });
+  }
+
   private changeLastItem() {
+    this.syncItemVariant();
     const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
     const itemslength = items.length;
     for (let i = 0; i < itemslength - 1; i++) {

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

@@ -46,6 +46,18 @@ export const styles = css`
   .nile-breadcrumb-item__last-slot-text {
     color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
   }
+
+  .nile-breadcrumb-item--outlined {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__slot-text:hover,
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__last-slot-text {
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
 `;
 
 export default [styles];

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

@@ -44,6 +44,12 @@ export class NileBreadcrumbItem extends NileElement {
 
   @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
 
+  /**
+   * Visual style of the item. `outlined` wraps the text in an outlined chip.
+   * Set automatically from the parent `nile-breadcrumb`'s `variant`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   private handleClick() {
     if (this.isLast) {
       return;
@@ -57,6 +63,7 @@ export class NileBreadcrumbItem extends NileElement {
         class=${classMap({
           'nile-breadcrumb-item__slot-text': !this.isLast,
           'nile-breadcrumb-item__last-slot-text': this.isLast,
+          'nile-breadcrumb-item--outlined': this.variant === 'outlined',
         })}
         @click=${this.handleClick}
         >

package/src/nile-minimap/index.ts

@@ -0,0 +1 @@
+export { NileMinimap } from './nile-minimap';

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

@@ -0,0 +1,164 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * 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 { css } from 'lit';
+
+/**
+ * nile-minimap CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--nile-minimap-width, 112px);
+    height: var(--nile-minimap-height, 40px);
+    vertical-align: middle;
+  }
+
+  /* Vertical mode swaps the two size tokens. */
+  :host([data-vertical]) {
+    width: var(--nile-minimap-height, 40px);
+    height: var(--nile-minimap-width, 112px);
+  }
+
+  /* hideWhenFits: internal state, never touches the consumer's own [hidden]. */
+  :host([data-fit]) {
+    display: none;
+  }
+
+  /* No container resolved from \`for\`: render nothing. */
+  :host([data-unresolved]) {
+    display: none;
+  }
+
+  .base {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: var(--ng-spacing-1-5);
+    background: var(--ng-colors-bg-primary);
+    border: var(--ng-border-width-1) solid var(--ng-colors-border-secondary);
+    border-radius: var(--ng-radius-lg);
+    box-shadow: var(--ng-shadow-md);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: opacity 0.15s ease;
+  }
+
+  /* autoHide: idle between scrolls. Keeps its space; ignores the pointer. */
+  :host([data-idle]) .base {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    border-radius: var(--ng-radius-xs);
+  }
+
+  .segment {
+    position: absolute;
+    background: var(--ng-colors-bg-quaternary);
+    border-radius: var(--ng-radius-xs);
+  }
+
+  :host(:not([data-vertical])) .segment {
+    left: var(--s);
+    width: var(--l);
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([data-vertical]) .segment {
+    top: var(--s);
+    height: var(--l);
+    left: 0;
+    right: 0;
+  }
+
+  /* Track mode: hide segments, draw the rail. */
+  .base--track .segments {
+    display: none;
+  }
+
+  .base--track .track {
+    background: var(--ng-colors-bg-quaternary);
+  }
+
+  /* RTL: mirror the horizontal track so segments and the viewport flip. */
+  .base--rtl .track {
+    transform: scaleX(-1);
+  }
+
+  .viewport {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid var(--ng-colors-border-brand);
+    border-radius: var(--ng-radius-sm);
+    cursor: grab;
+    transition: background-color 0.12s;
+    background: transparent;
+  }
+
+  :host(:not([data-vertical])) .viewport {
+    left: calc(var(--vs, 0px) - 3px);
+    width: calc(var(--vl, 0px) + 6px);
+    top: -3px;
+    bottom: -3px;
+  }
+
+  :host([data-vertical]) .viewport {
+    top: calc(var(--vs, 0px) - 3px);
+    height: calc(var(--vl, 0px) + 6px);
+    left: -3px;
+    right: -3px;
+  }
+
+  .viewport:hover {
+    background: color-mix(
+      in srgb,
+      var(--ng-colors-bg-brand-solid) 8%,
+      transparent
+    );
+  }
+
+  .base--drag .viewport {
+    background: color-mix(
+      in srgb,
+      var(--ng-colors-bg-brand-solid) 14%,
+      transparent
+    );
+    cursor: grabbing;
+  }
+
+  .viewport:focus {
+    outline: none;
+  }
+
+  .viewport:focus-visible {
+    box-shadow: var(--ng-focus-ring);
+  }
+
+  .base--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .base,
+    .viewport {
+      transition: none;
+    }
+  }
+`;
+
+export default [styles];