@kubex/zinc 1.0.18 → 1.0.20

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

@@ -0,0 +1,73 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from '../../internal/slot';
+import {property, query} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './input-group.scss';
+
+/**
+ * @summary A wrapper component that groups inputs and selects visually.
+ * @documentation https://zinc.style/components/input-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The default slot for inputs and selects.
+ * @slot label - The input group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart form-control - The form control wrapper.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input group container.
+ */
+export default class ZnInputGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, 'label');
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  /** The input group's label. If you need to display HTML, use the `label` slot. */
+  @property() label = '';
+
+  private handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
+
+    // Filter for inputs and selects
+    const supportedTags = ['ZN-INPUT', 'ZN-SELECT', 'ZN-BUTTON'];
+    const controls = slottedElements.filter(el => supportedTags.includes(el.tagName));
+
+    controls.forEach(el => {
+      const index = controls.indexOf(el);
+
+      el.toggleAttribute('data-zn-input-group__input', true);
+      el.toggleAttribute('data-zn-input-group__input--first', index === 0);
+      el.toggleAttribute('data-zn-input-group__input--inner', index > 0 && index < controls.length - 1);
+      el.toggleAttribute('data-zn-input-group__input--last', index === controls.length - 1);
+    });
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabel = this.label ? true : hasLabelSlot;
+
+    return html`
+      <div part="form-control"
+           class="${classMap({
+             'form-control': true,
+             'form-control--has-label': hasLabel,
+           })}">
+
+        <label part="form-control-label"
+               id="label"
+               class="form-control__label"
+               aria-hidden=${hasLabel ? 'false' : 'true'}>
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="base form-control-input" class="input-group" role="group" aria-labelledby="label">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>`;
+  }
+}

package/src/components/input-group/input-group.scss

@@ -0,0 +1,65 @@
+@use "../../wc";
+@use "../../form-control";
+
+:host {
+  display: block;
+}
+
+.input-group {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+
+/* Common styles for slotted inputs */
+::slotted([data-zn-input-group__input]) {
+  /* Overlap borders */
+  margin-inline-end: -1px;
+
+  /* Ensure focus ring is above */
+  position: relative;
+  z-index: 1;
+}
+
+::slotted([data-zn-input-group__input]:focus-within) {
+  z-index: 2;
+}
+
+::slotted([data-zn-input-group__input--first]) {
+  --zn-input-border-radius-x-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-small: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-medium: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+  --zn-input-border-radius-large: var(--zn-border-radius-medium) 0 0 var(--zn-border-radius-medium);
+}
+
+::slotted([data-zn-input-group__input--inner]) {
+  --zn-input-border-radius-x-small: 0;
+  --zn-input-border-radius-small: 0;
+  --zn-input-border-radius-medium: 0;
+  --zn-input-border-radius-large: 0;
+}
+
+::slotted([data-zn-input-group__input--last]) {
+  --zn-input-border-radius-x-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-small: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-medium: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+  --zn-input-border-radius-large: 0 var(--zn-border-radius-medium) var(--zn-border-radius-medium) 0;
+
+  margin-inline-end: 0;
+}
+
+/* Button overrides */
+::slotted(zn-button[data-zn-input-group__input])::part(base) {
+  border-radius: 0;
+}
+
+::slotted(zn-button[data-zn-input-group__input--first])::part(base) {
+  border-start-start-radius: var(--zn-border-radius-medium);
+  border-end-start-radius: var(--zn-border-radius-medium);
+}
+
+::slotted(zn-button[data-zn-input-group__input--last])::part(base) {
+  border-start-end-radius: var(--zn-border-radius-medium);
+  border-end-end-radius: var(--zn-border-radius-medium);
+}

package/src/components/input-group/input-group.test.ts

@@ -0,0 +1,98 @@
+import '../../components/input/index';
+import '../../components/select/index';
+import '../../components/button/index';
+import './index';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnInputGroup from './input-group.component';
+
+// We need to ensure components are defined for the test
+customElements.define('zn-input-group-test-input', class extends HTMLElement {
+});
+
+describe('<zn-input-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-input-group></zn-input-group> `);
+    expect(el).to.exist;
+  });
+
+  it('should apply data attributes to slotted inputs', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-input></zn-input>
+        <zn-input></zn-input>
+      </zn-input-group>
+    `);
+
+    await el.updateComplete;
+    await new Promise(r => setTimeout(r, 100));
+
+    const inputs = el.querySelectorAll('zn-input');
+    expect(inputs[0]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[0]).to.have.attribute('data-zn-input-group__input--first');
+
+    expect(inputs[1]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[1]).to.have.attribute('data-zn-input-group__input--inner');
+
+    expect(inputs[2]).to.have.attribute('data-zn-input-group__input');
+    expect(inputs[2]).to.have.attribute('data-zn-input-group__input--last');
+  });
+
+  it('should handle mixed inputs and selects', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-select></zn-select>
+      </zn-input-group>
+    `);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const controls = el.querySelectorAll('zn-input, zn-select');
+    expect(controls[0]).to.have.attribute('data-zn-input-group__input--first');
+    expect(controls[1]).to.have.attribute('data-zn-input-group__input--last');
+  });
+
+  it('should handle button at the end', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <zn-input></zn-input>
+        <zn-button>Submit</zn-button>
+      </zn-input-group>
+    `);
+
+    await new Promise(r => setTimeout(r, 100));
+
+    const input = el.querySelector('zn-input');
+    const button = el.querySelector('zn-button');
+
+    expect(input).to.have.attribute('data-zn-input-group__input--first');
+    expect(button).to.have.attribute('data-zn-input-group__input--last');
+    expect(button).to.have.attribute('data-zn-input-group__input');
+  });
+
+  it('should render a label when the label attribute is set', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group label="Test Label"></zn-input-group>
+    `);
+    await el.updateComplete;
+    const label = el.shadowRoot?.querySelector('.form-control__label');
+    expect(label).to.exist;
+    expect(label).to.contain.text('Test Label');
+  });
+
+  it('should render a label from the label slot', async () => {
+    const el = await fixture<ZnInputGroup>(html`
+      <zn-input-group>
+        <span slot="label">Slot Label</span>
+      </zn-input-group>
+    `);
+    await el.updateComplete;
+    const label = el.shadowRoot?.querySelector('.form-control__label');
+    expect(label).to.exist;
+    const slot = label?.querySelector('slot');
+    expect(slot).to.exist;
+    // Note: checking slot content in shadow DOM is tricky, but existence of label wrapper is enough to prove logic works
+  });
+});

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

@@ -51,6 +51,9 @@ export default class ZnItem extends ZincElement {
   // align items to the right
   @property({type: Boolean, attribute: 'align-end'}) alignEnd: boolean;
 
+  // align items in the center
+  @property({type: Boolean, attribute: 'align-center'}) alignCenter: boolean;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'listitem');
@@ -95,7 +98,8 @@ export default class ZnItem extends ZincElement {
           'item--large': this.size === 'large',
           'item--has-icon': hasIcon,
           'item--no-padding': this.noPadding,
-          'item--align-end': this.alignEnd
+          'item--align-end': this.alignEnd,
+          'item--align-center': this.alignCenter
         })}"
         part="base">
 

package/src/components/item/item.scss

@@ -41,6 +41,10 @@
     text-align: right;
   }
 
+  &--align-center {
+    align-items: center;
+  }
+
   &__header {
     display: flex;
     align-items: center;

package/src/components/navbar/navbar.component.ts

@@ -40,6 +40,7 @@ export default class ZnNavbar extends ZincElement {
   @property({type: Boolean}) stacked: boolean;
   @property({type: Array}) dropdown = [];
   @property({attribute: "no-pad", type: Boolean}) noPad: false
+  @property({attribute: 'manual-add-items', type: Boolean}) manualAddItems = false;
 
   private _preItems: NodeListOf<Element>;
   private _postItems: NodeListOf<Element>;
@@ -126,16 +127,21 @@ export default class ZnNavbar extends ZincElement {
     this._navItems?.classList.toggle('has-hidden', hasHidden && hideRemaining)
   }
 
-  public addItem(item: any) {
-    if (this._openedTabs.includes(item.getAttribute('tab-uri'))) {
+  public addItem(item: Element): void {
+    const tabUri = item.getAttribute('tab-uri');
+    if (typeof tabUri !== 'string' || this._openedTabs.includes(tabUri)) {
       return;
     }
-    this._openedTabs.push(item.getAttribute('tab-uri'));
+    this._openedTabs.push(tabUri);
     const ul = this.shadowRoot?.querySelector('ul');
     const dropdown = this.shadowRoot?.querySelector('[id="dropdown-item"]');
     // @ts-expect-error
     dropdown.querySelector('zn-dropdown').hide();
-    return dropdown ? ul?.insertBefore(item, dropdown) : ul?.appendChild(item);
+    if (dropdown) {
+      ul?.insertBefore(item, dropdown);
+    } else {
+      ul?.appendChild(item);
+    }
   }
 
   protected firstUpdated(_changedProperties: PropertyValues) {
@@ -166,6 +172,9 @@ export default class ZnNavbar extends ZincElement {
       const menu = this.shadowRoot?.querySelector('zn-menu');
       if (menu) {
         menu.addEventListener('zn-menu-select', (e: ZnMenuSelectEvent) => {
+          if (this.manualAddItems) {
+            return;
+          }
           const element = e.detail.element;
           if (element.hasAttribute('data-path')) {
             const li = document.createElement('li');
@@ -197,13 +206,19 @@ export default class ZnNavbar extends ZincElement {
     }
 
     return html`
-      <div class="navbar__container">
+      <div class="${classMap({
+        'navbar__container': true,
+        'navbar__container--stacked': this.stacked,
+        'navbar__container--icon-bar': this.iconBar
+      })}">
         <ul class="${classMap({
           'navbar': true,
           'navbar--slim': this.slim,
           'navbar--border': this.border,
           'navbar--flush': this.flush,
-          'navbar--no-pad': this.noPad
+          'navbar--no-pad': this.noPad,
+          'navbar--stacked': this.stacked,
+          'navbar--icon-bar': this.iconBar
         })}">
           ${this._preItems}
           ${this.navigation.map((item: any) => {

package/src/components/navbar/navbar.scss

@@ -146,6 +146,22 @@ ul.navbar {
 
 }
 
+.navbar__container--stacked {
+  display: inline;
+}
+
+ul.navbar.navbar--stacked.navbar--icon-bar {
+  flex-direction: column;
+  padding: 0;
+  gap: 0;
+
+  li {
+    border-radius: 0;
+    align-items: flex-start;
+    padding: 8px;
+  }
+}
+
 
 :host(:not([stacked]):not([icon-bar])) {
   ul.navbar {
@@ -236,7 +252,7 @@ ul.navbar {
         height: 2px;
       }
 
-      &:hover:before {
+      &:hover:before:not(#dropdown-item) {
         // TODO Hover Before colors
         left: -2px;
         right: -2px;

package/src/components/select/select.component.ts

@@ -98,7 +98,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   @state() currentOption: ZnOption;
   @state() selectedOptions: ZnOption[] = [];
   @state() private valueHasChanged: boolean = false;
-  @state() private hasCheckboxPrefix: boolean = false;
+  @state() private inputPrefix: boolean = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -271,13 +271,9 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
-  private updateHasCheckboxPrefix() {
-    try {
-      const assigned = this.prefixSlot?.assignedElements({flatten: true}) || [];
-      this.hasCheckboxPrefix = assigned.some(el => el.tagName === 'ZN-CHECKBOX');
-    } catch {
-      this.hasCheckboxPrefix = false;
-    }
+  private updateHasInputPrefix() {
+    const assigned = this.prefixSlot?.assignedElements({flatten: true}) || [];
+    this.inputPrefix = assigned.length > 0;
   }
 
   private addOpenListeners() {
@@ -772,7 +768,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       });
     }
 
-    this.updateHasCheckboxPrefix();
+    this.updateHasInputPrefix();
   }
 
   @watch('disabled', {waitUntilFirstUpdate: true})
@@ -971,7 +967,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               'select--small': this.size === 'small',
               'select--medium': this.size === 'medium',
               'select--large': this.size === 'large',
-              'select--has-checkbox-prefix': this.hasCheckboxPrefix
+              'select--has-input-prefix': this.inputPrefix
             })}
             placement=${this.placement}
             strategy=${this.hoist ? 'fixed' : 'absolute'}
@@ -989,7 +985,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
               <slot part="prefix"
                     name="prefix"
                     class="select__prefix"
-                    @slotchange=${() => this.updateHasCheckboxPrefix()}></slot>
+                    @slotchange=${() => this.updateHasInputPrefix()}></slot>
 
               <input
                 part="display-input"

package/src/components/select/select.scss

@@ -183,7 +183,7 @@
   padding-inline: var(--zn-input-spacing-medium);
 }
 
-.select--has-checkbox-prefix.select--medium .select__combobox {
+.select--has-input-prefix.select--medium .select__combobox {
   padding-inline-start: 0;
 }
 
@@ -212,7 +212,7 @@
   padding-inline: var(--zn-input-spacing-large);
 }
 
-.select--has-checkbox-prefix.select--large .select__combobox {
+.select--has-input-prefix.select--large .select__combobox {
   padding-inline-start: 0;
 }
 
@@ -258,7 +258,7 @@
 }
 
 /* When a checkbox is used in the prefix, remove left padding so the prefix joins flush */
-.select--has-checkbox-prefix.select--standard .select__combobox {
+.select--has-input-prefix.select--standard .select__combobox {
   padding-inline-start: 0;
 }
 

package/src/components/tabs/tabs.component.ts

@@ -254,7 +254,12 @@ export default class ZnTabs extends ZincElement {
     // ts-ignore
     const target = (event.relatedTarget ?? event.target) as HTMLElement;
     if (target) {
-      this.clickTab(target, event.altKey);
+      if ('startViewTransition' in document) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (document as any).startViewTransition(() => this.clickTab(target, event.altKey));
+      } else {
+        this.clickTab(target, event.altKey)
+      }
     }
   }
 
@@ -333,8 +338,9 @@ export default class ZnTabs extends ZincElement {
       return false;
     }
 
+    const sameTab = this._current === tabName;
     // Multi click on an active tab will refresh the tab
-    if (this._current === tabName) {
+    if (sameTab) {
       this._activeClicks++;
       if (this._activeClicks > 2) {
         refresh = true;
@@ -345,32 +351,35 @@ export default class ZnTabs extends ZincElement {
     }
 
     let inSlot = true;
-    this._panels.forEach((elements, key) => {
-      const isActive = key === tabName;
-      elements.forEach((element) => {
-        if (isActive && element.parentNode !== this) {
-          inSlot = false;
-        }
-        element.toggleAttribute('selected', isActive);
-        if (isActive && refresh) {
-          let uri = "";
-          let gaid = "";
-          if (this._activeTab && this._activeTab.hasAttribute('tab-uri')) {
-            uri = this._activeTab.getAttribute('tab-uri')!;
-            gaid = this._activeTab.getAttribute('gaid')!;
+    const updateTabs = () => {
+      this._panels.forEach((elements, key) => {
+        const isActive = key === tabName;
+        elements.forEach((element) => {
+          if (isActive && element.parentNode !== this) {
+            inSlot = false;
           }
-          document.dispatchEvent(new CustomEvent('zn-refresh-element', {
-            detail: {element: element, uri: uri, gaid: gaid}
-          }));
-        }
+          element.toggleAttribute('selected', isActive);
+          if (isActive && refresh) {
+            let uri = "";
+            let gaid = "";
+            if (this._activeTab && this._activeTab.hasAttribute('tab-uri')) {
+              uri = this._activeTab.getAttribute('tab-uri')!;
+              gaid = this._activeTab.getAttribute('gaid')!;
+            }
+            document.dispatchEvent(new CustomEvent('zn-refresh-element', {
+              detail: {element: element, uri: uri, gaid: gaid}
+            }));
+          }
+        });
       });
-    });
 
-    if (this._panel) {
-      this._panel.classList.toggle('contents-slot', !inSlot);
-    }
+      if (this._panel) {
+        this._panel.classList.toggle('contents-slot', !inSlot);
+      }
+      this._current = tabName;
+    };
 
-    this._current = tabName;
+    updateTabs();
 
     return true;
   }

package/src/components/translations/index.ts

@@ -0,0 +1,6 @@
+import ZnTranslations from './translations.component';
+
+export * from './translations.component';
+export default ZnTranslations;
+
+ZnTranslations.define('zn-translations');