@kubex/zinc 1.1.121 → 1.1.123

package/src/components/datepicker/datepicker.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnDatepicker from './datepicker.component';
 
 describe('<zn-datepicker>', () => {
@@ -9,6 +9,33 @@ describe('<zn-datepicker>', () => {
     expect(el).to.exist;
   });
 
+  describe('inline', () => {
+    it('renders the calendar in place and hides the text input', async () => {
+      const el = await fixture<ZnDatepicker>(html`<zn-datepicker inline></zn-datepicker>`);
+      await el.updateComplete;
+
+      const calendar = el.shadowRoot!.querySelector('.air-datepicker');
+
+      expect(calendar, 'calendar should live in the datepicker shadow root').to.exist;
+      expect(calendar!.classList.contains('-inline-')).to.be.true;
+      expect(getComputedStyle(el.input).display).to.equal('none');
+    });
+
+    it('emits zn-change when a day is picked', async () => {
+      const el = await fixture<ZnDatepicker>(html`<zn-datepicker inline></zn-datepicker>`);
+      await el.updateComplete;
+
+      let emitted = 0;
+      el.addEventListener('zn-change', () => emitted++);
+
+      const day = el.shadowRoot!.querySelector<HTMLElement>('.air-datepicker-cell.-day-:not(.-other-month-)')!;
+      day.click();
+      await waitUntil(() => emitted > 0);
+
+      expect(el.value).to.not.equal('');
+    });
+  });
+
   describe('Escape key', () => {
     it('blurs the inner input when focused and the calendar is closed', async () => {
       const el = await fixture<ZnDatepicker>(html`<zn-datepicker></zn-datepicker>`);

package/src/components/input/input.component.ts

@@ -68,6 +68,7 @@ import styles from './input.scss';
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
  *
+ * @cssproperty --zn-input-box-shadow - Shadow cast by the field; set to `none` inside a panel that draws its own edge.
  * @cssproperty --zn-range-track-height - The height of a range input's track.
  * @cssproperty --zn-range-track-color - The color of a range input's track.
  * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.

package/src/components/input/input.scss

@@ -11,7 +11,7 @@
   justify-content: start;
   position: relative;
   width: 100%;
-  box-shadow: var(--zn-shadow-x-small);
+  box-shadow: var(--zn-input-box-shadow, var(--zn-shadow-x-small));
   font-family: var(--zn-input-font-family), sans-serif;
   font-weight: var(--zn-input-font-weight);
   letter-spacing: var(--zn-input-letter-spacing);

package/src/components/menu/menu.component.ts

@@ -46,6 +46,8 @@ interface NavItem {
  * @cssproperty --example - An example CSS custom property.
  * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally.
  *  Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.
+ * @cssproperty --zn-menu-min-width - Overrides the menu's resting width. Defaults to
+ *  `--zn-size-spanel`, or 245px for `variant="shell"`.
  */
 export default class ZnMenu extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);

package/src/components/menu/menu.scss

@@ -7,7 +7,7 @@
   border: 1px solid rgb(var(--zn-border-color)) !important;
   border-radius: var(--zn-border-radius);
   width: fit-content;
-  min-width: var(--zn-size-spanel);
+  min-width: var(--zn-menu-min-width, var(--zn-size-spanel));
   // Unconstrained by default — a consumer that needs the menu to scroll inside a bounded
   // popup (rather than growing to fit all its items) sets this custom property.
   max-height: var(--zn-menu-max-height, none);
@@ -22,6 +22,26 @@
   background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
 }
 
+// A capped menu has to look scrollable, so the bar is always drawn rather than
+// left to the platform's overlay scrollbar
+.menu {
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 5px;
+    background: rgba(var(--inverse-base), 0.3);
+    background-clip: content-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--inverse-base), 0.5);
+    background-clip: content-box;
+  }
+}
+
 // Dropdown vs shell hover/row styling lives on zn-menu-item, keyed by the
 // `variant` the menu sets on its items (see menu.component.ts).
 
@@ -34,8 +54,9 @@
   padding: var(--zn-spacing-2x-small);
   border: 1px solid rgb(var(--zn-border-color));
   border-radius: var(--zn-border-radius);
-  min-width: 245px;
+  min-width: var(--zn-menu-min-width, 245px);
   max-width: min(320px, calc(100vw - 16px));
+  max-height: var(--zn-menu-max-height, none);
   overflow-x: hidden;
   overflow-y: auto;
   box-shadow: none;

package/src/components/menu-item/menu-item.component.ts

@@ -82,6 +82,9 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({type: Boolean, reflect: true}) confirm = false;
 
+  /** Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting. */
+  @property({type: Boolean, reflect: true, attribute: 'keep-open'}) keepOpen = false;
+
   /** Removes all padding from the menu item. */
   @property({type: Boolean, reflect: true}) flush = false;
 
@@ -141,7 +144,10 @@ export default class ZnMenuItem extends ZincElement {
       const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
       if (this.confirm) return;
 
-      (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
+      const dropdown = closestMenu?.closest('zn-dropdown') as ZnDropdown | null;
+      if (!dropdown?.stayOpenOnSelect && !this.keepOpen) {
+        dropdown?.hide();
+      }
       this.emit('zn-menu-select', {detail: {value: this.value, element: this}});
     }
   };

package/src/components/menu-item/menu-item.scss

@@ -154,7 +154,7 @@
   color: var(--color);
 }
 
-.menu-item:hover .menu-item__label {
+.menu-item:hover:not(.menu-item--disabled) .menu-item__label {
   color: var(--hover-color);
 }
 
@@ -194,9 +194,9 @@
   bottom: 0;
   left: 0;
   clip-path: polygon(
-    var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-    var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-    var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
   );
 }
 

package/src/components/menu-item/menu-item.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnDropdown from '../dropdown/dropdown.component';
 
 describe('<zn-menu-item>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,41 @@ describe('<zn-menu-item>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('keep-open', () => {
+    async function dropdownWithItems() {
+      const el = await fixture<ZnDropdown>(html`
+        <zn-dropdown>
+          <zn-button slot="trigger">Open</zn-button>
+          <zn-menu>
+            <zn-menu-item value="keeper" keep-open>Keeper</zn-menu-item>
+            <zn-menu-item value="closer">Closer</zn-menu-item>
+          </zn-menu>
+        </zn-dropdown>`);
+      await el.updateComplete;
+      await el.show();
+      return el;
+    }
+
+    const clickOn = (el: Element | null) =>
+      el?.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+    it('leaves the dropdown open when the item is selected', async () => {
+      const dropdown = await dropdownWithItems();
+
+      clickOn(dropdown.querySelector('zn-menu-item[value="keeper"]'));
+      await dropdown.updateComplete;
+
+      expect(dropdown.open).to.be.true;
+    });
+
+    it('does not affect the items beside it', async () => {
+      const dropdown = await dropdownWithItems();
+
+      clickOn(dropdown.querySelector('zn-menu-item[value="closer"]'));
+
+      await waitUntil(() => !dropdown.open);
+      expect(dropdown.open).to.be.false;
+    });
+  });
 });

package/src/components/panel/panel.component.ts

@@ -17,8 +17,13 @@ import styles from './panel.scss';
  * @slot footer - Content displayed in the panel footer.
  *
  * @csspart base - The component's base wrapper.
+ * @csspart header - The header region, when a caption or actions are given.
+ * @csspart header-content - The padded row inside the header, forwarded from zn-header.
+ * @csspart footer - The footer region, when the footer slot is filled.
  *
  * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
+ * @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
+ * @cssproperty --zn-panel-footer-padding - Padding around the footer row.
  */
 export default class ZnPanel extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -100,10 +105,12 @@ export default class ZnPanel extends ZincElement {
 
         <div class="panel__inner">
           ${hasHeader ? html`
-            <zn-header class="${classMap({
-              "panel__header": true,
-              "panel__header--underline": underlineHeader,
-            })}"
+            <zn-header part="header"
+                       exportparts="content:header-content"
+                       class="${classMap({
+                         "panel__header": true,
+                         "panel__header--underline": underlineHeader,
+                       })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
                        transparent>
@@ -118,7 +125,7 @@ export default class ZnPanel extends ZincElement {
           </div>
 
           ${hasFooterSlot ? html`
-            <slot name="footer" class="panel__footer"></slot>` : null}
+            <slot name="footer" part="footer" class="panel__footer"></slot>` : null}
         </div>
       </div>`;
   }

package/src/components/panel/panel.scss

@@ -43,7 +43,7 @@
 
 
   &__header {
-    padding: var(--zn-base-gap);
+    padding: var(--zn-panel-header-padding, var(--zn-base-gap));
 
     // background-color: rgba(var(--zn-panel-highlight), 0.6);
     // border-bottom: 1px solid rgb(var(--zn-border-color));
@@ -81,8 +81,8 @@
   &__footer {
     font-size: var(--zn-font-size-small);
     display: block;
-    padding: var(--zn-spacing-small) var(--zn-base-gap);
-    background: rgb(var(--zn-panel-secondary));
+    padding: var(--zn-panel-footer-padding, var(--zn-spacing-small) var(--zn-base-gap));
+    background: rgb(var(--zn-body));
     border-bottom-left-radius: var(--zn-border-radius);
     border-bottom-right-radius: var(--zn-border-radius);
   }

package/src/components/query-builder/query-builder.component.ts

@@ -80,7 +80,7 @@ export enum QueryBuilderOperators {
   Lte = 'lte'
 }
 
-const operatorText: { [key in QueryBuilderOperators]: string } = {
+export const operatorText: { [key in QueryBuilderOperators]: string } = {
   [QueryBuilderOperators.Eq]: 'Equals',
   [QueryBuilderOperators.Neq]: 'Not Equals',
   [QueryBuilderOperators.Eqi]: 'Equals (Insensitive)',

package/src/components/tooltip/tooltip.component.ts

@@ -83,7 +83,7 @@ export default class ZnTooltip extends ZincElement {
   }
 
   private handleBlur = () => {
-    if (this.hasTrigger('focus') && !topLayerManager.isDropdownOpen()) {
+    if (this.hasTrigger('focus')) {
       this.hide();
     }
   };
@@ -118,7 +118,7 @@ export default class ZnTooltip extends ZincElement {
   }
 
   private handleMouseOut() {
-    if (this.hasTrigger('hover') && !topLayerManager.isDropdownOpen()) {
+    if (this.hasTrigger('hover')) {
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), 0);
     }

package/src/components/tooltip/tooltip.test.ts

@@ -1,10 +1,78 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnDropdown from '../dropdown/dropdown.component';
+import type ZnTooltip from './tooltip.component';
+
+const mouse = (el: Element, type: string) =>
+  el.dispatchEvent(new MouseEvent(type, {bubbles: true, composed: true, cancelable: true}));
 
 describe('<zn-tooltip>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-tooltip></zn-tooltip> `);
+    const el = await fixture(html`
+      <zn-tooltip></zn-tooltip>`);
 
     expect(el).to.exist;
   });
+
+  it('hides on mouseout', async () => {
+    const el = await fixture<ZnTooltip>(html`
+      <zn-tooltip content="Columns">
+        <button>Trigger</button>
+      </zn-tooltip>`);
+
+    mouse(el, 'mouseover');
+    await waitUntil(() => el.open);
+
+    mouse(el, 'mouseout');
+    await waitUntil(() => !el.open);
+
+    expect(el.open).to.be.false;
+  });
+
+  // A tooltip whose trigger opens a dropdown loses its chance to hide: the pointer
+  // leaves the trigger for the menu while the dropdown is registered as open.
+  it('hides on mouseout while a dropdown is open', async () => {
+    const dropdown = await fixture<ZnDropdown>(html`
+      <zn-dropdown>
+        <zn-button slot="trigger" tooltip="Columns"></zn-button>
+        <zn-menu>
+          <zn-menu-item value="a">Alpha</zn-menu-item>
+        </zn-menu>
+      </zn-dropdown>`);
+
+    const trigger = dropdown.querySelector('zn-button')!;
+    await trigger.updateComplete;
+    const tooltip = trigger.shadowRoot!.querySelector('zn-tooltip')!;
+
+    mouse(tooltip, 'mouseover');
+    await waitUntil(() => tooltip.open);
+
+    await dropdown.show();
+    mouse(tooltip, 'mouseout');
+    await dropdown.hide();
+
+    await waitUntil(() => !tooltip.open, 'tooltip stayed open after the dropdown closed');
+    expect(tooltip.open).to.be.false;
+  });
+
+  it('does not show while a dropdown is open', async () => {
+    const dropdown = await fixture<ZnDropdown>(html`
+      <zn-dropdown>
+        <zn-button slot="trigger" tooltip="Columns"></zn-button>
+        <zn-menu>
+          <zn-menu-item value="a">Alpha</zn-menu-item>
+        </zn-menu>
+      </zn-dropdown>`);
+
+    const trigger = dropdown.querySelector('zn-button')!;
+    await trigger.updateComplete;
+    const tooltip = trigger.shadowRoot!.querySelector('zn-tooltip')!;
+
+    await dropdown.show();
+    mouse(tooltip, 'mouseover');
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    expect(tooltip.open).to.be.false;
+    await dropdown.hide();
+  });
 });